WINDWARE.DEV · WEB DESIGN & DEVELOPMENT
Journal
·6 min read

Design Pages for Scanners, Not F-Patterns

Eyetracking shows people often scan text in an F-shape when pages lack formatting. That default is costly. How headings, front-loading, and structure guide attention instead.

Windware Studio· Design & Development Team

Business websites are written as if visitors will read every paragraph. Eyetracking research says they usually will not. When a page presents a wall of unformatted text, people often scan it in a shape that roughly resembles the letter F: a long pass across the top, a shorter pass lower down, then a vertical sweep along the left edge of the content.

That pattern is not a layout goal. Nielsen Norman Group has been clear on the point: F-shaped scanning is a default that appears when the page fails to cue what matters. Important lines on the right or lower down can be skipped simply because of where they sit in the column.


What the F-pattern actually describes

Jakob Nielsen’s original NN/g Alertbox (April 16, 2006) reported eyetracking visualizations in which users often read web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. Kara Pernice’s later revisit (November 12, 2017; last reviewed August 19, 2026) confirms the behavior remains relevant on desktop and mobile, while correcting common misconceptions.

In the F-pattern, fixations concentrate at the top and along the left of the content area:

  1. A first horizontal pass across the upper content.
  2. A second, typically shorter, horizontal pass lower down.
  3. A vertical scan down the left side of that content column.

Implications follow directly. First lines receive more gazes than later ones. The first few words on the left of a line receive more fixations than words farther right. The shape is approximate—sometimes closer to an E, sometimes to an inverted L—but the bias toward top and leading edge is durable.

Pernice also notes what the pattern is not. It describes reading the content area while assessing a page, not the separate behavior of inspecting global navigation to decide where to go next. In right-to-left languages such as Arabic, NN/g observed a mirrored F, as predicted by reading direction.


Why scanners fall into an F—and why that hurts

People tend to F-scan when three conditions coincide: little web formatting (a wall of text without strong headings, bullets, or emphasis), a drive to be efficient, and not enough commitment to read every word. That combination describes much ordinary web use. Visitors want a quick answer, not a dissertation.

NN/g’s judgment is blunt: the F-shape is bad for users and businesses because people may miss important content merely because it sits on the right side of the page or deeper in the flow. Users will not know what they skipped. On responsive layouts, the same F-behavior can land on different words at different viewport widths because text reflows—another reason not to rely on accidental fixation positions.

An everyday analogy helps. If a store aisle has no signs, shoppers still move through it—they just invent a path that minimizes effort. They will not systematically inspect every shelf. Unformatted web text creates the same shortcut economy.


Better scanning patterns—and how to invite them

F-scanning is not the only pattern. In related eyetracking work, Pernice describes others that designers can encourage with structure, including:

  • Layer-cake — eyes move across headings and subheadings and skip denser body text between them.
  • Spotted — readers hunt for distinctive items such as links, numbers, or specific words.
  • Commitment — highly motivated readers fixate on nearly everything (useful when it happens; unreliable as a plan).

The practical design response is to do the work for the reader. Pernice’s antidotes, aligned with the original writing-for-the-web implications, include:

  1. Put the most important points in the first two paragraphs.
  2. Use headings and subheadings that look more important than body text.
  3. Start headings with the information-bearing words (the first two words should still carry the gist).
  4. Visually group small related chunks.
  5. Bold key phrases sparingly and purposefully.
  6. Write links with meaningful words—not “click here.”
  7. Use bullets and numbered lists for processes and inventories.
  8. Cut unnecessary content.
PatternWhat readers doWhen it tends to appearStudio response
F-shapeTop + left bias; skip right/lower textUnformatted prose, low commitmentAdd structure; front-load meaning
Layer-cakeScan headings, skip bodyClear heading hierarchyPrefer this for service pages
SpottedHunt for markersLooking for a fact, link, or numberMake key facts visually distinct
CommitmentRead nearly everythingHigh motivation / high stakesEarn it; do not assume it

A limitation remains: formatting cannot manufacture interest the business has not earned. Motivation and goals still belong to the visitor. What the site can control is whether the path of least effort still lands on the offer, proof, and next step.


What to do on your next content pass

  1. Rewrite the opening so the page’s core answer appears in the first screen of text.
  2. Add a heading every few short sections, each front-loaded with meaning.
  3. Convert long prose into lists where the reader needs steps or options.
  4. Check the right side and lower third for critical claims that only F-scanners would miss—and move or reformat them.
  5. Preview on mobile, where reflow changes which words sit on the leading edge.

The remaining challenge is editorial discipline. Eyetracking does not ask businesses to chase a decorative F in the layout. It asks them to stop leaving attention to chance when a clearer structure is available.


Ready to Discuss Your Website?

If you are planning a new website, a service redesign, or custom development for your business, we’re here to help shape the work.