In today’s article, Why Readability UX Is Important, we will discuss how readability, one of the important aspects of web design usability, affects the way users process information.
Good readability allows your users to efficiently read your content and understand the message more clearly.
However, with bad readability, this may result in users getting away from your content.
In this article, we will also cover how you can make your web content easy to understand for your users. We will also cover the following subtopics related to this article:
Before we dig deeper into how we can better work on our web content readability, let us first define the basics of legibility and readability.
Legibility of content is about how people see and distinguish elements from one another.
From this perspective, you need to learn how people deal and see the content on the page, distinguish different components, and recognize them.
Legibility is more about the visual presentation of content that makes it recognizable and lets users quickly understand what is what on the page or a website.
Readability, on the other hand, refers to the ease of written content perception.
By its classic understanding, we define readability as the next level of going deeper into the comprehension of the text content. This deals with the simplicity of words and sentences, how clear the thoughts are, and the ease of consuming and understanding information.
Today, UX designers help in providing a better comprehension of readability by combining visual performance and clarity of the web text and typography.
In UX design, legibility is often defined as being able to distinguish characters and body symbols in words for specific typefaces on a website. While readability is defined as how people easily distinguish components of the text on a page or website.
Whatever you wish to define readability and legibility, these two terms are always connected with how users are able to see and read your content on screen.
What are the factors that influence readability and legibility
Now let us look at several factors that have an influence on making your content readable and legible.
Typography is the form of text content. In UX design, the choice of fonts greatly influences how fast and easily users perceive and decode the copy.
The font size, width, color, and text structure all contribute to the readability and legibility of the content.
Fonts also add mood to the written text on an image. Thus, it is true that typography in UX design is about balancing aesthetic text with the ability to read it quickly on a home page or website.
However, this is not easy as you may think. And in order to get that balance between design and text, you need to get familiar with these important elements or tools in the design:
White space/negative space- refers to the area between elements in a design composition
Alignment- refers to the placement or justifying text
Tracking- is the adjustment of space for a group of the type of character that forms a word and text block
Kerning- is the adjusted space between two types of character
Leading- is the space between the baselines of text
Line length- refers to the number of characters used for one line in a block or body of text
When you know how to work on the following elements above, you can achieve eye-pleasing and readable content altogether on a page or website.
Background
In digital space, the background refers to the background color used, which has a great effect on how well you can read the content on screen and how fast you can identify the page elements used on the website.
For example, you may notice below that a black copy on a white background contrast seems to be larger compared to the white copy on a black background contrast on a page, screen, or website
In this case, choosing the wrong background color can lead to poor readability, which leads to poor user experience.
The role of a UX designer is to properly identify the right color scheme and contrast, studying the peculiarities or conducting a test of copy perception on different contrast backgrounds on your screens or website, and at the same time work closely on the right font choice.
Negative space
Also called “white space” refers to the area that is left empty. The negative space is not only used around elements that you placed in the layout but also used in between and inside them.
Negative space serves as the breathing room for all the elements on the page. As mentioned previously, negative or white space is one of the important elements in typography.
However, in general user interface, negative space is very important as well as it sets the connection between text and non-text elements.
Like for example, the image below lets us see clearly if the text and photo are connected to one message:
But in summary, this is based on Gestalt theory that tackles the psychology of visual perception of elements. It shows how people connect these visual elements together. It is about the organization of user interface components so our brain can distinguish the different objects according to size, color, contrast, as example.
In line with this, UX designers should understand that users do not read the entire content at all. Instead, they scan the layout. Thus, UX designers should use proper subheadings since this format makes the article more readable on screen.
If the article is made up of a long sheet of text, users will be too lazy to read the entire words as long articles without subheadings can look like reading needs time and effort.
In this context, it is very important to present the information to users in a gradual manner.
For a copy, we are talking about the typography hierarchy that includes layout elements like headlines, subheadings, body text copy, call-to-action, group of words and more. In order to build an effective copy, the elements should be segmented into different levels in a page layout:
Primary level- includes the headlines and aims at providing core information. It should draw attention to the users.
Secondary level- composed of layout elements that supports scannability. This is where subheadings or captions are found, which help users quickly navigate through the copy.
Tertiary level- it includes body text and additional data.
Writing
When it comes to UX writing, the text content should have the following basic features on a page layout:
Clear- users should have a comprehension of the message and should not be blurry or complicated.
Concise- users should read the text as written, which does not require further explaining.
Useful- users should read the copy as important and encourages users to interact with the copy
Consistent- users should see the copy within the interface of one digital product with the same style, tone, voice, etc.
When it comes to UX writing, always remember to write for your users. This means that the style of the written copy should create a human-like atmosphere.
Make your user interface, landing page, or newsletter talk in a helpful, friendly human way, noting some important copy elements such as clear style, tone of communication, words style, as example.
How to improve readability
Here are the best practices that every UX designer should know when it comes to improving the users’ readability and legibility:
Segment your text in sections
We already discussed that people do not really read every text on the web. Instead, they scan for important sections. And because of this, it is also important to segment your text into small sections to make things readable and improve user experience.
Descriptive subheadings
Using descriptive headings also helps a lot when it comes to giving users reference, which makes it easier for them to find what they are looking for in the article.
Another advantage of using descriptive subheadings is it helps users in remembering the main points in the article.
It is better to make your subheadings a summary of the text section, so you give a better reference to your users on what you will talk about next.
Another tip for subheadings, try to cover the next sections below your subheadings and let someone guess what the section is about just by readings the subheadings.
Write like a grade 8th level can understand
You can use the Flesch-Kincaid formula, a commonly used tool to measure readability. This tool uses an equation to determine how easy or difficult it is to comprehend.
The easier way around this is to write your content like a grade 8 student so you can read a broader audience, making reading an effortless user experience.
When it comes to UX writing, legibility and readability should never be confused. It does not mean that placing a block of text or section is easy to read or the users want to read it. Always assume what your readers will think when reading your content.
Use simple, commonly used fonts
This means to avoid italics, cursive, or any other decorative fonts. Italics are commonly used to highlight text, but try to avoid using this as much as possible as italics can be hard to read, especially for dyslexic users.
Choose fonts like sans serif that will show separation between each letter. Simple fonts such as sans serif font are the best to use since they are widely recognized both on desktop and mobile views.
Avoid using decorative fonts as well. Like italics, fancy design fonts are very difficult to read.
Do not waste your readers’ time
Be direct and on point with your sentences. Do not be too wordy. You can try to take out a sentence or paragraph in your article to see if the missing section changes anything. If it doesn’t, then that sentence or paragraph should not be there, to begin with.
Always add a section that contributes information or added insight to your readers. You can use the inverted pyramid method to capture your users’ focus and attention. Be straight to the point and only include the needed information.
Use visuals to break down the text
This is especially true with long articles. Long articles tend to bombard the users with too much information and as a result, leads to information overload and less readable.
This is why people often prefer visuals over text such as infographics and videos over long articles.
Visuals provide your audience an easier way to extract information quickly with less effort.
If you have a lengthy article, aside from proper spacing, try to break down your article with photos so users can rest their eyes when scanning or reading.
Visuals also help audience to focus and remember important points and sections easier.
You can utilize relevant images, videos, and statistics to break up your text and sentences, making it easier for audience to scan or read through your long content on desktop or on mobile.
Remember proper text-to-background contrast
Remember the importance of text-to-background contrast as discussed earlier on web content. Make sure that you have sufficient contrast between the font and the background on your desktop or mobile design.
If the text does not have enough contrast with the background, it makes things difficult to read. To make it simple, black text on a white background contrast is one of the best ways to do this.
The use of capital letters
Use all caps sensibly because people do not read one letter at a time. Instead, we read a group of typographic font that make up words and sentences. And reading ALL CAPS can be less fluid as we scan with the block of letter.
Since we do not see all caps all the time, it can take us longer to recognize. Although capital letters are not necessarily hard to read, we read them a bit slowly.
Another reason why you need to use capital letter sensibly is using them is interpreted as shouting. Thus, you often see ALL CAPS used for headlines, to grab audience’s attention on web.
Minimize the length of your lines and paragraphs
Most people prefer a shorter line length of 45 to 72 characters as guidelines. It is an art of writing meaningful content at this measurement.
Try to also use shorter paragraphs and avoid running paragraphs, longer than 6-8 lines.
Lengthy line and paragraphs can easily lose the pace of your visitors. Try to utilize paragraph breaks as well to create spacing. Use bulleted and numbered lists whenever possible. This applies both on desktop and mobile views.
Utilize spacing as much as possible
Densely packed text can make your eyes tired. Make sure that you utilize enough spacing between lines of text and between headings and paragraphs on a website.
Use grouping as well since people associate grouped things to belong together. Arrangement affects your audience's perception. When using images as guidelines, make sure that you kept close to the block of text that you need audience to associate your image design with.
Make your content printer-friendly
There are users who like to read on a printed paper. No matter how you design and make your digital content readable and legible, there are visitors who still prefer to print the content.
Screens constantly emit light that causes eye strain. Paper, on the other hand, offers a stable image that reflects light. Thus, make sure that you have a printer-friendly version of your content since some people prefer to read on paper.
Use large fonts
Another way to have less eye strain is to increase your font size on the web. The size of the font is also important in increasing your readability. You may notice that the different design fonts take up different amounts of space even when they are the same size. This is because the font size is determined by the x- line height, which is the line height of the lower-case x.
There is no definite rule as to which size or line height is best recommended but try to do A/B test to see which font size helps in improving your readability. The goal of this test is to improve focus on readability and lessen eye strain on the web.
Summary
There are still a lot of ways to improve your user experience readability and legibility and some points that I mentioned above can still be discussed further.
Still, I hope that today’s article is helpful enough for UX designers to make the user interface design not only aesthetically design pleasing but also readable and legible.
