Designing the great looking user interfaces is only half the battle for grabbing and keeping users’ attention. Your design must also be readable and legible. You can have the most visually appealing user interface in the world but if users have to struggle to read or understand it, they'll quickly become frustrated and leave.
Eleken designers are passionate about flawless user experiences. That’s why we know a bit about good UX readability and would like to share some tips on how to improve it in this article. But first, let’s briefly recap what we mean by UX readability.
What is UX readability?
In a nutshell, readability in UX answers the question whether your website elements are easy to follow, understand, and clearly recognized by all users.
But when diving into this topic it’s important to understand the difference between readability and legibility. Legibility defines how typeface characters are easy to distinguish and read, or in other words, a visual text clarity . Meanwhile readability refers to the complexity of words in written content.
From a UX designer's standpoint, however, the readability definition is broader and applies to the clarity of both text and graphics on the page, how they work together and look on the page. With better readability, design has the power to keep users engaged or scare them away.
The purpose of UX readability was best caught by Typographica:
The term readability doesn't ask simply “Can you read it?” or “How fast can you read it?” It also asks “Do you want to read it?”
A good UX readability also means that the content of your product is accessible to different groups of users equally. For example, color blindness affects 4.5% of the population and 2.2 billion people live with impaired vision. Every designer realizing the importance of readability should be aware of these issues when creating user interfaces. The ability to distinguish good and bad readability is also an important skill.
How to know if the UI is unreadable?
We strongly advise testing your prototype for readability before moving on to designing the actual product. Usually experienced designers can point out fonts or graphics that look repulsive right away. And sometimes it’s so obvious that anyone can tell that a website readability could be better. For example, take a look at the image below - do you want to read it? I personally have doubts.
You can go through five checkpoints to spot bad readability:
- Size and width of the font. Imbalance in fonts is the first sign of bad readability.
- Height and width of the line. Too long lines, or those that require scrolling, or extra effort lead to bad readability.
- Case type. It’s best to mix capitalized or lower-case letters for better readability.
- Color of the text. Poor color choice or colors that mismatch the background instantly ruin the readability.
- Contrast. High contrast between font and background colors make the text unreadable.
If the readability is poor it makes sense to reconsider the design. Changes depend on the screen size, screen technology, screen contrast, font size, color, and style of the text. Such optimizations can improve readability and user experience in general. But before that, let’s talk about typography.
The crucial role of fonts in readability
Fonts are one of the most important factors influencing readability. Typography is an art of arranging letters of the text in order to make written content readable and visually appealing. It is the whole big field in design so, unfortunately, there’s no single recipe on which fonts to use for great readability.
Some fonts are good for longreads, others are good for titles and headings. Some work better in small or big font sizes, in printed or digital format, and some are just outdated. Skilled designers always keep the subtle balance between modern trends and user needs.
But it’s not just fonts that make your product readable. We have prepared some tips that will help you create a better experience for your users.
10 tips on how to improve UX readability
These are some tips that will definitely help you increase readability and legibility. Ironically enough, we illustrate them with examples of how readable interfaces should NOT look like. Ready?
1. Use fonts wisely. Remember that different fonts work better in different sizes. Avoid too complex fonts or too popular fonts, as they are everywhere and annoy users. For example, once popular gothic fonts or Comic Sans are way out of fashion today and easily spotted by users.
2. Use fonts that are easy to read on your users’ screens. This is especially true for mobile devices, where screens are much smaller than those on desktop computers, and you have a lot less room to present information, so you need to pick a font carefully.
3. Choose colors that are distinct from the background, but avoid too high contrast. Color choice is important since it allows us to highlight certain information while de-emphasizing other things.
4. Keep visual hierarchy. Break up text within each screen with headings and subheadings, as well as pictures and graphics to ease the reading experience.
5. Keep line length short enough so that users don't need to scroll horizontally across the page when reading a line of text (ideally, no more than 70 characters per line).
6. Don't use too many fonts within each screen - stick to one or two at most.
7. Choose a font with both uppercase (capital) and lowercase letters and avoid capitals lock effect.
8. Noisy backgrounds can make even the best font illegible. Be very careful with video backgrounds as they can have the same noisy effect.
For example, check out the image above. It’s a Single Earth website that overall has great readability. But on this webpage, the text accidentally overlapped with the text on the speaker's hoodie creating such a noisy background and decreasing readability.
9. Spacing around text blocks is equally important. Cluttered blocks of content frustrate users. Give them some space to better digest information you are presenting.
10. Keep your users in mind. Take into account their background, reading skills, level of interest, an environment they read in. And don’t forget about accessibility-make sure the designs of your product can be perceived not just through color alone, that text can be read by users with imperfect vision and is accessible to senior users as well as to other groups.
In short, keep things distinct, mind spacing around text, use legible fonts and font sizes and match them with the most suitable backgrounds. You’ll know the readability is good once you see it.
Great UX readability examples
After all those examples of bad readability in the previous paragraph let your eyes rest. Enjoy examples of good user interface readability and get inspired for your own projects.
Refera
Recently our team made a redesign for Refera, a dental management platform. The medical management digital product has quite complex functionality, so readability here is extremely important and helps users navigate the platform.
We used delicate light green shading to highlight the buttons. Text blocks are organized with frames which helps to distinguish interface elements easier.
Eleken designers have chosen Plus Jakarta Sans font for both landing page and the platform. The test hierarchy and separate text blocks create a spacious effect. All these aspects do not overwhelm, but comfort users of the product and provide great readability.
Mindist.io
Young startup Mindist.io has built an app for mindfulness creators. Pay attention to the application’s Start page. To create a more relaxing mood, it has a nature photo in the background. The subtle dimming effect in the picture and well-chosen legible font in bright white provide perfect readability and effortless user experience as a result.
Readable
Readable is an online tool for readability testing that works with Nasa, Netflix, Harvard University and others. No wonder their website readability is flawless. Structured, spacious, and appealing to users, starting from blocks of content to fonts and color choice, hats off to their designers!
Conclusion
In the modern digital era, when written and graphic content are more mixed and users are overwhelmed with the number of interfaces they interact every day, good UX readability is more important than ever.
Readability is just a part of the equation for a successful product. But it’s what your users will see first. Make everything else work in its favor.
Our designers compromise neither readability nor aesthetics. We will help you create readable interfaces and design a product your users will love. Drop us a line and let’s discuss details.
