Affordance
A property an object's design communicates about how it can be used, before any instruction is read.
Affordance is a term from perceptual psychology (James Gibson, 1966) for the action possibilities an object's physical properties suggest — a chair affords sitting, a handle affords pulling — independent of whether anyone consciously reasons about it. Don Norman's The Design of Everyday Things (1988) imported the term into design and, in the process, subtly narrowed it: Norman cared about perceived affordance, the cues a design gives about its use, which is why the term in UI contexts usually means "what does this look like it does" rather than Gibson's stricter "what can it actually do." Norman later said the loose usage had muddled things and coined signifier for the visible cue, keeping affordance for the action itself; see Signifier. The everyday sense below is the loose one.
In interface work, affordance is the reason a raised, shadowed rectangle reads as clickable and a flat one doesn't, why an underline still signals "link" decades after blue underlined text stopped being the only way to make one, and why a horizontal scrollbar sliver at a container's edge tells you there's more to see without a single word of instruction. Skeuomorphic design leaned on affordance heavily by literally reproducing the visual cues of a physical object it was replacing — see Skeuomorphism — but affordance survives the flattening of visual style precisely because it's about the cue, not the realism.
The recurring failure is a false affordance: styling something to look clickable when it isn't, or removing the cue (flattening a button until it's indistinguishable from static text) while keeping the click behavior. Both break the same contract, just in opposite directions, and both are diagnosed the same way — watch a new user's first click, and see where their expectation and the interface's actual behavior part ways.
Affordance is downstream of the same perceptual machinery Gestalt Principles describes, and it's the reason a well-designed Design Token system (consistent shadow, consistent radius) keeps affordance legible across an entire product rather than only within one screen.
See also5
UI Primitive
The small set of typed components through which all interface markup is expressed.
Design & Interface12 connections
Dark Pattern
An interface deliberately designed to steer users toward a choice that serves the business rather than the user.
Design & Interface17 connections
Fitts's Law
The time to hit a target shrinks with its size and grows with distance to it — so make frequent targets big and close.
Design & Interface16 connections
Touch Target Size
How large a tappable element needs to be for fingers to hit it reliably, roughly 44 to 48 points, and why the visible icon can be smaller than the area that responds.
Design & Interface18 connections
Iconography
The design and use of small symbolic images in interfaces and signage, which are quick to recognize when familiar and surprisingly ambiguous when not.
Design & Interface14 connections
Linked from8
- Dark PatternDesign & Interface
An interface deliberately designed to steer users toward a choice that serves the business rather than the user.
- Empty StateDesign & Interface
What an interface shows when there is nothing to show yet, a screen often designed last that is many people's first impression.
- Fitts's LawDesign & Interface
The time to hit a target shrinks with its size and grows with distance to it — so make frequent targets big and close.
- Gestalt PrinciplesDesign & Interface
A set of perceptual rules describing how the eye groups discrete elements into wholes before conscious analysis begins.
- Hick's LawDesign & Interface
Decision time rises with the number and complexity of choices offered, roughly logarithmically — fewer options decided faster.
- Progressive DisclosureDesign & Interface
Show only what most users need now, and defer the rest behind an explicit action, instead of exposing everything at once.
- SignifierDesign & Interface
A perceivable cue that tells people what action is possible and where to take it, the visible half of an affordance and the fix for doors that make everyone push the wrong way.
- SkeuomorphismDesign & Interface
Designing a digital object to visually mimic its physical predecessor, borrowing familiarity at the cost of extra visual weight.