Our previous UX blog expanded on the importance of navigation on your website for the ultimate user experience. Equally important is the readability of the information you choose to display.  It is vital to review this aspect to ensure that your text is understandable and is being thoroughly digested by your viewers.

Readability

How readable is the text on your website? Will I need to zoom in/out to see it clearly? Is there enough contrast between each section? Are headlines distinguishable from sub-headlines and paragraph texts? Does the layout make sense? These questions are just the beginning of readability.

Readability is what makes content on your site easy to read and understand. Your website can have the best design and the most engaging features, but none of that will matter if it fails the readability test: connect, please and flow.

Content: Am I Connecting With Users?

Content is king, or queen – either way it rules and should do so with grace, sophistication and in a manner that excites its loyal subjects. Did that make sense? That intro alone could easily fall into a readability trap. Content should be interesting but should avoid jargon and rambling – get to the point.

When writing for the web, keep content as the main focus with this checklist for optimal readability:

Is my content interesting? Is it relevant?

From selling socks to stocks, every website should cater to the personality and concerns of its target demographic. Engage your users. Content should be helpful, relevant and a resource. This goes a long way in establishing your business as being industry leaders and trusted advisors – which is kind of a big deal these days. In the age of Google, if I can find the information I need from another website, why go to yours? Be engaging and be relevant!

Does it get to the point or ramble on?

People don’t read; they scan. Users look for headings, bullet points, pull-quotes and images to tell them what their reading. I refer to my earlier point: This day and age is all about high expectations, expediency and efficiency.

Am I speaking to my audience in a language they understand? Am I losing them with industry-specific jargon?

A website that sells email services to small companies should not read like an academic paper. According to the Readability Test Tool – which tests for factors such as reading ease, grade level of the content, number of complex words, etc. -, MailChimp’s Growing Business page “should be easily understood by 13 to 14 year olds.”

Fonts and Formatting: Am I Pleasing the Eye?

Font and content formatting are important. Stylistic reasons aside, these elements are key to optimal, pure readability. If a user cannot read the words on your site because of poor font selection or formatting, you’ve lost them.

Font Selection

There are arguments every which way about the difference between font and type. Not to offend typographers around the world, but for the sake of expediency I’ll use the word font throughout this section. Feel free to leave a comment about it.

Though font selection can make or break readability, there is not a fail-safe checklist for choosing fonts. Trying out different fonts to see what works is the best option for beginners. As a starter guide, keep the below points in mind when choosing a font.

For titles/headline and paragraphs: Choose fonts that are easy to read and understand at appropriate sizes. Think at least 14pt for paragraphs 20+ pts for headings/titles. The fonts don’t have to be the same, but font pairing is a topic for another day.

Choose a font that fits your brand. For example, you typically will not see cursive writing on a children’s gaming website.

Avoid styles that are too thin, bold or compressed for paragraph reading. NOTE: Print reading typically requires serif fonts like Times New Roman and Garamond. For the web, sans-serif fonts like Arial and Tahoma are standard.

Avoid fonts that are just ugly. Yes, ugly is subjective but there are standards (again, a topic for another day). As a quick tip, run away from Comic Sans.

Formatting: Paragraphs

Compare the four paragraphs at the right. Which of these would pass a readability test?

If you said Paragraph #4, play close attention to this section; you’re wrong. Paragraph #1 is the best option here because:

• It uses enough contrast between the text and background colors
• The text is big enough for the average user
• The paragraph is aligned to the left making “F-shape” reading (more on this below) easier, and
• There is enough line-height between each line of text in the paragraph

Formatting: Long-form Writing

Paragraph #1 is would pass the readability text for a section that small, but longer blocks of information need more formatting. Blog posts, articles and large content areas would need to be split for content hierarchy  – what is first (title), second (sub-title), third (paragraph), etc.

Content should be divided into small paragraphs, include headings and sub-headings if needed, bullet point or numbered lists, highlighted areas (pull-quotes) and the like to make it easily digestible for the scanning user.

Design and Layout/Placement: Does My Content Flow?

White space, color contrasts and proper alignment add to the readability of a webpage and facilitate F-shape reading.

F-Shape Reading

Eye-tracking tools, like Crazy Egg, help you see what visitors put their focus on when viewing your site. What many studies have shown, starting with Jakob Nielsen of the Nielsen Norman Group, is that users read webpage content in an “F” shape – often reading across the screen from left-to-right, going back to the left side and down a little, then repeating the movement once more.

White Space

Using white space on a page is one of the simplest changes to make on a website, yet one that is easy to get wrong. Each element on a page, the text, images, videos, etc. should have a decent amount of room to breathe and be viewed on its own. Do not cram everything together just to get it “above-the-fold.”

The “Above-the-fold” Syndrome

The buzzword I hear often is “above the fold” – the area of a webpage viewable to the user on first glance of a site before scrolling. This idea originated from the newspaper industry, where the most important news was placed at the top on the front page – before the newspaper fold. Obviously, elements of a webpage placed above the fold will attract the most attention from the user, but that does not mean users will abandon scrolling. Look at the clean, open, white space on the Readability website.

Trust me when I say: there is life below the fold. People do scroll and if your website passes the readability test, visitors will have an incentive to scroll – they’ll want to see what more you have to offer.

Every website needs white space. I repeat: every website needs white space. Let it be your mantra. Seriously.

Color Contrast

Standard contrasting colors are black and white. Black text on a white background is readable. White text on a black background is readable, but there are certain colors that do not contrast well. Colors like yellow and neon green on a black background is too high of a contrast. Juicy Studio has a tool that analyzes foreground and background colors, or in this case text colors on top of  background colors.

What are your thought on UX navigation and readability? What steps can you take right now to increase the user experience of your website?