Enhancing scannability in UX for a seamless user journey

When users land on your website, it only takes them 15 seconds to decide whether to leave or stay. During those 15 seconds, they will quickly scan the page to determine if the site can offer them value.

If the user is met with dense paragraphs and long-winded descriptions, they will likely click the back button and find a website that provides a better user experience (UX).

The best UX designers understand the importance of scannability and how it affects the user journey. Scannability is especially important where content consumption is the first step to conversion.

Scannability allows your target audience to access the most important information quickly and easily.

Learn more about scannability, how it affects your UX, and what tips to follow to inject scannability into your site’s design.

Don't let UX problems go unnoticed

Use Dovetail to analyze all your customer interviews and uncover hidden UX issues that are costing your business every day.

Analyze with Dovetail

Scannability is a formatting technique that lets the target audience easily read and understand the body of words. Scannability compensates for the fact that most people on the internet don’t read the content—they scan it instead.

When your target audience lands on your website, they want to get through the words quickly and easily. Your audience expects the most important information to be readily available and visible to them, even when reading fast.

When a business presents its content plainly, the target audience will likely stay on the site longer. Users are also likely to engage with your content more. In other words, your site’s value should be crystal clear and not hidden behind a body of pointless descriptions or drawn-out explanations.

People scan because there’s often a lot of information to go through. They might have to look at multiple sites to find the information they are looking for.

Research revealed that 79% of people scanned any web page they landed on. Only 16% of people read web pages word for word.

There are various reasons why people prefer scannable content, including the following:

• Reading on a screen is more difficult and 25% slower than reading on paper.

• While on the internet, people feel the need to be doing something. Reading isn’t one of them. Most people feel they should be clicking on content, sharing, or following.

These reasons, coupled with the abundance of online websites and information, mean more scanning and less word-for-word reading.

Is content still impactful if the largest portion of your target audience scans instead of reads word for word? Well, yes. Although online users often scan, they still learn a lot of information. However, designers must format information to suit the audience’s scanning pattern.

Fortunately, this is where scientific research comes to the rescue. Research has revealed four scanning patterns that people use while reading content on websites.

F-shaped

Because English is read left to right, top to bottom, scanning patterns for English readers tend to favor top lines and left sides with the higher lines being read a bit further since they are likely just scanning. This results in a scanning pattern that looks like a capital F.

F-shaped is the most common scanning pattern.

Spotted

Spotted is a sporadic pattern where a reader moves across the text quickly. Usually, the reader is looking for something specific, such as an address, date, or price. They might also scan in a spotted pattern when the text is styled in a way that draws their attention.

Layer-cake

In this pattern, the reader focuses on the headings and subheadings first. When the subheading catches their eye, the reader will read the content below it more intently.

The layer-cake scanning pattern looks like horizontal stripes with blank spaces between them. The blanks represent frosting as it would appear in a layered cake.

Committed

While much of your audience scans content, a portion reads word for word. This type of reader wants to learn. They trust the source, are loyal to the brand, and have full confidence that they can find information on your site. The committed pattern is thorough and looks at all key areas of the page.

Zigzag

This scanning pattern is most common with a two-column layout or when the content sections are visually divided. The reader’s eye will move from left to right, starting at the upper right corner and back, then again.

Scannable content does more than let your audience find information faster. It also significantly improves how a user interacts with your site.

Here are some of the benefits of a scannable website:

• Enables the user to complete tasks on the site faster

• Increases the user’s recollection

• Reduces errors in the user’s comprehension and recollection

• Helps the user better understand the website’s structure

• Lowers bounce rates

• Improves the site’s credibility, likability, and ease of use

• Improves search engine optimization (SEO)

• Increases the likelihood of return visits

Overall, scannability keeps your target audience engaged. Engaged customers are happy customers who are more likely to return to your site.

You’ll need to integrate some best practices to improve your site’s scannability. Here are the best practices you should know about:

1. Use lots of negative space in your design

Too much tightly packed content is unscannable and bad for UX while using lots of white spaces in your content makes it easy for readers to scan. White space reduces visual clutter and draws attention to the most important parts of your content.

Add white space between paragraphs, after images, and between sections and headings.

2. Ensure your content is easy to read

You have decided to keep reading this article because you saw value in it. This might not have been the case if our content was drawn out and full of blocks of unscannable text.

When designing a page, break down large blocks of text into shorter paragraphs as they are easier to scan.

The paragraphs should only contain a few sentences each. Cover one idea per paragraph to ease comprehension and recollection.

3. Use a visual hierarchy

Visual hierarchy refers to arranging content on a page in a way that promotes scanning and easy comprehension. You will typically put the most important content in the most prominent sections.

One way to highlight the most important content is by using specific formatting, like making text bold or italic. This helps users immediately understand which content is important.

You can also play around with the following design factors to create a visual hierarchy and scannable sections:

• Color: Bright colors stand out, so use them to highlight important content sections.

• Contrast: Contrasting sections using colors, formatting, or fonts makes people curious. The reader will always gravitate toward the brighter-looking or unique elements on the page.

• Size: Larger elements attract more attention. For example, making the subheading larger draws the reader’s eye to that point.

• Proximity: When elements are close together, the reader assumes they are related. Whenever you have two ideas you want readers to connect, put them close together.

4. Infuse bullet and numbered lists into your content

Snapshots of important information are more scannable when presented as bullet points or a numbered list. These formats break the monotony of paragraphs and force the reader to be alert and comprehend the core message. It can also help in making content more concise.

5. Use images and videos

Using visual elements is one more way to help the reader focus on the key message. More importantly, people comprehend visuals faster than the written word.

With whatever medium you choose, make sure it supports the surrounding messaging.

6. Consider adding a table of contents

In cases of blog posts and other long-form articles, a table of contents with links helps the reader navigate the page quickly.

A good table of contents should be clearly visible. It should display scannable and consistent titles.

7. Use numbers, not words, for key data and statistics

Have you ever noticed how you suddenly stop to read when you come across a set of numbers within a text? Research found that a user’s eyes stop wandering when they come across a section with numerals. They focus on the numbers instead. Users often associate numbers with facts and believe the section is a must-read.

Scannability is necessary for most online content. However, there are a few exceptions, like long-form journalistic pieces.

In most cases, you will need to make your content scannable whenever users want to:

• Learn about something step-by-step

• Look for specific information, such as a set of facts

• Perform a task within the UI, such as filling out a form or completing a quiz

Although often overlooked, scannability is a critical design element that determines how long users stay on your site. Content that is easy to go through helps keep users hooked.

The opposite is also true. Dense text and a lack of bulleted points and visuals make users lose interest.

Start by implementing best practices, like incorporating negative space into your design, using formatting to highlight important text, and displaying information in scannable bullet points. Also, consider different scanning patterns when designing your content to enhance your site’s UX and scannability.