The F-pattern is the way people scan text-heavy web pages: they read across the top, read across again a little lower, then run their eyes down the left edge.
Jakob Nielsen named it in 2006 after eye-tracking 232 users across thousands of pages.
The Z-pattern is a related layout idea for sparse pages, where the eye moves top-left to top-right, cuts diagonally down, then crosses the bottom.
What the F-shaped pattern means
Nielsen Norman Group describes three moves: a horizontal sweep across the upper content area, a second shorter sweep below it, and a vertical scan down the left side.
The heat map looks like a capital F, though the lower bar is sometimes missing.
The pattern is not a law of reading.
A 2017 NN/g update by Kara Pernice found it still showed up on desktop and mobile, but mainly when three things happened at once: the text had little formatting, the user wanted to be efficient, and the user was only moderately interested.
The same research names other patterns, including layer-cake (reading headings only), spotted (hunting for a specific word or number) and commitment (reading nearly everything).
The practical point for CRO: an F-pattern is a symptom of a page that makes people work.
Words at the start of lines and in the first two paragraphs get seen.
Words at the end of long lines and deep in paragraphs mostly do not.
Z-pattern web design
The Z-pattern is a design heuristic rather than an eye-tracking finding.
It assumes a page with little text, like a homepage hero or a simple landing page, where the eye starts top-left (logo), moves right (navigation or a key link), drops diagonally across the main image, and ends bottom-right, where designers often put the call to action.
It is usually traced back to the "Gutenberg diagram" that newspaper designer Edmund Arnold is credited with in print layout.
Treat it as a starting sketch for a hero section, not as proof of where visitors look.
NN/g's list of observed scanning patterns does not include a Z.
| F-pattern | Z-pattern | |
|---|---|---|
| Origin | Eye-tracking research (NN/g, 2006 and 2017) | Print and web layout convention |
| Fits | Text-heavy pages: articles, product descriptions, search results | Sparse pages: heroes, simple landing pages |
| Design response | Front-load key words, headings, bullets, bold | Logo top-left, key element top-right, CTA bottom-right |
| Main risk | Treating it as a goal instead of a warning sign | Treating a sketch as evidence |
How it shows up in A/B testing
Nobody A/B tests "F-pattern versus no F-pattern." What teams test is the fix NN/g recommends: break up dense text so the important words sit where scanning eyes land. Our database has several clean examples.
- DRIP Agency replaced a dense slider explaining BLACKROLL's Recovery Boots modes with scannable, benefit-led copy per mode. Revenue per user rose 10.6% (about €9.8K extra during the test), though the case study does not state significance.
- ConvertPolo added short benefit bullets to Theater's socks product page, which had only basic information. Conversion rate rose 18.16% and revenue per visitor 16.37%.
- Dave Diederen reorganized a USP checklist into a compact two-column grid with an icon per benefit, for +14.36% revenue per visitor.
Left-versus-right placement tests show why the F-pattern is a hypothesis, not an answer.
CZC.cz tested a ratings slide-in on each side of its product pages.
The left slide-in won with +7.5% revenue over 90,000 visitors, while the right slide-in showed no gain.
But Noble Studios found the opposite for Travel Nevada: share and email widgets on the right side won on newsletter sign-ups (no figure published). Context decides, so test it.
@DaveDiederen
DRIP AgencyExample: rewriting a product description
Say a product page opens with a 120-word paragraph where the shipping promise sits in the last sentence.
Scanners read the first line, skim down the left edge, and never see it.
The fix: a short headline that leads with the main benefit, three bullets that each start with the key word ("Free returns", "Ships in 24 hours", "Fits sizes 6-14"), and bold only on the one detail that answers the biggest objection.
Then run it as a normal test of control and variant, measuring conversion or revenue per visitor rather than heat maps alone.
A heat map can tell you where eyes or clicks went; only the test tells you whether it made money.
Related terms
- Banner blindness: people skip anything that looks like an ad, which often falls outside the F.
- Information scent: why the first words of headings and links matter so much to scanners.
- Above the fold: the deeper guide to what belongs in the first screen.
- The full test database.
- Back to the CRO glossary.