Scannability: Principle and Practice

Why Scannability Matters

When you write and format text for scannability, you’re doing the people on your site a favor. Like you, they’re busy, easily frustrated creatures who are just trying to accomplish their goals without encountering unnecessary obstacles. But most of us care about more than just our visitors’ feelings. In particular, those of us who create content must also care about the business objectives for getting into the content business in the first place.

Happily, in many cases, increasing scannability also improves measurable success rates for the many tasks and outcomes that we design Web content to support. The 1997 study that I cited earlier and many subsequent, related efforts, [1] have shown that better scannability corresponds or contributes to many improvements, including

• faster task-completion times
• reduced comprehension errors
• reduced errors in recollection
• better understanding of a site’s structure
• more favorable subjective ratings of a site’s credibility, content quality, ease of use, and likability, plus better self-reported affect
• reduced bounce rates
• higher likelihoods of return visits
• improved search engine optimization (SEO)

According to Chao Liu, Ryen White, and Susan Dumais of Microsoft Research, users’ particularly important decision regarding whether to leave a page typically happens within ten seconds. Often, when people arrive on a page, they immediately begin scanning to decide whether the page has value to them.

By increasing a page’s scannability, you can more efficiently communicate its value, so visitors will be more likely to stay on the page and become more deeply involved with its content. Some may actually read the content. And, when visitors become readers, your high-quality, strategically developed content is even more effective.

For the many sites on which content consumption is the first step toward conversion—or a valuable end in itself—scannability is paramount.

When to Make Pages Scannable

However, increasing scannability isn’t always the right move. Sometimes, users don’t expect scannable content, so it may work against the credibility of a page or have other negative effects. (Long-form journalism stands out as an example. For example, the content strategy for UXmatters is to serve both readers and scanners, but without impairing readability.)

As a general rule, scannability makes the most sense when users expect to do things such as

• perform a task with a user interface
• learn how to do something that has discrete steps
• understand a set of facts or unambiguous assertions—such as advice on a straightforward topic

It’s easy to see why when we consider the typical steps that users take when pursuing these kinds of objectives:

1. Visitors want to make sure that the one link among the countless links they could have chosen to click in pursuit of their goal has brought them to a page that is at least good enough to serve their purpose.
2. Once they feel confident that they’re in the right place, they need to confirm that they really want to complete the task at all.

Even a moderately busy schedule would be enough to make a person rule out a 1,000-word article that wasn’t scannable after one or both of those steps.

Those of you who are actually reading this sentence might consider how many times you’ve decided whether to stay on this page to make it this far. Would you have kept reading if this article just consisted of 20 three- to five-sentence paragraphs that I’d strung together? Probably not—especially for an article whose title promises that it as an informative piece on one specific topic.

Prerequisites for Scannability

Designing for scannability is often quite simple, but two broader activities often get overlooked when creating lists of tips and techniques. Each is essential to delivering properly scannable content.

Adjusting Your Site’s CSS

First, you may have to adjust your site’s styles to support scannable content. Most critically, make sure that your site-wide CSS provides plenty of whitespace around elements such as headings, paragraphs, blockquotes, and lists. As users’ eyes skip down the page, whitespace is one of the most critical elements that helps them to do so, as Mark Boulton wrote in his article “Whitespace,” on A List Apart. Many of the formatting techniques that I’ll discuss in the next section derive their effectiveness from using ample whitespace.

There are other style matters, too. For example, bulleted and numbered lists that comprise long, multi-line items should have whitespace after each item. Set up a CSS class for such lists that content creators can use.

Likewise, if you’ve styled hyperlinks down to a simple color change that’s two shades off the color of the surrounding text, they’re not going to be scannable. Make sure link colors are bold, readable, and aesthetically consistent with your site’s design.

Testing Your Content’s Scannability

How can you make sure that your styles are working well? Turn to the second important practice that can help you with your scannability efforts: usability testing. Obtain user data in as many ways as possible, and use it to drive your decisions.

User research is far too broad a topic for this article, but some of these methods should be familiar enough to give you a place to start—or at least, a place to start reading:

• guerrilla usability testing—Test quickly and cheaply with a small set of users to see what you can improve. Set up realistic tasks and see how well both scanners and readers—if you have any—do in completing them.
• remote usability testing—Do the same, but across the Internet.
• A/B testing—Test two versions of the same content to see which works better—either using a software analytics package or in-person usability testing.
• Web analytics—Get familiar with the basics, then determine how well different kinds of content do in achieving the goals you’ve set for them.

Making Content Scannable

Now that you’ve tweaked your CSS and established a user research program—right??!—you’re ready to get serious about applying these techniques for improving a page’s scannability:

• subheadings—Be descriptive—even at the expense of being clever. You’re trying to help scanners decide and understand, so giving readers a chuckle is only a secondary goal. Also, when writing in English or other Western languages, move important words in subheadings toward the beginning.
• bulleted and numbered lists—More whitespace results in more scanning, so look carefully for opportunities to create lists. As a guideline, if you’re making more than two points that parallel one another and none of them takes more than two sentences, you’ve got a strong candidate for a list like this one.
• emphasis—Use bold and italics sparingly to emphasize key points outside of headings. Doing so punishes your small number of readers very little in comparison to how much it helps the majority, the scanners.
• blockquotes and pullquotes—Whenever appropriate, pull out quotations into blockquotes or important points into pullquotes. Critical points that comprise complete sentences work best.
• links—Links can help break up a list and quickly indicate the objectives of different parts of the page. Avoid writing mysterious link text.
• short paragraphs—While you must maintain an article’s logical flow, consider that a one-sentence paragraph gets more emphasis for scanners and readers alike, so writing short paragraphs can be a useful rhetorical device. Shorter paragraphs also keep people moving through your article a little better—as long as they still make sense.
• short texts—Even if people intend to scan rather than read, having to scan through 3,700 words of guidance can be intimidating. Consider breaking a long piece into a few separate articles—unless you feel confident that you’re drawing an audience that expects longer articles.

If you’ve read this far, thank you! While you might not have absorbed all of this advice at once or be able to make your content perfectly scannable right away, in time—and through the thoughtful application of the data that you’ll collect about your users—you’ll master the whys, whens, and hows of scannability. Your users and your stakeholders will thank you for it. 

Endnote

A sampling of research efforts: “The Aesthetics of Reading,” (PDF) “Web Site Usability, Design, and Performance Metrics,” (PDF) and Stanford’s Guidelines for Web Credibility.