# Affordance Affordance is a term coined by psychologist [[James J. Gibson]] in 1966 to describe what the environment "offers" or "provides" for action—the action possibilities perceived by an organism. A chair affords sitting, a handle affords pulling, a flat surface affords walking. Gibson's ecological approach emphasized that affordances are directly perceived, not inferred through mental processing. [[Don Norman]] later adapted the concept for design in *The Design of Everyday Things* (1988), focusing on "perceived affordances"—what users perceive as possible actions. The concept has become central to [[User Experience (UX)]], [[Human-Computer Interaction (HCI)]], and Product Design. Good design makes affordances visible: a button looks pushable, a slider looks draggable. Norman introduced the term "signifier" to clarify what communicates affordances to users. Poor affordance design leads to user errors and frustration (Norman doors that look like they should be pushed but need pulling). Understanding affordances helps designers create intuitive interfaces that communicate their functions naturally. ## Gibson vs Norman ``` ┌─────────────────────────────────────────────────────────────┐ │ AFFORDANCE CONCEPTS │ ├─────────────────────────────────────────────────────────────┤ │ │ │ GIBSON (Ecological Psychology) │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ Affordance = Real action possibilities │ │ │ │ • Exists independent of perception │ │ │ │ • Directly perceived in environment │ │ │ │ • Relationship between animal and environment │ │ │ │ Example: Chair affords sitting (whether seen or not)│ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ NORMAN (Design) │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ Perceived Affordance = What user thinks is possible │ │ │ │ • Depends on user's perception and knowledge │ │ │ │ • Can be designed/communicated │ │ │ │ • Signifiers indicate affordances │ │ │ │ Example: Button looks clickable (visual cue) │ │ │ └──────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ## Types of Affordances | Type | Description | Example | |------|-------------|---------| | **Physical** | What can physically be done | Handle affords grasping | | **Cognitive** | What is mentally perceivable | Icon affords understanding | | **Sensory** | What senses can detect | Color affords visibility | | **Functional** | What purpose can be served | Scissors afford cutting | | **False** | Perceived but not real | Painted-on handle | | **Hidden** | Real but not perceived | Secret door | | **Negative** | What is prevented | Guardrail prevents falling | ## Affordance vs Signifier | Concept | Definition | Example | |---------|------------|---------| | **Affordance** | What actions are possible | Button can be pressed | | **Signifier** | What communicates the affordance | Raised appearance, label | | **Constraint** | What limits actions | Grayed-out button | | **Mapping** | Relationship between control and effect | Knob position = volume | | **Feedback** | Confirmation of action | Button depresses, sound plays | ## Design Principles | Principle | Application | |-----------|-------------| | **Make affordances visible** | Buttons look pressable | | **Match affordances to actions** | Sliders for continuous values | | **Use familiar patterns** | Conventions users know | | **Provide feedback** | Confirm actions were received | | **Constrain possibilities** | Prevent impossible actions | | **Use signifiers clearly** | Labels, icons, visual cues | ## Examples in Digital Design | Element | Affordance | Signifier | |---------|------------|-----------| | **Button** | Can be clicked/tapped | Raised appearance, hover state | | **Link** | Can be clicked | Blue text, underline | | **Slider** | Can be dragged | Track with movable handle | | **Text field** | Can be typed in | Border, cursor, placeholder | | **Checkbox** | Can be toggled | Square box | | **Scrollbar** | Can scroll content | Bar indicating position | | **Drag handle** | Can be dragged | Six dots (⋮⋮) pattern | ## Anti-patterns | Anti-pattern | Problem | |--------------|---------| | **Norman door** | Push/pull unclear | | **Mystery meat navigation** | Icons without labels | | **False affordance** | Looks clickable but isn't | | **Hidden affordance** | Functionality not discoverable | | **Inconsistent affordance** | Same appearance, different behavior | | **Overloaded affordance** | Too many actions for one element | ## Key Figures | Person | Contribution | |--------|--------------| | [[James J. Gibson]] | Coined "affordance" (1966, 1979) | | [[Don Norman]] | Applied to design, introduced "signifier" | | William Gaver | Affordances for HCI (1991) | | Joanna McGrenere | Clarified affordance definitions | ## Affordance Testing Questions | Question | Purpose | |----------|---------| | What actions does this suggest? | Identify perceived affordances | | What actions are actually possible? | Identify real affordances | | Is there a mismatch? | Find false/hidden affordances | | How do users discover actions? | Evaluate signifiers | | What happens after the action? | Evaluate feedback | ## References - Gibson, J.J. (1979). *The Ecological Approach to Visual Perception* - Norman, D. (2013). *The Design of Everyday Things* (revised edition) - Gaver, W.W. (1991). "Technology Affordances" - https://en.wikipedia.org/wiki/Affordance ## Related - [[James J. Gibson]] - [[Don Norman]] - [[User Experience (UX)]] - [[Human-Computer Interaction (HCI)]] - [[Perception]] - [[Usability]] - [[Interaction Design (IxD)]] - [[Product Design]] - [[Signifier]]