An affordance is the relationship between an object and a person that determines what actions are possible: a chair affords sitting, a button affords pressing.
Overview
An affordance is what something lets you do. A flat plate on a door affords pushing. A handle affords pulling. A text field affords typing. Importantly, an affordance is not a property of the object alone; it depends on the person too. A heavy chair affords lifting for one person and not for another.[1][2]
In digital products, almost anything on a screen can be clicked, so the more useful question is whether people perceive that an action is possible. Norman distinguished between real affordances (what the system will actually respond to) and perceived affordances (what people believe they can do).[3] Design succeeds when the two match.
Because the word was so often misused to mean “a visual cue,” Norman later introduced the term Signifiers for the cues themselves. Put simply: the affordance is the possibility; the signifier is the hint.[4]
Why it matters
When perceived and real affordances do not match, people either miss what they can do or try to do things the system will not allow. Both outcomes waste time, erode trust, and generate support requests.
The shift toward very flat visual styles made this problem more common. Eye-tracking research from Nielsen Norman Group found that weak visual cues for clickable elements led people to look around more and take longer to act, because they were less sure what was interactive.[5]
Key takeaways
- An affordance is a relationship between the thing and the person, including their abilities, tools, and context.
- Perception is what matters on screen. If people do not perceive an action, it may as well not exist.
- Avoid false affordances. Elements that look interactive but are not (underlined text that is not a link, cards that look clickable but are not) train people to distrust the interface.
- Avoid hidden affordances. Interactive elements that look static (plain text that is secretly a link, a row you can drag with no handle) go unused.
- Affordances differ by ability. For keyboard and screen-reader users, the affordance comes from correct semantics: a real button element, focusability, and an accessible name. Visual styling alone is not enough.
- Conventions create perceived affordances. People rely on patterns learned elsewhere, which is why consistent components across products matter.
In practice
Common patterns in business applications, portals, and internal tools:
Supports the principle | Undermines the principle |
|---|---|
Buttons look like buttons: distinct shape, fill or border, and enough contrast to stand out from surrounding content. | Text-only “ghost” actions that are indistinguishable from labels or headings. |
Links are visually distinct (color plus underline or another non-color cue). | Underlining text for emphasis, which makes it look like a link. |
Whole cards are clickable when they look clickable, with a clear hover and focus state. | Cards where only a small, unmarked portion responds to a click. |
Draggable items show a grip handle and change the cursor on hover. | Reorderable lists with no visual indication that reordering is possible. |
Interactive elements are built with proper semantic HTML so assistive technology announces them correctly. | Clickable <div> elements that cannot be reached or activated with a keyboard. |
Questions to ask in a design review
- Can someone tell, without hovering or clicking, which elements on this screen are interactive?
- Is anything styled to look interactive that is not?
- Can every interactive element be reached and used with a keyboard alone?
- Are we using the shared component (button, link, card) rather than a one-off look?
Origin
Psychologist James J. Gibson coined “affordance” in the 1960s and developed it fully in The Ecological Approach to Visual Perception (1979). For Gibson, affordances were the action possibilities an environment offers an animal, whether or not the animal notices them.[2][6]
Don Norman brought the term into design in The Psychology of Everyday Things (1988), focusing on what people perceive they can do.[1] As the term spread through the software industry, he clarified the distinction between real and perceived affordances in a 1999 article,[3] and in 2008 proposed “signifiers” to describe the cues designers actually control.[4]
Related concepts
- Signifiers — the cues that communicate an affordance
- Discoverability — the outcome of clear affordances and signifiers
- Constraints — deliberately removing affordances to prevent errors
- Jakob’s Law — conventions shape what people expect to be interactive
- Fitts’ Law — the size and distance of targets affects how easy they are to use
- Aesthetic-Usability Effect — attractive designs are perceived as easier to use
References and further reading
- Norman, D. A. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books. (Originally published 1988 as The Psychology of Everyday Things.) https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things
- Wikipedia. Affordance (history and definitions from Gibson to Norman). https://en.wikipedia.org/wiki/Affordance
- Norman, D. A. (1999). Affordance, Conventions, and Design. ACM Interactions, 6(3). https://dl.acm.org/doi/10.1145/301153.301168
- Norman, D. A. (2008). Signifiers, Not Affordances. jnd.org. https://jnd.org/signifiers-not-affordances/
- Nielsen Norman Group. Flat UI Elements Attract Less Attention and Cause Uncertainty. https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/
- Wikipedia. James J. Gibson. https://en.wikipedia.org/wiki/James_J._Gibson
- Interaction Design Foundation. What are Affordances? https://www.interaction-design.org/literature/topics/affordances
- Nielsen Norman Group. Keyboard-Only Navigation for Improved Accessibility. https://www.nngroup.com/articles/keyboard-accessibility/
- Yablonski, J. Laws of UX (format inspiration for this series). https://lawsofux.com/