Making your website readable

Before you even pick the colors for your website or design the layout of your home page, you should understand how people read on the web. Just as the Internet has drastically changed the way people shop and communicate, it has also altered how we read. Our brains respond differently when reading text on a screen compared to when we read something on paper. Reading online tends to drain us mentally, take longer, and make what we’ve read less memorable. However, when reading a well-designed website layout, people are able to focus, process, and absorb what they’ve read more efficiently. Understanding how people read online will allow you to design your site for the modern viewer more effectively, which in turn leads to better usability, engagement, and conversions. Here’s an overview of how people read content on the web:

Reading Digital Content

Research from as early as the 1800s documents scientists’ attempts to discover the common patterns of readers. Generally, when you read a paper book, your eyes tend to travel on what’s called a scan path, which involves rapid-fire scanning and pausing. On this path, the eyes follow a sentence for a few words before stopping briefly. It is in this pause that your brain processes what it’s just read before continuing on. Most people don’t even notice that they read like this. When you read online content, however, your eyes follow a different scan path which forms an F-shaped pattern. This is a means of deciding—in mere seconds—whether to stay on a web page and read the whole thing or click away. In the F-pattern your eyes:

 1. Read the top portion (above the fold) horizontally

2. Move down slightly and skim a new section horizontally

3. Jump up to the top and then scan the left sidebar

Be mindful of this modern scan path as you design your website, because when people read a badly-designed web page layout, they become frustrated—and frustration does not lead to conversions. In addition, the average web surfer will only read about 60 percent of any given web page, so this means that in order to attract and guide the audience’s eye, you need to make the content on your website easily scannable. In other words, people don’t read content on the web so much as they view it.

User Expectations

When you’re building a web page, create it with user expectations in mind. Web page visitors have a certain set of preconceived notions based on prior experience that shouldn’t be violated, such as:

• About Us and Contact Us pages that signify credibility and trustworthiness
• No distracting elements like auto-play videos
• Company logo (positioned in the upper left corner) for brand recognition
• Easy navigation tools and working links that allow visitors to return to start (home) quickly and efficiently
• A site map to guide the journey

The more guidance you provide for your readers, the better the user experience. Because today’s online users are scanners and not readers, make your content easy to scan by using:

• Bullet points or other list-type information
• Keywords that are highlighted with alternate colors, bold, or larger typeface
• Informative subheadings
• Short paragraphs

And finally, although first impressions do count, the content itself is essential. Your articles, blog posts, product descriptions, and other web copy must be free of typos and grammatical errors, properly referenced for credibility, and entertain, inspire, and/or inform the audience.

Images

Graphics matter—sometimes more than word choices. Slate reports that most visitors to your website are likely to view 100 percent of video and image content while only reading 50-60 percent of the text. Consider these facts about images from Jeff Bullas:

• Web pages that include images are viewed 94 percent more of the time.
• A whopping 60 percent of people are more likely to click on a business site’s link if it includes an image.
• Shoppers feels that a product image is more important than its description.
• Photos in a Facebook post have a 37 percent higher engagement rate than text only.

Keep in mind, however, that your images must be relevant to the content, like product photos or other pictures that are closely connected to the topic. Website visitors are not interested in “filler” images. 

Color

Anyone in marketing can tell you that colors impact mood, comprehension, and behavior. Specific hues can be very effective, depending on the age, web surfing habits, and devices of your target audience. The color palette you use on your site can actually coax visitors into making a purchase or respond to your call to action. Poorly selected colors, on the other hand, can drive them away. Research on marketing colors indicates that:

• 85 percent of consumers state that the color of a product is the top reason they will buy it.
• 42 percent of people judge a website on its color scheme.
• 52 percent of shoppers will not return to a website if they’re turned off by its colors.
• Color is the top element in brand recognition (80 percent).

Tips for using color on your site:

• Use no more than four colors.
• The three most popular colors for a website are green, blue, and orange.
• Color affects call-to-action buttons: red creates urgency, orange encourages taking action, and blue fosters trust.

Font

Choosing a typeface for your website is not as simple as just picking your favorite one. Having the right font on your business site could mean the difference between getting conversions or not because typography affects the way people think. For example, studies show that fonts increase or decrease the believability of the information being read. When a document is written in Comic Sans or Helvetica, readers are less likely to believe the information being presented, but more likely to believe the same article when written in Baskerville. The best fonts for web content are sans serif fonts, and the top three preferences for easy readability are:

• Arial 12-point for general purposes
• Verdana 10-point for smaller print
• Georgia 12-point for a more formal look

Layout

Once you have the color palette, images, and font nailed down for your new website, you can focus on the layout. Remember the F-pattern scan path we discussed earlier? Here’s where it really comes into play. First, a few facts about web page layout:

• Online readers spend 80 percent of their time scanning above the fold (the top portion of the page) and just 20 percent below the fold.
• Website visitors spend 69 percent of their time glancing at the left side of the page and just 30 percent at the right side.

The best web page layout generally follows the F-pattern by placing the most important information and images in those places. To quickly capture your reader’s attention and hold it, you web page layout should include these elements:

• Logo in the top left corner with a clear navigation bar on top
• Catchy and informative headline for top article
• Important information in the first two paragraphs
• One image above the fold
• Content laid out in small blocks, plenty of white space, and bullet points

Online reading is far removed from snuggling up in bed with a good book. By understanding that people tend to scan, rather than read, content on the web in a basic F-pattern, you’ll better be able to keep them engaged and positively affect user experience.