interaction design
Affordance
What is an affordance?
An affordance is the potential for action that arises from the relationship between a person and an object - a button affords pressing, a slider affords dragging. A signifier is the visible cue that signals the action is available: the raised edge, the underline, the drag handle. Affordances are the possibilities; signifiers are how we communicate them.
Also known as: signifier, perceived affordance
Prefer to watch?
Watch the recap 0:34
The demo
Exactly one of these actually does something. Click around and find it.
Mis-clicks: 0
There it is. The only thing that worked was the one that looked like nothing at all.
- "Submit" was raised and coloured - the universal cue for a button. It did nothing.
- "Learn more" was underlined and link-blue, so your instinct said click. Inert.
- The card had a shadow and an arrow promising it would open. It didn't.
- The real control was styled like flat body text, so it gave off no signal - yet it was the live one all along.
What this demo shows (text version)
Four things sit in a row. Three carry strong "you can click me" cues - a raised coloured button, underlined link text, and a card with a shadow and an arrow - but none of them work. The fourth looks like plain, flat text and gives off no cue, yet it's the only one that actually does anything. Most people click the convincing-looking decoys first and overlook the real control entirely. That's affordance at work: we reach for what looks interactive, so a control that hides its cues gets missed no matter how it behaves.
An affordance is what an object lets you do; a signifier is the cue that tells you so. In an interface, you rarely change the affordance - a button is already pressable - you design the signifier so the possibility is obvious. Make actionable elements look actionable, and never disguise a real control as something else, or users click the wrong thing and miss the real target.
Your clicks went where the visual cues pointed, not where the function actually lived. That's affordance: we act on what things look like they do.
Norman's distinction is the one that matters here: the affordance is the possibility (a door can be pushed), the signifier is the cue that advertises it (a flat plate says push). Most "affordance" problems in interfaces are really missing or misleading signifiers - the action is possible, but nothing tells you it is.
The everyday sin is the flat redesign that strips every cue: text that might be a button, a button that might be a label. Looking clickable isn't decoration - it's the instruction.
On site:uxbyexample.co.uk, you can interact with real affordances - like buttons and sliders - to see how design cues guide action without needing external examples. The demo here lets you test how signifiers reveal affordances, so you can build interfaces where users instantly know what’s clickable or draggable.
Try the affordance demo on site:uxbyexample.co.uk to see how real controls signal themselves through shape and motion. This page’s hands-on example lets you test how signifiers make affordances obvious - no screenshots, no external tools.
Test affordance yourself on site:uxbyexample.co.uk - the demo lets you adjust signifiers while keeping the core action intact. This page’s hands-on demo shows how affordance and signifiers work together - no screenshots, just real interaction.