Affordances and Signifiers
Date: 2026-08-17
An affordance is what an object allows; a signifier is what tells you it allows it. The distinction is Norman’s correction to his own earlier terminology, and it matters because most interface problems are missing signifiers rather than missing affordances.
An affordance is a relationship between an object’s properties and what an agent can do with it. A signifier is a perceivable cue indicating that affordance exists.
A DOOR
affordance it can be pushed
signifier a flat plate
the door affords pushing whether or
not the plate is there
→ without the plate, people pull
In interfaces, everything is affordable and nothing is inherently perceivable. A <div> can be made clickable; nothing about it says so. So interface design is almost entirely the design of signifiers.
Norman’s correction
The original Design of Everyday Things used “affordance” for both, and it became the common usage — “this button affords clicking”. Norman later separated them precisely because the conflation hid the actual problem.
The useful consequence: when something doesn’t work, ask which is missing.
MISSING AFFORDANCE the thing genuinely
can't be done
→ a feature problem
MISSING SIGNIFIER it can, and nothing
says so
→ a design problem,
and much more common
The signifiers that carry an interface
CLICKABLE colour + underline for links
a button shape
a cursor change
elevation or a border
DRAGGABLE a grip texture, a handle
← the weakest signifier set
on the web
SCROLLABLE content cut off at the edge
a visible scrollbar
partial next item showing
EXPANDABLE a chevron, its rotation
state
EDITABLE a field border, a placeholder
DISABLED reduced contrast
← ambiguous; often reads as
"loading" — Component States
See: Component States
Horizontal scrolling on mobile is the classic missing signifier. A carousel showing exactly one full item gives no cue that more exist; showing a sliver of the next one does the whole job.
Where flat design cost something
Removing shadows, borders and gradients removed signifiers as well as decoration.
CONSEQUENCE
"is this a button or a label?"
"is this text or a link?"
"is this field editable?"
The correction isn’t skeuomorphism. It’s ensuring that at least one reliable signifier survives — a border, a contrast shift, a consistent colour role — and applying it consistently so it can be learned once — Design Systems.
Never rely on colour alone, which fails for colour-blind users and in greyscale — links need underlines or another cue — Colour Contrast.
False affordances
The opposite failure: something signals an interaction it doesn’t have.
underlined text that isn't a link
a card that looks clickable and isn't
blue text that's just blue text
an icon that looks like a button
a "search-like" box that's a filter label
These cost more than a missing signifier, because the person acts, gets nothing, and concludes the site is broken rather than that they misread it.
Convention is the strongest signifier
A learned convention beats a well-designed novel cue. A magnifying glass means search because everyone has learned it, not because of anything about magnifying glasses.
FOLLOW
a basket icon top-right
a magnifying glass for search
a hamburger for menu on mobile
underlined links in body text
a primary button, filled and coloured
DEVIATE ONLY WITH EVIDENCE
Novelty in interaction is almost always a cost. Save it for places where it’s the product — Navigation Patterns.
Testing for it
Signifier failures are directly observable and hard to see any other way:
IN USABILITY TESTING
hovering over the wrong thing
the pause before clicking
"can I click this?"
clicking a non-interactive element
— Usability Testing
IN DATA
clicks on non-interactive elements
← "rage clicks", genuinely
diagnostic — Session Replay
low interaction with a control
that's present and unused
See: Usability Testing · Session Replay
Clicks on things that aren’t clickable are the clearest false-affordance evidence available, and most replay tools record them.