Interaction

Affordance

Affordance is the set of cues that tell people what is interactive and what will happen next.

Also heard as: interaction cue, action cue

Definition

Affordance is the visual and behavioral hint that helps users recognize an element as clickable, editable, draggable, expandable, or otherwise interactive.

Why it matters

If people cannot tell what can be used, they hesitate. If everything looks interactive, they stop trusting the signals.

Visual comparator

✓ Readable affordance

The action reads as interactive before the user tests it.

Primary action has a clear control shape.
Hit area looks intentional and accessible.
Interactive state is visually distinct from plain content.

✕ Ambiguous action

Weak cues force users to hover, guess, or ignore the action entirely.

The action looks like passive text.
State changes are too subtle to read quickly.
Users have to guess what is clickable.

Prompt language

Increase affordance on the primary action so it reads like a button, not body text with a border.
Give the collapsed section a stronger disclosure cue and clearer hit area.

Anti-patterns

Styling destructive or primary actions like plain text links with no clear affordance.
Using card hover states and inline links so similarly that the user cannot predict what is clickable.

When to research more

Research more when interactions rely on unfamiliar gestures, novel patterns, or assistive-technology compatibility that users cannot infer from visuals alone.

Related components

Button

Trigger deliberate actions with clear hierarchy and state feedback.

Select

Let users choose one option from a predefined list.

Modal

Focus attention on high-stakes decisions with temporary overlay dialogs.

Related lessons

Button

1.2 Components

Select

1.2 Components

Modal

1.2 Components