Ask a room full of UX writers to describe their job in a word and the chances are a good chunk of them would say “scannability”.
It’s hard to overstate the importance of scannability to UX writing—it’s the foundation on which all user-centered content is built.
If you’re an aspiring UX writer, a designer or engineer who writes, or just someone who wants to understand how to create clear, user-centered content, understanding scannability is essential.
We’ve written this article to help with that.
We’ll start with a definition of what scannability is, before explaining why scannability matters from both a commercial and a UX point of view.
Then we’ll explain how you can improve scannability through messaging, formatting, and writing, and share examples from Shopify, and Microsoft that exemplify these principles. Finally, we’ll wrap things up with some key takeaways.
To skip ahead to a section, use this clickable menu:
- What is “scannability”?
- Why scannability matters
- Improving scannability with messaging
- Improving scannability with formatting
- Improving scannability with writing
- Key takeaways
1. What is “scannability”?
Simply put, scannability is the extent to which web content is easily scannable (rather than being read word-for-word) by the user.
Scannable content is text and images formatted and a layout that users can quickly and easily read as they scan the page.
The content’s scannability is the total impact of the messaging, formatting, and writing techniques that are used to make it easy to scan.
It’s a key principle of UX writing and—by extension—UX and product design as a whole.
Scannable content is now seen by global giants and startups alike as a must-have, which is an important factor behind UX writing and content design’s continued growth as a field.
2. Why scannability matters
In a nutshell, scannability matters because people scan.
This is not a hard-and-fast, applies-to-everyone rule of course. It’s a generalization—some users will read your text exhaustively, but more often than not they will quickly scan the page finding information that is relevant to them.
And, broadly speaking, the amount of time users are prepared to read (or scan) depends on four factors:
- Level of motivation
- Level of focus
- Type of task
- Personal characteristics
That people scan digital content has been illustrated by several studies, the most well-known of which is Nielsen Norman Group’s F-Shaped Pattern For Reading Web Content. After a rigorous investigation into how people read online, it outlined three main findings that synthesize into the F-shaped pattern:
- Users usually first read the upper part of content horizontally—this forms the top bar of the F.
- After moving down the page content slightly, users then read the second part of the content horizontally, generally in a shorter movement than the previous one. This forms the lower bar of the F.
- From then on, users generally scan the content’s left side in a vertical movement, which can be rapid, slow and systematic, or somewhere in between. This vertical scanning forms the stem of the F, completing the F-shaped pattern.
This revelation about how users consume digital content with the F-shaped pattern was and is a game changer for UX writers, content designers, content strategists, technical writers, and anyone who takes user-centered content seriously.
That’s because it’s crucial to design and create content that reflects how people actually behave digitally, not how we would like them to behave.
Designing and creating content that reflects actual user behavior (scanning) is a key part of building a “sticky UI” (an interface that keeps users coming back). And having a sticky UI is fundamental to the long-term success of any digital product.
We’ll look at how the F-shaped reading pattern has influenced the principles of scannability later on, but before that let’s summarize how scannability improves user experience.
By reflecting on how users consume and digest digital content, scannable content helps create a strong UX (and a sticky UI) in several ways:
- It saves time: Scannable content helps the user find what they need faster as it doesn’t force them to slowly and carefully read through reams of text.
- It reduces cognitive load: Scannable content is more easily digestible than dense walls of text and requires far less mental energy to consume.
- It’s accessible: Making content scannable involves applying many (if not all) accessibility principles.
- It reduces confusion and frustration: Because it helps them find what they need quickly and easily, it makes users less likely to be confused or frustrated.
Now that we have defined scannability and understood how the evidence shows that creating scannable content is essential, it makes sense to share and explain some ways you can make sure your content is scannable.
We’ve divided them up into three broad categories, although there is some overlap between them:
- Improving scannability with messaging
- Improving scannability with formatting
- How Shopify improves scannability with formatting
- Improving scannability with writing
- How Microsoft improves scannability with writing
Let’s start by looking at how you can make your content more scannable by making sure your messaging
3. Improving scannability with messaging
Guides on scannability often overlook the importance of messaging. This is a mistake.
Why? Because people scan to find information that’s relevant to them quickly and easily. If your messaging is off—if you haven’t fully understood your users’ needs—they won’t find the information they’re looking for.
This means the user will usually do one of four things:
- Re-scan the content
- Go to another page on your website or app
- Go to another website or app
- Abandon their task altogether
Even if users can scan your content, scanning that leads to one of these outcomes isn’t helpful to anyone.
Scannable content without relevant information is ultimately futile.
So the first step to improving the scannability of your content is to make sure your messaging is relevant and clear to your audience.
NNG guidance on visual hierarchy recommends that before designing, you should “take a step back from the visuals and define the hierarchy of the content and the key point(s) you want the user to take away”.
Establishing that hierarchy will ensure your messaging supports scannable content and vice versa. And while we don’t have space to do a deep dive into messaging now, here are three simple techniques to help you get started:
1. Get user research to create user journeys, user stories, or job stories
The data you glean from the UXR can be used to create these—normally in collaboration with the UX or product designer—which will help you understand what information your user is looking for. Sarah Richards, who coined the term “content design”, wrote a great blog to explain the difference between job stories and user stories.
2. Create sound information architecture and on-page content hierarchy
These will help you provide users with the information they need where and when they need it. They should be used in tandem with on-page navigation when it makes sense. Gillian Massel’s blog, Content hierarchy in action, about her process at Shopify, is an excellent read on this subject.
3. Use progressive disclosure to reduce cognitive load
Progressive disclosure is the revealing of information progressively as and when users need it, and keeping advanced or rarely used features on a secondary screen. Progressive disclosure improves scannability by preventing the user from getting overloaded with information, increasing learnability and findability, and reducing errors.
Now that we’ve looked at how you can increase scannability by understanding your users and getting your messaging right, we’re going to dive into how you can use formatting to make your content even more scannable.
4. Improving scannability with formatting
Formatting is possibly the most important and effective way of making your content more scannable.
In this section, we’ll outline five easy ways to improve scannability with formatting before looking at a couple of examples that show these techniques in action.
These five simple techniques will improve your content’s scannability:
1. Use headings and subheadings
Perhaps the most important elements on this list, clear, consistent, and concise headings, and subheadings are one of the quickest and easiest ways to improve scannability. They add structure and visual reference points, and the extra space they provide helps the user scan quickly.
2. Use numbered or bulleted lists
Lists are a powerful tool for presenting complex information in a way that helps the user scan. Use numbered lists when the order of the items is important, otherwise, you can stick to bulleted lists. Keeping the list of items short and consistent in structure (i.e. all nouns or phrases that start with a verb) will improve scannability even more.
3. Use bold, italics, or highlights
All three are simple but powerful ways of drawing attention to key information in your content to promote scannability. Bolding is generally preferred for headings, but check your company or your preferred style guide for different use cases.
4. Use tables
Tables can increase the scannability of your content by presenting complex information in an easily digestible, clear structure.
5. Use pull quotes
Pull quotes can be an effective visual landmark to break up walls of text and draw the user’s attention to key information. To support scannability, it’s vital that any text inside the pull quote is in context and in its logical place on the page.
How Shopify uses formatting to improve scannability
This example from Polaris, Shopify’s acclaimed design system nicely illustrates how formatting can be harnessed to make content on a complicated, nuanced subject matter—in this case naming–scannable.
Source: Naming—Shopify Polaris
You can see three of the above five techniques in action: headings and subheadings, a bulleted list, and bold text. The eye-catching visuals that house the “Dos” and “Don’ts” also serve the same purpose as a table but with a slightly different visual element.
The end result is an elegant example of scannability. Users, who in this case are likely to be designers and engineers at Shopify, will be able to get a high-level understanding of naming almost instantly, before scrolling through content that is structured and formatted to help them easily find information relevant to their use case.
Now that we’ve looked at an example of how formatting can be used to take scannability up a level, we’ll move on to how words can be used for the same outcome.
5. Improving scannability with writing
Choosing words and constructing sentences that help users scan is a critical part of the job for UX writers, content designers, technical writers, and many other content creators.
Here are five simple techniques you can use to create scannable content:
1. Put key important information in the first two paragraphs
Doing this means it’s likely to be read by users scanning your content with the F-pattern. Ideally, they’ll find what they need to right there or at least know they’re in the right place to get what they need. Putting information-carrying words at the start of sentences and paragraphs throughout your content also increases scannability.
2. Use simple, recognizable words
In an ideal world you’d use the same words as your users, but in many companies, that kind of linguistic research data just isn’t available. Instead, using plain English and a conversational tone will make your text easier to scan.
3. Avoid jargon and technical language
Jargon and unnecessary technical language reduce the scannability of your content as it forces users to pause or slow down to process what they’re reading. Of course, jargon is subjective and technical language is necessary sometimes, but both should be used carefully.
4. Use short paragraphs and short sentences
Short paragraphs and sentences beat walls of text and complex sentences every time. Shorter paragraphs mean more white space and shorter sentences are more approachable. Both of these factors support scannability.
5. Be clear and concise
Orwell’s third rule of writing, “If it is possible to cut a word out, always cut it out”, is apt here. Cut out unnecessary words and rewrite passages that are unclear.
How Microsoft uses words to improve scannability
Where better to start for an example of scannable content than Microsoft’s guide to writing scannable content?
Source: Microsoft Style Guide’s Scannable content
As expected, their content exemplifies many of the messaging, formatting, and writing principles we’ve covered so far. Here’s how they’ve used the five specific techniques for improving scannability with words:
- They keep the important information in the first two paragraphs, first telling the user (in this case probably a writer) why scannable content is necessary, then telling them how they can help create it and what follows on the page.
- They stick to simple, recognizable words, like “use” and “put” instead of “utilize” and “position” for example.
- Doing this means they avoid jargon and technical language, with even the word “scannability” notably absent from their page of scannable content.
- They consistently use short paragraphs and sentences, with most paragraphs just one or two lines and many sentences of fewer than ten words, such as “Lead with what’s most important” (5 words) and “How you write is equally important to scanning” (8 words).
- The cumulative effect of the above is that their content is clear and concise, a great example being the paragraph on single-line paragraphs, “It’s also fine to have a single-line paragraph now and then.”
Now you understand what scannability is, why it’s important, and how messaging, formatting, and words can be used to improve it, it’s time to wrap things up with a few key takeaways.
Key takeaways
Scannable content is both a crucial part of a sticky UI that will keep users coming back and a key element of good UX.
Content that is not scannable will waste users’ time and lead to errors, frustration, and confusion, all of which undermine the user experience.
Luckily, there are proven techniques you can use to make sure your messaging, formatting, and writing combine to make your content more scannable.
Whether you’re a UX writer, UX designer, or UX researcher, understanding and mastering these techniques will lead to an accelerated and more fulfilling career.
Found this guide interesting? You might like these articles, too: