An affordance is a visual cue that signals how an element can be used — a button that looks pressable, a slider that looks draggable, a card edge that looks liftable — communicated through shape, shadow, and styling rather than through any label explaining the interaction. The term comes from psychologist James J. Gibson and was brought into design by Don Norman, who argued that good design makes the possible actions on an object visible without any instruction at all.
Perceiving Possibility Before Reading Instruction
People perceive the potential uses of an object almost as quickly as they perceive the object itself — a door handle suggests pulling, a flat push-plate suggests pushing, long before anyone reads a sign confirming which is correct. Interfaces work the same way: a raised, shadowed rectangle suggests "press me" through pure visual convention, and when that convention is followed, users act on instinct rather than having to stop and reason about what an element does.
In Product Design
Affordances show up as the subtle shadow and border that distinguish a button from flat text, the drag handle icon that signals a reorderable list item, and the slightly raised appearance of a toggle that hints it can be flipped. As flat design has stripped away many of the literal cues, bevels, gradients, drop shadows, that made early digital affordances obvious, designers increasingly rely on convention and consistent patterns to carry the same signal with far less visual weight.
- Flat text styled identically to a clickable link, with no underline, color, or cursor change to distinguish the two
- A card with no shadow, border, or hover state, leaving users uncertain whether it can be tapped or is purely informational
- A custom-styled dropdown that doesn't resemble any standard select input, giving users no visual reason to expect it opens a list of options
- An icon-only button with no label, tooltip, or familiar convention behind its symbol, leaving its function genuinely unclear until tapped
Each of these examples removes the very visual cue a user would otherwise rely on to know an interaction is possible at all, which shifts the burden from "the interface shows me" to "I have to experiment to find out."
How to Apply It
Give every interactive element at least one visual cue, shadow, border, color, cursor change, hover or press state, that a static element doesn't have, so the two are never visually identical. Lean on established conventions, underlined links, raised buttons, drag handles, rather than inventing new visual languages for common interactions, since a familiar affordance requires no learning at all.
Why It Matters
Weak or missing affordances are one of the most common reasons users fail to discover functionality that technically exists in a product, since they simply never realize an element is interactive in the first place. Unlike many usability issues, this one is nearly invisible in analytics — a feature with no affordance doesn't generate error reports, it just quietly goes unused. A fast test: show a screen to someone unfamiliar with the product and ask them to point at everything they think they can interact with. Anything they miss has an affordance problem.
