Design affordances to be perceptually evident.
Ensure users can immediately understand possible actions without instruction.
Contents 3. Interaction Mechanics & Agency 2. Affordances
How action is perceived.
First, ask yourself
“Are possible actions in your system perceptually obvious to users at the moment of use?”
Mission statement
Ensure users know how to act by signaling possible actions clearly.
Key heuristics Affordances
- Possible actions must be perceptually evident without instruction.
- All actionable elements must carry clear visual cues.
- Interactive elements must be visually distinguishable from informational content.
- Static elements must not display visual cues that suggest interactivity.
- Disabled options must be immediately recognizable as non-actionable.
- Similar actions must share consistent visual and behavioral cues.
- Affordances must allow confident action without prior conceptual mastery.
- Clear affordances must reduce reliance on memory and guesswork.
- Affordances must remain clearly perceivable as system complexity grows.
Executive brief
The system must make possible actions immediately perceivable without instruction.
Core questions Affordances
“What actions are immediately visible and actionable?”
“Can users tell what they can do at a glance?”
Focus areas
Perceptual-first
“What invites interaction without explanation?”
“What looks clickable or usable?”
Error-prevention
“Which actions are possible? Which are not?”
“Could anything be mistaken for an action it is not?”
State-aware
“Do affordances update clearly when state changes?”
“Are disabled or unavailable actions easy to distinguish?”
AI-aware
“Does adaptive behavior stay visibly actionable?”
“Are changes in available options perceptible?”
UX directives Affordances
Provide clear signifiers for all actionable elements.
Attach meaningful visual cues to all interactive elements to clearly convey their affordances.
Make interactive elements visually distinguishable.
Use deliberate styling and spacing to clearly distinguish interactive elements from informational content.
Eliminate false affordances.
Do not present elements as interactive if they do not respond to action.
Visually distinguish unavailable actions.
Ensure disabled or inapplicable options are clearly indicated.
Maintain consistent affordance patterns.
Use uniform visual and behavioral cues for similar actions.
Enable safe action before full understanding.
Design affordances so users can act confidently without prior conceptual mastery.
Use affordances to minimize memory and guesswork.
Leverage clear affordances to reduce cognitive load so users do not have to recall.
Ensure affordances remain legible as complexity increases.
Prevent action cues from degrading under density or scale.
Executive summary
- Affordances are perceptible action possibilities, not decorative styling.
- They allow users to understand what can be done without instruction or recall.
- The system must make all actionable elements visibly and behaviorally evident.
- False or ambiguous affordances corrupt trust and increase cognitive load.
- Consistent, distinguishable cues are prerequisites of reliable interaction.
- Affordances succeed when users can act safely and confidently, even before full understanding.
Success indicators
- Possible actions are easy to recognize at a glance.
- Interactive elements clearly look interactive.
- Non-interactive elements do not appear clickable or actionable.
- Unavailable actions are clearly indicated.
- Similar actions use consistent visual and behavioral cues.
One-line summary
Before users can act correctly, they must perceive how action is possible.