Affordance

What it is

The term was borrowed from perceptual psychology (J.J. Gibson, 1979) and brought into design by Don Norman in The Design of Everyday Things. Norman later refined it: what designers actually control is the perceived affordance — the visual cue that tells the user an interaction is possible — not the affordance itself.

In UI, affordance shows up in visual weight (buttons are raised or filled), in hover states, in pointer cursors, in familiar iconography, and in text labels that name the action. The affordance is what the user reads from the element before touching it.

Why it matters

Interfaces with weak affordance force users to hunt for interactive elements — hovering to find hidden buttons, tapping to see if something is clickable. Every second spent guessing is friction. Interfaces with strong affordance let users act with confidence. On mobile and touch, where hover doesn't exist, affordance is the entire signal a user has to work with before committing to a tap.

When to use it

Every time you design an interactive element. Buttons, links, form inputs, cards, drag handles, dismiss controls, expandable panels — each needs a visual cue that tells the user it's interactive and what interacting will do. Affordance decisions are also inherited from design systems, so if the system defines what a primary button looks like, honour that convention rather than inventing new affordances per page.

What it looks like in practice

A tappable card carries a subtle border or elevation and a pointer cursor on hover; a decorative card doesn't. A destructive action button is filled red rather than outlined grey. A drag handle shows six dots so users know it's grippable. A dropdown shows a chevron so users know it opens.

The opposite pattern — 'mystery meat' navigation, where users have to hover to discover what's interactive — is what Norman was arguing against. Search engines and analytics both show it hurts task completion measurably.

What people get wrong

• Removing visual weight from buttons in the name of aesthetic minimalism. A button that reads as decorative text has failed as an affordance.
• Making everything look tappable — cards that aren't links, headings that aren't buttons, decorative elements with hover states. False affordances erode trust in the entire interface.
• Relying on hover to reveal interactivity on touch devices. Hover doesn't exist on phones; if the affordance requires hover, it fails for most modern users.
• Treating affordance as decoration to be simplified. The affordance is doing a job — communicating capability — and simplifying it is the same as breaking it.

Learn next

Affordance sits alongside signifier (Norman's later distinction), mental model (what the user expects the affordance to do), and the wider gestalt principles (which govern visual grouping). It shows up in every audit against Nielsen's heuristic 4 (Consistency and standards) and heuristic 6 (Recognition rather than recall).

Reviewed 29 September 2026 · Editorial standards