Differences between revisions 1 and 2
Revision 1 as of 2011-07-24 08:02:58
Size: 54
Editor: eberkman
Comment:
Revision 2 as of 2011-07-24 08:05:21
Size: 5431
Editor: eberkman
Comment:
Deletions are marked like this. Additions are marked like this.
Line 2: Line 2:

== 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 have discussed above, 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 strategy with respect to their custom user interfaces within its mobile operating system and applications. 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.

Describe Readability and Legibility Guidelines here.

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 have discussed above, 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 strategy with respect to their custom user interfaces within its mobile operating system and applications. 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.

Readability and Legibility Guidelines (last edited 2013-04-08 20:05:11 by shoobe01)