An affordance is the perceived possibility for action that a design communicates to a user—the visual or tactile cues that suggest how something should be used. Effective affordances make intended interactions obvious without explanation or documentation. Good design makes affordances clear through visual hints like button appearance, clickability, or physical texture.
Observe common interfaces and identify what affordances they communicate. Study door handles, buttons, and controls that either successfully telegraph their use or confuse users.
That affordances require explicit labels or instructions. Strong affordances should be immediately intuitive and self-explanatory.
From your work with user-centered design thinking, you know that good design starts with understanding what users need to accomplish. Affordances are the mechanism by which a design communicates those possibilities for action — the visual, tactile, or spatial cues that tell a user "you can do this here." The concept was introduced by psychologist James Gibson to describe the action possibilities that an environment offers an organism (a flat, rigid surface affords walking; a knob affords turning), and was adapted for design by Donald Norman in *The Design of Everyday Things*. Norman drew a critical distinction between real affordances (what an object actually allows) and perceived affordances (what a user believes it allows based on its appearance). In design, perceived affordances are what matter — because if a user cannot perceive that an action is possible, the real affordance might as well not exist.
Consider the humble door. A flat plate on a door affords pushing — there is nothing to grab, so pushing is the only action the form suggests. A vertical handle affords pulling — the hand naturally wraps around it and draws back. When a door has a pull handle on the push side, people pull it, fail, and feel foolish. The door's real affordance (it pushes open) conflicts with its perceived affordance (the handle says "pull me"). This is Norman's famous "Norman door," and it illustrates the core principle: when form contradicts function, users blame themselves for the designer's failure. The same pattern appears everywhere in digital design. A text element styled to look like a hyperlink (blue, underlined) affords clicking even if it is not actually a link — and users will click it and be frustrated. A button that looks flat and unclickable will be ignored even if it is fully functional.
In digital interfaces, affordances operate through a vocabulary of visual conventions. Raised or shadowed elements suggest clickability (they look like physical buttons that can be pressed). Underlined colored text signals a hyperlink. A draggable handle (often rendered as a grid of dots) signals that an element can be repositioned. A text field with a border and cursor affords typing. These are not universal truths — they are learned conventions specific to the platform and era. Flat design trends in the 2010s deliberately removed shadows and gradients, which reduced visual clutter but also weakened affordances. Many designers had to reintroduce subtle depth cues after usability testing revealed that users could not distinguish interactive from static elements.
The practical rule for designing affordances is simple: make the possible actions visible through form, and make impossible actions invisible or obviously disabled. A greyed-out button affords nothing — it communicates "not available" through reduced contrast and the absence of hover effects. A text input with placeholder text affords typing by showing where content will appear. When you find yourself writing instructions to explain how to use an interface element, that element's affordances have failed. The best affordances are invisible in the sense that users never consciously notice them — they simply reach for the right action because the design made it obvious.
Topics in reflective domains aren't scored by quiz answers. Read, reflect, and mark when you've thought it through.