F-Pattern Reading
F-pattern reading is the dominant scan path on text-heavy pages — two horizontal sweeps and a left-edge vertical drift. Here's how to design around it.
F-Pattern Reading
An eye-tracking pattern where visitors scan text-heavy pages in an F-shape: two horizontal sweeps, then a vertical drift down the left edge.
F-pattern reading describes how most people visually scan dense, text-heavy web pages. The eye makes a wide horizontal sweep across the top of the content, a shorter horizontal sweep lower down, and then a vertical pass down the left edge — tracing the shape of the letter F. It was first documented by the Nielsen Norman Group in 2006 across 232 users and roughly 30,000 sessions.
The pattern matters because attention collapses fast: words on the right side of the page and below the second sweep receive a small fraction of the fixations the top-left does. For CRO, that means value propositions, key product claims, and the primary call-to-action belong in the top-left quadrant — and need to be repeated at each natural pause down the page.
The F-pattern is not a reading pattern — it is a scanning pattern. Visitors are filtering, not consuming. They drop into a page hunting for the words that confirm they are in the right place, and they leave the moment that confirmation does not appear in the first few fixations.
It shows up most strongly on long-form content: category pages with intro copy, blog posts, FAQ blocks, and product description sections. Pages built on cards, grids, or strong visual hierarchy break the F and produce different patterns (Z-pattern, layer-cake, spotted). The F is the default when the layout gives the eye nothing to lock onto.
As a sub-pattern of broader attention optimization, the F-pattern is one of the few visual behaviours you can design against directly: place high-value content where the eye lands, and demote secondary content where it does not.
AttentionShare(region) = Fixations(region) / TotalFixations
Fixations(region)
Region fixations
Number of eye-tracking fixations recorded in a specific page region during a session.
TotalFixations
Total fixations
Total fixations across the whole page for the same session set.
AttentionShare
Attention share
Share of total visual attention captured by that region, expressed as a percentage.
A Shopify apparel brand runs an eye-tracking study on its women's denim category page with 40 shoppers. Across all sessions, the page receives 12,000 fixations. The top-left 'hero copy + first product' quadrant alone receives 4,800 of them.
Fixations on top-left quadrant: 4,800
Total fixations on page: 12,000
→ AttentionShare = 4,800 / 12,000 = 40%
The top-left quadrant captures 40% of all attention while representing roughly 25% of the visible area — a textbook F-pattern hotspot. Moving the size-fit reassurance copy and the 'Shop denim' CTA into that quadrant is the highest-leverage change available.
The takeaway is not 'put everything top-left'. The takeaway is that attention is unevenly distributed in a predictable way, and you should match content priority to that distribution. The table below shows roughly how attention falls off across the page regions on a typical text-heavy retail page.
Typical attention share by page region on text-heavy e-commerce pages (eye-tracking, 5 second on-page window).
| Page region | Share of fixations | Avg. fixation duration (ms) | CRO implication |
|---|---|---|---|
| Top-left quadrant | 35-45% | 280-340 | Place primary value prop, hero CTA, key proof point |
| Top-right quadrant | 10-15% | 180-220 | Secondary CTA, trust badge, search/cart |
| Mid-left band (second F-stroke) | 15-20% | 240-300 | Repeat CTA, key benefit bullet, social proof |
| Mid-right band | 5-8% | 150-190 | Demote — supporting copy, decorative imagery |
| Left edge below fold | 12-18% | 200-260 | Section headings, repeated CTAs at natural pauses |
| Bottom-right region | 3-6% | 130-170 | Lowest priority — footer links, fine print |
A useful design test: squint at your page, or blur it in the browser dev tools. If you can still locate the value prop and the primary CTA in the top-left, and the eye finds another CTA at the mid-left band and again on the left edge below the fold, the layout is working with the F-pattern instead of against it.
F-pattern reading FAQ
The Nielsen Norman Group documented it in 2006 from an eye-tracking study of 232 users across roughly 30,000 page sessions. They've replicated the finding multiple times since, most recently in 2017.
No. It is the default on text-heavy pages with weak visual hierarchy — long articles, dense category intros, FAQ blocks. Pages built on strong cards, grids, or imagery typically produce Z-pattern, layer-cake, or spotted scan patterns instead.
F-pattern emerges on text-dominant pages and pulls the eye down the left edge. Z-pattern emerges on visually balanced, sparse pages (think a landing page with a hero image and one CTA) and ends in the bottom-right. They describe different layouts, not different users.
It mirrors. Arabic and Hebrew readers show the same shape flipped — two horizontal sweeps and a vertical scan down the right edge. The principle is identical: front-load value on the side where the eye starts.
Put the product name, lead image, price, and primary 'Add to cart' in the top-left to mid-left zone. Repeat the buy button at the next natural pause — typically after the size selector or after the first scroll length — so the eye finds it again when it drifts back to the left edge.
Partially. On a narrow mobile viewport the horizontal sweeps shrink, and scanning skews more vertical — closer to a layer-cake pattern hitting headings, bold text, and CTAs. The 'front-load top-left' principle still holds for the first viewport.
Run a session-recording or heatmap tool over a few hundred sessions and look at the mouse-movement and scroll-depth heatmaps as proxies for attention. For higher confidence, a remote eye-tracking study with 15-30 participants will reveal the actual fixation pattern.
Burying the primary value proposition in the second or third paragraph, or aligning it centre/right where attention collapses. By the time the eye reaches it, most visitors have already decided whether to stay.
Sometimes — yes. Strong imagery, pull-quotes, and contrasting CTAs deliberately break the scan and create fixation points elsewhere. The F is the default, not a goal; you use it as a baseline and then design interruptions where you want attention.
It's one specific behavioural pattern inside the broader attention-optimization toolkit, which also covers visual hierarchy, contrast, motion cues, and cognitive load. F-pattern thinking governs where content goes; the rest of attention optimization governs how it looks once it's there.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.