How to Write World-Beating Web Content

Louise North.
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.

How to Write World-Beating Web Content.

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.

Louise North

Louise is a staff writer for WebdesignerDepot. She lives in Colorado, is a mom to two dogs, and when she’s not writing she likes hiking and volunteering.

Read Next

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…