Affordances and Signifiers
An affordance is what an object makes possible. A signifier is the cue that tells you so.
Definition
James Gibson coined affordance for the action possibilities an environment offers. Don Norman adapted it for design, then introduced signifier to name the perceivable cue that communicates the affordance, after noticing that designers were using affordance to mean the cue itself.
Expert heuristic. A review criterion developed by practitioners. Useful and widely taught, but evaluated by judgement rather than measurement.
On this plate
Reach for this when
- Defining interactive states in a design system.
- Reviewing a flat or minimal interface for missing cues.
- Designing for touch and pointer together.
Common mistakes
- Hover-only interactivity cues.
- Decorative elements that look interactive.
- Removing signifiers for visual cleanliness.
- Styling non-interactive elements like controls, which makes every real control less believable.
Why the distinction is practical
A div with a click handler affords clicking. Nothing about it signifies that. Users cannot act on an affordance they cannot perceive, so in interface work the signifier is almost always the thing you are actually designing.
This is the concrete cost of the flat design era. Removing shadows, borders and colour differences removed signifiers while leaving affordances intact, and interactive elements became guesses.
Signifiers that carry weight on screen
- Colour difference from body text, for links.
- Underline, which is the only link signifier that survives colour blindness and greyscale.
- Border or fill, which marks a button as a distinct surface.
- Shadow or elevation, indicating a raised, pressable surface.
- Cursor change on hover, which is unavailable on touch.
- Position within a known region, such as inside a navigation bar.
- Explicit labels, which are the strongest signifier and the most often skipped.
Do
- Give interactive elements a resting-state signifier, not only a hover one.
- Underline links in body text.
- Keep one visual language for interactivity across the product.
- Use real semantic elements, so the browser supplies behaviour and assistive technology gets the affordance too.
Do not
- Style non-interactive elements like buttons.
- Use colour alone to mark a link.
- Rely on a cursor change as the primary cue.
Signifiers, and where each one fails
| Signifier | Fails when |
|---|---|
| Underline on a link | Underlines are used decoratively elsewhere |
| Button shape and fill | Non-interactive elements share the styling |
| Cursor change | The device has no pointer |
| Hover reveal | Touch, keyboard and screen reader users never see it |
| Shadow or elevation | Everything on the page is elevated |
| Icon alone | The metaphor is unfamiliar, or the icon is decorative elsewhere |
In practice
- i.
Underlined links in body copy
Content sitesColour alone fails for readers with colour vision deficiency and in low-contrast conditions. Underlines are the reason link identification works at all in dense text.
- ii.
Card affordance
ListingsIf a whole card is clickable, it needs a resting-state signifier such as a border and a hover state that moves. Cards that only reveal interactivity on hover produce measurably lower engagement on touch.
- iii.
The card that was half clickable
Ambiguous affordanceA card with a clickable title, a clickable tag and dead space between them looked like one target and behaved like three. Whichever behaviour is intended, the styling has to say which parts are which.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Natural Mapping
PrincipleHow closely the layout of controls corresponds to the layout of what they affect.
Key difference
An affordance is what the interface makes possible and a signifier is what tells the reader it is possible. Mapping is a separate question: whether the arrangement of controls matches the arrangement of what they change.
Use Affordances and Signifiers when
- The complaint is that people did not realise they could act.
- The control works but reads as decoration, or the reverse.
- You are deciding how visible a possibility needs to be.
Use Natural Mapping when
- People find the control but operate the wrong thing with it.
- There are several similar controls and several similar targets.
- The fix is arrangement or labelling, not visibility.
Local chart
PRIN·007 · Region I · Grid A1
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
The Design of Everyday Things
D. A. Norman, Basic Books, 1988, revised 2013
- [2]
The Theory of Affordances
J. J. Gibson, in Perceiving, Acting, and Knowing, 1977
- [3]
Signifiers, Not Affordances
D. A. Norman, Interactions, 2008
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applied through
Where this shows up as a concrete interface decision.
- Badge and TagCMP·023 · Component
- ButtonCMP·001 · Component
- LinkCMP·002 · Component
- ElevationFND·048 · UI foundation
- IconographyFND·050 · UI foundation
- SimilarityFND·005 · UI foundation
- Visual StatesFND·053 · UI foundation
Short definition
The one-paragraph version, for when that is all you need.
- AffordanceTERM·004 · Term
- SignifierTERM·005 · Term
Related concept
Connected closely enough to change how you apply this.
- Focus IndicatorsA11Y·003 · Accessibility
- Use of ColorA11Y·010 · Accessibility
- Aesthetic and Minimalist DesignHEUR·008 · Heuristic
- ConstraintsPRIN·009 · Principle
- DiscoverabilityPRIN·005 · Principle
- FeedbackPRIN·004 · Principle
- Gulfs of Execution and EvaluationPRIN·010 · Principle