Affordance
The properties of an object that suggest how it can be used, such as a button that looks pressable or a slider that looks draggable, guiding users toward correct interactions without instruction.
What Is Affordance?
Affordance, a term coined by psychologist James Gibson and popularized in design by Don Norman, refers to the actionable properties of an object that are perceivable by the user. A raised rectangle with a shadow affords pressing. A text field with a blinking cursor affords typing. A thumbnail with a play icon affords playback. Good affordances make the correct interaction obvious without labels, instructions, or tutorials — the object's appearance communicates its function.
Also Known As
- UX and design: "perceived affordance," "action cue"
- Product and engineering: "interactive appearance," "clickability signal"
- Marketing and growth: "button obviousness"
- Research: "actionable property"
How It Works
A flat-design homepage replaces raised buttons with plain text links styled only with a subtle color shift. Analytics show click rates drop — users do not recognize the text as interactive because it lacks the visual affordance of a button. Adding back a minimal border and padding (keeping the modern aesthetic but restoring the "button" mental model) lifts click-through significantly. The design is still clean; it just communicates clickability.
Best Practices
- Give interactive elements visible affordance: borders, shadows, color blocks, or underlines for links.
- Distinguish primary, secondary, and tertiary actions with different affordance strengths.
- Use hover states to reinforce interactivity on desktop; touch devices need static affordance cues since hover doesn't exist.
- Test on users who have never seen the design before — familiarity blinds designers to missing affordances.
Common Mistakes
- Flat-design minimalism that strips all affordance cues, creating "mystery meat" interfaces where users cannot tell what is clickable.
- Using color alone to signal interactivity, which fails for colorblind users and low-contrast displays.
Industry Context
SaaS and B2B: dashboard clickable elements often suffer from weak affordance in modern flat designs; users miss features that were always visible. Ecommerce and DTC: "Add to Cart" buttons must scream "press me" — even a 5% drop in button affordance compounds across every product page. Lead generation: form submit buttons need strong visual affordance; a submit that looks like a label gets missed entirely.
The Behavioral Science Connection
Affordance taps into embodied cognition — the brain rapidly maps visual cues to physical action schemas ("this looks like I could press it"), enabling interaction without deliberation.
Key Takeaway
If users have to guess whether something is clickable, you have already lost; visible affordance is non-negotiable for conversion-critical elements.