Affordance

Someone pulling on a door that opens outward hasn't misread the door. The door said the wrong thing. A handle invites a hand to pull, so the hand pulls. When that door actually needs a push, whoever installed it tapes up a sign reading PUSH and corrects the person instead. Nearly every sign on a door got there this way, which means the sign is a record of a design that failed before anyone was asked to read it.

Screens do the same thing. During a usability test at Pagedeck, Noa asked eight participants to share a document with a teammate. The word "Share" sat in the top right of the screen in gray text, and three of them scanned past it, dug through menus, and gave up. One said afterward, "I didn't know that was clickable. I thought it was a label."

Affordance moves that situation out of the person and into the object. The problem isn't that someone failed to learn enough; it's that the thing never told them what it could do. Shifting the blame shifts where the fix goes. Redesigning how something looks comes before writing more instructions.

An affordance isn't something an object has by itself. It appears where the object meets the body of the person using it. A handle affords pulling because people have hands that grip. A flat plate affords pushing because a palm can push it. Put the same handle above where someone can reach and the affordance isn't there for them.

Screens have nothing to grip and nothing to push — only color and shape under glass. So most of what a screen affords is borrowed from the physical world.

1. Borders and shadows lift an element off the background. The sense that raised things can be pressed comes over from paper and physical buttons.
2. Color separates it clearly from its surroundings. An element in the same color as the text around it reads as text.
3. Padding gives it an area about the size of a fingertip. Visible pressable area reads as pressable.
4. The pointer turns into a hand, and a hover state changes the color when the cursor lands on it. This cue exists only for a mouse, though, so anything that leans on it alone disappears entirely on a phone.

What Noa did after that test wasn't rewording anything. She put a border and a fill around "Share" so it looked like a button. Given the same task again, all eight participants clicked it within five seconds. Not one character of copy changed.

The error runs the other way too. When an illustration or a statistics card looks like a button and nothing happens on click, people don't conclude they clicked the wrong thing — they conclude the product is broken. That case advertises a possibility that was never there, and the cost lands on trust rather than on one click: after two or three dead ends, people stop trying things and start hunting for a menu.

In a design review, affordance turns up as a single question: can you tell this is clickable without being told? Four places attract that question most.

The first is the line between buttons and text. When a screen mixes things that act with things that only read, and they look alike, people start clicking around to find out which is which.

The second is a screen with nothing on it yet. An empty document list shown as empty space says nothing about what can be done here. This is where the decision to put one "New document" button in the middle comes from, sized larger than it would ever be on a full screen, because it is the only thing there is to do.

The third is any action that leaves no trace. Nothing on screen states that rows can be reordered by dragging them. That's why the convention of a six-dot grip handle on the left edge of a row exists at all. The handle does nothing on its own; it stands in for the ridged surface that would tell a hand this object can be picked up.

The fourth is anything currently unavailable. Dimming a disabled button deliberately strips out the signal that it can be pressed. Dimming without explaining why it can't be used, though, just gets it pressed repeatedly.

Reading this alongside accessibility makes it clear that the property exists differently for different people. A screen that marks its buttons through color contrast alone offers no cue to someone who can't separate those colors. Shadows and borders reach a screen reader user not at all, which means the fact that an element is a button has to be written into the code rather than drawn.

"I can't tell if this is clickable. There's no affordance here."

Nothing about the way it looks settles whether it's an interactive element.

"The whole card is clickable but the only cue is on hover. On a phone there's no signal at all."

The cue disappears completely in an environment with no mouse.

"This is a false affordance. It looks like a button and clicking does nothing."

It presents itself as interactive, so people read the silence as a defect.

At Pagedeck the word mostly comes from Noa and Theo — Noa in design reviews, Theo while building. Last quarter one screen had seven clickable elements drawn four different ways. Noa settled it with a rule in the design system: shadows belong only to things that can be pressed, and read-only cards get a different background with no border. Two shapes instead of four, and the same note stopped coming up in reviews after that.

The most common mistake is using the word to mean the visual cue on the screen. "Let's add some affordance" is said when what's meant is "let's draw a border," so the confusion sets in naturally. But the original sense is the possibility itself — what this element can do — while the marker added to announce that possibility has its own name, the signifier. Collapsing the two into one word narrows the conversation to whether to draw a border, and nobody asks what the element ought to be able to do in the first place.

Reading it as something to maximize comes from the same root. Make everything on a screen look pressable and people can't tell where to press. On a screen with six buttons, nothing stands out, and the work of deciding what matters most gets handed to the person who came to get one thing done.