Website Design for Scannability – 8 UI Tips and Proven Reading Patterns

Website Design for Scannability

Website scannability is essential for creating a positive, user-friendly experience. Users want to find content that solves their problem and return to their lives. Facilitating that by designing for scannability creates trust, increasing the likelihood that visitors will return or convert.

This article describes the various scanning patterns users adopt for different tasks and best practices to increase your website’s scannability.

Build high-fidelity prototypes that deliver accurate results during usability testing. Learn what your end-users value most and prioritize web content to increase scannability. Sign up for a free trial to discover advanced prototyping with UXPin.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is Website Scannability?

Website scannability describes how easily users can find content by scanning a web page. UX designers use subheadings, white space, bulleted lists, and visual hierarchy to help users find what they need faster.

For example, we use a table of contents and subheadings to make this article more scannable. Our blog generally attracts people interested in product design, so we use eye-catching CTAs to try our design tool for free.

Why is scannability important for web design?

Users are spoilt for choice on the Internet. If your website doesn’t solve their problem, they’ll find one that does! Often you might have the answer users need, but a poor user experience and cluttered user interfaces force them to find a better alternative.

Designers must optimize web design for a user’s attention rather than beautiful look and feel. People want to scan web pages to find what they need and exit. 

Nielsen Norman Group research found that “79 percent of our test users always scanned any new page they came across; only 16 percent read word-by-word.”

In another NN Group study, “Users often leave Web pages in 10–20 seconds, but pages with a clear value proposition can hold people’s attention for much longer. To gain several minutes of user attention, you must clearly communicate your value proposition within 10 seconds.”

Your website must not only provide users with the features and content they need but present it in a way that it’s quick to digest and take action if necessary. If you don’t deliver this user experience, a competitor will!

Scanning Patterns–How Users Scan Web Pages

The NN Group’s famous 2009 Eyetracking Web Usability study identified several scanning patterns people use to scan web pages.

  • F-pattern
  • Spotted pattern
  • Layer-cake pattern
  • Commitment pattern
  • Zigzag pattern
  • Exhaustive review

F-Pattern

The F-pattern is the most common scanning pattern, especially for articles or pages with lots of text. Users scan the first few paragraphs from left to right (or opposite for right-to-left languages) and then the beginning of each line as they scroll down the page, occasionally reading a heading or sentence/paragraph of interest–creating an F shape.

To grab these “f-pattern” users, including a summary or table of contents at the top of the page will grab their attention and entice them to read further, increasing the likelihood of action (purchase, lead, etc.).

Spotted pattern

Users adopt a spotted pattern when searching for something specific–for example, a word, heading, address, or date. Different content types and formats can also influence spotted pattern scanning, like bulleted lists, styling (bold, italics), prominent CTAs, typography, etc.

The NN Group eye-tracking study asked users to find information about an individual’s education on Wikipedia. The eye-tracking software found that users scanned around the page searching for relevant keywords, eventually focusing on the word “studies,” where they found the answer.

Layer-cake pattern

The layer-cake pattern describes how users scan a page’s headings and subheadings to find a specific body of text. For example, if someone were looking for information about layer-cake patterns on this page, their eyes would jump from heading to heading, locate this subheading and read the content below.

Commitment pattern

The commitment pattern describes users who read every word on a page rather than scanning. They usually trust the source, are highly interested in the topic, or need detailed instructions (recipes, directions, documentation, etc.).

Zigzag pattern

Users digest two-column layouts using a zigzag pattern. Many websites use these designs to describe their services or how a product works. Designers typically place text in one column and an accompanying image in the next in two styles:

  • Alternating layout: images and text alternate from left to right for each row
  • Aligned layout: images and text appear in one column (either left or right)
Zigzag reading pattern for scannable website design

An NN Group study found that “an alternating list layout caused users to stumble.” Conversely, “users scanned efficiently on pages where text and imagery were vertically aligned.”

While the alternating list might keep things interesting, it’s probably not a good option for complex topics or if you’re creating content for users with cognitive disabilities.

Exhaustive review

An exhaustive review describes users who repeatedly scan the same page or content, looking for something–for example, scanning up and down a product’s documentation repeatedly, unable to find an answer to your problem.

But this pattern has some nuances. The exhaustive review may indicate heightened interest. Users interested in something will fixate on it over and over–like an outfit on Pinterest or a dream destination on Instagram.

Users also adopt an exhaustive review of landing pages or high-cost products to decide if the item will solve their problem adequately. They may read parts of the page, returning to specific texts to ensure they make the right decision.

How to Make Websites and Pages Scannable

Visual hierarchy

UX designers use visual hierarchy to attract attention to important content through:

  • Size: using larger text, images, buttons, etc., to differentiate from similar UI elements
  • Gestalt principles: how UI elements appear related through proximity, similarity, symmetry, etc.
  • Color: using a specific color or contrast only for important content immediately attracts attention

For example, our pricing page highlights UXPin Merge’s bestselling plan for companies using a color hierarchy.

visual hierarchy helps make website scannable

Limit choice

Pages with too many options take longer to scan and digest. If you’re trying to get users to take a specific action, limiting their choices will help them focus and decide.

Negative space

Negative space (whitespace) creates separation to make pages more scannable, but designers can also use it to attract attention. We use ample whitespace around our homepage feature boxes, headings, and text, making the content easier to read and digest.

negative space is a good practice for improving website scannability

Google’s homepage uses a more extreme negative space design to draw attention to most users’ primary reasons for visiting the page, search!

negative space use by Google helps you focus on the most important information

Headings and subheadings

Headings (h2 elements) create an anchor for a specific topic–in this case, How to Make Websites and Pages Scannable–while subheadings represent sub-topics or provide context, i.e., Headings and subheadings. Users can scan pages easier and only read content relevant to their needs.

Pairing these headings with a table of contents at the top of the page enables users to locate content faster.

Short paragraphs over blocks of text

Blocks of text (walls of text) are difficult to read on screens. Search engine optimization (SEO) experts Brain Dean from Backlinko and Neil Patel advocate using short paragraphs (usually one or two sentences) to optimize for readability and scannability.

Notice how we use short sentences and paragraphs in this blog post. We also create space between paragraphs, headings, and other content to make text, making the page more scannable while increasing text legibility.

Bulleted lists

testing compare data 1

If you’re making more than two points, using a bulleted list is easier to scan and digest than a paragraph. For example, under the subheading “Visual hierarchy” above, we used a bulleted list for size, Gestalt principles, and color. If we had to write this as a paragraph, we’d have to increase the word count, making it more difficult to scan and read.

Typography

text typing input 1

Designers often use different typography for headings and body text. This differentiation creates visual anchors for users to scan a page much faster. Font weights, sizing, and color are also effective.

Prominent Call-To-Action (CTAs)

interaction click hi fi 2

Users often visit web pages to complete a specific task, like contacting a business, completing an application, or buying a product. Prominent CTAs draw attention, so users save time searching for specific information and get persuaded to complete the task.

Design Better User Experiences With UXPin

Prototyping and testing are the core of user experience design. Designers learn from testing designs with their target audience, iterating until they find a solution that meets their needs.

Unfortunately, most image-based design tools don’t offer prototyping features that allow accurate testing. Designers must rely on external platforms or UX engineers to build prototypes–increasing time and costs!

UXPin’s advanced design tool enables UX teams to build advanced interactive prototypes that look and feel like the final product–allowing designers to identify UI pain points and opportunities during testing.

Increase your design team’s prototyping speed and capabilities with the world’s most advanced design tool. Sign up for a free trial to discover interactive design with UXPin.

Build prototypes that are as interactive as the end product. Try UXPin

Try UXPin

by UXPin on 19th December, 2022

UXPin is a web-based design collaboration tool. We’re pleased to share our knowledge here.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you