F-Pattern and Z-Pattern: How Users Actually Scan Your Website
Eye-tracking research shows that users don’t read web pages—they scan them. This article explains the F-pattern and Z-pattern, how these scanning behaviors work, and how to design layouts that align with natural eye movement to improve clarity and conversions.
Most people don't read websites — they scan them. This isn't a pessimistic take on user behavior; it's a well-documented finding that should shape every layout decision you make. Understanding how users move their eyes across a page tells you exactly where to place your headline, your CTA, and your most important content — and where not to waste space.
Two scanning patterns dominate across different page types: the F-pattern for text-heavy content, and the Z-pattern for visually structured pages. Knowing when each applies — and how your design can work with or against them — is one of the most practical insights from decades of eye-tracking research.
The Research Behind Eye-Tracking Patterns
The F-pattern was identified by Nielsen Norman Group in a landmark 2006 eye-tracking study that observed hundreds of users across thousands of web pages. Researchers found that users reading text-heavy pages consistently followed the same sequence: a full horizontal sweep across the top, a shorter horizontal sweep slightly lower, and then a vertical scan down the left edge.
The Z-pattern emerged from similar research on pages with less text and more visual structure — landing pages, homepages, and signup pages where the layout itself guides attention rather than the content density.
One important nuance from NNG's later research: the F-pattern isn't inevitable. It tends to emerge when content lacks clear structure — when there are no strong headings, no scannable visual hierarchy, and no clear hierarchy to guide the eye. Well-structured pages produce a different scanning behavior, sometimes called the "layer-cake" pattern, where each heading triggers a full horizontal read. The F-pattern is often a symptom of poor formatting, not just a fixed fact of human perception.
The F-Pattern: How Users Scan Text-Heavy Pages
The F-pattern has three stages:
- First horizontal sweep: Users read across the full width near the top — typically the headline, first sentence of a section, or a subheading. This sweep is the most complete read on the page.
- Second horizontal sweep: Further down, users make another horizontal movement, but shorter than the first. They're looking for something relevant before deciding whether to read more carefully.
- Vertical scan: Users then scan down the left side of the page, picking up beginnings of lines, subheadings, or list items. The right side of the page receives very little attention.
What the F-Pattern Means for Content Design
Front-load every sentence and heading. Because users read the beginning of each line more than the end, put the most important word or phrase at the start. "Conversion rates improve when CTAs are above the fold" gets read. "Above-the-fold placement of CTAs improves conversion rates" may lose the key point.
Use your headings as standalone messages. A visitor scanning the left edge of your page will read your H2 and H3 headings and almost nothing else. Each heading should tell enough of the story that someone skimming only headings still gets the key takeaways.
Don't put critical content in the right column. Sidebars, right-aligned callouts, and content placed in the right half of a text-heavy layout are largely invisible to scanning users. If it matters, put it in the main left-anchored flow.
Break text into scannable units. Long paragraphs trigger the F-pattern at its most extreme — users give up reading and fall back to vertical scanning only. Short paragraphs (2–4 sentences), bullet lists, and subheadings break the page into scannable layers that earn more full-width reads.
When to Design for the F-Pattern
- Blog posts and long-form articles (like this one)
- Documentation and help center pages
- News articles and editorial content
- Search results pages
- Email newsletters
The Z-Pattern: How Users Scan Visually Structured Pages
The Z-pattern appears on pages where visual elements structure the layout more than text density. Rather than reading left-to-right line by line, the eye moves in a Z shape:
- Top bar left to right: The eye enters at the top left (where logos typically live) and moves across the navigation to the top right (where nav CTAs, login buttons, and key links sit).
- Diagonal: The eye drops diagonally across the page, picking up the primary headline, hero visual, and any supporting elements in the center.
- Bottom bar left to right: The eye lands at the bottom left and sweeps right — where the primary CTA typically lives on landing pages.
What the Z-Pattern Means for Landing Page Design
Logo top left, CTA top right in navigation. This is where the Z begins. A secondary CTA in the nav ("Sign In" or "Try Free") catches the first rightward sweep before the user has read anything else — useful for visitors already familiar with your product.
Value proposition along the diagonal. The diagonal sweep passes through the center of your hero section. Your headline, key benefit statement, and hero visual all sit in this zone. What the user sees in this sweep shapes their decision to stay or leave.
Primary CTA at the end of the bottom sweep. The bottom-right position is where the Z concludes — and where a visitor who has completed the mental Z is most primed to take action. This is why right-aligned or center-right CTA placement consistently outperforms left-aligned on minimalist landing pages.
This pattern reinforces everything in our above-the-fold design guide — the elements that live in the Z path are the ones that determine whether a visitor converts or exits.
When to Design for the Z-Pattern
- Landing pages and homepages
- Signup and trial pages
- Product pages with strong visual hierarchy
- Minimalist pages where visuals do more work than text
- Ad-targeted pages where the visitor has a specific intent
The Layer-Cake Pattern: What Good Structure Produces
The F-pattern is often treated as a fixed truth, but Nielsen Norman Group's own follow-up research found that it's more of a failure state. It emerges when pages lack clear structure — when headings are weak or absent, when paragraphs are dense, and when there's no visual hierarchy to anchor the eye.
When you structure content well — with clear H2 and H3 headings, short paragraphs, and meaningful visual breaks — users stop following the F-pattern and instead read each heading fully before deciding whether to read the supporting paragraph. This produces a "layer-cake" pattern: alternating full-width reads at headings and selective reads below them.
The practical implication: you have more control over user scanning than the F-pattern literature suggests. Good formatting pulls users out of the F and into more engaged reading. Every subheading you add is an opportunity to earn a full horizontal read that the F-pattern would have skipped.
Applying Both Patterns to Conversion Rate Optimization
Most websites need both patterns — the F for content pages (blog, docs, case studies) and the Z for conversion pages (homepage, landing pages, trial signup). The design decision is recognizing which mode each page is in and structuring accordingly.
Practical audit questions for each page type:
| If it's a content page (F-pattern)... | If it's a conversion page (Z-pattern)... |
|---|---|
| Does every H2 work as a standalone message? | Is there a CTA in the top-right nav position? |
| Are paragraphs 3 sentences or fewer? | Does the headline sit in the diagonal path? |
| Does each sentence front-load the key point? | Is the primary CTA at bottom-center or bottom-right? |
| Is there anything critical in the right column? | Does the CTA pass the blur test? |
| Do bullet lists replace dense paragraphs? | Is text density low enough for Z to work? |
How to Test Your Layout Against These Patterns
The blur test: Screenshot your page and apply a 10–15px Gaussian blur. On a conversion page, you should be able to trace the Z path — the nav elements, the headline zone, and the CTA should all remain visible while decorative elements fade. On a content page, your headings should remain legible while body text blurs out. Run a visual hierarchy analysis to get a scored view of which elements are winning attention and which are getting ignored.
In BlurTest's first week of analyses, over 300 landing pages were reviewed. A consistent finding: pages designed as conversion pages (Z-pattern intent) but structured with too much text density forced the user into F-pattern scanning behavior — meaning the CTA got caught in the "right side ignored" zone of the F, rather than at the natural endpoint of the Z. Fixing layout density alone shifted CTA visibility scores from the 40s into the 80s on several analyzed pages.
The 5-second test: Show your page to someone unfamiliar with it for exactly 5 seconds, then cover the screen. Ask: what did you notice first? What could you click? For a Z-pattern page, the answer should be the headline and the primary CTA. For an F-pattern content page, the answer should be the headline and the first subheading. If neither is memorable, the scanning pattern isn't guiding attention where you need it.
Once you've identified layout issues through these tests, use A/B testing to validate specific changes — heading placement, text density, CTA position. Understanding the scanning pattern tells you what to test; the test tells you whether your fix actually worked for your specific audience.
Mobile: Different Screens, Similar Principles
On mobile, both patterns compress. The F-pattern remains relevant — mobile users scan even faster than desktop users, and the left-edge anchoring is if anything stronger on narrow screens. The Z-pattern adapts to single-column layouts: the top bar (nav), a central value proposition area, and a full-width CTA at the bottom.
The most important mobile implication: because there's no right column, content that would be invisible in a desktop F-pattern now gets surfaced. But the scanning speed is higher, so front-loading becomes even more critical. Your first sentence on every section needs to earn the next one.
Read our landing page optimization guide for how these principles apply to the full page structure, including how visual hierarchy and CTA placement work alongside scanning patterns to drive conversions.