How to Design Scannable Content

We are faced with the incredible challenge of creating high-quality content for an audience of skimmers. The faster you understand this, the more effective your content tactics will become. Remember the low-involvement readers we discussed in Chapter 3? There is ample evidence to suggest that most online users spend mere seconds on a page before they jump to something else, hence capturing only a fraction of the words you have so carefully crafted.

The Nielsen Norman Group ran a study on how users read online and concluded that, on the average web page, users have time to read at most 28 percent of the words. Chartbeat looked at two billion online visits over the course of a month and found that 55 percent of all users spent less than 15 seconds appreciating the content on the page. So, here we are: investing valuable resources in pieces that are barely read by users who are barely there. The solution? Design.

The following design choices can make your content pieces significantly more scannable for an audience of skimmers:

Use clearly identifiable subheadings for your content sections

Many users will read only these as they scroll down the page. Consider adding numbers to these subheadings to help readers understand the general sequence.

Use bulleted or numbered lists and indentation

This gives the eye a break from long paragraphs. The list you are reading, for example, uses indentation to help the eye capture and the brain interpret each list item as a separate idea.

Keep your paragraphs as concise as possible without losing depth

Choose words that convey meaning accurately versus more generic terms that need more elaboration. The word indentation, for example, is more specific than spacing. I used it on purpose to provide a more actionable takeaway in the preceding list item. When you are scanning the page to decide whether you will read or share, feeling like it is consumable and friendly is very important. Shorter paragraphs allow for more whitespace on the content page, which relaxes the eye and avoids being visually overwhelming.

Combine text and images strategically

I try to add at least three images in every article to ensure that visual learners who land on the page can immediately connect to the content.

Include clearly distinguishable callouts or blockquotes

Use these to highlight important insights. Some content hubs also integrate “Click to Tweet” features to allow readers to immediately share what they consider important as they skim through the content. It isn’t uncommon for online readers to actually share a content piece before they are done reading it in full.

Watch your page loading speed

Users on a time crunch will have little or no tolerance for slow pages. In addition, a slow loading speed hurts your indexation in search engines. (See Chapter 13 for more on this.)

Proofread

While you might see this as a general piece of writing advice, it affects how scannable your content is in a particular way: online skimmers read signals like typos extremely fast and discard what is in front of them based on initial impressions.

Use bold and italics to highlight important points

Throughout this book, I styled specific words in italic so that you could quickly detect key insights.

Summarize key takeaways visually if possible

Infographics and images are incredibly valuable tools in a culture of skimming: they can be bookmarked, read, and shared quickly.

Creating Compelling Graphics

How many times has a graphic stopped you in your tracks as a result of a mere color choice? When you create supporting graphics to go along with your content or integrate a design element in your multimedia piece, consider if there is enough contrast to give the message a competitive advantage in the channel in which you are dropping it. Users are exposed to thousands of messages surrounding yours, and your visuals need to stand out within that saturated space.

As social platforms and search engines evolve, so do their algorithms. Many of them place a premium on user engagement. In other words, there is a tendency to show more of what people are most engaged with—a virtuous cycle, if you will. Create content that makes users stop/click/like/share, and in turn it will be served to more users who can stop/click/like/share.

Contrast is what will allow a content piece to stand out in any context or platform: if content is king, contrast is crown.

There are many ways to create contrast. For example, typography can generate tension with different sizes, weights, and styles. Color appeals to an even more basic human instinct that is triggered regardless of the language you speak, or the topics you are interested in. For more details about the meanings behind certain color choices, see Chapter 6.

How Typography Affects the Content Experience

Scientists working in the user experience field have been fascinated with the consequences of certain type choices in the reading experience. We have now spent enough time around screens to make human–computer interaction a worthwhile academic pursuit, and there are entire labs devoted to understanding how we engage with different kinds of monitors and displays.

The following are some valuable typography insights derived from academic studies:

Left-justified text has proven faster to read

Studies (including one by Trollip and Sales, 1986) reveal that full or fill-justified text makes it more difficult for readers to thread sentences together, as it often comes with odd spacing between words. You can identify fully justified text because it is aligned on both the left and right margins. With left-aligned text, the right margin looks ragged, but words preserve an even spacing.

Optimal line length is around 50 characters

Although studies differ, most agree that lines should comprise around 50 to 60 characters (Dyson and Kipping, 1998; Rehe, 1974). Whenever lines exceed 60 characters, increase the leading (the spacing between lines) (Bouma, 1980).

You should use bold, italics, and caps carefully

All three styles indicate importance. Used excessively, they can make your content confusing or overwhelming. The idea of creating visual hierarchy will be very important as you think about the typefaces you will be using for content creation: some ideas are more important than others, and specific fonts (styles and sizes) can help you convey that. Use bold, italics, and uppercase styles in different combinations to build out guidelines for your content’s headings and emphasized body copy.

In classic studies, slow reading speed (Tinker, 1955) and lowered comprehension scores (Poulton and Brown, 1968) were connected to the use of all uppercase letters. Intuitively, we understand that LOOKING AT ALL CAPS CAN MAKE THE READING EXPERIENCE SLIGHTLY PAINFUL. It becomes more difficult to thread words together and you find your eye going back to reread. Keep in mind that these studies were performed with reading tests dealing with long copy. The use of all uppercase letters is still appropriate for shorter copy formats like headlines and calls to action.

Bold type is indicative of an idea’s strength. In fact, the HTML tag to apply bold is the <strong> tag. As a content creator, you often will need to work with HTML code. Essentially, it is just a way to tag your text so that browsers understand how you would like visitors to see it. Bold type can be your best ally when trying to make text stand out, either from a large amount of copy or from a busy background. It will, however, quickly overwhelm users when used repeatedly.

Finally, italicized text conveys emphasis. Like here, you see? The eye must lean in slightly to understand what is being said. The words or phrases that have been italicized stand out in the middle of other expressions.

The serif versus sans-serif font debate has changed

It used to be the case that poor screen resolutions and browser aliasing issues made serif fonts look fuzzy around the edges, resulting in visual fatigue. (“Aliasing” is just a techie way to say that there is some kind of distortion in the way your text is shown.) That is why sans-serif fonts like Helvetica and Verdana became so important for online content. You would see, and still see, many sites going for serif headings and sans-serif body copy. Today, however, we have advanced browsers with font smoothing, high-resolution screens that make the experience of screen reading much closer to that of paper, and optimized serif fonts with incredibly sharp rendering even at small sizes.

Serif fonts are making a comeback for long-form web content, and they are no longer relegated to large headings. Typefaces like Georgia were actually designed to remain legible when displayed on low-resolution screens. In addition, the new generation of online readers has grown up surrounded by all kinds of digital devices. The youngest users might not be exposed to serif fonts as the default anymore. The effect of familiarity is therefore lost: we are becoming equally comfortable with both types of fonts from a very young age.

When you choose between one font and another, test out how effective each type actually is for your target audience. To do so, you can expose users within your target audience to two alternative versions of the same copy: one typed with a serif font and the other one in a sans serif. You can ask questions like these:

• Which text seems easier to read? Why?

• Which text would you be most inclined to continue reading?

Online polling tools like Pickfu and Verify (by Zurb) make it incredibly easy to build out these questions and collect feedback in minutes. Both services provide access to a network of testers in case you want to outsource that part of the process, too.

In 1943, readability expert Rudolph Flesch published a formula to measure reading ease. In his formula, Flesch included two factors: the average sentence length in words, and the average word length in syllables. Since then, his readability score (Flesch Reading Ease) has been incorporated in many text processing programs, including Microsoft Word.

Scientist J. Peter Kincaid developed another readability formula using Flesch’s principles. This formula, called the Flesch-Kincaid Readability Test, was originally created for the United States Navy to estimate how easy it would be for an eighth-grader to understand a piece of writing. This formula is also widely available in text processing tools and plug-ins for content management systems like WordPress.

Want to stay up to date with new data related to fonts and readability? Here are two highly reputable sources to follow:

• The Nielsen Norman Group

• The Software Usability Research Laboratory (SURL) in the Human–Computer Interaction (HCI) Laboratory at Wichita State University

How to Design Mobile-Friendly Content

According to Comscore, the majority of all digital media consumption now takes place in mobile devices, either via apps or the mobile web. According to its 2017 Cross-Platform Report (USA), smartphone usage has driven virtually all of the growth in digital media time spent. Meanwhile, desktop usage continues to decline in favor of the flexibility brought about by powerful smartphones. In addition, Comscore’s Mobile Hierarchy of Needs Study (2017) showed how mobile devices dominate total minutes spent online in at least nine markets, surpassing 90 percent in Indonesia. Make no mistake: we are living in the age of mobile content.

It comes as no surprise, then, that many companies have decided on a mobile-first strategy for everything related to web design. Search engines such as Google are officially penalizing sites that are not mobile-friendly, and are using device responsiveness as a ranking signal. Put simply, users’ content experiences are now largely shaped by the capabilities of the mobile device they are able to carry with them. This scenario has many important implications for content creators. Here are some recommendations:

• Avoid ads that interrupt or otherwise ruin the mobile experience.

• Ensure that interactive content types like slideshows are easily accessible from a mobile device.

• Put a responsive, adaptive, or fluid web design strategy in place to ensure that your content hub is optimized for mobile devices. A web designer will be able to point you in the right direction with regard to the best option to make your site flexible enough to cater to different users’ devices.

• Along the same lines, consider font size adaptations for certain screen sizes. This is true for headings as well as body copy.

• Keep your images and other media files lightweight enough to load or stream quickly. For video, for example, this will involve making sure that the player works properly for mobile devices without Flash.

• Facilitate mobile reading with a clear text hierarchy. Use resources like headings, lists, styling, and summaries.

Luckily for us, the ubiquitous character of mobile devices has led the companies behind popular Content Management Systems to implement responsive features out of the box. Most of the templates available for WordPress, Joomla, and Drupal adapt to mobile devices in some way. Look out for mobile friendliness when you are selecting a template for your content hub.

The CLEAR Design Framework

Designing compelling content is, first and foremost, a communication challenge. Even before you get your hands dirty with software, tools, and specifications, there are general ideas that should dictate the types of design decisions that will benefit your content the most. In working with design teams over the years, I have found the following principles to be a solid starting point for any kind of content design work. Together, these characteristics spell out CLEAR:

Cohesive

Does this content’s design play well with our existing guidelines? Does the voice and tone used here reflect those we have defined for the brand?

Lasting

Is this piece timeless? Do we see this design as having a long shelf life—close to evergreen? Did we effectively avoid including information that would expire? Think about dates, URLs, and facts that will no longer work or be true in the near future.

Energetic

Are we using contrast, repetition, alignment, and proximity to create tension? Bland, unemotional designs won’t advance your content pieces—it’s important for content to convey information vibrantly.

Actionable

Would I feel compelled to click, read, and share this piece if it showed up on my feed? Is there a clear action path being supported by our design decisions here? Great content design isn’t really great unless it springboards someone into action.

Readable

Although it’s an important factor for copy, readability also applies to any kind of asset (graphic, video, photo) that includes text. Can you read the piece’s article when looking from afar? Is the spacing, font, and size of the text easy to read? Does it invite your audience to stick around or read for extended periods of time?

Common Mistakes in Content Design

Take a hard, deep look at your current design pieces. Check for the following common mistakes:

Emphasizing the wrong ideas

Check for places where you have bolded, italicized, enlarged, or otherwise highlighted words/ideas that shouldn’t be prominent.

Not creating enough type–background contrast

Evaluate how distinguishable your overlay text is when compared to its background image or pattern.

Not uploading optimized images for social platforms

Attempt to share one of your content links in any major social media platform and see which supporting graphic is being pulled. Many social networks are now automatically building cards based on special markup in your content pages. Make sure it fits the specifications of the platform, and is ideally positioned to engage viewers.

Optimizing your designs for print instead of screen rendering

Ensure that the typefaces and color you are using are suitable for screens. Font family and size play a role in how readable your content is when presented in a monitor. Similarly, some color palettes only translate well when printed, not when rendered digitally.