Affordances and signifiers

An affordance is what an object lets you do: a button affords pressing, a slider affords dragging. A signifier is the cue that tells you the affordance exists: the raised look of a button, the handle on a slider, underlined link text. The terms come from the work of Don Norman.

On screens, almost everything is a flat picture, so signifiers do all the work. If something does not look interactive, people will not try it. If something looks interactive but is not, they will tap it and be confused.

Common signifiers

• Buttons: filled or outlined shapes with a clear label.
• Links: distinct colour and underline, especially in body text.
• Draggable items: grip handles, a change of cursor.
• Scrollable areas: content cut off at the edge, scroll bars.
• Expandable sections: chevrons and "Show more" text.

Flat design risk

Very flat styles can remove signifiers entirely: labels that look like buttons, buttons that look like labels. Keep enough visual difference between interactive and static elements.

People cannot use what they cannot find. Weak signifiers cause missed features, extra support and the feeling that a product is hard to use. Strong signifiers make an interface learnable at a glance and are especially important for new users and people with cognitive or visual impairments.

A travel booking site shows filters as plain grey text: "Price", "Stops", "Times". In testing, only one of six participants realises they are clickable, and others scroll through hundreds of flights.

The designer restyles the filters as outlined chips with chevrons, and active filters as filled chips with a close icon. In the next test, all six participants use filters within the first minute.