A door handle you pull is shaped differently from one you push — the shape itself communicates the action, without a label. That's an affordance: a property of an object that suggests how it can be used. Interfaces work the same way.
| Term | Meaning | Example |
|---|---|---|
| Affordance | What an element can actually do | A button can be clicked |
| Signifier | The visual clue that communicates the affordance | A raised, shadowed shape and a hand cursor on hover that tells you it's clickable |
An element can technically be clickable (the affordance exists) while looking completely flat and static (no signifier) — this is one of the most common real UI failures: a perfectly functional button that nobody realizes is a button.
| Signifier | What it communicates |
|---|---|
| Raised shape / shadow / fill color | This is clickable |
| Underline on text | This is a link |
| Cursor changes to a pointer on hover | This is interactive |
| A chevron or arrow icon | This expands, navigates, or reveals more |
| Grayed-out, lower contrast | This is currently disabled |
Modern flat design deliberately removed heavy shadows and 3D bevels for a cleaner look — but it also removed a lot of free signifiers designers used to get automatically. A flat interface has to work harder with color, spacing, and subtle borders to signal "this is clickable" without those older visual cues.
A fast, honest test
When in doubt about whether an element reads as interactive, test it on someone who hasn't seen the design — if they hesitate or don't try clicking it, the signifier isn't strong enough yet.