How Do Users Scan Content? (& Why You Should Care.)

Take Advantage of How Users Scan Content.

There’s no point in fighting the fact that users don’t read content; they scan. A comprehensive eye-tracking study by the Nielsen Norman Group showed that “on the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.” You can counteract scanning “shortcuts” by using proven techniques that take advantage of how users scan content.

There are a variety of factors that will affect how users scan a webpage. These include:

  • The type of task, such as doing research, considering a purchase, browsing for new information
  • The page layout
  • The reader’s level of interest, motivation, and focus
  • The type of page content, such as primarily text, images, or product listings
  • Personal characteristics, such as a tendency to scan even when motivated versus generally taking a detailed approach to reading digital content.

When you understand scanning patterns, you can create digital content that balances how to increase user comprehension, provide a great user experience, and increase the time users spend on your webpages (also know as website stickiness).

How to Improve Website Stickiness: 5 Essential Copywriting Tips

We can study how users scan content to generate better content.

Studies like the one conducted by the Nielsen Norman Groups use heat maps to detect where visitors focus when they first land on a webpage, and then how they proceed to view the page. Significantly, this will depend on many factors related to the particular page and user intent.

The following sections describe common scanning problems–
and how we can leverage them to increase conversion, lower bounce rates, and more.

1. F-Shape Pattern:
The Most Common Way Users Scan Content

F-shape eye-tracking patterns. The F-Shape pattern is common across all types of webpages
The F-Shape pattern is common across all types of webpages.

The F-shape pattern has the broadest application across all types of digital content. It is especially useful with pages that are text-heavy and don’t have much formatting. This is how users often scan content when efficiency is important and when aren’t interested enough to read every word. The F-shape describes how users view the content area of the page only—not when users land on a new section. In that case, they’ll spend more time examining top and left-hand navigation bars.

How Users Scan Content:

  1. Top bar of the F: The user reads horizontally across the upper part of the web copy.
  2. Lower bar of the F: The user then moves down the page a bit and again move across the page to the right, but for a shorter distance than the upper bar.
  3. Vertical Bar: The user vertically scans the left side of the page’s web copy.

Implications for Content Creation:

With F-shape scanning, people miss much of your content. Using proven readability techniques (discussed below) is the best way to counteract this problem. In particular:

  • Value Proposition: Create a strong top line (or several lines) that emphasizes your value proposition and clearly states the purpose of the page.
  • Key Sub-Topics: The center of the diagonal area should contain important sub-topics.
  • Important Content/CTA: The lower bar should consist of short paragraphs or bits of information with important content, such as your CTA.
  • Keywords: Put your most important words (such as keywords) toward the beginning of each line, especially on the lower bar.
  • White Space: Include enough white space for visual comfort.

2. Z-Shape Pattern:
How Users Scan Pages with Minimal Content

Diagram of Z-shape scanning pattern. The Z-shape pattern is best for webpages with minimal content.
The Z-Shape pattern is best for webpages with minimal content,

Pages that are not text-centered and have only a few key elements call for a Z-shape layout. You might imagine this as a landing page with a headline, several bullet points, and a call-to-action (CTA).

How Users Scan Content:

  1. Top of Z: User scans the upper section horizontally, from left to right
  2. Diagonal: Next, the user moves on the diagonal line, down and to the left.
  3. Bottom of Z: Finally, the bottom area is again viewed from left to right.

Implications for Content Creation:

  • Logo: The top-left, the starting point, would be a good place for the logo.
  • USP: The top section would contain the main component, or USP (unique selling proposition), you want visitors to view, such as an action-oriented headline.
  • Secondary CTA: The next natural stop is top-right, which could work for a secondary CTA, such as a login.
  • Hero Image: The central area should keep users interested but doesn’t stop them from scanning down the diagonal line. This element might be a hero image or brief text.
  • CTA Promotion: The beginning of the lower section provides helpful information that promotes your CTA.
  • Main CTA: Draw attention to the CTA in the bottom section.

3. Layer-Cake Pattern:
For Users that Value Efficiency

Diagram of the layer-cale scammomg [atterm. For users seeking efficiency and spotting the right information.
This user wants efficiency reading and ability to spot the right information

A layer-cake layout is great for B2B content, in which business people need to quickly get the gist and quickly identify content the most relevant content. In this circumstance, copywriters must set up written content, especially subheads, in a logical order. Formatting techniques should enhance readability.

How Users Scan Content:

  1. Top section: Think about someone who loves frosting on a cake. The title and top section is the premium frosting area; it gets the most attention.
  2. Subheads: Next, users focus on subheads—the lower layers of icing. Visitors scan the subheads top to bottom, only stopping to read paragraphs if a particular subhead tickles their fancy.

Implications for Content Creation:

  • Descriptive, clear subheads should clearly indicate the topic of the following paragraph.
    • The paragraph under each subhead should be narrow and closely relate to its subhead.
    • Avoid repetition of content.
    • Put important words at the beginning of subheads.

The Commitment Pattern:
The Exception to the Rule

Example of Commitment scanning patterns. This user is highly intersted and motivated.
The commitment patterns shows a highly interested reader(Source: Norman Neilsen Group)

These high-value visitors don’t scan—they read. Reading an article carefully from top to bottom shows commitment; they are highly interested in the topic. Or, they could be motivated by events such as an upcoming exam, an important presentation, or just plain curiosity. While the commitment pattern leads to the greatest comprehension, it is the most time-consuming. 

For digital content, this pattern is most likely to occur when the user knows and trusts the source, has brand-loyalty, or thinks they will find the highest quality, credible content on that website or webpage.

How Users Scan Content:

  1. The visitor reads entire paragraphs or even entire pages.
  2. They may quickly scan headlines first to understand the topic covered, but then they return to the beginning and work their way down.

Implications for Content Creation:

  • High-Quality: Consistently offer and promote high quality, relevant content.
  • Old or Poor Content: Remove or update old or poor-quality content.
  • Audience: Develop content based on the priorities and concerns of your audience.
  • Credibility: Establish your brand as a respected, trustworthy source of information.
  • Links: Identify authorities in your field; get backlinks from and also outbound links to them.
  • Social Sharing: Identify ways to get your content shared on the right social media channels.

Mobile versus Desktop:
Plan Your Layout for Half of All Web Traffic.

Illustration of desktop versus mobile eye scanning patterns. Mobile is dispersed. Desktop is F-Shape.
Mobile users show diverse scanning, rather than the F-shape on the desktop.

Today, mobile accounts for more than half of all website traffic. Not surprisingly, looking at digital content on a laptop versus a hand-help mobile device changes the way we view content. After looking at several studies, I’ve seen disagreement about designing a page for desktop versus mobile.



How Users Scan Content

  • Dispersed or F-Shape: The Norman Nielson study shows that F-shaped scanning applies to both desktop and mobile. Other eye-tracking tests, such from the image above, however, show that mobile viewing is more dispersed or spotted; the smaller screen enables people take in more of the entire screen because of its smaller size.
  • Session Length: Mobile users spend less time on each page than desktop users. However, mobile users read more content overall.
  • Below the fold: A Google eye-tracking study showed that there is no “above-the-fold” on mobile devices; users readily scroll down the screen. As a result, they read through more content and have better comprehension. Further, although people view websites on mobile for less time than on desktops, their attention is more focused and can be directed to the most relevant area of the site. On desktops, surprisingly, users read below the fold more when the pages were longer.
  • Testing your layout: When creating content, always check how webpages will be viewed on desktops and mobile devices.
  • Analyze your company’s website results: As usual, companies will need to test their own content to see what is most popular with their desktop and mobile visitors.

Scanning patterns vary, but readability always matters.

Photo of eye chart. Readability is essential for all scanning patterns
Readability is essential for all scanning patterns.

No matter whether you’re working on a product webpage, blog article, email, or other content, readability will always be a primary factor in website effectiveness. Easy reading webpages go hand-in-hand with audience-appropriate page layout—understanding their demographics, intent, and purpose of the page.
Here are great readability tips for improving scanning and comprehension:

Copy and Typographic Techniques to Improve Content:

Headings are critical for readability and SEO:

  • Create a meaningful H1 title: H1 is your on-page title, the first thing the viewer sees. It should convey what’s in the article, clearly and without hype. Also, the H1 is the primary place for your keywords.

Winning Headings for Blogposts: 10 Killer Tips

  • Provide well-ordered H2 subheads: Your main subheads serve several purposes. They should provide a logical flow, help break up text-heavy pages, and help readers quickly identify the information they want. Use H2 subheads at least every few paragraphs. While the heading hierarchy moves down through H6, they are usually limited to H1, H2, and sometimes H3.
  • Use chunking: Users’ eyes get tired when reading large blocks of text. Break them up in short chunks with frequent subheads, short paragraphs, and bulleted or numbered lists
  • Create distinct subhead sections: The body copy underneath each subhead section should be directly related to the subheading. As for length, each subhead section should have roughly one to three paragraphs; each paragraph should have ideally no more than three sentences. Provide a narrow focus for each section and avoid repetition between sections.

Engage your readers from the start, then with emphasis:

  • Focus on your first sentence: Some readers will instantly gauge your article by the first sentence, so make it count. An interesting fact, statistic, or question can grab this initial attention.
  • Writing an engaging intro paragraph: Many people will continue past the first sentence to understand the thrust of the article and determine if it’s worth moving ahead. Make it engaging, descriptive, and benefit-oriented. Interestingly, an eye-tracking study from EyeQuant showed that 95% of subjects read all or part of introductory paragraphs when they were in boldface.
  • Employ techniques for emphasis: Encourage readers to move forward by using boldface, color, italics, different size fonts, and more (but don’t go crazy!). Users are also drawn to bulleted and numbers lists that highlight interesting details.

Looking sloppy reflects poorly on your brand.

  • Edit fearlessly: Take a hard line in removing unnecessary content
  • Proofread: Fix typos, grammar mistakes, awkward phrases, run-on sentences, and other problems that reduce credibility. When possible, have others proofread your work. If you do it on your own, make sure you have a clear head.

Avoid These Sloppy Copy and Content Mistakes

Visual and Graphic Techniques for Better Layout:

Illustration of different webpage layouts.
  • Enhance layout with grouping: Use boxes or borders to visually group small amounts of related content.
  • Create white space: Chunking, margins around images, and simply leaving open space gives tired eyes a momentary break so they can continue viewing.
  • Pop important elements: Make your most essential and action-oriented elements pop—such as your key benefits and CTA.
  • Guide and focus viewers: Highlight important page elements and lead viewers through the page using“visual hierarchy” signals. These include the size of images and text, contrasting colors, column and grid alignment, and proximity between different elements on landing pages.
  • Leverage the Left-Side: According to this study from the Nielsen Group, the left side of the page gets more attention (80%) than the right (20%) across all articles, e-commerce sites, and search engine results. This reflects the F-shape scanning pattern discussed earlier.
  • Use high-quality images: The Nielsen Norman Group study concluded that large, high-quality images draw attention and encourage people to move forward in the article. They responded especially well to people facing forward, who seemed inviting and approachable.

Leverage How Users Scan Website Content.

Your digital content takes many forms, from blog articles to emails, to product pages, and more. While the readability and scanning tips offered in this article are a great place to start, nothing is guaranteed. To figure out what works for your content, let testing be your watchword. Test how audiences respond to various layouts and content formatting, and work with writers and designers who are knowledgeable about these issues.

For high-quality content that improves website results, choose Boston-based Westebbe Marketing specializing in high-performing original content. Contact us online, call us at (617) 699-4462, or email us.

If you like this article, please share it!

Leave a Reply