How people scan a page

1.People scan before they read

Most people scan a website or application instead of reading everything.

Try it yourself. Open any website, notice where your eyes go first, and then come back. The scan usually looks something like this:

1. A heading
2. An image
3. Buttons
4. A small bit of text
5. Another heading
6. Maybe a scroll

Only when something feels important or interesting do people slow down and start reading. You probably do the same. Most of us do.

No one has time to read everything. That is why where we place content matters.

2.The F-shaped pattern

You have probably heard people say that users read websites in an F-shaped pattern. That is partly true, but do not treat it as a law. How people scan depends on the content, the layout, and what they are trying to find.

Try reading this example as you normally would:

The eyes may move across the page in three simple movements:

1. Across the first line
2. Across a shorter line below it
3. Down the left side of the page

The F-pattern is especially common on text-heavy or dense pages, including:

• Blogs and articles
• Documentation
• News sites
• Search results
• Long product descriptions
• Dashboards
• Dense lists

NN/G's original research found that people often scan across the top first, move across a shorter horizontal area below it, and then continue downward along the beginning of each line.

3.Put important words first

Imagine scanning an article called Best React Libraries for 2026. Attention may be distributed something like this:

Notice what happens: the beginning of each section becomes important. Users can decide whether to keep reading from the first few words.

4.The Z-shaped pattern

Now imagine a simple marketing homepage. It is not a wall of text. It has a few important elements with plenty of space around them, so the eye may move in a Z-shaped pattern:

Why? Think about a hero section. The user might notice:

1. Logo or navigation
2. Top-right action
3. Main headline
4. Primary CTA or visual

These four points create a path that resembles the letter Z. This pattern is common on simple pages with a clear hero, limited text, and a primary action.

The Z-pattern is especially useful on pages with a small number of clear focal points, including:

• Marketing pages
• SaaS websites
• Simple hero sections
• Portfolios
• Product landing pages
• Campaign pages

5.Patterns are not rules

F- and Z-patterns are observations of common scanning behavior, not strict templates that every design must follow.

User attention changes based on:

• Images
• Motion
• Contrast
• The user's task
• The text and content
• Familiarity
• The device
• The layout

As discussed earlier, scanning behavior depends on what the user wants to accomplish and the kind of product they are using.

6.Create a clear focal point

A focal point is the element that attracts the eye first. It could be a heading, image, number, call to action, or animation.

In the Linear example above, the large product-development heading is the focal point. It leads the page because it has the strongest size, weight, and contrast.

Everything competes

SALE

NEW PRODUCT

BIG HEADING

GRADIENT

GET STARTED

50% OFF

CHAT WITH US

One clear focal point

7.Primary, secondary, and tertiary hierarchy

We use these three levels constantly. The idea is simple:

• Primary — what is most important right now
• Secondary — useful information that supports the primary content
• Tertiary — optional actions or details the user may not need immediately

Imagine a job-posting page:

8.Visual weight

Visual weight is how much attention something attracts. Different properties can add visual weight:

Whitespace also changes visual weight. Giving an element more room separates it from its surroundings and makes it easier to notice.