Go Back

Affordance in UI Design: Meaning and Examples

What is affordance in UI design?

Affordance is the quality of an object that signals how it can be used. In UI design, affordance is what makes a button look pressable, a link look clickable, or an input look editable before the user has to think. The concept comes from psychologist James Gibson, but it was Don Norman who brought it into design thinking with his 1988 book The Design of Everyday Things. Norman argued that good design communicates use without instruction: "when affordances are taken advantage of, the user knows what to do just by looking."

A door with a flat plate affords pushing. A door with a handle affords pulling. When the design matches the action, people act without thinking. When it does not, they hesitate, read signs, or make mistakes.

In digital products, the same principle applies. A raised button affords pressing. An underlined blue word affords clicking. A bordered input field affords typing. The visual design does the instructing, so the interface does not have to.

Types of affordances

Understanding the different types helps you apply the concept more precisely.

Explicit affordances

These make the action obvious. A "Submit" label on a button, a magnifying glass icon on a search field, a drag handle on a sortable list item. There is no ambiguity about what to do or what will happen. Use explicit affordances when the action is unfamiliar or the stakes of getting it wrong are high.

Implicit affordances

These rely on convention and visual pattern. A card with a subtle shadow suggests it can be clicked, even without a "click here" label. A list of items with consistent spacing implies they can be scrolled. Implicit affordances work because users bring expectations from prior experience. They fail when those expectations do not exist or when the design departs from convention without signalling the difference.

Physical affordances

In the physical world, affordances are often structural. A ladder rung affords gripping and stepping. A button on a remote control affords pressing because it protrudes. A mug handle affords holding. These work because the shape, texture, or weight communicates the action directly through form.

Digital affordances

Digital affordances are perceived rather than physical. A button cannot literally be pressed, but a filled rounded rectangle with a label reads as pressable because of design convention. This is what Norman calls perceived affordance -- the user's interpretation of what an element does based on how it looks, not what it physically is. The risk in digital design is that visual styling can create false expectations: an element that looks interactive but is not, or one that is interactive but does not look it.

Why it matters in design

When affordances are well-designed, users move through interfaces without friction. When they are missing or misleading, you get "I didn't know I could click that" feedback, elevated support requests, and usability testing sessions full of hesitation.

The concept connects directly to usability: affordances reduce the cognitive load of figuring out what to do, which is one of the main ways interfaces become faster and less frustrating to use. It also connects to accessibility -- a visible affordance that has no corresponding keyboard behaviour or semantic role fails users who rely on those inputs.

Good affordances let users act confidently. Poor affordances make them second-guess the interface.

Affordances in UI design

Most UI design decisions are, at some level, affordance decisions. When you choose to use a filled button for a primary action, you are signalling that it can be pressed and that it matters. When you add a border to an input field, you are saying this area accepts text. When you style a row in a table with a hover state, you are suggesting the row is selectable.

The practical question is always: does this element look like it does what it actually does?

Copy/paste checklist

  • Buttons -- Look like buttons (filled or outlined; hover and focus states visible). Not plain text unless it is clearly a secondary or destructive action.
  • Links -- Underlined, coloured, or both. Distinguishable from body text without relying on colour alone.
  • Inputs -- Bordered or clearly delineated. Look like something you can type into.
  • Clickable areas -- Large enough (44x44px for touch targets); cursor or hover change where applicable.
  • Disabled states -- Look disabled (greyed out, reduced contrast) so users do not try to interact with them.
  • No false affordances -- Non-interactive elements do not look like buttons or links.

What good affordance looks like

Checklist

  • Convention -- Use familiar patterns (button shape, link styling) so users do not have to learn new interaction models.
  • Consistency -- The same type of control looks the same across the product. Primary buttons share one style throughout.
  • Feedback -- Hover, focus, and active states reinforce "this is interactive." See interaction design.
  • No false affordances -- Nothing looks clickable when it is not.
  • Accessible -- Focusable and keyboard-operable where it looks interactive; ARIA roles for custom controls.
  • Clear purpose -- Label or icon supports the affordance. "Save" on a button, not "Click here."

Common formats

  • Visual: Shape, colour, border, shadow (raised appearance suggests pressable). Apply via design system components for consistency.
  • Convention: Lean on established patterns. Users know buttons from links. Do not break convention without a clear reason.
  • Signifiers: Text, icon, or label that names the action and clarifies the affordance ("Add to cart" rather than just a "+" icon in an ambiguous context).

Examples

Affordance examples are easiest to judge when the signal and the possible action sit together. The useful question is not only "does this look clickable?" It is "what does this appearance promise will happen?"

Primary action

Signal A filled shape, clear verb, and button-sized target say this can be pressed.

Failure prevented The main action looking like ordinary text.

Inline text link

Signal The underline carries the link even when colour is unavailable.

Failure prevented Linked text becoming indistinguishable from the sentence around it.

Editable input

Signal A persistent label, field boundary, and caret make editing visible.

Failure prevented A value looking like read-only account information.

Drag handle

Signal A dedicated grip and plain instruction mark the movable part of the row.

Failure prevented Making the whole card feel draggable when only one area works.

Disclosure control

Signal A heading, summary, and chevron say more content can open here.

Failure prevented Hiding settings behind a row that looks like a static label.

Drop target

Signal The bounded area, file type, and fallback action explain what it accepts.

Failure prevented A decorative empty panel being mistaken for the upload control.

These are the small end of the same problem. The redesign issue shows a harder case where a control can remain discoverable for someone new while its new position breaks the path regular users already know.

Common pitfalls

  • False affordance: Underlined or blue text that is not a link. Reserve link styling for real links.
  • No affordance: An important control that looks like static text. Use a button or link style, or add an icon that suggests action.
  • Inconsistency: The same action looks different in different places. Use design system components to keep affordances stable.
  • Looks interactive but is not: A div with a click handler that is not keyboard focusable. Use <button> or <a>, or add tabindex="0" with full keyboard navigation support so the accessibility matches the visual affordance.
  • Affordance vs signifier: A signifier is the cue (label, icon, shape) that communicates use; affordance is the underlying property that makes use possible. In practice, good UI design creates perceived affordance through deliberate signifiers.
  • Affordance vs interaction design: Interaction design defines behaviour and feedback; affordance is the visual signal that makes the interaction discoverable in the first place.
  • Affordance vs usability: Usability is the outcome; well-designed affordances reduce the friction that gets in the way of it.

Next step

Audit one screen: list every interactive element and check that it looks interactive, has a clear label or icon, and is keyboard focusable. Fix any false or missing affordances. Run a quick usability testing session or moderated review to confirm users recognise what they can interact with -- and what they cannot.

Related Issues