Layout, hierarchy, and reading patterns

A screen is not read, it is scanned. Before anyone processes a single word, their eyes have already sorted the page into what to look at first, what to skip, and what belongs together. That sorting happens in a fraction of a second, and it happens whether or not you designed for it. Visual hierarchy is the practice of designing that sorting on purpose, using size, weight, color, spacing, and position so the first thing people notice is the thing that actually matters. Some of the underlying psychology, Hick's Law, Miller's Law, the Von Restorff effect, is covered in more depth in The core laws of UX and UI design; this guide is about how those findings play out specifically in layout, hierarchy, and reading order.

Visual hierarchy: the tools you have

Visual hierarchy is the organization of elements on a page so the eye consumes them in the order of their actual importance, not the order they happen to sit in the markup.⁴ You do not get hierarchy by accident. It comes from five tools used deliberately, and every one of them is a lever you can push or leave flat.

• Size: a bigger element gets noticed first. Keep it to roughly three size steps, small, medium, large, so the ranking between them stays legible instead of turning into a blur of near-identical sizes.⁵
• Weight and contrast: bold text, denser color, and higher contrast against the background separate what matters from what supports it. The contrast between an element and what is behind it matters more than which color you picked.⁴
• Color: one saturated accent used sparingly draws the eye faster than that same color spread across the whole page, because it is the one thing that differs from its neighbors.
• Spacing: distance signals relationship before any other styling does. Items placed close together read as one unit; items placed apart read as separate, which is the whole subject of the Gestalt section below.
• Position: whatever sits where a reader's eyes already land first, top of the page, start of a line, inherits attention before a single pixel of styling is applied to it.

How people actually scan a screen

Eye-tracking research shows that scanning is not one fixed shape. The Nielsen Norman Group's studies on how people read text online describe four repeatable patterns, and which one shows up depends on the page's formatting, the reader's task, and how much they already trust the source, not on a universal law of the eye.³ Treat everything below as a tendency worth designing around, not a rule that overrides your actual content.

The F-pattern is the one most people have heard of, and it usually gets invoked backwards. Nielsen Norman Group is explicit that the F shape is a symptom, not a target: it is what happens when a reader has no formatting to lean on, so their eyes default to reading the first few words of a line and drifting down the left edge, skipping most of what is actually on the page.¹ It shows up on both desktop and mobile, and it shows up less, not more, once a page has real headings, bold key terms, and bullets, because those give the eye somewhere better to land.¹ Good layout does not optimize for the F-pattern. Good layout gives readers enough structure that they never fall into it.

The layer-cake pattern is the one worth actually designing for. It happens when headings and subheadings are visually distinct enough to scan on their own: readers fixate mostly on those, skip most of the body copy, and only slow down to read a full paragraph once a heading has told them it is the right one. Nielsen Norman Group ranks it as one of the most effective scanning patterns available, because it gets people to an answer fast without forcing them to read everything to find it.² The requirement behind it is specific: headings have to be visually distinct and genuinely descriptive, not vague section labels like "Details" or "More info."

The spotted pattern is a close cousin: instead of scanning headings, the eye jumps straight to specific words that stand out, through bold, color, or a link, or that happen to match what the reader came looking for.³ The Z-pattern is a different thing, and it is worth being precise about where it comes from. Unlike the F-pattern and layer-cake pattern, the Z-pattern is not drawn from eyetracking studies. It is a heuristic borrowed from print layout, useful mainly on sparse pages, a landing page hero, a single ad, where there is little text to scan and a handful of large elements sit along a top-left-to-bottom-right diagonal. Treat it as a reasonable starting layout for a mostly-empty screen, not as evidence about how people actually read, because it has not been tested the way the F-pattern and layer-cake pattern have.

Grouping: the Gestalt principles

Before a reader processes a single word, their visual system has already grouped the page into chunks. That grouping is automatic: the mind organizes shapes into a coherent whole rather than parsing them one at a time, a finding that goes back to Gestalt psychologists including Max Wertheimer, Kurt Koffka, and Wolfgang Kohler in the 1920s.⁶ Four of their findings do most of the work in layout.

• Proximity: items placed close together read as one group; items placed farther apart read as unrelated, regardless of any other styling applied to them.⁶
• Similarity: items that share a visual property, color, shape, size, read as related, even when they are scattered across a layout instead of sitting next to each other.⁶
• Common region: items enclosed inside a shared boundary, a card, a panel, a visible border, read as one group, even when they are not otherwise close together.⁶
• Closure: the eye fills in the missing parts of an incomplete shape to see it as whole, which is why a logo or icon can suggest a full form using only a fraction of its outline.⁶

These four do not act independently, and when they disagree, a layout reads as broken even though nothing on it is technically wrong. A card, common region, with a thin divider line cutting through the middle of it, implying two separate groups, is telling the eye two contradictory things at once. When you need to separate content, add space. When you need to group it, use proximity and a shared boundary together, and let the divider line go.

Whitespace and alignment

Whitespace is not empty space left over after the content is placed. It is what makes proximity and common region work at all. Remove the space between two groups and Gestalt has nothing left to group by. Nielsen Norman Group treats space and grouping as one mechanism, not two: elements placed close together, with room around the group as a whole, are what reads as related.⁵

Alignment does similar work at a smaller scale. Text and controls that share an invisible edge, a left margin, a baseline, a column, read as connected even with no container around them, and a page where nothing lines up with anything else forces the eye to work out relationships it should never have had to guess at. The fix is rarely more design. It is usually picking one edge, most often the left, and holding every related element to it.

• Give related items less space between them than unrelated items, every single time, not just when it happens to look nice.
• Pick one alignment edge per group and hold every element in that group to it.
• Increase the gap between sections before you reach for a divider line. The space usually does the job alone.
• Do not center long body text or lists. A ragged, unpredictable left edge is slower to scan than a straight one.

Practical scannability

Grouping and hierarchy set the shape of a page. Scannability is what makes that shape usable at actual reading speed, and it comes down to a few habits that are easy to state and easy to skip under deadline.

• Write headings that summarize the section, not just label it. "Pricing" tells a scanner nothing; "Free forever, no card required" tells them whether to keep reading.
• Chunk related content into short groups instead of one long block. A scanner processes three groups of four items far more reliably than one list of twelve.⁶
• Front-load the important word. Put the specific noun or number at the start of a sentence, a line, or a list item, since that is the part most likely to actually get seen.
• Give every group a genuinely distinct heading style, in size, weight, or color, so the layer-cake pattern has somewhere to land.

Worked example: fixing a flat hierarchy

Here is a small account settings panel with every problem this guide covers, laid out as plain, unstyled text, which is a fair stand-in for what it looks like with every element at the same visual weight.

ACCOUNT SETTINGS

Name          [________________]
Email         [________________]
Plan          Free
Notifications  Email   SMS   Push
Delete Account   Cancel Subscription   Export Data
Save

Nothing here is technically broken. It is still hard to use, because nothing tells the eye where to start, what belongs with what, or which of these seven controls actually matters most. Fixing it does not mean adding features. It means applying the tools above, one at a time.

Nothing about the information changed. The same six pieces of content now have an order: Save reads first, the danger-zone actions read as a separate, lower-priority cluster instead of sitting shoulder to shoulder with Save, and the whole panel takes one scan instead of a careful read to understand. That is the entire difference between a flat layout and a hierarchy: not more content, an actual order to it.

Checklist: before you ship a layout

• Squint at the page. Is the one thing that matters most still the first thing you see?
• Can you name what group every element belongs to, and would a reader agree without being told?
• Is any pair of related items separated by more space than a pair of unrelated items? Fix that before anything else.
• Do your headings summarize their section, or just label it?
• Is a divider line doing a job that more whitespace could do instead?
• Does everything inside one group share a single alignment edge?
• If you removed all color from the page, would the hierarchy still be visible in size and weight alone?

If you are laying out a whole site rather than one panel, this fits into a bigger set of decisions, stack, structure, content, covered from the start in How to start building a website.