---
name: Affordance
slug: affordance
category: interaction
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-28T00:00:00.000Z
definition: What an element makes possible for the person using it, such as a
  surface that can be pushed, dragged, or scrolled.
aliases:
  - name: perceived affordance
    source: community
  - name: action possibility
    source: community
  - name: affordances
    source: community
tags:
  - perception
relations:
  contrastWith:
    - signifier
    - feedforward
  variantOf: []
  partOf: []
  seeAlso:
    - direct-manipulation
    - skeuomorphism
    - interface-metaphor
    - easter-egg
implementations: []
sources:
  - title: "Supercharge: UI glossary"
    url: https://supercharge.design/blog/ui-glossary-list-of-essential-ui-design-terms
  - title: "Wikipedia: Affordance"
    url: https://en.wikipedia.org/wiki/Affordance
demo: inline
exhibit: false
useWhen: naming what an element allows a person to do
---

The word comes from perception psychology, where James Gibson used it for the action
possibilities an environment offers a creature: a branch affords grasping to a hand of
the right size, whether or not anybody notices it. Don Norman brought it into design and,
by his own account, muddled it, because designers started using affordance to mean the
visual hint rather than the possibility. He proposed the fix himself: the possibility is
the affordance, the mark that advertises it is a signifier, and a screen has almost no
real affordances at all. A flat panel of glass affords touching, everywhere, equally.
Everything else is drawn.

That is why the term is worth keeping precise. When someone says a button has good
affordance they usually mean it is signified well: it has an edge, a fill, a shadow, a
label in the imperative, a pointer that changes over it, a press state that answers. When
they say a control has no affordance they mean the possibility is real but invisible,
which is the more common failure. Flat design spent several years discovering this, and
the lesson that stuck is that borders and fills were doing work nobody had costed.

Three failure modes are worth naming. A hidden affordance is real but unmarked, and only
the people who already know it is there ever find it, which is what a swipe on a row or a
long press without a menu ends up being. A false affordance is marked but not real: text
with a hover underline that goes nowhere, an image that looks like a play button, a
disabled control that looks pressable. And an affordance that only appears on hover is
both, because half the readers have no pointer to reveal it with.

Conventions carry most of the load, and they are cheap. Underlined coloured text goes
somewhere. A raised shape with a verb on it does something. A grip of dots says pick this
up here. A shadow at the edge of a list says the content continues. None of these is a
law of physics, they are learned, and the value of using them the way everyone else does
is that a reader arrives already knowing what your interface allows.