F pattern and Z pattern web design: what the research supports
The F-pattern comes from eye-tracking research: on pages of undifferentiated text, people read the first lines, then shorter lines, then scan down the left edge. It describes a failure, not a goal. The Z-pattern is a composition rule of thumb for sparse pages, with far less evidence behind it. Neither is a template. Both point to the same advice: give people headings, front-loaded sentences and a clear left edge to scan.
Where the F-pattern comes from
The F-shaped pattern was described by the Nielsen Norman Group after eye-tracking studies of people reading web content, first published in 2006. Heatmaps showed a horizontal band across the top of the content, a second, shorter band lower down, and a vertical stripe along the left edge: roughly the shape of a letter F. NN/g's later write-up, F-shaped pattern of reading on the web, makes the point that's often lost: the pattern appears when a page gives readers nothing better to go on, such as long paragraphs without headings, bold words or lists.
In other words, an F-heatmap usually means the page is badly formatted for scanning. People fall back on reading the first words of each line because nothing else tells them where the useful part is. The same research group has described other patterns, including a layer-cake pattern where people scan headings and subheadings and only read the body under the ones that interest them. That's the pattern good pages encourage.
What the Z-pattern is, and isn't
The Z-pattern describes a path across a sparse page: top left (logo), across to top right (navigation or a button), diagonally down to the bottom left, then across to the bottom right (the call to action). It's a descendant of older print composition heuristics about where the eye enters and leaves a page. It's widely taught, but it isn't the result of web eye-tracking studies in the way the F-pattern is, so treat it as a composition aid, not a description of behaviour.
| F-pattern | Z-pattern | |
|---|---|---|
| Origin | Eye-tracking studies of text-heavy web pages | A composition rule of thumb from print layout |
| Describes | What people do on poorly formatted text | A suggested path across simple, sparse layouts |
| Evidence | Repeated observation in usability research | Mostly practitioner convention |
| Useful for | Diagnosing why content isn't being read | Arranging a minimal hero or landing section |
| Risk | Treating it as a layout to copy | Forcing every section into a zigzag |
Designing for scanning instead of fighting it
People scan because they're looking for something specific. F pattern and Z pattern web design advice is really about giving that scanning something to grab. The practical rules:
- Use real headings often. A heading every two to four paragraphs turns an F into a layer-cake. Make headings descriptive (“Opening hours”, “What it costs”) rather than clever. WCAG asks that headings and labels describe their topic.
- Front-load sentences and list items. The first two or three words get the most attention, so put the information-carrying word first: “Parking: free after 6pm” beats “If you're driving, you'll be pleased to know…”.
- Keep a strong left edge. Left-aligned body text gives the scanning eye a consistent place to return to. Centred paragraphs remove it.
- Use lists and tables for comparable facts. Prices, times and specifications scan far better in rows than in prose.
- Bold sparingly. One bold phrase per paragraph helps; a paragraph that's half bold has no emphasis left.
- Put the action where the decision happens, after the information that justifies it, not only at the top right because a diagram said so.
Where a Z-pattern layout helps
On a very simple page, such as a waitlist or a single product launch, a Z-pattern layout is a reasonable way to order four things: brand top left, a secondary link top right, a headline and image through the middle, and the main button at the end of the path. Once a page has more than a few elements, scanning follows the headings and structure instead, and the Z stops being useful.
How this relates to Anticode
This guide is general design advice, and the research applies whatever tool built the page. Anticode's design engine follows the scanning rules above by default: body copy is left-aligned, giving a consistent reading line, each section opens with a heading and a short introduction, and prices, durations and times are set as lists with the figure aligned to the right. The logo sits top left with the navigation and the main button to its right in the header, which happens to suit the top bar of a Z.
What the engine can't do is write scannable copy from vague notes. Front-loaded sentences and descriptive headings depend on the facts in your brief; the Architect asks up to three questions where the answer changes the build, and you can rewrite any heading in the visual editor. For section structure, see visual hierarchy in web design.
Questions people ask
Is the F-pattern still true?
It still appears on long, unformatted text. It's a symptom of poor formatting, and pages with clear headings and lists see other, more efficient patterns.
Should I design my page in a Z-shape?
Only for very sparse layouts. On content-rich pages, structure your headings and sections well and let scanning follow them.
Where should the call to action go?
After the information that convinces people, and repeated where decisions happen. A single button in the top right isn't enough on a long page.