interaction design
Affordance vs signifier
What's the difference between an affordance and a signifier?
An affordance is what an element lets you do - a button can be pressed, a slider can be dragged. A signifier is the cue that tells you so - the shadow, the label, the cursor change. The affordance is the possibility; the signifier is the advertisement for it.
Also known as: signifier vs affordance, affordances and signifiers
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.
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.