An affordance is a property of an object or interface that signals how it can be used: a button looks pressable, a slider looks draggable, a handle looks grabbable. The term comes from psychologist James Gibson and was brought into design by Don Norman, who used it to mean the action possibilities a user can perceive without being told.
Use cases
Get affordances wrong and users can't tell what to do, so the feature might as well not exist.
The invisible button: A flat rectangle with no shadow, color, or underline reads as decoration. Users never click it, and the whole flow stalls on a control nobody sees.
The undiscoverable gesture: A card swipes to reveal actions, but nothing hints at it. The feature ships, gets no use, and the team assumes people don't want it.
The false affordance: A non-interactive element looks tappable (boxed, colored, raised), so users poke at it, get nothing, and lose trust in what's actually clickable.
How it's used in practice
Make interactive things look interactive: Use depth, color, underlines, and cursor changes so a control announces itself before anyone has to guess.
Match the cue to the action: A drag handle for dragging, a chevron for "more," a recognizable icon for its function. The cue should predict the result.
Don't fake it: Keep click cues off things that aren't clickable, or you train users to distrust your real controls.
Test discoverability: Watch a new user find the action with no instructions. If they can't, the cue is missing or wrong.
🪄
Pro-tip: What you usually design is signifier. Norman's point: the click is possible whether or not it looks clickable (that's the affordance); the shadow and color that tell the user it's clickable are the signifier. Flat design's big stumble was stripping signifiers while keeping affordances, leaving people guessing what's tappable. Design the signal, not just the possibility.
Challenges & limitations
Conventions vary: A hamburger menu or swipe that's obvious to you can be invisible to a first-timer, and cues differ across platforms.
No hover on touch: Hover-based hints vanish on mobile, so cues that work on desktop can disappear entirely on a phone.
Free resources
Affordance vs. Signifier — Norman's distinction between what's possible and the cue that announces it. The core idea to design around.
