Quick summary: The visibility and readability of website type is important to nearly every online process. Yet many websites still miss the boat. Type is often too small, low contrast, displayed in dense blocks, or displayed where users may not see it.
It’s easy to find examples of type treatments that detract from usability. Instructions, product descriptions, policies and procedures, and important warnings or reminders often suffer from this most basic of usability problems. In this two-part article we’ll examine the ways in which type readability affects user experience and we’ll cover some best practices for avoiding common pitfalls.
In the process of user testing and heuristic evaluation I encounter many problems with text displays. Some issues are quite minor and are more annoying than unusable. But others can create serious issues and wreak havoc on the user experience. Most often I observe:
Poor formatting. Typical problems include margins too wide to be easily readable and text that’s displayed in large blocks without breaks. This tends to cause users to skip right over the text, sometimes resulting in serious issues (more about this later). Another common formatting problem is placing important text in places where users don’t always look, such as in the margins of a page or “below the fold”.
Small type. Ever seen a TV commercial for cars or loans that includes a huge amount of “fine print” that’s so small it’s unreadable? A similar phenomenon occurs on the web with great frequency. Some websites display links and other important information using type that’s much smaller than necessary. This makes it difficult for users to notice and/or read it. Small type is especially problematic for those with imperfect vision and/or small screens, or those who run their monitors at high resolution. Also, with the increasing popularity of laptops screen sizes have shrunk while resolutions have increased. This compounds the problem.
Poor use of color and/or contrast. I could (and will) write an entire separate article on the use of color and contrast because it’s a substantial topic by itself. For now let’s just say that there are many colors and color combinations that make type very difficult to read. For example “pure” colors such as pure red (FF,00,00) and pure green (00,FF,00) tend to be irritating to the eyes and hard to read. Low contrast color combinations are just as bad and even more common, for example light gray type against a dark gray background. Many websites have taken to “softening” the appearance of type by using shades of gray instead of black. This can be attractive but sometimes it goes too far. It’s important to find a balance between pleasant design and usability.
Reliance upon scrolling text boxes. Admittedly this is rarely a showstopper problem but frankly it’s a pet peeve of mine. Many websites and applications present large blocks of text (e.g. – user agreements, legal terms) within small scrolling text boxes. In HTML parlance they’re called “text areas”. To read the text users must scroll through the small box. The more text that’s placed in the box the more awkward scrolling that’s required to read it. There are good alternatives to this and in my opinion it’s an unnecessary usability barrier.
Now that we’ve seen some of the most common problems let’s take a moment to consider why these can detract from the user experience.
It’s critical to understand that most users have a strong tendency to skip over text.
In particular users tend to skip over anything that’s difficult to read or that they don’t immediately deem to be important. Users tend to direct their attention towards the information and links they deem as critical to the task at hand. This is natural since most are driven by a desire to “get on with it” as quickly as possible.
In other words, users often ignore things that seem like noise or clutter. So:
• If your type is difficult to notice users often won’t see it at all.
• If it’s difficult to read there’s a good chance they’ll skim it or skip over it.
• If it fails to get to the point quickly they’ll probably deem it unimportant and direct their attention elsewhere.
These problems can lead to users that:
• Don’t have the information and/or instructions they need
• Can’t determine how to move forward or complete a process
And this in turn often causes them to:
• Make mistakes because they didn’t notice instructions or warnings
• Call for support when it might otherwise be unnecessary
• Abandon a process out of frustration
• Complete a process but lack confidence about important issues such as next steps and policies
Poor use of type can cause some serious messes, and serious usability barriers.
The good news is that problems with type are among the easiest usability issues to solve.
In part 2 we’ll cover some simple ways to avoid these problems and present type in ways that users will find easy to notice and read.
Image based on a photo by phunkstarr. Creative Commons licensed.
Related posts: