Fig. 61 / Affordance
UX & Process
Affordance
EXPLAINED SIMPLY:An affordance is the visual hint that tells you what you can do with something, the reason a button looks pressable before you've ever pressed it.
An affordance is the visual hint that tells you what you can do with something, the reason a button looks pressable before you've ever pressed it.
Doors are the classic example. A flat plate says push, a bar says pull, and a door that needs a PUSH sign is a door whose design already failed. Screens work the same way: a soft shadow under a button says press me, a dotted grip on a list row says drag me, an underline inside a sentence says this part is tappable, and a toggle looks like a physical switch so you know it flips. Nobody reads a manual for an app. The shapes are the manual.
The word came from psychology; James Gibson coined it, and Don Norman carried it into design in The Design of Everyday Things, which is why confusing doors are called Norman doors. Norman later pointed out that the visible clue is technically a "signifier" while the affordance is the action itself, so you'll also hear signifier, along with "perceived affordance" and the field diagnosis "clickability."
Flat design ate a lot of affordances. Every time a designer strips the shadow off a button to make the screen look cleaner, somewhere a user stops knowing it's a button. The same action written as bare text gets missed; the shadow does the talking. It's also why link underlines refuse to die. The underline is the invitation.
When people keep missing something tappable, the diagnosis is "it has no affordance." Say it in a review and the shadow usually comes back.