Readability and Legibility Guidelines - 4ourth Mobile Design Pattern Library

Message Display Characteristics and Legibility

Mobiles are used differently from desktops, and even most print use of type. They are closest, perhaps, to signage in that they must be comprehended by all user populations, under the broadest possible range of environmental conditions (e.g., poor lighting) and at a glance. The typical mobile user is working with the device in a highly interruptible man- ner, glancing at the screen for much of the interaction. The message display is competing with millions of other stimuli in the visual field. Therefore, mobiles must be designed to stand out appropriately, beginning with legibility.

The following is a list of legibility guidelines for mobile devices:

Avoid using all caps for text. Users read paragraphs in all caps about 10% slower than mixed cases. (Nielsen, 2000).
With age, the pupil shrinks, allowing less light to enter the eye. By the age of 80, the pupil’s reaction to dim light becomes virtually nil (Nini: 2006). Use typefaces that have more visually distinct characters in certain cases, while still maintaining a desired unity of form.
Older viewers with aging eyesight can benefit from typefaces that have consistent stroke widths, open counterforms, pronounced ascenders and descenders, and wider horizontal proportions, More distinct forms for each character (such as tails on the lowercase letters “t” and “j”).
Try and use plain-color backgrounds with text because graphical or pattern backgrounds interfere with the eye’s ability to discriminate the difference.
Sans-serif is often the default choice as it works well enough for all uses, at all sizes. Serifs may or may not help with readability, so there is no special reason to use them. Consider using default faces that carry through the sensibility of the OS, such as Helvetica (iPhone’s default typeface). Verdana is also good, as it has a larger x-height and simpler shapes, designed specifically for on-screen readability. There are numerous mobile-specific faces as well.
Almost all text should be left justified, only items such as titles centered.
Use typefaces that have strong and open counters (or "counter-forms") – often, using squared-off shapes for small counters is a good idea.
Use typefaces with un-stressed forms – straight, even-width lines.
Consider how different pixel densities across mobile platforms affect physical sizes of elements. Using Ems to define the size of fonts in CSS may provide ease.

Message Display Readability

As we discussed earlier, legibility is determined by how we can detect, discriminate, and identify visual elements. But legibility is not the end to this process of designing effective mobile displays. We must make sure they are readable. When readability is achieved, the user can then evaluate and comprehend the meaning of the display.

Readability is based on the ease and understanding of text. It is determined by whether objects in the display have been seen before. Thus, readability is affected by the message’s choice of words, the sentence structure, appropriate language, and the reading goals of the user (Easterby 1984).

Reading Modes

In September 2004 Punchcut worked with QUALCOMM to develop a typographic strat- egy with respect to its custom user interfaces within its mobile operating system and ap- plications. In that study, Punchcut determined three modes of reading and understanding behavior that occur within the mobile context (Benson 2006).

These modes consider the duration and size of focus for textual attention:

Glance

Users are in “Go” mode and they need quick access to frequent and/or critical tasks. Their focus is distracted and minimally on the task at hand. Users rely on shape and pattern recognition in this mode.

Scan

Users are sorting and selecting, scrolling through lists of choices and options. They apply more focus than when glancing, but not their entire focus.

Read

Users are reviewing and comprehending information, and apply their entire focus on desired information.

Language Requires Context

These three modes are based within the context of the user’s goals. Just like a user’s goals require context, so does the meaning of language derived from the message’s choice of words. Without context, the intended message displays meaning may become misunderstood.
In our everyday context, we must derive meaning from other’s intentions, utterances, eye movements, prosody, body language, facial expressions, and changes in lexicon (McGee, 2001). When context uses more individual pieces, the less ambiguity we will encounter in the messages meaning.
In mobile devices today, we may not have all of those contextual aids available to help us derive meaning. The mobile user is presented only with the aids the device’s OS, technology, or the designer’s intention have provided.

Readability Guidelines for Message Displays

The following guidelines and suggestions should be considered when designing readable mobile displays.
Vocabulary

For on-page elements -- such as the text of Titles, Menus, and Notifications -- use vocabulary that will be familiar to your user. Do not use internal jargon or branded phrasing only familiar to the company and it’s stakeholders.
Use vocabulary specific to the task at hand. General and vague titles will create confusion.
Strive for no help or "FAQ" documentation. With clear enough labels, you can often avoid explaining in a secondary method.

Images as Aids

Images can provide additional visual aids to reinforce a message’s intended meaning. When needed, use images that are clear in meaning. Do not use images that have arbitrary meanings or require learning.
Image meanings are socially and culturally created. Even the best icons will not be understood for some users. Using images alone without text labels may result in varying interpretations.

Overflow or Truncation

Make sure key titles, button labels, softkey labels and similar items fit in the available space. Do not allow them to wrap, extend off the screen or truncate.
For certain cases, such as lists, tables and some other descriptive labels, the text may truncate. When possible, do not break words. To indicate the truncation, use an ellipsis character. If not available, use three periods. Never two or four or any other number. Sometimes, it may be suitable for the word to disappear under the edge of the viewport or some other element instead to indicate the truncate.
Rarely, the marquee technique may be useful for list items. Text is truncated, flowing off the screen, and when in focus it scrolls slowly so after a brief time the entire text can be viewed by the user.
Long text, in paragraphs, will always wrap using one of the methods described more in the Alignment section above.
If the entire text of a paragraph cannot fit, or is not needed (such as the beginning of a long review) it may begin as a paragraph, and truncate at the end, to indicate there is more content.

Line Length

50-60 characters per line is suitable. If you need longer lines, increase leading, but there are limits to how far you can go. Around 120 characters, users might find it difficult to scan that far.
The optimal line length varies around a multitude of factors. These factors include: display size, line size, type size, kerning, color, margins, columns, and visual acuity.
* Users’ subjective judgments and performance do not always correlate. Studies have shown that users may prefer shorter line lengths, but may actually read faster with longer lines.
Next: Typefaces for Screen Display

Discuss & Add

Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Examples

If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.