What are affordances and signifiers?

An affordance is a clue that informs you of an action that something can perform. A signifier is the indicator of that affordance.

For example, a button that looks like a button will be perceived as an element that can be pressed to produce an action (affordance). Clickable buttons usually have a drop shadow effect to show that they are clickable, while inactive buttons have a faded color to show that they are inactive (signifiers).

Signifiers are not just component labels. Instead, they are other features of a user interface (UI) element that convey affordance. A few examples are:

• color of the element itself

• color of the element in relation with other colors around

• text label

• icon label

• emphasis on text

• placement of element in the general hierarchy of the interface

Affordances and signifiers are used together to convey meaning. As shown below, the buttons are affordances and their placement is the signifier that conveys one button has more significance than the other.

In the figure below, the button, affordance is using multiple signifiers:

• color signifier: the interface’s primary action style

• word signifier: the text that indicates what to do

• directional signifier: forward arrow

In real life, Norman discussed this approach, which is called “The Norman Door.” A door is an affordance that can be both pushed and pulled. A handle is an indication of pull, whereas a plate is an indication of push. If these are placed the other way around or a handle is placed on both sides, it is an example of a bad user experience.

Conflicting affordances

False affordance is the case where an element has the appearance of and gives the impression that it can perform a certain action, but in reality, it cannot. As shown below, the underlined text seems like it is a link, but it is not.

Negative affordance is when an element looks like a UI component and it is a UI component, but it does not behave like that, e.g., a disabled button, as shown below:

Hidden affordances are when the element is not perceivable until the user interacts with it.

Conclusion

Affordances and signifiers are essential elements of a UI. However, it is important to use them correctly so that they do not have the opposite effect. An affordance must look like an affordance, i.e., a button should look like a button, and should have specific signifiers that help identify the element.