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 the action an element enables; a signifier is the visible cue that shows how or where to perform 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.
