F-Pattern Reading
F-pattern reading describes the dominant scan path on text-heavy web pages — two horizontal sweeps and a vertical drift down the left edge. Knowing where attention concentrates lets you front-load value props and place CTAs where eyes actually pause.
F-Pattern Reading
An eye-tracking scan pattern where visitors sweep horizontally across the top of a page, then again lower down, then vertically down the left edge.
F-pattern reading is the dominant scanning behaviour on text-heavy web pages. Eye-tracking studies, originally popularised by Nielsen Norman Group in 2006 and replicated many times since, show that visitors rarely read word-by-word. Instead their gaze traces a rough F shape: a strong horizontal pass across the top of the content, a weaker horizontal pass further down, then a vertical drift down the left margin scanning for keywords.
The pattern emerges whenever pages serve dense copy without strong visual hierarchy — long product descriptions, blog articles, category intros, FAQ stacks. It is a symptom of skimming, not deep reading, and it has direct layout consequences for product pages, collection pages, and checkout copy.
The pattern matters because the top-left quadrant of a page captures a wildly disproportionate share of fixations. On a typical product description block, the first two lines and the leftmost words of each subsequent line get read; everything to the right of the second word, and everything below the fold of the description, is mostly skipped.
F-pattern is one specific behaviour inside the broader discipline of attention optimization — the practice of designing layouts around where eyes actually go rather than where you want them to go. Other patterns (Z-pattern, layer-cake, spotted) appear on image-led or well-structured pages; F-pattern is what you get when hierarchy is weak.
Attention_share(zone) = Fixations(zone) / Total_fixations
Fixations(zone)
Zone fixations
Number of eye fixations landing inside a defined screen zone during a session.
Total_fixations
Total fixations
Total fixations across the full page during the same session.
A Shopify apparel brand runs a 30-participant eye-tracking session on its dress PDP. Across all sessions, the top-left product title and price zone receives 412 fixations out of 1,820 total page fixations.
Fixations on top-left zone: 412
Total page fixations: 1820
→ 22.6% attention share on the top-left zone
Roughly one in four eye fixations on the entire PDP land in a single small zone at the top-left. That is your highest-leverage real estate — value prop, price anchor, and primary CTA should live there, not below the fold.
Use that ratio to audit any text-heavy page. If your strongest selling point — free returns, fast shipping, the hero benefit — is not inside the top-left zone, you are spending attention you cannot get back. The same logic applies to repeated CTA placement: put a buy button at each horizontal sweep, not just at the bottom.
Typical attention share by F-pattern zone on a text-heavy product or article page
| Zone | Approx. attention share | What it does well | What gets missed |
|---|---|---|---|
| Top horizontal bar (first ~150px) | 35-45% | Headline, price, primary value prop, main CTA | Anything past the second line of text |
| Second horizontal bar (mid-page) | 15-20% | Subhead, social proof badge, secondary CTA | Right-aligned content, decorative imagery |
| Left vertical strip | 20-25% | Bulleted benefits, section labels, keywords | Mid-line qualifiers, parenthetical caveats |
| Right column / right of line-end | 5-10% | Sticky add-to-cart sidebar (if pinned) | Long-form descriptions, specs, reviews |
| Lower-right quadrant | <5% | Footer links, legal, related products | Anything you actually need read |
Three layout moves consistently lift conversion on F-pattern pages: lead each paragraph with the keyword (front-loaded sentences), break long descriptions into 2-line chunks with bolded openers, and repeat the primary CTA at every horizontal sweep so the reader never has to scroll back up to act.
F-pattern reading: common questions
Yes, but it compresses. On a phone the horizontal sweeps are shorter and the vertical scan dominates, so the pattern looks more like a narrow ladder. The implication is the same: front-load the first line of each block, because the right side of the screen still gets ignored.
Text-heavy pages without strong visual hierarchy — long product descriptions, blog posts, FAQ stacks, category intros, policy pages. Image-led landing pages and well-structured pages with strong subheads tend to produce Z-pattern or layer-cake scanning instead.
Run a heatmap or session-replay tool on the page. If click and attention heat concentrates in the top-left and along the left margin, with a cold right side, you are seeing F-pattern. Scroll-depth charts that drop off sharply after the first screen are another tell.
F-pattern appears on text-dense pages with weak hierarchy. Z-pattern appears on sparse, image-led pages with clear focal points — eyes sweep top-left to top-right, diagonal down to bottom-left, then across to bottom-right. Use Z-pattern layouts for landing pages, F-pattern-aware layouts for content.
Not necessarily — but anything on the right side should be supplementary, not load-bearing. Reviews, specs, and related products can live there. Your headline, price, primary benefit, and main CTA should not.
Place a CTA at every horizontal sweep zone. That usually means above the fold, again after the second sweep (mid-page), and once near the bottom. Single-CTA pages waste the attention pauses the F-pattern creates.
Yes. Two-line paragraphs with the keyword in the first line outperform dense 5-line blocks because they give each sweep a fresh entry point. Bold the first 2-3 words of each paragraph to reward the left-margin vertical scan.
No — it changes how you write it. Front-load each section with the keyword and the answer, then expand. Featured-snippet ranking benefits from the same structure F-pattern readers reward, so you are optimising for both.
F-pattern is one of several scan patterns attention optimization studies. The broader discipline maps where eyes go on any layout — F, Z, layer-cake, spotted — and aligns your most important elements with the highest-fixation zones.
Partly. Strong subheads, generous whitespace, and visual anchors (images, pull-quotes, callouts) can shift scanning toward a layer-cake pattern where each subhead gets a brief pause. But on any page that lapses into dense prose, F-pattern re-emerges. Design around it, not against it.
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.