Affordances & Signifiers
How interface elements communicate their interactivity — the visual cues that tell users what they can do and how.
What is it?
An affordance is the relationship between a design element and the action it enables. A button affords pressing. A text field affords typing. A signifier is the perceptual signal that communicates this affordance — the 3D appearance of a button, the cursor change on hover, the underline on a link. Without clear signifiers, users can't tell what's interactive.
Why it matters
The proliferation of flat design has caused an epidemic of hidden affordances. When interactive elements look identical to static ones — flat colored boxes with no visual treatment — users must guess or discover by trial and error. Poor affordances create hesitation, missed features, and frustrated users.
Best Practices
- Buttons should look like buttons. Use elevation, borders, or fill to distinguish them from static elements.
- Links should be visually distinct from body text — underline, color, or both. Don't remove underlines from inline text links.
- Cursor changes communicate affordances: pointer for links/buttons, text cursor for inputs, grab for draggable elements.
- Hover states confirm interactivity — when the cursor changes and a visual change occurs, users are confident they've found a clickable element.
- Inputs should look like inputs — a box with a border or underline. Fields with no visible boundary are frequently overlooked.
- Draggable elements need a drag handle icon or visual cue — not all drag affordances are obvious.
- Disabled states must look different from enabled states — and should explain why the element is disabled.
- Use established icon conventions: hamburger for menu, magnifying glass for search, X for close, back arrow for navigation.
- Ghost buttons (outline only) are harder to perceive as interactive than filled buttons — use them only for secondary actions.
- Test affordances with new users. What's obvious to the team is invisible to first-timers.
Common Mistakes
- Flat buttons with no visual treatment that look identical to static containers.
- Removing cursor: pointer from clickable elements — removing a critical affordance signal.
- Using icon-only buttons for non-universal icons without tooltips.
- Making entire cards clickable without a visual affordance indicating they're interactive.
- Color-only signifiers for interactivity — fails for colorblind users.
- Hover-only affordances on mobile where there is no hover state.
Checklist
Research & Theory
Don Norman's Affordances (The Design of Everyday Things)
Norman introduced affordances into design vocabulary. The classic example: a flat plate on a door affords pushing; a handle affords pulling.
Why it's relevant
Digital affordances follow the same logic. The visual treatment of an element must match its function.
Signifiers vs. Affordances (Norman, 2nd edition)
Norman later clarified: affordances are the actual relationship between object and action. Signifiers are the perceptual signals that communicate affordances. Design controls signifiers.
Why it's relevant
Your job is to design signifiers that clearly communicate the affordances your elements have.
Real-World Examples
Linear
Every interactive element has a distinct hover state. Buttons have fill. Clickable rows show a background on hover. Nothing interactive looks static.
Stripe
Form inputs have clear, consistent borders. Buttons have strong fill and subtle elevation. Hover states are immediate and clear.
Figma
Drag handles appear on hover for layers. Resize cursors change at corners. Selection affordances are precisely communicated.