Watch someone open a long article and their eyes do something fairly predictable. A sweep across the top. Another sweep a little lower and a little shorter. Then a slow crawl down the left margin, hunting for anything worth stopping on. That path traces a rough capital F, which is where the name comes from.
Nielsen Norman Group has tracked the behavior with eye-tracking hardware on both desktop and mobile screens. What comes out the other end is heat maps and fixation data, not click counts.
The numbers behind it are old and still uncomfortable to read. In Nielsen’s 1997 usability research, 79% of test users scanned every new page on sight, and only 16% read word by word (Nielsen Norman Group, 1997).
What Is F-Pattern Reading?
Eye-tracking studies on text-heavy pages keep producing the same picture. Readers move left to right near the top, come back for a second shorter pass lower down, then drop into a vertical run along the left edge, tracing a shape close to the capital letter F.
Worth being clear about what it isn’t. It’s not a design instruction, and it isn’t an order readers consciously commit to. It’s a description of what the eye does when a page gives it no better path to follow.
| Movement | Direction | What It Forms |
|---|---|---|
| First scan | Left to right, near the top | The F’s top bar |
| Second scan | Left to right, shorter and lower | The F’s lower bar |
| Final scan | Top to bottom, along the left edge | The F’s stem |
It surfaces constantly during usability testing on pages built from dense, unbroken paragraphs. A 2017 study of TigersinCrisis.com is a clean example, with nearly all reader attention clustered in the first few paragraphs of body text.
Who Discovered the F-Pattern and How?
Jakob Nielsen put a name to it in 2006.
The finding came out through the Nielsen Norman Group, the usability research and user experience consultancy he co-founded with Don Norman.
The study ran 232 participants across thousands of web pages with eye-tracking cameras, logging where each person’s gaze landed and how long it stayed there (Nielsen, 2006).
Two things get recorded. Fixations are the brief pauses where the eye actually takes something in. Saccades are the fast jumps that carry the gaze from one fixation to the next, and mapping them gives you the full path of movement rather than a set of disconnected dots. Pool enough of both across enough people and the result is a heat map, red marking the areas that got looked at most.
One of the earliest examples came from a page about the 1900 Galveston storm. A heat map aggregating gazes from more than 45 people showed that same red, F-shaped cluster at the top and left edge of the article.
Why Do Users Read Web Pages in an F-Shape?
Reading every word costs more effort than most pages are worth to the person reading them.
Western reading habits run left to right and top to bottom, so the eye starts in the upper left corner by default, drifts rightward, then drops.
The shape needs a dense block of text with barely any formatting to work against. It needs a reader who wants the task over with. And it needs that reader to be uninvested enough that reading every line feels like a waste. Take away any one of those and the F breaks down into something else.
Attention runs out quickly, which is the part most content teams underestimate. On an average page visit, people read at most 20 to 28 percent of the words in front of them (Nielsen, 2008).
Most of what’s left concentrates near the top, in the space visible without scrolling. That’s above the fold, where impressions form in seconds.
Lines also lose words toward the right as the eye tires. Content without a clear visual hierarchy leaves readers guessing at what mattered.
Nielsen Norman Group’s 2017 study of a History.com article about the September 11th anniversary showed it plainly. Fixations piled onto the opening paragraph and a bulleted list near the top. The video player and the sidebar got almost nothing.
Information scent plays a role too.
When the first few words of a line promise something useful, the eye lingers. When they don’t, it moves on, and reads even less than it would have.
How Is F-Pattern Reading Measured?
Eye-tracking hardware records fixations and saccades in real time, and the raw data gets rendered into heat maps and gaze plots afterward.
Tools like Tobii cameras capture where the pupil points multiple times per second, which builds a precise timeline of attention.
A heat map compresses that timeline into color. Red for heavy attention, blue or nothing at all for the areas the eye skipped.
A gaze plot keeps the individual dots and the lines connecting them. Useful when you want to watch one person’s path instead of a group average.
The scale of the published research is worth knowing. Nielsen Norman Group’s combined eyetracking work spans 3 studies over 13 years, covering more than 500 participants and 750+ hours of session time. One number that holds across it: 80% of viewing time lands on the left half of a page, versus 20% on the right half (Nielsen Norman Group, 2017). The early F-pattern heat map from the early 2000s pooled gaze data from more than 45 people reading a single article.
Outside a lab, teams approximate all this with cheaper proxies. Heat map tools like Crazy Egg or Hotjar, plus scroll depth and click data from whatever analytics platform is already installed.
Those proxies won’t hand you a literal F shape. But a steep scroll drop-off paired with clicks bunched on the left side of a layout points at the same underlying behavior.
How Does F-Pattern Reading Compare to Other Scan Patterns?
Eye-tracking research has documented several scanning behaviors, and the F is only one of them.
Which one shows up depends on the page itself. How much text it holds, how that text is formatted, what the visitor came to do.
| Pattern | Shape | Typical Page |
|---|---|---|
| F-pattern | Two horizontal stripes, one vertical stripe | Dense, unformatted text blocks |
| Layer-cake pattern | Repeating horizontal bands | Pages with frequent subheadings |
| Spotted pattern | Scattered fixations, no clear shape | Pages scanned for one specific detail |
| Gutenberg diagram | Diagonal sweep, corner to corner | Evenly distributed, uniform content |
| Z-pattern | Top bar, diagonal, bottom bar | Sparse pages with strong visual anchors |
Layer-cake scanning is what happens when readers jump straight from heading to subheading and skip nearly all the paragraph text in between.
Nielsen Norman Group documented that one in a 2004 study, two years before the F-pattern research went public.
Spotted scanning looks messier on a heat map. Someone hunting for one specific thing, a phone number or a date or a single link, ignores everything around it.
The Gutenberg diagram and the Z-pattern both belong to sparse pages rather than text-heavy ones. A landing page built around one headline, one image and one button pulls the eye through a Z or a diagonal sweep, never an F.
Formatting is what decides it. Add subheadings and short blocks and an F tends to collapse into a layer cake. Strip a page back to one clear message and it drifts toward a Z or a Gutenberg sweep instead.
When Does F-Pattern Reading Not Apply?
The pattern needs a wall of text with little formatting to form around. Remove that and several page types fall outside it completely.
- Pages that run on images, video or product photography leave almost no text to scan, so no F ever forms
- Symmetric, balanced layouts spread content evenly and pull the eye through a Gutenberg-style diagonal sweep instead
- Short single-screen pages built around one message run out of content before a pattern can develop
- Task-driven interfaces like forms and checkout flows get read linearly rather than scanned
A single-screen page usually centers on one call-to-action, and a visitor either takes it or leaves. There’s no long column of text for an F to wrap itself around.
Forms sit at the opposite extreme. Someone filling out a shipping address reads every field on that part of the user interface, because skipping one breaks the task.
What ties all of this together is that F-pattern reading is a byproduct of scanning long, unformatted text. Where there’s little text, tight symmetry, or a task that has to be completed, the behavior has nothing to attach itself to.
Is the F-Pattern Still Valid Today?
It still holds, more than two decades after Nielsen first documented it.
Kara Pernice and the Nielsen Norman Group re-ran the eye-tracking research in 2017, eleven years on from the original, and found the same shape on desktop and mobile alike.
The replication also caught something the 2006 work couldn’t. Readers of right-to-left languages such as Arabic scan a mirrored F, moving right to left.
A separate study by the German Research Center for Artificial Intelligence tested smartphone reading directly and confirmed the pattern survives there.
- 60% of readers worked through one block of text at a time before scrolling for more
- 20% read an entire screen’s worth of content, then scrolled to replace it fully
- 20% read line by line, scrolling almost continuously to keep new text flowing into view
What’s changed is the interpretation, not the finding.
Nielsen Norman Group has pushed back hard on treating the F-pattern as something to design toward. It’s the default that appears when nothing guides the eye. Not a template anyone should be copying.
In a mobile-first design world with shorter attention spans and more competing content, that distinction matters more than it did in 2006.
How Do You Design Content for F-Pattern Reading?
You can shrink the damage without fighting how people naturally scan. The order below follows attention rather than effort, and each step leans on the formatting choice already made in the one before it.
- Put the point of the page in the first two paragraphs, before any supporting detail
- Break long text into subheadings so the eye has more than one entry point
- Lead each subheading with its most informative word, not a warm-up phrase
- Bold the 2 or 3 phrases per section a scanning reader most needs to catch
- Turn parallel points into a bulleted or numbered list instead of a paragraph
- Cut any sentence that doesn’t change what the reader does next
Nielsen’s 1997 rewrite study put numbers on what this does. A scannable layout alone raised measured usability by 47%. Concise writing added 58%, and combining scannable, concise and objective writing produced a 124% improvement over the original page (Nielsen, 1997).
Step 3 carries more weight than it looks like it should.
A 2009 Nielsen Norman Group test asked 80 participants to judge a link’s topic from just its first 11 characters. The links came from real sites including Amazon, Chase Bank and Dell, and chopping the words that short still worked whenever the lead word carried the meaning.
More white space around a list or a short paragraph does something similar. It gives the eye somewhere to land that isn’t the next line of dense text.
None of this fights the F-pattern directly. It’s user-centered design applied to how people actually behave rather than how a style guide wishes they would.
What Tools Test F-Pattern Behavior on a Website?
Different tools pick the behavior up at very different levels of detail.
Eye-tracking hardware such as Tobii is the only category built specifically to record fixations and saccades, either in a lab or a moderated remote session. It captures the actual gaze path instead of a stand-in for it, and it can separate a real fixation from a glance in passing. The cost is the setup, plus a participant pool small enough that you’re reading trends and not populations.
Nielsen Norman Group’s own eyetracking methodology report runs 159 pages and packs in 65 tips for running a study that produces valid data. That alone tells you how much can go wrong with the hardware when the setup is sloppy.
Heat map and session tools like Crazy Egg and Hotjar sit at the other end. Browser scripts that log clicks, scrolling and mouse movement across live traffic, with no recruiting and no lab. A small team can install one in an afternoon. The catch is that mouse movement is a rough stand-in for where eyes actually go, and sometimes a bad one.
Crazy Egg puts its own install base at more than 300,000 customers across 14 years of heat map tracking, which says something about how far the category has spread past usability labs.
Usability testing platforms such as UserTesting record real participants narrating their thinking while they work through a task. Slower and pricier per person than a script, but it’s the only setup that shows why someone scanned past a section instead of just confirming that they did.
Heat maps tell you where people looked. The narrated sessions are the only thing that gets near why. Most teams end up running both, at different points in a redesign.
FAQ on What Is F-Pattern Reading
Is F-Pattern Reading the Same as Skimming or Scanning?
No.
Scanning and skimming describe the general habit of moving quickly through text instead of reading in full.
F-pattern reading is one specific, documented shape that scanning takes on dense, unformatted pages, sitting alongside the layer-cake and spotted patterns.
How Does Banner Blindness Relate to F-Pattern Reading?
Banner blindness is a separate finding. Users ignore anything that looks like an ad, wherever it sits on the page.
Nielsen Norman Group’s 2017 heat maps showed ad units picking up almost no fixations while body text a few inches away collected a full F-shaped pattern.
Does F-Pattern Reading Apply the Same Way on Mobile Screens?
Not identically.
The shape holds on phones, but responsive layouts reflow text at every screen width, so one page produces a different F on a phone than it does on a desktop.
The behavior stays constant. The words it happens to capture don’t.
What Common Design Mistakes Weaken F-Pattern Layouts?
Generic link text like click here strips out the scent that guides the F’s vertical stripe.
Centering body text breaks the left edge the eye relies on.
And long paragraphs with no visual grouping force readers into a slower, less accurate scan than they’d otherwise manage.
What Should You Fix First When F-Pattern Reading Hurts a Page?
The pattern breaks down fastest at the top of a page, so the first fix is always the opening two paragraphs and the first heading. That zone collects the largest share of a visitor’s fixations before attention starts falling off.
- Rewrite the opening two paragraphs and the first heading
- Add subheadings every 2 to 3 paragraphs down the page
- Fix link and label text last, once the structure holds
That order follows attention, not workload. Fixing subheadings before the opening paragraph spends effort on a stripe most visitors never reach.
The trade-off is tone, and it’s a real one. Format every page for this treatment and long-form writing flattens into something closer to a spec sheet.
Weigh that against broader web design principles before committing a full page to the rewrite.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- What is Backend in Web Development? - September 13, 2026
- What is Frontend Development? - September 11, 2026
- How to Make a Button in Figma: Design Best Practices - September 10, 2026
