How to Write World-Beating Web Content

April 17, 2024

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we scan-read.

Why do we scan read on the web? Most probably because of information overload; we know that the information hasn’t been vetted, plus we know that there are millions of other sources at our fingertips.

For years, designers have focused on making text online more readable, and nothing has worked. So perhaps it’s time to accept the inevitable and embrace writing text that is scanned rather than chasing a deep read.

What is Scannable Text?

Eye-tracking studies in the late 1990s and early 2000s demonstrated that 4 out of every 5 users scan a webpage rather than read it thoroughly. Much of that research has been debunked now that the web is more prevalent and users are used to digital mediums.

And yet, scanning a page is still the most likely way to approach text on the web — perhaps it’s a self-fulfilling prophecy, or maybe it’s how the human eye prefers to work. What we do know is that users scan web pages in distinct patterns:

• F-pattern – users first read in a horizontal movement across the top of the content area, forming the top bar of the F. They then move down the page a bit and read across in a second horizontal movement that is typically shorter than the first, forming the lower bar of the F. Finally, they scan the content’s left side vertically. This pattern arises because users often want to quickly find helpful information, reading headlines and the beginnings of paragraphs while skipping over large blocks of text.
• Layer-cake pattern – users look at headings and subheadings while essentially skipping the text between them. The layer-cake pattern gets its name because the visual scanning resembles how one might look at the different layers of a cake—the eyes move horizontally across the page, focusing on the textual ‘layers’ provided by the headings. This method lets users quickly assess the content’s structure and decide which sections might be worth a deeper read.
• Spotted pattern – users selectively scan web pages for particular keywords, numbers, or distinct visual elements. This pattern is characterized by the reader’s eyes darting around the page, landing on and recognizing specific bits of information that stand out due to their relevance, uniqueness, or design emphasis. In practice, the spotted pattern often occurs when users are seeking specific answers or data points and, hence, skip much of the surrounding content.
• Zigzag pattern – users’ eyes move back and forth in a diagonal or zigzag motion across a webpage. This pattern typically occurs on webpages that integrate text with images or other multimedia elements positioned alternately on opposite sides of the page. As users scan from one element to the next, their gaze naturally follows a zigzag trajectory, moving from text on one side to an image on the other and vice versa.
• Lawnmower pattern – users scan content that is organized in a grid or table-like structure, typically involving both text and multimedia elements. This scanning pattern resembles the back-and-forth path, similar to how one mows a lawn. Users start at the top left, moving horizontally to the right, then drop down to the following line and move left to right again, systematically covering the area. This systematic approach ensures that all elements within the grid—be it images, videos, or text blocks—are viewed.

How to Write Scannable Text

The web is packed with examples of how to write great text that connects with people. Corporate style guides are a great source of how to capture and keep a reader’s attention.

• Keep paragraphs brief – by keeping paragraphs short, writers can focus on a single idea, making it easier for readers to digest and retain information. This brevity also aids in maintaining the reader’s attention, reducing the likelihood of mental fatigue or boredom. Short paragraphs create a visually appealing text layout, breaking up large blocks of text that can be intimidating or off-putting to readers.
• Use a variety of sentence lengths – combining long and short sentences creates a dynamic rhythm that enhances the reader’s engagement and comprehension. Short sentences can provide impact and clarity, cutting through complex ideas to deliver straightforward points quickly and effectively. In contrast, longer sentences allow for more nuanced expression, enabling the writer to develop complex thoughts and convey subtleties in argument or description. This variability in sentence length prevents the text from becoming monotonous.
• Incorporate bullet points – bullet points help break down complex data or ideas into manageable, easily digestible chunks, making it more straightforward for readers to grasp and remember key points.
• Use clear headings – by providing a snapshot of what each section contains; clear headings allow readers to scan your text and locate specific information quickly and easily. This is especially valuable in longer documents where readers might seek particular topics without wanting to read everything.

Conclusion

Writing effectively for the web means embracing the reality that most users will scan rather than read deeply.

By understanding and leveraging common scanning patterns such as the F-pattern, layer-cake, spotted, zigzag, and lawnmower patterns, writers can tailor their content to meet the needs of a fast-paced, information-rich environment.

To create scannable text that resonates with readers, incorporate brief paragraphs, vary sentence lengths, use bullet points, and craft clear, informative headings. These strategies not only enhance readability but also ensure that the key messages are conveyed efficiently, even in a quick scan. This approach respects the reader’s time and attention, catering to their scanning habits while delivering content that is both accessible and engaging.

Ultimately, by adapting to the intrinsic behaviors of web users, writers can produce more effective and engaging online texts that stand out in a crowded digital landscape.