F-Pattern and Z-Pattern
Conversion & UXAlso: F-Shaped Reading Pattern · Z-Shaped Reading Pattern · Eye-Tracking Reading Patterns
Quick definition
F-Pattern and Z-Pattern describe how eyes tend to scan a web page based on eye-tracking research. The F-Pattern shows up on text-dense pages, where people read left to right across the top then scan down the left edge. The Z-Pattern shows up on sparse pages, where the eye moves in a diagonal Z shape.
How it varies across Australia
Scan pattern strength varies by device and content density more than by industry. Mobile layouts compress both patterns into something closer to a straight vertical scroll, which is why designing purely from desktop eye-tracking studies increasingly misreads how Australian users, who skew heavily mobile, actually browse.
See conversion and user experience benchmarks across Australian industries →The two patterns
Eyes read across the top, drop down, read a shorter second line, then scan down the left edge scanning for keywords. Common on blog posts, search results and text-heavy landing pages.
Best for: dense text contentEyes move left to right across the top, diagonally down to the opposite corner, then left to right again along the bottom. Common on sparse pages with a logo, headline, image and single call-to-action.
Best for: simple, visual-first layoutsWhat it actually means
Both patterns come from the same source: eye-tracking studies that recorded where people actually looked on a page, not where designers assumed they'd look. The F-Pattern emerged from studies of text-heavy pages, where readers behave like they're skimming a newspaper column. They read the first line properly, skim the second, then give up and scan straight down the left margin hunting for a word that catches their attention.
The Z-Pattern shows up on simpler pages. Landing pages with a logo top left, a headline, an image, and a single call-to-action bottom right. With less content competing for attention, the eye follows a predictable diagonal sweep from top left to bottom right.
The mistake is treating either pattern as something to design toward. They're not templates, they're symptoms. A page produces an F-Pattern because it's dense and undifferentiated. A page produces a Z-Pattern because it's sparse and has an obvious visual hierarchy. If your page is generating a chaotic, patternless scan, that's the real signal, and it usually means your visual hierarchy has broken down completely.
Understanding both patterns is more useful for diagnosing a bad layout than for prescribing a good one.
Neither pattern is a design law. They're a description of what happens when you give people no reason to look anywhere else.
How it shows up
These patterns show up most clearly in heat mapping and session recording tools, where warm colours trace the F or Z shape across a page. They also show up indirectly in conversion rate data. A call-to-action placed outside the natural scan path (bottom left on a sparse page, for instance) often underperforms an identical button placed on the diagonal. Bounce rate and time-on-page can also hint at pattern failure. If neither pattern shows up in the heat map and attention looks scattered, the page's visual hierarchy is likely unclear.
The Australian context
Australian traffic skews heavily mobile across most industries, and both patterns were originally documented on desktop layouts. On a phone screen, the horizontal component of both the F and Z shape gets compressed toward a straight vertical scroll. Designing an Australian-facing landing page purely around desktop scan-pattern research risks optimising for a device fewer of your visitors are actually using.
Where people get this wrong
Related terms
Common questions
Which pattern should I design my landing page around?
Neither, directly. Design your content hierarchy first, headline, proof, call-to-action, then check with a heat map whether the resulting layout produces a clean scan path. The pattern should emerge from good hierarchy, not dictate it.
Do F-Pattern and Z-Pattern still apply on mobile?
Only loosely. Mobile's narrow width compresses the horizontal movement in both patterns, producing something closer to a straight vertical scroll. Test your actual mobile layout in a heat mapping tool rather than assuming desktop research transfers directly.
How do I know which pattern my page is producing?
Run a heat mapping or eye-tracking tool against real visitor sessions. Warm areas tracing the top and left edge suggest an F-Pattern. Warm areas tracing a diagonal from top left to bottom right suggest a Z-Pattern. Scattered warmth with no clear shape usually means unclear visual hierarchy.
Are these patterns still relevant given how much design has changed?
The underlying behaviour, skimming dense text and scanning sparse layouts diagonally, still holds up in newer studies. What's changed is device mix. Any application of the research needs to account for mobile-first traffic, which most Australian sites now receive the majority of.
Debrief
Get the next one
No spam. No fluff. Just the next article, straight to your inbox.
Keep exploring
About New Rebellion
New Rebellion is a marketing intelligence consultancy. We build tools, score Australian businesses on how their marketing actually performs, and publish Debrief every day. This dictionary is part of how we work in the open.
How we think →