Legibility is the ease with which a user can not only read the text, but also understand it. In my experience as a UX designer, I saw it as the most overlooked part of user experience. Many times I participated in usability tests checking if it’s easy to find some information in an app or click on some elements on the website, but hardly ever in the ones focusing on checking if the choice of typography helps of disturbs users in consuming the content. That’s a pity, so in order to evangelize enhancing user experience of reading, I put together this simple how-to article after reading which you will be able to run your first legibility test today.
In this tutorial I will focus on teaching you how to test legibility of your design with users mostly for digital use cases (f.ex. when you design an app or a website). However, if you create a design for print — this article is also useful for you. Should you need any specific tips for organizing a print design legibility test — just leave a comment below.
This method is of great use for teams who create products whose users mainly interact with them not by clicking or tapping on the interface, but reading the text. To name a few examples these can be:
- blogs
- landing pages
- digital media sites (newspapers, magazines and such)
- customer care sites like FAQs
- customer review pages
- product pages with descriptions about a product such as:
- how something works: (how to use a product for instance a medicine in pharma; who is a product for in cosmetic business; how to put together a piece of furniture; product specification in electronics; how to change subscription in telco and subscription based services).
As you can see, the usage of readability testing is quite vast and most of the digital products, websites and apps do have some of these kind in their content.
From as early as the invention of writing people try to create those golden rules of text that make it the most readable. Throughout centuries scriptors and later on printmakers and finally web designers made efforts to establish the golden ratio of text size to line height and column length. Type designer has made tremendous efforts to optimize kerning to x-height and counter to create the most readable fonts.
However, with contemporary number of device sizes and ratios there is no such thing as universal rule of typographic proportions that produce perfect readability.
What in my practice turns out to be more practical (and faster) is to test how readable is the particular font that goes with branding of the particular brand you design for and appears on the given screen ratios.
Apart from the choice of font, there are several factors that can improve or decrease readability. Among these are primarily:
- font weight
- font size
- leading (something that is also called line height)
- line width
- justification
- color of text
- case usage (capitalized or lower-case letters)
Of course, apart from the mentioned elements the content itself influences readability too. Unfortunately, as a designer I am not expert in that and in this article I am not diving into this area on purpose. The research of that has been a subject of scientific inquiry since circa 1880 and is rather a field of expertise of linguistic professionals than designers.
Coming back to design, when you are about to test readability of your design, you probably have a couple of ideas or versions how text should be displayed. In order to run a test, prepare the same kind of text in the same layout, but in the versions that differ from one another with only one variable.
Example:
You are designing a landing page for a coding bootcamp. You’d like to see if the bootcamp description in the first fold is readable for the users. You’d like to test if it’s better to use Roboto font in regular or medium weight or change the look and feel completely and instead of Roboto use Montserrat font in light or medium font weight.
Then prepare for the test four versions of the layout — one with bootcamp description in Roboto Regular, one in Roboto Medium, one in Montserrat Light and one in Montserrat Medium. Keep everything in the design exactly the same but the font, so other factors don’t influence how people will perceive your design.
What proves that the text is readable is the fact that people can get it’s message clear. Define what is the message in the text that the users need to understand to asses the text as readable — these can specific key words that create the main message of the paragraphs you display in the text to the users.
Example:
The intro paragraph in the first fold of the landing page of the bootcamp is: “Your studies do not give you enough practical knowledge? Your current job does not give you satisfaction and you’d like to make your first steps into the world of IT? Sign up for Native Mobile Bootcamp — six-week programming bootcamp on University of X completely for free. You will learn how to code native mobile apps in iOS and Android from the experts from Forbes 500 companies that are our alumni”
The key messages that people are expected to understand from the text are:
– that the bootcamp is about iOS and Android native app development
– that the name of the bootcamp is Native Mobile Bootcamp
– that it lasts for six weeks
– that it’s for free
Therefore the key words you can select are:
– programming/app development
– iOS
– Android
– native
– six weeks
– free
– Native Mobile Bootcamp
The method that comes at hand is a modified version of 5 second test. That’s a simple usability method that allows to recall the first impressions users got during a 5 second interaction with a piece design. 5 seconds is usually too short to read a short paragraph, so I’d recommend to extend it to 10 seconds.
That means that when you sit to the test with a user, you display to him or her the design for 10 seconds and then ask the questions that are intended to verify how much he or she can recall.
As the intro it’s good to give to a user some general instructions about what is going to happen without using the words that appear in the text like “Today I am testing a design of a fragment of a website I am working on. I’d ask you to have a look on this design and later on I will ask a couple of questions”.
Example:
After you have shown to a user the first fold of the bootcamp landing page in version A (Roboto Regular — your design starting point) for 10s, you can ask the following questions:
1. What can you learn during the course?
2. What is the name of the course
3. How long does it take?
4. Do you need to pay anything for the course?
You can modify those questions and they are good as long as they do not give the explicit hint (Can you learn to code mobile Android apps during the bootcamp?). I would also refrain from closed questions as much as possible to give the chance for the users to formulate the answers with their own words instead of just saying yes or no. However, with certain keywords like “free” in our example it’s hard to create a question without hints that also leave the space for more elaborated answer. In this case situation is black and white — you ask one needs to pay for the course and you get the answer “no” — then it’s point for you and your design. You get the answer “no, it’s for free” — it’s even better. You get the answer “I don’t know/It doesn’t say anything about the price” — then no points for you and the design goes for redesign round.
The number of keywords that you picked create the full score a tester can get in the test as point goes for one keyword. However, testers might use synonymous words in their answers. For instance, instead of replying “The course is for free” they can say “There is no charge for the bootcamp”. Then for synonymous phrases you also assign a point.
Example:
You have shown the design for 10s to the first user and asked the questions. The answers that you got are:
1. “You can learn to code apps” (2 points out of 5 — nothing mentioned about iOS, Android and native)
2. “Native Mobile Bootcamp: (1 point — the tester recalled the full name properly)
3. Six weeks (1 point)
4. I don’t know (0 points)
The full score is 4 out of 8, which is not splendid.
The initial goal of the test in the example was to check which of 4 text formatting concepts is the best. In one test, you can test two versions one after another that differ with one factor, f.ex. font weight. In order to get more precise results, change the order in which you show versions to the testers — the second read is going to be easier anyway, because users know what are the questions they did not answer and they read the text already.
Of course you can also test those designs on completely different groups of users too, however then the aspect of individual differences of users or the context of the test also play a role (f.ex. in the first test everybody in the tester was before lunch and they did not care about your test at all and in the second group they were more focused as they already ate and were not in any rush). Try to minimise those factors by for instance making your best to keep the conditions of the test as similar as possible (the same place, time of a day and such).
Example:
You want to primarily check if Roboto is better than Gotham or the other way round. The next version that you show to users can be the same text in Gotham in this case. Or in Roboto Medium if your goal is rather to see if slightly heavier font becomes more readable.
In order to make it lean, during everyday work I’d recommend not to overdo it with formal recruitment of big groups of participants as that can effectively stop you from running any test at all. The number of participants most commonly used in usability testing is 5 and that perfectly fits for this case as well.
In readability tests you want to find out if the design of the text makes it easy to be read by people. It happens that reading is a skill that quite commonly spread in modern society, so recruiting participants to this kind of text is no big hustle. Demographics is not a determining thing in those tests, so it’s very easy to recruit participants who meet criteria for this particular test. I’d rather refrain from asking for help your 97-year old grandpa or 5-year old kid as reading can be a bit problematic for people of certain age, but as long as your participants have already learnt how to read and do not have sight deficiencies, they are a fit. I’d also refrain though from recruiting people who work with you on the same project, because they already know what it is about.
It happens that both fonts or text formatting concepts do not bring you to perfect results in readability test. Then it’s good to experiment with other factors that influence it, the key being line height and column length.
Of course, for big projects you can also test readability with more formal tools. This method is a fast technique to gather user feedback without great effort, time and money which from my perspective are the most popular reasons for not running any type of usability tests especially in big organisations (where managing the whole setup can be quite problematic due to their scale) and in startups and agencies (where limited resources can be a real blocker).
This method perfectly suits to be embedded into agile processes and design sprints too.
Hit the heart if you like it and leave a comment if you’d like to get more tips or share your thoughts.
Take this method to your office and enjoy using it on daily basis!