interaction design
Affordance
What is an affordance?
An affordance is a visual cue showing what action you can take - like a raised button suggesting 'press me' or underlined blue text implying 'click me'. Clear cues guide users; unclear or misleading ones leave them guessing.
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 a visual cue showing what action you can take - like a raised button suggesting 'press me' or underlined blue text implying 'click me'. Make actionable elements look right, and never disguise a plain control as something else - or users will 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.
Purists will say I'm describing signifiers, not affordances - Norman split the two: the affordance is what's possible, the signifier is the cue that advertises it. They're right, and in practice the cue is what makes or breaks the moment, so that's what this entry pokes at.
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.