Quick summary: Improving type readability doesn’t have to be difficult. Attention to a few basic rules can ensure that users can easily notice and read important text on your website or in your application.
In this article we’ll examine the ways in which type readability affects usability and user experience and we’ll cover some best practices for avoiding common pitfalls.
In part 1 we looked at common problems with the way websites and software display type. We also covered some reasons why they can lead to more serious problems like abandonment and unnecessary calls to customer support/help lines. Now let’s get in to solving the problems.
Applying a relatively simple set of rules can avoid most of the situations noted above and some otherwise significant usability problems.
1. Pay attention to formatting. In most cases it pays to employ relatively narrow margins, because they’re simply easier to read. Consider these two examples:
Narrow margins are easier to read and generally more usable.
Very wide margins require more work to read. They can cause usability and display problems.
For blocks of text more than a paragraph it’s helpful to use breaks and section headers to separate the information. This makes it easier for users to scan the content and find what they want.
Breaking text into smaller blocks makes type easier to read and more usable.
Dense blocks of text are hard to read. Users often skip right over them.
For shorter blocks of copy such as single phrases or sentences it’s often wise to employ bold type and/or underlining to highlight key words and phrases. For example:
Your order will not be complete until you click this button
…or in the case of a typical error message
Sorry, we need your email address
2. Avoid small type. This may seem an obvious suggestion but as noted previously it’s a surprisingly common problem. When you consider the number of people with imperfect vision and the tendency to overlook anything that appears to be “the fine print” it becomes clear that text should always be a size that’s easy to read, especially when it’s important to successful completion of a process.
It's important to keep type large enough to be easily readable.
3. Use larger type to emphasize important information. A corollary of the previous statement is that it helps to use larger type when displaying text that’s especially important. For example a confirmation screen that includes an invoice or order number should display the number larger than other type on the page since it’s likely to be a key piece of information. For more on confirmation page best practices, see this article.
4. Combine colors carefully; lean towards higher contrast. You should always strive to avoid low-contrast color combinations like light gray against white or the use of colored text and backgrounds that are in the same basic color and hue range. It also makes sense to test your color choices on multiple monitors since LCD screens tend to be more sensitive to contrast choices than traditional CRT monitors.
5. Avoid scroll boxes/text areas. There are numerous better ways to present large amounts of text than standard HTML “text area” scroll boxes. One alternative is to present a summary of the information along with a link to see the full text in a separate page or pop-up. Consider this example:
This simple interface presents links to policies without forcing users to read from a small scrolling text box.
Here the user is presented with links to see the various policies, but they’re not burdened with having to scroll down a long text box to read them on this page. Contrast this with:
Reading these terms requires a great deal of scrolling and reading from a small, wide text box. It's not a good user experience.
Well, at least they do provide links to a printable version. That’s more than some websites offer. Still, the first approach is more logical from a user experience standpoint. Besides being easier to read it also enables a lower “clutter factor” than scrolling text boxes.
A side note: in some cases it may be necessary for legal/business rule purposes to display an entire block of information on a given screen rather than present a summary then link to the full version. For example a company may wish to have the liability protection of being able to say “our complete terms and conditions can be seen right from the purchase page”. I personally disagree that small scroll boxes present information in a clear and usable manner. I won’t be surprised if some day this practice becomes a legal liability.
I’d be remiss if I neglected to also mention the problems with placing key information below the fold, but that’s a larger topic for another article.
Paying attention to the way you’re displaying text on your website or application will pay off in numerous ways. It’ll help ensure that users can see and read the information and links they need with a minimum of fuss and difficulty. That in turn will enable users to use your site or application in a confident and efficient manner. And yes, that usually means more conversions, greater customer satisfaction, and fewer support calls.
Image based on a photo by phunkstarr. Creative Commons licensed.
Related posts: