A quality of an object or interface element that signals how it can be interacted with. A button's raised appearance affords clicking; a text field affords typing. Affordances reduce the need for explicit instructions.
Common contexts
- Adding a drag handle icon to a list item so users discover it is reorderable
- Styling a non-interactive card differently from a clickable one in the same grid
- Removing a 3D shadow from a button that users kept overlooking in usability testing
Use when
Lean on affordances whenever you're introducing an interaction that doesn't match an existing convention — especially gestures, drag interactions, or multi-step inputs. If you find yourself writing instructional text to explain how to use something, that's a signal the affordance isn't doing its job.
Avoid when
Don't over-engineer affordances for interactions that are already culturally established — adding hover states and visual cues to a standard hyperlink adds noise without value. Too many competing affordances on one screen teach users that everything is clickable, making genuine CTAs harder to find.
An affordance isn't what you intended the element to do — it's what the user perceives they can do with it. If the perception doesn't match the function, the design is broken regardless of your intentions.
Real-world examples
- iOS buttons with rounded rectangles and subtle shadows signal 'pressability', guiding users to tap without explicit instruction.
- The trash-can icon in macOS clearly affords dragging files into it for deletion, a visual metaphor maintained since 1984.
- Spotify's circular play button uses size, colour contrast, and a universally recognised triangle to signal its primary action immediately.