Skip to content
UX Atlas
PrincipleExpert heuristicIntermediate

Affordances and Signifiers

An affordance is what an object makes possible. A signifier is the cue that tells you so.

Definition

James Gibson coined affordance for the action possibilities an environment offers. Don Norman adapted it for design, then introduced signifier to name the perceivable cue that communicates the affordance, after noticing that designers were using affordance to mean the cue itself.

Expert heuristic. A review criterion developed by practitioners. Useful and widely taught, but evaluated by judgement rather than measurement.

On this page
  1. Definition
  2. Why the distinction is practical
  3. Signifiers that carry weight on screen
  4. In practice
  5. Sources
  6. Continue from here

Why the distinction is practical

A div with a click handler affords clicking. Nothing about it signifies that. Users cannot act on an affordance they cannot perceive, so in interface work the signifier is almost always the thing you are actually designing.

This is the concrete cost of the flat design era. Removing shadows, borders and colour differences removed signifiers while leaving affordances intact, and interactive elements became guesses.

Signifiers that carry weight on screen

  • Colour difference from body text, for links.
  • Underline, which is the only link signifier that survives colour blindness and greyscale.
  • Border or fill, which marks a button as a distinct surface.
  • Shadow or elevation, indicating a raised, pressable surface.
  • Cursor change on hover, which is unavailable on touch.
  • Position within a known region, such as inside a navigation bar.
  • Explicit labels, which are the strongest signifier and the most often skipped.

Do

  • Give interactive elements a resting-state signifier, not only a hover one.
  • Underline links in body text.
  • Keep one visual language for interactivity across the product.
  • Use real semantic elements, so the browser supplies behaviour and assistive technology gets the affordance too.

Do not

  • Style non-interactive elements like buttons.
  • Use colour alone to mark a link.
  • Rely on a cursor change as the primary cue.

In practice

Underlined links in body copy

Content sites

Colour alone fails for readers with colour vision deficiency and in low-contrast conditions. Underlines are the reason link identification works at all in dense text.

Card affordance

Listings

If a whole card is clickable, it needs a resting-state signifier such as a border and a hover state that moves. Cards that only reveal interactivity on hover produce measurably lower engagement on touch.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  • The Design of Everyday Things

    D. A. Norman, Basic Books, 1988, revised 2013

  • The Theory of Affordances

    J. J. Gibson, in Perceiving, Acting, and Knowing, 1977

  • Signifiers, Not Affordances

    D. A. Norman, Interactions, 2008

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

Commonly confused with

Close enough to be mixed up, different enough to matter.

  • Natural MappingPrinciple

    An affordance is what is possible. A signifier says so. Mapping is whether the control resembles the thing it changes.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.