Pile of wooden tiles with latin alphabet letters and characters.
Editorial

Understanding the Impact Text Treatment Has on Usability, User Experience

9 minute read
Tobias Komischke avatar
The way text is formatted can measurably influence productivity and user satisfaction.

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”).

Picture1 Screen 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.

picture 2 font type

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.

picture 3 letter 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.

picture 4 text orientation

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.

picture 5 text alignment

When text is used in forms, the following rules from ISO standard 9241-143 apply:

Learning Opportunities

  • 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.
    picture 6 label alignment

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:

picture 7 text size expansion
www3.org

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).
picture 8 readability
wikipedia

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.

About the author

Tobias Komischke

Tobias Komischke, PhD, is a UX Fellow at Infragistics, where he serves as head of the company’s Innovation Lab. He leads data analytics, artificial intelligence and machine learning initiatives for its emerging software applications, including Indigo.Design and Slingshot.