interaction design
Affordance vs signifier
What's the difference between an affordance and a signifier?
An affordance is the action an element enables; a signifier is the visible cue that shows how or where to perform it.
Also known as: signifier vs affordance, affordances and signifiers
Prefer to watch?
Watch the recap 0:39
The demo
Below is a control that is clickable either way - the affordance is always there. Switch on the signifier and watch it finally tell you so. Try clicking the plain version too: it works, you just couldn't have known.
Try clicking it, then switch on the signifier.
What this demo shows (text version)
A single "Save changes" control that is clickable in both modes - the affordance (the fact that it can be clicked) never changes. In "affordance only" mode it is shown as plain text with no button styling, no cursor change and no visual cue, so there is nothing to tell you it can be clicked - even though it can.
In "with signifier" mode the same control gains button styling, a pointer cursor and depth, which advertise that it is clickable. The demonstration is Norman's distinction: the affordance is the possibility of action, while the signifier is the perceivable cue that communicates it. On screens almost anything can be made clickable, so the real work is supplying the signifier.
An affordance is what an element lets you do; a signifier is the cue that tells you how - the shadow, label, or pointer. A control can be perfectly usable but overlooked if nothing hints at it, so design the cue just as deliberately as the capability.
The plain version was clickable the whole time - the affordance was there - you just had no way to know. Add the signifier and the same element finally announces itself. That's the distinction Norman drew: an affordance nobody can perceive is useless, so in screen design it's the signifier you actually have to get right.
The practical upshot: on a flat screen you are almost never short of affordances, you are short of signifiers. Anything can be made clickable, so the hard part is telling people what's clickable - with shape, depth, colour, a cursor, a label. "Make it look like a button" is really "give the affordance a signifier".
This is why flat design that strips every cue can quietly break things: the affordance still exists, but with no signifier people don't discover it. The fix isn't more affordances, it's honest signifiers - and never the reverse either, a false signifier (something that looks pressable but isn't) is its own little betrayal.
When designing interfaces, understanding affordance vs signifier helps you make controls intuitive - try the interactive demo here to see it in action. A signifier tells users what an affordance enables, but without it, even the most obvious affordance can be missed - explore the demo to test this yourself.