F-Pattern

011 min

The F-Pattern at a glance

• What it is: Heat maps of unformatted text pages show most fixations in an upper bar, a shorter lower bar, and a strip down the left edge.
• Where it comes from: Nielsen Norman Group (NN/g), a usability research firm, reported it in 2006 and re-tested it in 2017.
• Apply it by: Putting the key point in the first two paragraphs and starting headings and bullets with the words that carry meaning.
• It backfires when: You treat the F as a layout target. NN/g calls it the result of weak formatting, and a page with clear subheadings produces a different pattern.

022 min

What the F-pattern actually says

NN/g describes the F-pattern as three eye movements on a page of text. First, the eyes move across the upper part of the content area. This forms the top bar of the F. Next, they move down a short distance and read across again, usually over a shorter stretch. This forms the lower bar. Last, they move down the left side of the content. This forms the stem.

The shape comes from where eyes stop. An eye-tracking system records each stop, called a fixation, and each fast jump between stops, called a saccade. A heat map adds up the fixations of many people. Red marks the most fixations, yellow fewer, blue the fewest, and gray none. On an F-pattern page the red area forms the letter.

Two consequences follow, and NN/g states both. The first lines of text get more fixations than later lines. And the first few words at the left of each line get more fixations than the words further along it. That second point is why a heading that starts with a filler word loses readers early.

The F is a rough shape, not a precise one. NN/g says the pattern is rarely a perfect F. A reader who spots an interesting paragraph lower down may read across again, which makes the shape look like an E. A reader who reads across only once makes a shape like an upside-down L, with the crossbar at the top.

The pattern also has a stated scope. It describes how people look at the content area of a page, meaning the article text or product description. It does not describe how they look at navigation bars when they decide where to go next.

There is no formula here. The F-pattern is an observed average of gaze, so you cannot calculate it. You can only check whether a given page produces it, by testing with real readers or by reading a heat map.

031 min

Where the F-pattern comes from

NN/g published the F-pattern in April 2006, in an article by Jakob Nielsen. The article reports an eye-tracking study. In its own words, NN/g recorded how 232 users looked at thousands of web pages. The article presents the gaze data as heat maps.

The article shows heat maps for three kinds of page: an "about us" article on a company site, a product page on an e-commerce site, and a search engine results page. NN/g says that if you focus on the red areas, all three heat maps show the expected F pattern, with differences. On the product page the second bar sits lower, because a product image sits between the first and second line of text. On the results page the second bar is longer than the first, because the second headline is longer.

Nielsen did not start from nothing. In 1997 he had reported that people scan web pages instead of reading them. That report found that 79 percent of test users always scanned any new page, and only 16 percent read word by word. The 2006 study added a picture of where the scanning goes.

The origin has two limits that matter later. NN/g published the study as a web article and a downloadable report. And the heat maps are aggregates, so they show where many people looked, not what any one person did.

042 min

Why people scan in an F-shape

NN/g's 2017 follow-up names three conditions that produce the F. The page, or a part of it, has text with little or no formatting for the web, such as no bold words, bullets or subheadings. The reader wants to finish quickly. And the reader is not so interested that they will read every word.

The argument rests on effort. Readers try to get what they need with the fewest fixations. Without signals that point to the important words, NN/g says people spend most of their fixations near where they start reading, which is usually the top left word of the text. The stem forms as readers move down the left edge, where each line starts.

NN/g also says the F-pattern is the default when nothing on the page draws the eyes to meaningful information. That wording matters. It means the F is what you see when design gives the reader no help, not a reading habit built into people.

NN/g adds a note about expectations. Years of reading have likely taught people that important content comes before less important content. But no reader believes the content was arranged so that the important things form an F.

This explanation is NN/g's reading of its own data. The 2017 article gives it as an interpretation, and I found no experiment in it that changed one condition at a time and measured the pattern. Treat it as a reasoned explanation, not a tested mechanism.

051 min

Left-side attention, measured

One part of the F-pattern has a number attached. The stem exists because gaze piles up on the left side of the page. NN/g measured this twice.

In its first measurement, in 2010 on a 1024 by 768 pixel monitor, 69 percent of fixations on general web pages fell on the left half of the screen. In the 2017 round, with more than 120 participants and over 130,000 fixations, the share was higher. NN/g's finding is that 80% of fixations fell on the left half of the screen, with the remaining 20% on the right half.

Two details change how to read that number. First, the 2017 round used a 1920 by 1080 monitor, a larger screen than the 2010 round. NN/g says the wider screen moved the peak of attention only about 200 pixels to the right. Second, the figure excludes search results pages. NN/g analysed those separately.

The same data shows a limit of the stem. The leftmost 10 percent of the screen got only 6 percent of fixations. NN/g gives two reasons: left navigation bars, which readers look at only when they need them, and responsive layouts that leave empty margins on each side. So the stem sits at the left edge of the text, not the left edge of the screen.

062 min

How the F-pattern shows up in real pages

NN/g's own gaze data gives named cases, and they show the pattern both present and absent.

A page with the F-pattern: a History.com page of prose with very little formatting. NN/g shows an F-shaped gaze plot of a participant scanning that page, which contains much prose and very little formatting. The plot numbers each fixation in order. Another case is TigersinCrisis.com. NN/g's 2017 heat map aggregates 47 people who were trying to learn how many Sumatran tigers live in the wild, and the red area forms an F, "same today as 11 years ago", in NN/g's words.

A page with a mixed pattern: on a Wikipedia article about a dancer, an aggregate of six readers shows the F on the left of the page and a different pattern, the spotted pattern, on the right. In the spotted pattern, readers skip chunks of text and fixate on single words that stand out, such as links, bold words or digits. Those readers had a task, finding when the dancer began training, and the digits 1960 drew attention.

A page without it: on Yamaha.com, a reader researching how to winterize a boat engine scanned to the subheadings, which appeared as bold, light blue text against plain black body text. NN/g calls this the layer-cake pattern, because the fixations form horizontal stripes of subheadings with gaps of unread text between them.

That scenario adds a decision the definition does not contain. The PM should not move the key feature to the top left by instinct. They should first ask whether the text needs formatting at all. A bulleted list with bold labels would change the pattern, so the top-left rule would no longer apply.

072 min

A second case: the same text, a different task

The cases above vary in layout. One variable is easy to miss: the reader's task.

NN/g's Wikipedia example shows it. The same page produced an F on one side and a spotted pattern on the other. The readers wanted a specific fact, a date of training, so they looked for digits. In NN/g's description, people choose words in the spotted pattern for one of two reasons: they stand out visually, or they resemble a word the reader is looking for, such as capital letters for an address or digits for a number.

A second case comes from NN/g's layer-cake research. On TechCrunch, a reader scanned to a subheading that stood out from the body text, then read the text below it. They then scanned more subheadings. The subheadings were descriptive, so the reader could skip text they did not need. The same research says this pattern works only if readers can see the subheadings easily and the subheadings summarise their sections correctly.

So the difference between the two cases is not the topic. It is whether the page gave the eye something to land on. In the first case the page had one visual cue, a distinct number. In the second it had a full set of them. Without either, NN/g expects the F.

For a PM or designer this changes the question. "Does my page look like an F?" is the wrong test. The useful test is "what is the reader trying to find, and what on the page tells their eyes where it is?"

082 min

Applying the F-pattern

The F-pattern is better used as a warning about weak formatting than as a template. NN/g's recommendations for reducing it are these:

1. Put the most important points in the first two paragraphs. Readers read more of the first paragraph than the second.
2. Use headings and subheadings that look more important than body text, so readers can tell them apart quickly.
3. Start headings, subheadings and bullets with the words that carry the most information. If a reader sees only the first two words, they should still get the gist.
4. Group small amounts of related content visually, for example with a border or a different background.
5. Bold important words and phrases, and use bullets or numbers for lists and processes.
6. Write links with informative words instead of "click here" or "more". NN/g adds that this also helps readers who hear links read aloud.
7. Cut content that does not need to be there.

Choose by the task. If readers must find a fact in a long text, give them cues for spotted scanning: bold terms, lists, numerals. If they must choose a section, give them subheadings for the layer-cake pattern.

Check that you are not over-applying it. A page where every phrase is bold, or where subheadings are so bright they look like ads, loses the benefit. NN/g warns that subheadings made too bright or too large can look like promotions and be ignored. NN/g describes a related behavior, banner blindness, in which people ignore elements that look like ads. It is an instance of selective attention.

Do not place important words at the start of every line just to exploit the F. The first words of a line do get more fixations, but that treats the symptom. Fix the formatting first.

091 min

How to spot F-scanning on your own pages

You cannot see a reader's eyes in analytics, but you can check for observable signs.

• Heat maps or gaze replays show the F. Eye-tracking tools aggregate fixations, and a red top bar and left strip on a text page is the sign.
• Users miss information that is on the page. In moderated tests, ask a task question whose answer sits in the middle of a paragraph, and count who finds it.
• Support questions repeat facts that the page states. If the answer is in the second half of a long paragraph, the readers may never have fixated on it.
• Narrow screens change the result. NN/g notes that in liquid layouts the text flows differently by window size, so the same reader would fixate on different words on a phone and on a desktop.

101 min

The F-pattern versus nearby concepts

Several concepts get mistaken for the F-pattern. The main axis that separates them is what drives the gaze: the page's formatting, the reader's task, or a layout convention.

NN/g lists the four text-scanning patterns from worst to best as F, spotted, layer-cake and commitment. Its 2019 article calls the layer-cake pattern, aside from reading almost every word, by far the most effective way to scan pages.

The Z-pattern gets its own caution. This article cites no eye-tracking study for it, so do not treat the F and the Z as the same kind of evidence.

112 min

Where the evidence is contested

The F-pattern is widely repeated, so check what the evidence shows.

The strongest challenge to its generality. EyeQuant, a company that sells attention-prediction software, wrote in a blog post that it had analysed an eye-tracking study of 99 websites, each viewed by 46 participants with realistic tasks. It reports that out of those 99 websites it found no individual heat map that closely resembled an F. The bias it saw instead was a single blob, mostly toward the middle of the screen and slightly to the left.

This challenge has limits. EyeQuant says it studied only where people looked in the first 15 seconds on average. It could not rule out an F forming over a longer time. It is also a vendor blog post, not a journal paper. And the two studies measure differently, since NN/g aggregates heat maps for text pages, while EyeQuant looked at whole websites at first view.

Where they agree. Both sources find that attention leans left. EyeQuant's blob sits slightly left of center, and NN/g's data puts 80% of fixations on the left half. The dispute is over whether the left-heavy bias takes the shape of an F.

Support from a conference paper. In 2007 Shrestha, Lenz, Chaparro and Owens presented a study of a text-based page and an image-based page on an e-commerce site, during browsing and searching tasks, at the Human Factors and Ergonomics Society annual meeting. The paper's title names the F pattern. A secondary summary says it found the same fixation pattern on the text-based page whether the task was searching or browsing. The full text sits behind a publisher block, so this article relies on the title and that summary, not on a reading of the paper.

A limit on where it applies. In April 2026, Kang, de Rijke and Oosterhuis analysed an eye-tracking dataset of carousel interfaces. They found that the F-pattern holds only for vertical examination and not for horizontal swiping. The paper says earlier work had assumed that behaviors found on single-list search pages, such as the F-pattern, also apply to carousels.

NN/g's own caveats. Its 2006 article says the F is "a rough, general shape rather than a uniform, pixel-perfect behavior". Its 2017 article calls the pattern one of several, and not a perfect F.

What to do while this is unsettled: treat the F as a tendency on long, unformatted text, and test your own page. The advice that follows from it, putting the key point first and formatting for scanning, does not depend on the F being universal.

122 min

How the F-pattern changed since

The F-pattern has changed in meaning more than in findings.

1997. Nielsen reported that most people scan pages. This came before the F, and it says nothing about the shape of the scan.

2004 to 2006. NN/g documented the layer-cake pattern in a study in 2004. In April 2006 it published the F-pattern. NN/g's 2006 text calls it the "dominant reading pattern" on the pages it tested.

2017. NN/g re-tested the F with new eye-tracking. NN/g's 2017 summary says the F is still present both on desktop and on mobile. NN/g also reports that the F appears mirrored in right-to-left languages such as Arabic. The 2017 article also changes the framing. It says that scanning does not always take the shape of an F, that the F is negative for users and businesses, and that good design can prevent it.

2019. A separate NN/g article groups the text patterns into F, spotted, layer-cake and commitment, and ranks them by effectiveness.

The popular reading. Many designers took the 2006 article as a layout rule: put important things in an F. NN/g's 2017 article says many have referred to the research, sometimes correctly and often misinterpreting it. NN/g now describes the F as bad for users and businesses, and as something good design can prevent. That makes it a result to avoid, not a shape to design for.

2026. Outside NN/g, researchers tested whether F-based assumptions carry over to a newer interface type, the carousel. They found the F holds vertically but not horizontally.

?8 questions

Questions people ask

§9 sources

Sources