Affordances
The perceived and actual properties of an object that suggest how it can be used—a door handle affords pulling, a button affords pressing.
Also known as: Perceived affordances, Design affordances, Action possibilities
Category: Principles
Tags: user-experience, design, psychology, interfaces, perception
Explanation
Affordances are the possible actions between an object and an individual. The term was coined by psychologist James Gibson and later applied to design by Don Norman in 'The Design of Everyday Things.'
**Types of Affordances**:
**1. Physical Affordances**
Actual properties that determine what's physically possible:
- A chair affords sitting
- A ball affords throwing
- Stairs afford climbing
**2. Perceived Affordances**
What users believe they can do based on visual cues:
- A 3D button appears clickable
- An underlined text appears to be a link
- A handle suggests pulling
**3. Hidden Affordances**
Possible actions that aren't visually apparent:
- Right-click menus
- Keyboard shortcuts
- Swipe gestures
**4. False Affordances**
Suggested actions that don't actually work:
- A button that looks clickable but isn't
- Decorative underlined text (not a link)
- Fake scroll bars
**Affordances in Digital Design**:
| Element | Affordance |
|---------|------------|
| Button with shadow | Clickable/pressable |
| Text field | Text entry |
| Slider | Dragging to adjust value |
| Checkbox | Toggle on/off |
| Underlined text | Hyperlink |
| Scroll bar | Content continues |
**Signifiers vs. Affordances**:
Don Norman later clarified the distinction:
- **Affordance**: What action is possible
- **Signifier**: The signal that communicates the affordance
A door may afford pushing, but only a signifier (like a flat plate) communicates that pushing is the right action.
**Design Implications**:
- Make affordances visible through clear signifiers
- Match perceived affordances to actual affordances
- Use familiar patterns (buttons that look like buttons)
- Avoid false affordances that frustrate users
- Consider cultural conventions (what looks clickable varies by context)
**Anti-patterns**:
- Flat design without clear interaction cues
- Text that looks like links but isn't
- Clickable areas that are too small
- Gestural interfaces without discovery mechanisms
Good design makes the right action obvious through clear affordances. When users guess wrong about what an element does, the affordance has failed.
Related Concepts
← Back to all concepts