Watch
Affordance vs signifier 0:39
A 39-second explainer of Affordance vs signifier, narrated over the same demo you can try yourself.
Try the interactive Affordance vs signifier demo
What this video covers
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.
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.
