What are Affordances and Signifiers in UX Design and in Real Life

While these terms may sound somewhat complicated, it's really important to understand what do they mean and keep in mind that such things exists. And most importantly, how to apply them.

What Are Affordances?

Affordances are the qualities of an object that hint at how it can be used. This idea was first introduced by psychologist James J. Gibson back in 1977. In simple terms, affordances tell us what actions are possible with an object.

There is a definition from Don Norman, the author of the famous book called "The design of everyday things":

Affordances represent the possibilities in the world for how the agent (a person, animal or machine) can interact with something. The presence of an affordance is jointly determined by the qualities of the object and the abilities of the agent that is interacting

Real-Life Example of Affordance

A door handle naturally suggests that you should grab and pull it to open the door. The shape and placement of the handle make it obvious what you’re supposed to do. But!

There is a very important difference we can see, that illustrates affordances in all its glory. Look at these two doors.

The first door can only be pushed. You cannot pull it since there is nothing you can grab. Moreover, they also provided some text, saying that the plates uses silver ions that kills 99.9% of bacteria (which is nice).

The second door cannot be pushed, because the handle requires you to turn it to open the door. However, it's not exactly true, you can open a door both inside and outside.

But this example perfectly illustrates what an affordance is.

There is a famous video that shows the frustration related to door handles.

Affordances in UI/UX

Here are some examples.

1. Buttons: They’re designed to be clicked. A well-designed button might even look slightly raised, so it feels like something you should press. Or at least it should look like a button, so that users can easily guess that it's clickable.
2. Text Fields: These areas on a form invite you to type. The blinking cursor inside the field is a strong hint that you should start entering text.
3. Sliders: Sliders are built to be dragged, helping you adjust settings like volume or brightness.

What Are Signifiers?

Signifiers are cues that tell you where and how to take action. Again, according to Don Norman:

The term signifier refers to any mark or sound, any perceivable indicator that communicates appropriate behavior to a person.

Real-Life Examples of Signifiers

Before we found out that a door that doesn't have a handle but rather a metal plate has one affordance - you can only push it. But if you add labels, they will behave like signifiers

If you stay at a pedestrian crossing and see a green light, it means that you can cross the road. But if the green light is in a form of a human who is crossing the road, it gives you extra clue.

By the way, this is especially important for people with eye diseases, that might not see the colors as other do.

Signifiers in UI/UX

1. Button Labels: Words like “Submit” or “Cancel” on a button tell you exactly what will happen when you click it.
2. Icons: A trash can icon lets you know that dragging something into it will delete the item.
3. Color Changes: A button that changes color when you hover over it or click it signals that it’s interactive and gives feedback that your action was registered.
4. Arrows: Arrows pointing left or right show that you can navigate through a slideshow or flip through pages.

How Affordances and Signifiers Work Together

Affordances and signifiers often work hand-in-hand. While affordances show what actions are possible, signifiers guide you on how to perform those actions. Without clear signifiers, even obvious affordances might go unnoticed, leading to confusion.

In real life, as we've seen earlier, it may be a door handle with a label. In UI/UX, you can enhance a button by adding an meaningful icon for example.

Why It Matters

Getting affordances and signifiers right is crucial for usability. They work together to guide users through your product naturally, without needing instructions or causing frustration.

Further reading

1. Affordances: Clarifying and Evolving a Concept
2. All about affordance and signifier: terms by Don Norman, the UX pioneer
3. Signifiers in Design