In short
An affordance is a relationship between an object and a person that makes an action possible and, in design usage, visibly possible: a raised button affords pressing, an underlined word affords clicking, a text field affords typing. Don Norman later separated the affordance (what can be done) from the signifier (the cue that communicates it), and most interface failures are missing signifiers: clickable things that do not look clickable, draggable things with no handle, fields that do not look like fields. Restoring them means giving interactive elements visible, consistent cues.
Where the term came from
The psychologist James Gibson coined "affordance" in the 1970s to describe what an environment offers an animal: a flat surface affords standing, a handle affords grasping. The affordance exists whether or not it is noticed; it is a fact about the object and the creature together.
Don Norman brought the term into design in The Design of Everyday Things in 1988, using it for the properties of things that suggest how they should be used: the plate on a door that says push, the handle that says pull. When designers started using "affordance" to mean any visual cue, Norman clarified, in 2013, that the cue is a signifier and the possibility is the affordance. A button affords pressing; its shading, shadow and label are the signifiers that tell you so. The distinction matters because the common design failure is not a missing affordance, the element can be clicked, but a missing signifier, nothing suggests it.
Affordances in interfaces
A screen affords nothing physically; everything is glass. So interface affordances are entirely conventional and entirely learned, and signifiers do all the work:
- Buttons afford pressing, signified by a raised or bordered shape, a fill, a label in imperative voice, and a hover or pressed state.
- Links afford navigation, signified traditionally by colour and underline, and by the cursor changing to a hand.
- Text fields afford typing, signified by a box with a border, a placeholder or label, and a blinking cursor on focus.
- Sliders, handles and grips afford dragging, signified by a knob, a grip texture, or a cursor change.
- Cards afford selection or opening when they lift on hover and have a consistent shape.
- Scrollable areas afford scrolling, signified by a partially visible item at the edge or a scrollbar.
- Checkboxes and toggles afford switching, signified by their familiar shapes and states.
Each works because users have learned the convention. Break the convention and the affordance is still there; the user simply does not know.
How flat design eroded them
The move to flat and minimal interfaces after 2012 removed many signifiers in the name of cleanliness: buttons became plain text, links lost their underlines, fields became single lines or invisible boxes, and everything sat on the same plane. Usability studies at the time, notably from the Nielsen Norman Group, measured the cost: users took longer to find interactive elements, missed them, and clicked non-interactive ones. The industry partially corrected, with "flat 2.0" restoring subtle shadows, borders and hover states, but the tension persists and every minimal redesign risks repeating it.
The good design that is invisible is invisible because its signifiers are so conventional they are not noticed, not because they are absent.
The common failures
Clickable things that do not look clickable. Headings, icons without borders, images, table rows and cards that open on click with no cue. Users never discover them.
Non-clickable things that look clickable. Underlined non-links, bordered text, coloured words. Users click and nothing happens, and trust drops.
Invisible fields. Inputs indicated only by a placeholder that disappears on typing, or by a faint underline. Users are unsure where to type and what they typed.
Hidden gestures. Swipe to delete, long-press for options, pinch to zoom on something not obviously zoomable. Powerful, invisible, and discovered by accident or not at all.
Inconsistent signifiers. Links underlined in some places and not others, so the user cannot learn the rule.
Disabled states indistinguishable from enabled ones, or from plain text.
Restoring them
- Make every interactive element look interactive, with a consistent cue for each kind: buttons as buttons, links as links, fields as boxes.
- Give hover, focus and pressed states to everything clickable, so it responds before and as it is used.
- Underline links in body text. Colour alone fails colour-blind users and competes with brand colour used elsewhere.
- Use borders and labels on fields, with the label persistent, not a vanishing placeholder.
- Add explicit handles to draggable things and explicit controls beside hidden gestures.
- Show scrollability with a peeking item or a visible scrollbar.
- Do not make non-interactive text look like links or buttons.
- Test with the squint: blur the screen and ask which elements still look pressable. If the answer is none, the signifiers are gone.
These are the conventions a design system encodes, and consistency across a product is what lets users learn the signifiers once.
Why it matters beyond usability
A missing signifier costs a click the user never makes: a feature undiscovered, a form not started, a product not opened. The conversion cost of a button that does not look like one is measurable, and so is the support cost of gestures nobody finds. Affordances are the difference between a product that explains itself and one that needs a tour. If you would like an interface reviewed for the interactive elements that are hiding in plain sight, book a call.
Common questions
What is an affordance in UX?
A possibility for action that an element offers a user, made visible through its design: a button affords pressing, a field affords typing, a slider affords dragging. In practice designers use the term for elements whose appearance suggests how to use them. Don Norman distinguishes the affordance, what can be done, from the signifier, the visual cue that communicates it.
What is the difference between an affordance and a signifier?
The affordance is the possibility of an action, which exists whether or not anyone notices; the signifier is the cue that tells the user the possibility exists, such as a button's shadow or a link's underline. Most interface problems described as missing affordances are actually missing signifiers: the element works, but nothing indicates it.
What is a false affordance?
An element that appears to offer an action it does not: underlined text that is not a link, a bordered word that looks like a button, an image that looks like a play button. Users try the action, nothing happens, and their trust in the interface's cues declines, which makes them miss real affordances afterwards.
Why did flat design cause usability problems?
Flat design removed the signifiers that told users what was interactive: shadows, borders, underlines and depth. Studies found users took longer to find buttons and links, missed them, and clicked non-interactive elements. The later correction restored subtle borders, shadows and hover states while keeping the flat aesthetic.
How do you make a button look clickable?
Give it a distinct shape with a fill or border, a label in the imperative, contrast against its background, and visible hover, focus and pressed states. Keep the style consistent for every button in the product so users learn it once, and avoid giving the same treatment to anything that is not clickable.
