• UX Design Practices: How to Make Web Interface Scannable
  • Original article by Tubik Studio
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: Ivocin
  • Proofreader: Si mi, Junkai Liu

We are overwhelmed by the amount of information flowing online and offline every day. Thanks to the development of new technologies and fast Internet connections, people are generating more content than they can accept. When faced with many websites and apps, users don’t read everything word for word — they scan the page first to see if it’s useful to them. Therefore, scannability is one of the important factors in the usability of web sites today. This article explores this phenomenon and provides tips on how to make digital products scannable.

What is scannability?

In the case of a page or screen, the verb “to scan” means to glance at or read hastily. Thus, scannability is the way content and navigation elements are rendered into a layout that can be easily scanned. Especially when interacting with a site for the first time, users tend to quickly look at the content and analyze whether it is what they want. Any of the following can be an obstacle to this process: words, sentences, images, or animations.

This behavior, by the way, is nothing new. For decades, people have often done the same thing with new magazines or newspapers: skim the article before starting to read it carefully. In addition, reading from a screen is more tiring than reading on paper, so users will read more selectively and give up when they start to get bored.

Why is scannability important? About a decade ago, Jacob Nielsen answered the question “How do people read online?” The problem. His answer was simple: “They didn’t. People rarely read the web word for word; Instead, they scan the page and pick out individual words and sentences to read. What hasn’t changed much since then is this: We’re less likely to take the time and effort to browse a site when we’re not sure if it meets our needs. Therefore, if you don’t catch the user’s eye in the first minute, you run a high risk of the user leaving the page. Scannability is one of the most important factors in a website’s user-friendliness, regardless of the type.

How do I check if a web page is scannable? Try to identify yourself as a first-time user and answer these two questions:

  • Does what you’ve seen in the last few minutes match the expectations of your target audience for this page?

  • Can you understand the type of information on the page in the first two minutes?

If both answers are not positive, it may be time to consider how to enhance the scannability of the site. Making your site scannable is well worth the time, since scannable pages become more efficient in the following ways:

  • Users complete tasks and achieve goals more quickly
  • Users will make fewer mistakes when searching for what they need
  • Users can understand the structure and navigation of the site faster
  • Drop in bounce rate
  • The level of retention is getting higher and higher
  • The website looks more believable
  • SEO rates are positively affected

Popular scan mode

One of the most important things interface designers must consider is the eye scan mode, which indicates how the user interacts with the web page in the first few seconds. When you understand how people scan a page or screen, you can prioritize the content and put what the user wants in the most obvious areas. This area of user research is supported by the Nielsen Norman Group to help designers and usability experts better understand user behavior and interactions.

Different experiments to collect users’ eye-tracking data show that visitors scan websites using several typical models.

Z mode is typical for web pages with unified information presentation and weak visual hierarchy.

The other pattern has a zigzag pattern, which is typically used for pages with visually divided chunks of content. Similarly, the reader’s eyes start at the top left and move from left to right and across the page to the top right, scanning the information in this initial interaction area.

Another model, the F model explored by the Nielsen Norman Group, shows that users often go through the following interaction flow:

  • The user first moves the reading horizontally, usually across the upper part of the content area. This initial element forms the top bar of F.
  • Next, the user moves the page slightly down and then reads in a second horizontal move, which typically covers a shorter area than the previous move. This extra element forms the bottom column of F.
  • Finally, the user moves the scanned content vertically to the left. Sometimes this is a rather slow and systematic process, showing solid streaks on eye-tracking heat maps. Sometimes users scan faster, creating a blotchy thermal map. Finally, it forms the backbone of the letter F.

Tips for improving scannability

1. Prioritize content using a visual hierarchy

Basically, the visual hierarchy is the way content is arranged and organized on a page in the way that is most natural to human perception. The main goal behind this is to give users an idea of the importance level of each piece of content. Therefore, if a visual hierarchy is applied, the user will see the key content first.

For example, when we read an article in a blog, we see the title first, then the subtitle, and then the copy block. Does this mean that the information in the replica block is not important? Not really, but this way users can scan headlines and subheadings to see if an article appeals to them without having to read the full text. If headings and subheadings are properly set, they can inform the user about the structure and content of the article, which can be a factor in convincing the user to read more. On the other hand, if the user sees large, unchunked text, it scares them because they don’t know how long it will take to read the article and whether it’s worth the time and effort.

There are several main factors that help to establish the visual hierarchy:

  • size
  • color
  • contrast
  • Similar sex
  • Negative space
  • repeat

All of this helps the designer transform the set of elements, links, images, and replicas into a scannable system of the page layout.

2. Put the core navigation in the head of your site

All of the aforementioned eye-movement scanning patterns show that regardless of which pattern a particular user follows, the scanning process starts at the top horizontal area of the page. It works very well to show key areas of interaction and branding. This is why UI/UX designers, content managers, and marketing experts all agree that head design is a key point.

On the other hand, the headline should not be too long: too much information makes it impossible to concentrate. Trying to fit everything into the top of the page can make the layout a mess. Therefore, in each particular case, it is important to analyze the objectives of the core target audience, how they intersect with the business objectives behind the site, and based on that — which information or navigation should be the most important header content. For example, on a large e-commerce site, the search function must be immediately visible, usually found in the header, and accessible from any interaction point. For small business sites, a search function is not needed at all, but direct access to portfolio links is crucial.

Gourmet website

3. Maintain a negative balance

Negative space — or more commonly called white space — is the empty space in a layout, not only around the objects in the layout, but also between and within them. Negative space is a kind of breathing space for all objects on a page or screen. It defines the boundaries of objects, creates the necessary connections between them according to the Gestalt principle, and establishes an effective visual representation. In the UI design of websites and mobile apps, negative space is an important factor in the high navigability of interfaces: there isn’t enough air, and layout elements aren’t seen properly, so users can miss what they really need. This can be a powerful cause of eye and brain tension, although many users will be unable to articulate the problem. The right amount of negative space, especially micro-space, solves this problem and makes the process more natural.

4. Check whether the CTA can be seen immediately

Obviously, the vast majority of web pages are aimed at specific actions that the user must perform. Elements (usually buttons) that contain callative language (CTA) should be displayed within a few seconds so that the user knows what they can do on the page. Checking the page in black and white and blurry mode is a good way to test this. If you can quickly distinguish CTA elements in both cases, you’ve done a good job. For example, on the bakery website page shown below, you can easily see the CTA button to add items to the list among other elements.

Vinny’s bakery website

5. Test the readability of the copy

Readability defines how easily people can read words, phrases, and copy blocks. Legibility measures how quickly and intuitively a user can distinguish between letters in a particular font. These features should be carefully considered, especially for interfaces filled with large amounts of text. Background color, the amount of space around the copy block, keyspacing, line spacing, font type, and font pairing — all of these factors affect the ability to quickly scan text and capture what the user left behind. To prevent this problem, the designer must check that typography rules are followed and that the selected font supports the general visual hierarchy and readability. User testing will help check that users can quickly and easily perceive text.

6. Use numbers, not words

This advice is based on another survey by the Nielsen Norman Group. They shared an important finding: eye-tracking studies have shown that when scanning a web page, numbers generally stop users from wandering and attracting attention, while a large number of words without numbers are ignored. We subconsciously associate numbers with facts, statistics, sizes and distances — data that can be useful. Thus, a number in a copy can attract the user’s attention, while a word representing a number may be missing in a large number of copies. What’s more, numbers are more compact than text numbers, so it makes content more concise and time saving.

One paragraph, one idea

Handle the copy content in terms of scannability and try not to make the text content too long. Short paragraphs are easier to digest and easier to skip if the information is of no value to the reader. So when you present an idea in one paragraph and start another for another, follow this rule.

Bjorn Design Studio website

8. Use numbered and bulleted lists

Another good way to make text easier to scan is to use lists with numbers or bullets. They help organize data clearly. In addition, they attract the user’s attention, so information is not lost in the text body.

9. Highlight key information in the text

Bolding, italics, and color highlighting are old-school, but they still work. In this way, you can focus on the important ideas, definitions, references, or other types of specific data contained in the paragraph. More importantly, the clickable parts (links) of the text must be visually marked. We’re used to seeing them underlined, but using color highlighting or bolding is more effective.

10. Use images and illustrations

In Web user interface design, images are very helpful in expressing emotions or conveying messages, they are informative and engaging. Original illustrations, prominent hero banners, and engaging photos can easily grab the user’s attention and support general style concepts. More importantly, they play an important role in building visual hierarchies and making the copy content more digestible in combination with illustrations or photos. People perceive images faster than they understand text, which is an important factor in improving scannability.

Financial Services Website

Making your web pages scannable is a real respect that designers and content creators show their users. In this way, we can save our users time and effort and provide them with organized, harmonious, valuable and engaging content.

The original fortubikstudio.comAnd write

Welcome toDribbble 和 BehanceWatch the design by Tubik Studio.

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.