Learn
Learn Links and Buttons
Introduction

Imagine that you are a user who has arrived at the website loaded in the web browser here. What can you interact with, what can you click on to navigate the site? Before clicking anything, scroll through the page and try to guess how elements might behave when clicked. After this, click through and see what actually works. Even if you were totally correct in your assumptions about what was clickable (because you are a competent user of web interfaces or are very lucky!), many users would struggle to interact with this page effectively. This site is a particularly bad example of interface design, and there is a lot of room for improvement.

Part of the reason it is so hard to know how to interact with this website is that there are few to no signifiers. To simplify an admittedly complex concept, signifiers (and the related concept of affordances) are indicators that offer clues about how to interact with new objects or situations. For example, a drawer handle’s shape helps indicate to a user how they might interact with it (grab it with their hand and pull to open).

Showing interactivity and clickability through signifiers is a fundamental aspect of user interface design. In this lesson, we will cover some of the high-level best practices for demonstrating interaction and interactivity and some implementations using CSS.

Instructions

Proceed to the next exercise when you are ready to continue.

Folder Icon

Sign up to start coding

Already have an account?