Affordance

What a thing actually lets you do. The visible cue advertising it is a signifier: raised means press, a grip means drag.

it looks clickablethe thing that tells you you can drag itaffordencevisual cue that it's interactivehow do people know that's a buttonclickability cuesthe little handle that says grab mewhy does nobody click that

See it

Live demo coming soon

What it is

An affordance is what an object lets you do. A handle affords pulling, a checkbox affords ticking, a button affords pressing, and the action is real whether or not anyone can see it. The perceptible cue that advertises the action is a signifier, and the signifier is the part you actually draw: a raised edge says press, a dotted grip says drag, an underline says follow me, a rounded pill with padding says tap. The word comes from psychologist James Gibson, and Don Norman brought it into design with The Design of Everyday Things (the book with the door you push when it says pull).

Norman spent years correcting the loose usage, and the correction is the useful part. You do not add affordances to a button; a button is already clickable. You add signifiers so people believe it. Flat design ran this experiment for everyone around 2013, stripped the shadows and borders, and discovered people stopped finding the buttons.

Two failure modes. A false affordance looks interactive and is not: boxed static text, underlined non-links, card-shaped divs that ignore clicks. And a hidden affordance only exists on hover, which means it does not exist on touch at all, so swipe actions and drag handles need a visible resting state or a peek that hints at the gesture.

Ask AI for it

Strengthen the affordances in this UI so every interactive element looks interactive at rest, without hovering. Give buttons a filled or bordered surface, at least 12px horizontal padding, a 44px minimum touch target, and a visible pressed state. Underline in-text links. Add a visible drag handle icon to reorderable rows and set cursor: grab, switching to grabbing while dragging. Use cursor: pointer only on real controls, and remove borders, shadows, and box shapes from static text so nothing reads as clickable when it is not. Show hover and focus-visible states as reinforcement, never as the only cue.

You might have meant

signifierdiscoverabilitydirect manipulationfeedforwardnatural mapping

Go deeper