Editorial
We work with modern software through so called GUIs – graphical user interfaces. And yet, most information being displayed on the screen is text-based. The way text is formatted can measurably influence productivity and user satisfaction. While most software ergonomic rules are eternally true, there is at least one that has changed in the last 10 years.
This article presents the most important do’s and don’ts of text treatment.
Readability and Legibility
But before we get started, it is helpful to make the distinction between readability and legibility:
| Readability | The ease with which written text can be read and understood. For example, do readers understand a certain paragraph? |
| Legibility | The ease with which characters (and in consequence words) can be recognized and distinguished. For example, do readers recognize a “t” for a “t”? |
Accordingly, legibility is one of the drivers of readability. In the following you’ll see rules relating to both of these concepts.
Related Article: Are UX and CX One and the Same?
Text Size
An old rule states that this is the single most effective variable to increase usability. We can only perceive visual cues that extend 1 minute of arc, which corresponds to a 1/60 degree viewing angle or roughly half a pixel on a standard computer monitor. The International Standards Organization states:
| “Character heights of 20 to 22 minutes of arc are preferred for the most tasks. The minimum character height shall be 16 minutes of arc.” ISO 9241-303 |
That minimum translates to an upper-case character height of 2.33 mm (0.092 in). The challenge is that the physical size of text on a computer screen depends on many factors including the screen resolution. To simplify the matter, the Web Content Accessibility Guidelines (WCAG 2.1) calls for the ability of users to resize text up to 200% and otherwise considers 14 points as a normal and 18 points as a large font size.
Color Contrast
Without sufficient contrast between text and its background, it can be hard to decipher letters and words. The Web Content Accessibility Guidelines (WCAG 2.1) require a contrast ratio of 4.5:1 for normally sized text (generally 14 points) and 3:1 for large fonts (at least 18 points or 14 points bold). The contrast ratio is based on the relative luminance (brightness normalized from 0 to 1) of the text and background colors.
Display Polarity
Whereas the previous paragraph talked about the contrast level between text and background, display polarity refers to whether dark text is shown on a light background (“positive polarity”) or vice versa (“negative polarity”).
ISO standard 9241-303 states that “for most tasks, positive polarity is preferable.” The reasons are that dark text on a light background:
- Avoids the need for bright-to-dark adaptation for the eyes when users in a light office environment look away from the screen and then back. Dark adoption takes much longer than light adoption.
- Causes less eye strain.
- Improves legibility, owing to better recognition of characters at the same contrast, especially for older people.
- Shows less reflections on the screen from lamps or windows.
Related Article: Usability Testing: 7 Metrics to Assess Ease of Use
Font Type
The many fonts we have available can be categorized into serif and sans-serif fonts. Serifs are the little strokes at the ends of letters.
These little “feet” improve legibility in continuous text because they help to structure and discriminate characters. This is based on experimental findings showing that the endings of a character are the most important properties to identify a letter. Classic software ergonomics said that sans-serif fonts are preferred on screens, because due to lower screen resolutions (compared to print) serif fonts look fuzzier, especially at small sizes. With the emergence of retina displays about 10 years ago, this rule has changed. It is one of the very few software ergonomic rules that has been revised. Retina displays exceed the resolution power of our eyes, so the serifs can be shown crisp even in small text.
Letter Case
We can write words and sentences in lowercase, uppercase, or mixed case.
Most human factors specialists say that mixed case text is preferable and yields the highest reading speeds for the following reasons:
- The upper and lower extensions of lowercase letters (ascenders like in b, f, h, and descenders like in g, j, p) create the shape typical for a specific word and therefore boost legibility.
- Additionally, mixed case helps to understand the sentence structure as uppercase is used in the first letter of names or at the beginning of a sentence.
There are opposing findings, however. IN EXPERIMENTS IT WAS SHOWN THAT DUE TO ITS SIZE UPPERCASE IS MORE LEGIBLE IN TERMS OF READING SPEED THAN THE OTHER CASE STYLES, ESPECIALLY FOR VISUALLY-IMPAIRED PEOPLE.
I personally am in the mixed-case camp and believe that for people with normal vision all uppercase like shown above is harder to read than mixed-case. In fact, New York City in 2010 spent $28 million to exchange their 250,000 street signs from all uppercase to mixed case.
Text Orientation
Most texts we see on computer screens (as well as in print media, billboards, etc.) is horizontally oriented. Sometimes we see rotated text, e.g. chart labels that have been rotated at a 45 degree angle, or 90 degree rotated labels on vertical sliders. Rarely we see a marquee-style text orientation where the letters are below each other.
According to scientific studies and ISO standard 9241-143, horizontal text should be used as it provides the highest reading speed. While there is no difference between right or left-rotated text, marquee-style provides the worst performance and should be avoided. There is also another reason why marquee-style is sub-optimal: it consumes more real estate than the other orientation variants. On screens with high information densities this is a disadvantage.
Text Alignment
In continuous text such as in paragraphs, text should be left-aligned (also called “ragged right”). This supports the reading direction we are using in the western world. In cultures where you read from right to left, the text should be right-aligned. Justified text that creates clean edges on both sides is not recommendable because it creates white spaces that create the visual impression of vertical rivers (shown in blue below) that are distracting.
When text is used in forms, the following rules from ISO standard 9241-143 apply:
Learning Opportunities
Webinar
Jun
6
The Future of Social Media: Emerging Trends and How to Stay Ahead of the Curve
The impact of emerging technologies like AI on social media
Webinar
Jun
7
The Building Blocks of Personalization
This webinar will explore how personalization can create powerful ecommerce shopping experience.
Webinar
Jun
8
Attracting—and Keeping—Your High-Net-Worth Investors
Join PwC to dissect their recent survey findings on a specific customer subset — high-net-worth investors.
Webinar
Jun
13
The Future of Contact Centers with AI at the Helm
Learn how to balance human intuition and interaction with the potential uses of AI to create delightful and lasting CX
Webinar
Jun
20
3 Steps to Unlock Your Customer Data and Drive Revenue
Discover how Twilio Segment’s #1 Customer Data Platform helps implement data-driven strategies.
Webinar
On demand
AI for Marketers: Optimize Personalization Across the Funnel
Understand the benefits of utilizing AI across your entire marketing stack
- Labels should be aligned such that they are as close to the entry fields as possible. Eye-tracking studies demonstrated the increased effort in looking back and forth between label and entry field when both are too far apart.
- If the label lengths are different, the labels should be right-aligned. This is the majority case.
- Only if the label lengths are similar, the labels can be left-aligned.
- It should be mentioned that it is also a good option to place the label above the entry field. This not only ensures closeness between both elements, but it is also beneficial in terms of text size expansion (see next topic below).
- Text in entry fields should be left-aligned.
- Numbers in entry fields should be right-aligned.
- If numerical fields have a different number of decimal places, they should be aligned to the decimal point.
Text Size Expansion
When text is translated into other languages, the number of letters that the text consists of changes. This has implications on the real estate that is needed to host the text. If you, for example, consider forms (see the previous rule above), the horizontal real estate needed for labels varies depending on the language. The World Wide Web Consortium (W3C) shows the following example of how the text size of one word various between different languages:
To accommodate for text size expansion, you should follow these guidelines:
- Leave room to accommodate text expansion. According to W3C, to stay on the safe side you should accommodate for 300% of expansion.
- Place labels above form fields (refer to the “Text Alignment” section above).
- Consider using icons rather than text.
- Consider alternative layout styles to reduce amount of text.
Write Text That Your Audience Can Understand
This is about readability. The average American adult reads at about a 9th grade level. You may argue that your product is utilized by a highly educated audience, but even those users will appreciate easy-to-understand writing.
Best practices include:
- Keep your sentences short. The fewer words the higher the readability. Stay below 20 words.
- Use paragraphs to visually separate blocks of text. Five sentences per paragraph in average is a good amount.
- Choose words with few syllables over words with many syllables, e.g. “big” is better than “enormous”
- Active sentences are easier to understand and require less words than passive sentences.
Related Article: No Service Design, No Customer Experience
Measuring Legibility and Readability
(A) Legibility
There are multiple ways you can assess how easy it is for your audience to recognize characters or words:
- Measuring how quickly individual letters or words can be identified.
- Measuring how fast a sentence or paragraph can be read.
Both of these measures can be attained through taking the time it takes to test people on how to recognize or read something. As an alternative you can also expose what needs to be read only for a defined brief period of time to test people — and then measure how many of the shown elements they can read during that time.
Another approach that does not involve a timing test is to test the minimum size that letters and words can be read at — the classic eye doctor test; however, it’s not testing the eyes but instead the characters.
(B) Readability
To assess text comprehension, there are several tests available. One of the best known is the Flesch–Kincaid readability test which calculates scores from the number of sentences, words and syllables used in a text (refer to the readability best practices above).
A good readability score is between 7th and 8th grade level for a general audience. You will have to decide what grade level you want to target based on your audience. When in doubt, you should always opt for lower levels.
Take, for example, the documentation of an online stock trading platform. If you assume that these users are able to read on a college level, and your assumption is wrong, you either lose customers or your support desk will be overrun — or both. Tuning the text toward a lower grade level does not harm you, in fact, it can only help your cause.
In Microsoft Word you can get Flesch–Kincaid readability scores through a feature called “Show Readability Statistics”. You can also go to Readability-score.com and paste in your text for an instant rating.
The impact that text treatment has on usability and user experience cannot be overstated. This article only covered some of the most important issues to consider, but they have the potential to boost the experience of your audience.
Learn how you can join our contributor community.
