Affordances & Signifiers
You’ve pushed a door marked pull. You felt stupid. You weren’t.
Everyone has stood at a glass door, given it a confident shove, and watched it not move — while a small PULL sticker smirks at eye level. The reflex is instant: what’s wrong with me? Norman’s answer, and ours, is blunt: nothing. The door lied to you. A flat panel says push; a handle says pull. Put a handle on a push-door and it will fool a thousand people a day — and every one of them will blame themselves.
That gap — between what a thing can do and what it tells you it can do — is the whole of this first module. It has two names, and knowing them apart is the beginning of every usable design. You’ll feel the difference in three quick labs, and prove it with a number.
- Tell an affordance (what a thing lets you do) from a signifier (the cue that tells you how).
- Spot the “trickster” mismatch that makes people feel stupid — and fix it in one move.
- Feel why a screen with no signals turns everyone into a guesser.
- Put knowledge in the world, so nobody has to carry it in their head.
Meet the Trickster Door
An affordance is a relationship: a possibility for action between you and a thing. A door affords pushing and pulling; a button affords pressing. It’s just there, whether or not you notice it. A signifier is the cue that points to it — the handle, the plate, the word, the shadow under a button. The affordance is the possibility; the signifier is the promise that tells you it exists.
Trouble starts when the promise lies. Here is a door that opens by pushing — but it wears a handle, and a handle all but shouts “grab me and pull.” Try it.
Take the signals away
We notice signifiers most when they vanish. Below is an ordinary sign-up form — and the same form with every signal removed: no borders around the fields, no labels, no placeholder hints, no button colour. The affordances are all still there; you can click and type anywhere. You just can’t tell where.
Flip it off, and feel the small panic. That weight is what a user carries when a design decides that clean means invisible.
Guessing has a number
“Signals matter” is easy to nod along to. So let’s measure it. Below are eight tiles. Four are real buttons; four are just labels that do nothing. With weak signifiers, they all look the same — so the only way to sort them is to guess.
Tap the ones you think are clickable, hit Check, and read your score. Then add the signifiers and watch the guessing vanish.
Users don’t read. They scan for signals
Every lab here is one idea wearing different clothes. Name it clearly and it changes how you look at every screen you’ll ever build.
An affordance is a possibility. A signifier is the promise.
Hold the two apart and most usability bugs name themselves. A missing signifier is a real button that doesn’t look like one — the thing works, but no one finds it (your Is It Clickable? score). A false signifier is worse: it promises an action that isn’t there — the flat card that looks tappable, the underline that isn’t a link, the handle on a push-door. That’s the Trickster, and it doesn’t just fail people; it makes them feel foolish for believing the design.
The fix is a single instinct: put the knowledge in the world, not in the user’s head. Don’t make someone remember that the grey text is tappable, or that swiping left archives, or that the third icon is settings. Show it — with a shape, a label, a shadow, a cursor, a word. A good signifier means the interface never asks the user to have read a manual, watched a tutorial, or simply known. It tells them, right there, in the moment they need it.
So the working test is quick and merciless: on any screen, can a stranger tell what’s clickable, what each control does, and what will happen — without guessing? If not, the design has homework. Not the user.
Repair this screen’s signals
A toolbar where the real actions hide as flat ghosts, the icons carry no labels, and one innocent-looking chip pretends to be a button. Walk it into clarity — add the missing signals, then unmask the false one.
Which one signals better?
Five face-offs. Same control, two ways of showing it — one tells you what to do, one makes you guess. Pick the clearer, then see why.
Good signals, everywhere
Once you can see signifiers, you see them everywhere doing quiet, unglamorous work — the reason you never think about them is the whole point.
The bordered slot says “type here”; the placeholder says what; the raised warm button says “this submits.” Three signifiers, zero instructions.
Colour alone can hide from the colour-blind; the underline is the backup promise. Two signals, so the link is unmissable.
Signifiers only get you to the door. The next module is mapping — making the control’s layout match the world, so once you know a thing is a control, you also know which one to touch. Then feedback tells you it worked. Signals, mapping, feedback: the first three bridges across the gap between what you want and what the machine does.
The real references
These ideas aren’t ours — Don Norman named them, and the field has tested them for decades. Four worth your time. (Opens in a new tab.)
The Signals glossary
Six words that turn “this is confusing” into a precise fix. Tap a card to flip it.
Questions you actually ask
What people get wrong
Read the signals
Ten questions in seven formats, tagged by thinking level — each with layered hints: a nudge, the reasoning, then a deeper connection. A wrong answer opens a door, never a dead end. Served from the question bank, never hardcoded.