How people read a website: a UX analysis about user’s behaviour

This article, based on a presentation I delivered on UX design at a conference in Oslo last year, delves into how users navigate web pages, the reasons behind their behavior, and strategies to effectively capture their attention.

Users Don’t Read; They Scan: Why?

When examining online behavior, it’s essential to recognize a fundamental truth: users rarely read everything; they scan. Several factors contribute to this behavior:

• Information Overload: Daily, users encounter vast amounts of data. To cope, they’ve developed the ability to quickly scan pages to extract essential information.
• Time Constraints: In today’s fast-paced world, web visitors decide within seconds if a page is worth their time. If they don’t quickly find what they’re seeking, they move on.
• Adaptive Behavior: Online, the brain operates differently than when reading printed text. It seeks visual cues like headings, keywords, and images, scanning rather than reading line by line.

How Does the Brain Read Online?

The human brain is remarkably adaptable, capable of recognizing words even when partially distorted, as demonstrated by the example: “J4m41s 1l n3 f4ut p3rdre l’3sp01r d4ns l4 v13.” Online, this adaptability is further enhanced; we don’t read each letter but rather the overall shape of familiar words.

Consider advertisements on social media: they scroll by rapidly, yet our brains capture the gist without reading every word. Misusing this principle, such as overusing abbreviations or technical jargon, can hinder comprehension and increase bounce rates.

Different Web Page Scanning Patterns

User behavior online varies based on factors like task objectives, familiarity with the site, and page complexity. Key identified scanning patterns include:

1. The “F” Pattern

This is the most common pattern, identified through eye-tracking studies. Users start by reading the top lines, then move down vertically, making horizontal stops where headings or key points catch their attention.

For instance, a product page on an e-commerce site might feature a large product image at the top, a catchy title, followed by key information in bullet points, forming an “F” shape that facilitates quick scanning. Notably, Google’s search results often follow this “F” pattern.

2. The “Z” Pattern

This pattern follows a “Z” shape, where users scan the top line, move diagonally to the opposite corner, and finish on a horizontal line at the bottom. It’s effective for simpler pages, like landing or home pages, with a clean design centered on a call to action in the bottom right.

An example is a homepage where users see a compelling headline at the top, a main image, and a prominent CTA at the bottom. Conversely, a cluttered page disrupts this natural flow.

3. The “Layer-Cake” Pattern

Here, clear and distinct headings and subheadings allow users to quickly scan and identify sections of interest. This is particularly effective for long articles or educational content.

For example, an article on “Adopting a Sustainable Lifestyle” might be divided into sections like “Reducing Waste,” “Promoting Eco-Friendly Transportation,” and “Choosing Renewable Energy,” each introduced by a visible heading for easy navigation.

4. The “Spotted” Pattern

Common on social media, users jump from one visual element to another, seeking points of interest such as images, keywords, or highlighted elements. This pattern suits platforms where user attention is particularly fleeting.

5. The “Marking” Pattern

Users identify a section they find relevant and focus solely on it, effectively “marking” it visually while ignoring the rest of the page. This often occurs in technical documents or product sheets where specific information is sought.

An ideal example is a well-structured product sheet with clearly outlined specifications. A poor example scatters important information, making it hard to quickly locate key data.

6. The “Bypassing” Pattern

In this pattern, users intentionally skip sections they deem irrelevant, jumping directly to content of interest. They might overlook text blocks, ads, or images, especially on cluttered or poorly organized pages.

These reading patterns aren’t exclusive to the web; they apply to various mediums presenting content, such as posters, signs, or comics.

Capturing Users’ Attention

To effectively engage visitors, employing certain strategies is essential:

1. Tell a Story

   Content should be simple and well-structured. Visitors should immediately grasp the site’s value proposition. Each page needs a clear objective and an easily understandable message.

For instance, a startup offering financial tools might greet visitors with a clear message like “Manage your finances easily and securely,” increasing the likelihood of retention. Conversely, a site filled with technical jargon may deter users.

Clear Visual Layout

An intuitive design featuring prominent headings, short paragraphs, and relevant visuals is crucial. Images should draw attention without compromising message clarity.

A good example is magazine articles in publications like “National Geographic,” where attractive images, clear headings, and well-defined text blocks enhance readability. In contrast, sites overloaded with ads and flashing banners distract users and reduce focus.

3. Visible and Intuitive Calls to Action

Every website has a goal: to sell, generate sign-ups, or encourage sharing. To achieve this, calls to action—commonly referred to as “CTA”—must be highly visible and easy to understand.

A successful example would be a donation site for a charity where the “Donate” button is prominent and well-placed.

On the other hand, a site with poorly positioned or hard-to-find calls to action will miss the opportunity to convert visitors.

How to Design Websites That Convey the Right Amount of Information While Simplifying the User Journey

To design optimal websites that provide the right amount of information while staying user-friendly, it’s essential to follow a few user experience best practices. Here’s a successful scenario for how users interact with information on a website:

1. The user has a question.
2. They quickly find the page with the answer.
3. They understand the information they find.
4. They trust the information provided.
5. They know what to do next or don’t need additional details.

Keys to a Good User Experience

• Icons for Visual Guidance: Use icons to simplify navigation and quickly illustrate the content of accompanying text. Remember, the brain prefers shortcuts when processing information.
• Short, Clear Sections: Break content into smaller sections with titles summarizing each paragraph to make scanning easier.
• Limited Text Width: Restrict text width for better readability and faster reading.

Best Practices for Scannable Content

• Highlight Key Points Early: Place the most important details within the first two paragraphs of a page. Users are impatient and want to know immediately if the content is relevant.
• Visible Headings and Subheadings: Ensure titles stand out clearly from the rest of the text so users can identify them quickly.
• Front-Load Key Words: Start headings and subheadings with the most informative words so users can grasp the section’s purpose at a glance.
• Visually Group Content: Use borders or background colors to group small chunks of information for easier navigation.
• Bold Important Words or Phrases: Highlight key points to draw attention.
• Use Informative Links: Avoid generic phrases like “click here” or “learn more.” Descriptive links are especially helpful for users relying on screen readers, such as visually impaired individuals.
• Lists with Bullets or Numbers: Organize steps or items using bullet points or numbered lists to make information digestible.
• Eliminate Unnecessary Content: Remove anything that doesn’t add value or clutters the page.

By applying these principles, websites can effectively balance information delivery with a smooth and intuitive user experience.

The importance of content above the fold

The “Fold” Concept: More Than Just for the Web

The concept of the “fold” didn’t originate with the web—it was first used by newspapers to grab attention. A bold headline and an eye-catching image placed above the fold invited readers to explore further and generated interest.

Studies show that the eye is naturally drawn to the top-left corner of a page. This makes it a smart choice to place important information in that area to ensure it gets noticed first.

Conclusion

The way users interact with websites is rooted in human psychology and the need to quickly process vast amounts of information. By designing with these principles in mind, you can create a website that resonates with your audience and achieves meaningful results.

Ready to improve your website? Let’s talk!