Text is still an important piece of the user experience (UX), and readability is a crucial goal to make all on-screen elements mesh in a way that improves UX while getting your message across. Simply put, poor text readability is killing your UX.
Why is Readability Important for UX Design?
Jakob Neilson, writing for the Neilson Norman Group, distinguishes between a website’s visual design and its written content when he says there’s a difference in how a company looks and how it sounds online. The content tone and flow establish your brand’s voice while the visual UX and UI design make it approachable. Nielson stresses that content needs to be readable, legible, and comprehensive in order for visitors to stick around for a while. “Users won’t read web content unless the text is clear, the words and sentences are simple, and the information is easy to understand.” He’s speaking directly to sentence structure and copywriting complexity, but the underlying advice can be applied to UX design readability as well.
The creative team must work as a cohesive unit to write goal-oriented, data-driven content and present that content in a way that helps it succeed. Well-written, executable copy can’t convert if there’s a UX readability issue. Copywriters and designers work together to make it happen.
Readability is even more important given the rise of mobile device usage. Getting the message across is more challenging when you have less on-screen real estate to work with, which is why finding the right balance between visual appeal and practical application is crucial. How can you make your content look as good as it sounds, especially on mobile?
Tips for Improving Readability Using UX Design Tactics
It’s easy to improve readability when you follow a few simple design tactics. These tactics are universal, meaning they’ll help improve readability regardless of the content copy, so don’t hesitate to put them to good use.
-
Mind your spacing: The negative space surrounding content elements on the page is just as important to design as the copy itself. Too much negative space, and content feels disconnected and out of place. Too little negative space, and content feels cramped and complicated. Balance is your goal.
A similar spacing issue that affects readability is text leading and kerning. How much space is between letters (kerning) and lines of text (leading)? Websites that aren’t optimized for mobile often run into the issue of jumbled and unreadable text. What looks good on a large computer monitor can turn into word soup on a smaller mobile screen. Make sure your content is approachable—through good kerning and leading—regardless of where users find it.
-
Color and contrast: Modern mobile designers are guilty of reducing the contrast between page backgrounds and foreground text. This makes everything harder to read and lessens the impact of the copy/content. Color and contrast help users differentiate between interactive and passive elements—like links and bolded text—and it’s these elements that drive traffic throughout your website and encourage users to convert.
As designers, you have an entire palette of color to work with. Don’t let your message get lost because your color and contrast are too similar between background and foreground. But don’t go crazy with your colors, and don’t be afraid to splash some color on the page. Too much color can be an eyesore, but too little color can feel clinical and lifeless.
-
Size matters: Bigger isn’t always better, at least as far as content readability and UX design usability is concerned. When you enlarge one on-screen element, you often have to shrink others to keep everything on the page. This means you might have to sacrifice some content in order to make other content more prominent, and this affects readability. Text elements that are too big become obtrusive, and text elements that are too small become unreadable.
-
Figure out your font: A bad font can kill your content faster than anything. Avoid fonts that approach unnecessary excess because you’re bound to sacrifice readability for aesthetics. A good rule of thumb to follow for both desktop and mobile design is to use a strong sans serif font for headlines and a readable serif font for body copy.
-
Above the fold is best: Research supports that users spend 57% of their viewing time looking at content above the fold, and that percentage is only going up given the scrolling nature of mobile devices. This means that you want your most important content to show up at the top of the page or at least within a few screenfuls (74% of viewing time is spent in the first two screenfuls). Avoid burying valuable content too far down the page. The longer your content stretches past those first few screens, the less likely users will get to the bottom.
These readability pointers might seem like Design 101 concepts, but they make all the difference when used well. Spacing, sizing, contrast, and all the design in-betweens that influence the user experience determine whether a visitor sticks around or immediately redirects to a more organized competitor. The last thing you want is for readability to cripple your content right out of the gate.
Keep It Simple, Stupid
KISS me, I’m a designer. Keep It Simple, Stupid is a common mantra used to remind designers not to overcomplicate UX design. Simpler is always the better choice. Remember, copy is how your company sounds to a visitor, but the way you structure and style that copy defines your brand’s look. The internet has always been a look first, listen later marketplace, so you want to make sure your UX design helps your content make a good first impression.
