As writers, it’s easy for us to think that whatever topic has held our interest throughout the stages of research, synthesis, and composition will also pull our readers through to the end of whatever we’ve written. But that’s not the case. Many who come to this article may not even reach the end of this sentence, as the article “How People Read Online: Why You Won’t Finish This Article” explains.
So how can writers reach people who don’t read? Through scannability.
What Is Scannability?
Despite the importance of scannability to every piece of text on the Internet that’s longer than a short phrase, many are not familiar with this word. Let’s define it:
Scannability is the aggregate effect of writing and formatting techniques that compensate for the fact that most people don’t read content on the Web.
Scanning has long since overtaken reading as the dominant mode of content consumption online. The key finding from a seminal study by the Nielsen / Norman Group:
“In research on how people read Web sites, we found that 79 percent of our test users always scanned any new page they came across; only 16 percent read word by word.”
Though these findings are from 1997, they have been borne out again and again. With screen sizes shrinking and competition for visitors’ attention growing, many of the causes that the N/N Group hypothesized for this phenomenon are even more true today.
Making a page scannable is about helping people who are not reading entire sentences to accomplish two goals:
Decide whether the page has the content they were looking for—or, if it doesn’t, whether the page is of interest to them anyway.
Understand what information is on the page.
Scannable text can take a little longer to produce—especially if you’re just learning how to create it—but your consideration does pay off.
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,  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:
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.
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.
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.
Devan has worked in user experience and content creation since 2002. His employers have ranged from small marketing agencies to multi-billion dollar companies; his clients, from tiny non-profits to Fortune 100 companies. Devan’s writings have appeared on A List Apart and UX Magazine. Read More