Visual Hierarchy

When everything on a screen is the same size and the same weight, a user has no idea where to start. With no reading order, people sweep from the top left and pass over everything unrelated to what they came to do. Make everything large and bold instead and the emphasis cancels itself: when five things are heavy, being heavy carries no information. Both failures look different on screen and cost the user the same thing, which is time spent deciding where to look.

Pagedeck's document sharing screen was the first case. Noa's draft had Share, Copy link, Change permissions, and Cancel sitting in a row at the same size in the same gray. Asked to share a document with a colleague, five of eight people pressed Copy link first, and three of those swept the screen twice before finding Share. With all four carrying the same weight, checking them one at a time was the only option available.

Visual hierarchy makes the screen state that order first. Whoever builds it decides what should be seen first, then translates that order into differences of size, color, and position. The order a user reads in becomes something designed rather than something left to chance.

Decide the viewing order, then translate it into visible difference. Start adjusting sizes before the order is settled and you end up enlarging whatever catches your eye that day, which leaves every screen on a different standard.

1. Write the order as sentences. Put in words what ranks first on this screen and what ranks second. On a sharing screen, first is the recipient field, second is the Share button, third is the permission setting. Written down, review makes clear what is actually being argued about. Two people who disagree about a size usually disagree about the ranking and haven't said so yet.
2. Choose the means of difference. Five are common. Size is the most direct. Weight creates difference within one size. Contrast pulls the eye through differences in lightness. Position uses the fact that top and left are read first. White space empties the surroundings so one thing stands out.
3. Keep it to three or four levels. Split hierarchy into six and users can't tell level three from level four. A level nobody can distinguish isn't hierarchy, just another size. Four is already generous for a single screen.
4. Stack means within a level. A heading two pixels larger has to be held up next to something to be noticed. Enlarge that heading, bold it, and add space above it, and the three work together to be obvious at a glance.
5. Check it. Blur the screen until only shapes remain; whatever registers first in that state should be the same thing you ranked first. Converting to grayscale serves the same purpose. Hierarchy built from color alone disappears in grayscale, and the same thing happens for users who can't distinguish the colors. Both checks take a few seconds and catch more than a long discussion does.

Alignment isn't a means of hierarchy, but it's the ground that lets hierarchy read. When baselines don't line up, a difference in size reads as a mistake rather than as rank. Fixing the baselines often makes an existing hierarchy visible without changing a single size.

The most frequent use is reviewing a screen draft. The question in review stops being about taste and becomes about order. Ask what ranks first on this screen, then check whether blurring it brings that thing up first, and the discussion finishes in five minutes. The draft either passes that check or it doesn't.

Three other places.

1. First-run screens — with no data yet, exactly one next action should stand out. Offer three choices at equal weight and a newcomer picks none of them and leaves. This is the screen where the cost of a flat layout is easiest to measure.
2. Errors and notices — a line that requires action afterward has to rank above its surroundings. Raising it with color alone won't do, though. Red text disappears in grayscale and for users with color vision deficiency.
3. Screens full of numbers — the same principle governs data visualization, the work of turning numbers into pictures to aid understanding. Eight lines in one chart all read at the same weight and leave no message behind. Darken the one line you mean to talk about, lay the rest in lighter tones, and the same data becomes a sentence.

There's a place to be careful too. Rank three things first on one screen and the hierarchy is gone. Screens where several teams each asked for their own feature to be emphasized usually end up here, and the fix is a decision about ranking rather than a visual one.

"What ranks first on this screen? All three read at the same size."

Nothing was decided about what to see first.

"Blurred out, the cancel button is the first thing I see."

The emphasis landed opposite to the intent.

"Don't just make it red — raise the size along with it."

One means is weak on its own, and color doesn't reach some users.

Noa rebuilt the sharing screen. Share became a button with a solid background, Copy link dropped to an outlined button, Change permissions dropped further to a text link, and Cancel moved to gray text in the bottom right. Nothing among the four got larger — three got quieter.

Running the same task with eight more people, all eight pressed Share first, and the number of sweeps across the screen dropped as well. What Noa brought to review wasn't a picture of the new screen but two blurred images.

The most common belief is that hierarchy means making the important thing bigger. Being told to build hierarchy sounds like being told to emphasize. But hierarchy comes from difference, not from absolute size. Raising the first-ranked thing and lowering everything else produce the same result, and on a narrow screen the second is usually better. Keep only enlarging and every element on the screen creeps upward until you're back where you started. What actually happened on the sharing screen was three things going down, not one going up.

Treating hierarchy as a matter of taste is also common, because review drifts toward which version looks nicer. But this principle can be judged. Did users press the intended thing first, and how many times did they sweep the screen? Handled as taste, the loudest opinion wins, and the next screen restarts the same argument from scratch. Handled as a question with an answer, the check itself becomes part of the review.