What Is the F-Pattern in Web Design? How Users Really Scan Your Pages

What is the F-pattern in web design?

The F-pattern is a scanning behavior in which a reader who skips word-by-word reading moves their eyes across a web page in a shape resembling the letter F. They read horizontally near the top, then read a shorter horizontal line further down, and finally scan the left edge vertically.

Eyetracking research gave the F-pattern its name, and it has since become one of the most quoted ideas in web design. However, I see it misread all the time. The F-pattern is not a layout template. It is a user behavior that appears when content fails to support scanning.

I have worked on websites and ad landing pages since 2012. In this guide I walk through the original research, the difference between the F-pattern, the Z-pattern and the layer-cake pattern, how reading changes on mobile, and what you can actually do about it in your designs.

Where did the F-pattern come from?

Jakob Nielsen of Nielsen Norman Group introduced the idea in April 2006. His team tracked the eye movements of 232 users as they looked at thousands of web pages. When the researchers stacked the heatmaps, the same shape kept showing up across different sites and tasks: two horizontal bars and one vertical stem.

Nielsen drew three practical lessons from the study. First, users rarely read text word by word. Second, the first two paragraphs must state the most important information. Third, subheads, paragraphs and bullet points should start with information-carrying words that users notice while scanning down the left side. You can read the original Nielsen Norman Group article in their archive.

Above all, these three rules still hold almost twenty years later. In other words, the real value of the F-pattern lies less in the letter itself and more in the writing discipline it points to.

What are the three movements of the F-pattern?

The research describes three movements in sequence. Each one covers less ground than the one before it, which also shows how attention fades as people move down a page.

1. The top horizontal sweep: Users first read across the upper part of the content area. This forms the top bar of the F.
2. A second, shorter sweep: The eyes drop a little and read across again, but they cover less of the line this time. This forms the lower bar.
3. The vertical scan on the left: Finally, users scan down the left side of the content. Sometimes they move slowly and systematically; sometimes they jump. This forms the stem.

In practice, the shape is not always a neat F. Sometimes a third bar appears, and sometimes the pattern looks more like an E or an inverted L. What matters is the principle: attention concentrates at the top and on the left, and it drops quickly toward the right and the bottom.

Is the F-pattern still valid today?

Yes. Kara Pernice revisited the topic in November 2017 and argued that the F-pattern is misunderstood but still relevant. Newer eyetracking sessions showed the same behavior on desktop and on smartphones. One of the example heatmaps in her article combines data from 47 people.

The update also includes a finding about language direction. In right-to-left languages such as Arabic, the pattern mirrors itself. So the cause is not a particular layout; it comes from reading direction and the economics of attention.

Specifically, Pernice warns about a common mistake. Some designers treat the F-pattern as a goal and arrange content to fit the letter. The research says the opposite: this is a behavior you want to prevent. You can read the full 2017 update from Nielsen Norman Group for the details.

When does the F-pattern appear?

According to the updated research, the F-pattern shows up when three conditions meet. Knowing them matters, because each one maps to something a design or content team can influence.

• The text lacks web formatting: The page has few or no subheadings, bold words or bullet points. The eye finds nothing to hold on to.
• Efficiency comes first: Visitors want an answer, a price or a phone number, and they want it fast.
• Commitment is low: Readers may like the topic, but they have not decided to invest in the whole text.

Look at that list again and you will notice that the first condition sits entirely in your hands. You cannot change how rushed your visitors feel. You can, however, make the text easy to scan. That way you nudge people toward a far more efficient reading behavior than the F.

Is the F-pattern good or bad for users?

It is bad. Nielsen Norman Group puts it plainly: F-shaped scanning is bad for users and businesses, because users may skip important content simply because it appears on the right side of the page. That single sentence, therefore, tells you how to use the concept.

In practice it means this: if your visitors read in an F, your page is not helping them. A delivery time, a return condition or a price buried in the right half of a paragraph probably never reaches anyone's eyes. Moreover, visitors do not realize they missed something. They simply conclude that the page lacks what they need, and they leave.

Therefore your goal should not be to mimic the F. Instead, steer people toward a better way of reading. At the same time, use what the F-pattern teaches you: attention clusters at the top left, so that is where your most valuable information belongs.

What is the layer-cake pattern?

The layer-cake pattern is a scanning behavior in which the eyes rest mostly on headings and subheadings. Users skim the headings one by one, and when a section looks relevant, they drop into its body text. On a heatmap this produces horizontal stripes that look like the layers of a cake.

In her 2019 article on scanning patterns, Kara Pernice calls the layer-cake pattern by far the most effective way to scan a page, apart from reading every word. As a result, users grasp the structure quickly and spend time only on the part they actually need.

What makes this pattern possible is well-written subheadings. If your headings are vague or clever but empty, the layer-cake pattern collapses and people fall back into the F. In short, clear and informative subheadings are your strongest design tool against the F-pattern.

What other scanning patterns exist?

Besides the F and the layer cake, Nielsen Norman Group describes several other scanning patterns. Each one also reflects a different mindset and responds to a different content structure. The table below summarizes them and what they mean for your design.

Pernice's article on text scanning patterns ranks the F as the least effective of these. The spotted pattern does slightly better, and the layer-cake pattern comes second only to full reading.

What is the Z-pattern and how does it differ from the F-pattern?

The Z-pattern is a layout approach that assumes the eye travels from the top left to the top right, then diagonally to the bottom left, and finally to the bottom right. Designers typically recommend it for pages with little text: a campaign page, a minimal homepage hero or a single-purpose landing page.

However, there is an important difference between the two ideas. The F-pattern comes straight from eyetracking data and published research. The Z-pattern, by contrast, is mostly a composition rule from print and graphic design traditions. I would also note that the 2017 Nielsen Norman Group update on the F-pattern does not mention the Z at all.

So treat the Z-pattern as a layout idea for sparse pages rather than as a research finding. With the logo at the top left and the main call to action at the bottom right, the eye follows a natural path. However, once dense text begins, the Z geometry breaks down and text scanning rules take over.

Which pages suit the F, Z or layer-cake approach?

The right approach depends on the page type and on how much text it holds. On the same site, one page may work best with a Z layout while another needs to encourage layer-cake reading. I use the rough mapping below when planning page templates at the start of a project.

• Campaign and landing page heroes: Little text and one goal. A Z layout makes sense here, since the eye flows from logo to headline to visual to button.
• Blog posts, guides and FAQs: Dense text. Clear subheadings and strong first sentences are essential to trigger layer-cake reading.
• Category and product listings: People compare. Left-aligned product names, clear prices and consistent cards make spotted scanning easy.
• Service pages: A mixed structure. A Z-like intro at the top, followed by sections with clear subheadings, usually works well.

The question of how pages relate to each other goes beyond a single template. I cover that in my guide to information architecture.

Why do users look at the left side more?

Because in left-to-right languages the eye starts each line on the left and often drops down before it reaches the end. In a 2017 Nielsen Norman Group eyetracking study with more than 120 participants, 80% of fixations fell on the left half of the screen and 20% on the right half. The original 2010 study had measured 69%.

Moreover, the bias is even stronger on search results pages, where 94% of fixations landed on the left side. You can find the full numbers in the horizontal attention study.

In other words, this data points in the same direction as the F-pattern. A critical message in the right column may draw less attention than an ordinary sentence in the left column, no matter how colorful it is. I see this often on business websites that use the sidebar for key offers. A sidebar suits supporting information; your main message belongs in the left-aligned content flow.

Is the top of the page still that valuable?

Yes, though less absolutely than before. A 2018 Nielsen Norman Group study analyzed more than 130,000 fixations from 120 participants. People spent about 57% of their page-viewing time above the fold. The first two screenfuls, up to 2160 pixels, took 74% of viewing time, and the first three screenfuls reached 81%.

For comparison, the share above the fold stood at 80% back in 2010. The drop shows that people now scroll long pages more readily. Still, the core rule has not changed: the closer information sits to the top, the more likely people will read it. The scrolling and attention study has the details.

Put this together with the F-pattern and the picture becomes clear. The most valuable area is the top left, and attention fades to the right and toward the bottom. I explain how to plan the rest of the journey in my article on designing the scroll experience.

How should you format text for the F-pattern?

Your aim is to keep even F-pattern readers from missing key content, and to move them toward layer-cake reading. The Nielsen Norman Group advice and what I have tested in practice overlap heavily. These are the checks I apply, in order, when making a text scannable.

1. Put the key point in the first two paragraphs: Lead with the conclusion, the price range or the main idea; do not save it for the end.
2. Use frequent, clear subheadings: A heading every 150 to 250 words gives the eye a step to land on.
3. Start lines with information-carrying words: The eye reads the first two or three words as it moves down the left edge.
4. Bold key phrases sparingly: The less you use emphasis, the more it counts.
5. Use lists and tables: Do not bury comparisons, steps or features inside paragraphs.
6. Cut filler: Intro sentences that say nothing slow scanning more than anything else.

This text discipline has a name: UX writing. You will find the rules that extend to buttons, forms and error messages in my UX writing guide.

How should you write subheadings and first words?

In the F-pattern, the vertical scan happens along the left edge. For that reason, the first words of subheadings, paragraphs and list items get far more attention than the rest of the page. Wasting those words means wasting your most valuable space.

For example, a heading like "What you need to know about our service" tells the scanning eye nothing. Instead, choose something like "Setup takes five business days", which carries the message in its first words. The same applies to lists: if five items in a row start with "This means", readers switch to the bypassing pattern and ignore the opening words altogether.

Also, watch heading length. A heading that wraps onto a second line loses its right-hand part to the scan. You can check drafts quickly with the headline analyzer. Typography also shapes readability directly; see my guide on choosing web typography.

How does visual hierarchy break the F-pattern?

Visual hierarchy means expressing the importance of elements through size, color, contrast and white space. A strong hierarchy pulls the eye out of the mechanical left-edge scan and takes it to the points you choose. In effect, you manage spotted scanning on purpose.

For instance, picture a benefits section with three short headings, two lines of text under each, and a small icon on the left. The eye catches a vertical rhythm between icons and headings, and it gets the message even if it skips the right side of the text. Written as a single paragraph, the same content would probably get only its first line read.

That said, hierarchy depends on contrast. If headings and body text differ too little in size and weight, the eye cannot tell them apart and layer-cake reading never starts. To think about contrast as size and space, not only color, read my article on using contrast in design.

How do line length and paragraph structure affect scanning?

Overly long lines feed the F-pattern more than anything else. On a line that runs from one edge of a wide screen to the other, the eye tires before reaching the end and drops down. As a result, the right half of the paragraph barely gets any attention.

That is why a sensible content width matters on desktop. In practice I aim for roughly 60 to 80 characters per line. This range lets the eye reach the end of a line comfortably and return to the start of the next one without losing its place. On wide screens, a centered column usually works better than text stretched across the full width.

Likewise, paragraph structure matters just as much. Each paragraph should carry one idea and state it in the first sentence. That way, an eye moving down the left edge can pull out the skeleton of the text by reading only first sentences. Journalists call this the inverted pyramid, and it remains one of the most reliable structures for web copy.

How does the F-pattern work on mobile?

The F-pattern appears on mobile too; the current Nielsen Norman Group research shows it in smartphone sessions. On a narrow screen, however, the shape tightens, because lines are short and horizontal movement has little room.

In addition, another behavior stands out on mobile: the marking pattern. The user fixes their gaze on one spot and swipes the content underneath it. According to the research, this happens more on mobile than on desktop. Consequently, long unbroken paragraphs can slide past the fixed gaze without registering.

My practical advice for mobile is simple. Keep paragraphs to two or three short sentences, use subheadings more often than on desktop, and do not wedge critical information between images. I explain how to plan the mobile layout from the start in my guide to mobile-first design.

How do you apply it to ecommerce and service pages?

On a product page, the F-pattern bites hardest in the description and specifications. Shoppers read the product name and price, then scan the description down its left edge. If shipping time, return terms or sizing information sits in the middle of a long paragraph, most people will miss it.

Fortunately, the fix is usually simple: pull critical purchase details into short, left-aligned lines with icons. Moving specifications from paragraphs into a two-column table also speeds up scanning a lot. I cover the other elements of a strong product page in my ecommerce product page guide.

On service pages, meanwhile, the position of the call to action becomes critical. A small button squeezed into the right margin may draw less attention than a prominent button inside the left-aligned content flow. You will find detailed examples of wording and placement in my CTA guide.

How can you test whether your page falls into the F-pattern?

An eyetracking lab is out of reach for most businesses. Still, you can gather strong clues about how people scan your pages. The key is to know what each tool measures and to read the results carefully.

• Scroll maps: These show how much of the page visitors see. If critical content sits in a zone most people never reach, the problem is obvious.
• Click maps and heatmaps: These show which elements attract interaction. Mouse movement is not eye movement, though, so do not read this data as eyetracking.
• Session recordings: These let you watch where users pause and which sections they rush past.
• Five-second tests: Show someone the page for five seconds and ask what they remember. Usually they recall what sat at the top left and in the headings.

You can collect part of this data for free; I explain setup and interpretation in my Microsoft Clarity guide. To measure the text itself, the readability checker quickly flags long sentences and dense paragraphs.

What are the most common F-pattern mistakes?

Because the F-pattern is such a popular concept, people misapply it often. These are the mistakes I run into most in practice.

• Using the F as a layout template: Arranging content into an F shape does the opposite of what the research recommends.
• Applying one layout to every page: A sparse campaign page and a long guide do not produce the same scanning behavior.
• Placing critical information in the right column: Prices, offers or contact details in a sidebar often go unseen.
• Bolding everything: When emphasis is everywhere, it is nowhere, and spotted scanning finds nothing to stop on.
• Treating heatmaps as eyetracking: Mouse data helps, but it does not equal gaze.

Most of these problems surface quickly in a general UX review. You can follow the step-by-step method in my UX audit guide.

How does the F-pattern relate to SEO and AI search?

There is no direct link; Google has no ranking signal called the F-pattern. Even so, scannable writing brings indirect SEO benefits. A page that answers the question in its first paragraph and splits content under clear subheadings helps both people and search systems understand it.

For example, this structure gives you a clear edge with featured snippets. A question-style subheading with a short, direct answer right below it makes an ideal passage for Google to quote. I explain how I build that structure step by step in my guide on winning featured snippets.

A similar logic applies to AI-powered search: a section that makes sense on its own has a better chance of getting cited. So the steps you take against the F-pattern also lay solid groundwork for search visibility.

How do we use this in web design projects?

When we start a website project, my team and I first sort the page types. Which pages carry little text and a single goal, and which ones are long and information-heavy? That split then tells us which reading behavior to expect on each template and which one we want to encourage.

Next, we handle content and design together. Drawing boxes before the copy exists is the shortest route to an F-pattern page. When we build the heading hierarchy, the opening paragraphs and the placement of calls to action alongside the design, users lose their way far less often.

After launch, we test our assumptions with scroll and click data. This measurement step in our web design process lets us improve later versions based on observation rather than guesswork.

F-pattern checklist: a quick summary

First, run through the questions below before you publish a page. If you can answer yes to all of them, your visitors will not miss the important parts, even when they scan in an F.

• Does the most important information sit in the first two paragraphs?
• Do the subheadings, read on their own, summarize the page?
• Do paragraphs and list items open with information-carrying words?
• Does any critical detail hide in the right column or mid-paragraph?
• On mobile, are paragraphs short and sections frequent?
• On sparse pages, does the eye flow naturally from the logo to the main button?

Put simply, the F-pattern is not a shape to copy but a sign of a problem to solve. When you build pages people can scan, visitors spend less effort, find what they need faster, and you get your message to the right person at the right moment.