interaction design
Affordance
An affordance is the visual hint that tells you what you can do with something - a raised button says "press me", underlined blue text says "click me". Strong cues make actions obvious; missing or false ones leave people guessing.
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.
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.