Magazine for designers and web developers

Designing Content for Readability, Legibility and Clarity

Article by Marc Schenker in Web Design - February 24

Designing for the web has to be based on making the content as clear possible for your site visitors and readers or they’ll simply leave your site. The result, frustrated clients who are looking for a lower bounce rate, more visitors, longer time spent on the site and, ultimately, more conversions.

This makes sense when you look at the research behind how people read on the web. As the 21st century has progressed, it seems that users are becoming more impatient than ever.

This Slate article reveals that very few people read whole articles anymore while this ConversionXL article explains how people love to scroll, but barely below the fold!

Designers have to overcome their users’ short attention spans by making content user-friendly. This means content that’s “scannable” and “skimmable”—which makes it easy for in-a-hurry users and readers to quickly find the info they want and determine whether they want to spend more time reading it.

Readability

Use Storytelling

Readability is defined as how desirable your content is for people to read. Designers should ask themselves if the content they’ve laid out on a page will encourage reading and absorption by the average user. In other words—is it interesting enough to read? With the Internet having so much info for people to take in, one way of making them come and stay on your site is by making them want to read your content.

HubSpot suggests telling a story to engage people to read your content, and they’re right. Stanford University confirms that telling stories causes people to remember things up to 22 times more than facts alone! Imagine how this could be used in your marketing efforts: Tell a story on your blog, your about page, and on social media.

freytag-pyramid

Designers should lay out page copy based on the famous Freytag’s pyramid, which is the age-old theory that storytelling has to involve:

  • Exposition
  • Rising action
  • Climax
  • Falling action
  • Resolution or Denouement

By allowing content structure to mirror this flow, your site visitors, users and buyers will be more captivated by and remember what you’re writing, advertising or selling!

Try Some Meme-Jacking

Some meme what-ing? Meme-jacking. This is when you use popular meme generators like Meme Generator and Quick Meme to create visuals that convey a popular idea, concept or belief. Memes are then spread like wildfire on the Internet.

The beauty of meme-jacking is that it can break up otherwise bland and lengthy content by injecting well-spaced reading breaks and the brevity of humor into content and copy. Memes, of course, should also be inserted into your content in a logical way that ties into your overall design and marketing goals.

meme-jacking

For example, take Moz. When they issued a press release, they designed it to include many memes that gave readers a humorous look at the important announcement of securing more funding for their company, thus making a boring release very readable.

Legibility

Insert Some Line Breaks and Shorter Paragraphs

When designing for legibility, keep in mind that minimalism always rules the day. Your users will mostly scan content and selectively choose words and sentences that interest them. Thus, for content to be legible, it has to be geared towards this cherry-picking style of reading.

One way to do that is by introducing a lot of line breaks into your copy. For instance, Copyblogger recommends that you keep paragraphs to no more than three or four sentences! You should also try to fit only one idea or concept into each paragraph, so as not to overload the reader.

This Wall Street Journal article epitomizes chunking content by using many line breaks and short paragraphs.

wall-street-journal-article-line-breaks-short-paragraphs

Presenting content in this way allows your users, who are already scanning to pick out certain words and ideas, to skim through with greater ease.

Trust Those Bullet Points

When breaking up content into smaller, more easily digestible chunks, you can never go wrong with well-placed bullet points. Bullet points are a designer’s best friend in the mission of aiding legibility on any given page. Whether it’s explaining your unique selling proposition, product features, or using urgency to drive home the marketing message on a page, bullet points empower users to read your copy faster and with greater understanding.

According to the Content Marketing Institute, bullet points are less intimidating to your readers. It makes sense when you think about it. When you design with bullet points, you’re breaking up your content and presenting the most vital ideas to readers in an easy-to-read style.

local-hero-ad-app

In this ad for the Local Hero app, bullet points are used to let readers spot the most important features and benefits of this app right away.

Clarity

Incorporate White Space

Perhaps nothing helps a designer achieve clarity on a page more than white space. The background space that prompts users to focus on the content in the foreground, white space, guides their eyes to where the real, important content on a site lives. It does this by providing obvious contrast between the space around the important content and the important content itself.

Also called negative space because it has nothing to do with the color white, it lets designers highlight what they want visitors, readers and users to see first, which also makes white space integral to visual hierarchy.

breitbard-article

On news site Breitbart, this article talking about Donald Trump’s ascendancy makes use of white or negative space all around the article to direct readers’ eyes directly to the written content.

Promote Great Information Architecture

Information architecture is a user-experience best practice that organizes content in such a way to make clear how users should absorb the info on your site. It achieves this by communicating to users the level of importance of things on a page, as well as the actual page goal.

Think of an e-commerce site, for instance. Successful information architecture dictates that your shoppers see attractive and high-quality images of products along with crystal-clear descriptions of their features before they ever see a call to action button to “add to cart” or “buy now.”

On JC Penney’s KitchenAid mixer page, note how pictures and vivid information about the product are provided before users even see the call to action button on the right side of the page, in line with the F-shaped reading pattern.

JCPenney-page-screenshot

After all, it only makes sense that shoppers need good information before they can make a decision to purchase.

Putting It All Together

The success of any site you design relies on how easy it is for your users to make sense of it and accomplish what they want to do. A large part of this is based on designing your page content to be readable, legible and very clear.

When designers focus on and perfect these three goals, they help their clients get more site visitors and leads, conversions, and, ultimately, sales. In other words, designing for these three goals helps your clients make more money, and that’s very good for your credibility and reputation as a designer.