layout
Z pattern
also called Z-shaped pattern (community), zigzag scanning (community)
The scanning shape on sparse pages: across the top, diagonally down to the lower left, then across the bottom to the final call to action.
Give a reader a page with four things on it and the eye does not settle into a column. It runs along the top, where a logo and a navigation bar usually sit, cuts back across the middle on a diagonal, and runs along the bottom, arriving last at whatever is furthest right. Drawn out, that route is a capital Z, and it is the reason the classic landing page puts its mark top left, its menu top right, its promise in the middle, and its button in the bottom right corner.
The Z is the sparse-page counterpart to the F pattern, and the difference between them is density, not taste. Dense text gives the eye enough material to sample line beginnings, which produces the F. A hero with a headline, an image, and one button gives it nothing to sample, so the gaze bounces between the few high-contrast objects it can find and the path between them reads as a diagonal. Add a second column of copy and the Z stops describing anything.
Treat it as a description of a starting point rather than a template. The eyetracking record behind these shapes is thinner than the confidence with which they are repeated: the studies measured skimming on particular kinds of pages, the shapes are averages over many readers rather than a route any single person takes, and the pattern mirrors under right-to-left scripts. What survives replication is the weaker and more useful claim, that the corners of a sparse layout are seen and the interior is not. Anything you would rather the reader saw belongs on the path, and the last stop on it is the only place a single call to action should be.
A layout is also allowed to overrule the shape. Contrast, scale, colour, and motion pull the eye harder than position does, which is why a bright button parked mid-page is found immediately and a grey one in the bottom right corner is not. The Z is what the reader falls back on when nothing else is directing them, so the honest way to use it is as a default the visual hierarchy is then designed against.
Which word?
| If you want | say |
|---|---|
| laying out a sparse page with one clear action | z pattern |
| predicting how a text heavy page gets skimmed | f pattern |
Related
See also: Focal point