Affordances
An affordance is a possible action supported by the relationship between an actor’s capabilities and an object or environment.
Direct explanation
What it means
Affordances exist whether or not they are noticed. In screen interfaces, designers often mean perceived cues, but Norman later distinguished those cues as signifiers.
Separating possible action from communication helps teams diagnose whether an action is impossible, undiscoverable, or merely unfamiliar.
Research anchor: Donald A. Norman, 1999
Research and interpretation
What the research found
Ecological theory defined affordances as action possibilities relative to an organism and environment.
Design discourse uses the term broadly; Norman’s clarification separates actual affordance, perceived affordance, convention, and signifier.
Popular advice versus careful use
Common shorthand: Anything that looks clickable has an affordance.
Describe the real action relationship, then design perceivable signifiers and alternatives for varied users and devices.
How designers apply it
- 01
Ensure a draggable object can actually be moved with supported input.
- 02
Provide adequate grip and hit area for a slider.
- 03
Offer alternate actions for people who cannot perform a gesture.
Original UI examples
desktop workspace
Resizable panel
The panel supports pointer drag, keyboard resize, and numeric sizing.
The action possibility exists across different capabilities.
mobile form
Photo capture
The task can use camera, file upload, or assisted capture.
Multiple affordances preserve the goal across device and disability context.
Card interaction
Less effective
Say the card affords clicking because it has a shadow, though only its title is interactive.
Better fit
Make the intended target operable and use signifiers to communicate its scope.
Visual cues do not create an unsupported action.
Limits and failure modes
Digital affordance language is contested, and the same interface can support different actions for different capabilities.
Common mistakes
- Using affordance as a synonym for any visual cue.
- Assuming one input method defines what every user can do.
When it should not dominate
- As vague praise that a design looks clickable.
- Without separately evaluating signifiers and constraints.
Responsible use
Accessibility
Evaluate affordances across motor, sensory, and cognitive capabilities plus keyboard, switch, speech, and assistive technology.
On mobile: Touch, sensors, camera, and gestures create device-specific possibilities and exclusions.
Ethics and context
Do not imply an action is available when policy or paywall will block it after commitment.
On desktop: Pointer precision, keyboard, resize, and multiselect affordances should coexist.
Designer checklist
- Name the actor, capability, object, and action.
- Test whether the action actually works across input modes.
- Evaluate signifiers separately from possibility.
Check your understanding
Which statement applies Affordances most carefully?
Practice and continue learning
See ideas in real interfaces
These external interfaces are editorial references, not examples created to demonstrate this principle.
Sources and further reading
- 01Open source
Affordance, Conventions, and Design
Donald A. Norman · 1999 · Interactions
Authoritative secondary · primary or original source
- 02Open source
The Design of Everyday Things: Revised and Expanded
Donald A. Norman · 2013 · Basic Books
Book · primary or original source
Continue the graph
Related principles
principle
Signifiers
Signifiers are perceivable cues that communicate where an action can occur, how to perform it, or what state an object is in.
principle
Constraints Principle
Well-designed constraints limit invalid actions or make their boundaries clear while preserving valid choice and recovery.
principle
Direct Manipulation
Direct manipulation lets people act on visible objects through incremental, rapid, and reversible operations with immediate feedback.