Guidelines for Displaying Text Effectively
CS 252, Winter 2000
The guidelines presented here are based on a variety of
experimental studies
as well as practical experimentation with user interfaces. Each guideline
is presented with an explanation and a specific example.
Guidelines for Displaying Text
Adapted from Joseph S. Dumas, Designing User Interfaces for Software,
Prentice-Hall, 1988.
(1) Display text using mixed (upper and lower) case and with normal punctuation.
- Explanation: Using all caps reduces reading speed by 12% and makes it
harder to distinguish between titles or words seen only briefly.
- Example: A button showing the name "Show Results" will be seen more quickly
and accurately than if it is displayed as "SHOW RESULTS".
(2) Keep lines to a reasonable length, and put a blank line between paragraphs.
- Explanation: If scanning a displayed line requires head movement or even
significant eye movement, the user may accidentally jump a line or two ahead,
or attempt to re-read the same line multiple times. A good rule of thumb is
to keep lines to less than 60 characters in length (for proportional typefaces;
less for monospaced).
- Example: If an error message or online help text is 100 characters long,
make the popup window narrower so that the text is split into two lines.
(3) Use upper-case words and boldface words only when you need to highlight them.
- Explanation: By convention, all caps and special fonts are used to attract
attention. Over-use of these fonts will distract or confuse the user.
- Example: Don't use upper case just because you would emphasize a word if
you were reading the text: "Choosing the option from the Tools menu is the
BEST way to implement this feature."
(4) Left justify text, leaving a ragged right margin.
- Explanation: The added space that must be inserted between words in order
to align both margins reduces reading time.
- Example: For online help text, don't use fully justified text even if that's
what's used in the printed user manual.
(5) Avoid hyphenation of words between lines.
- Explanation: Hyphenation makes multi-line scanning slower, particularly if
the user accidentally jumps to the "wrong" line when his/her eyes go back to
the left side of the document.
- Example: For online help text, don't insert hyphens to make the right margin
look more even.
(6) Use abbreviations and acronyms only (a) when they are significantly shorter than the full
text and (b) when they will be understood by all users.
- Explanation: While abbreviations and acronyms can save space, they require
greater mental effort on the part of the reader.
- Example: It's good to use acronyms when this is the way a name is known to
most users (such as "GIF format", or "ASCII text format"). It's also permissible
when the user has already seen an abbreviation in many other contexts (such as
"MS Word" and "MS Windows"). Don't coin your own
abbreviations/acronyms and expect the user to learn them (such as "MSW" for
"MS Word").
From B. Shneiderman, Designing the User Interface, Addison-Wesley, 1992.
(1) Use familiar and consistent terminology.
- Explanation:
Carefully select terminology that is familiar to the designated
user community, and keep a list of these terms to facilitate
consistent use.
- Example:
If you're designing a general word-processing interface, don't expect your
target users to be familiar with terms like "kerning" and "leading." Instead,
choose "spacing between letters" and "spacing between lines."
be careful to provide
(2) Ensure that items are distinct from one another.
- Explanation: The ability to distinguish among similar choices is just
as important as the ability to understand what a word or phrase means.
- Example:
Slow tours of the countryside, Journeys with visits to parks, and
Leisurely voyages are less distinctive than Bike tours,
Train tours to national parks, and Cruise
ship tours.
(3) Use consistent and concise phrasing.
- Explanation:
The collection of items should be reviewed to ensure consistency and
conciseness.
- Example:
Users are likely to feel more comfortable
and be more successful with phrases that are grammatically consistent.
Choose
Animal, Vegetable,
and Mineral rather than Information about
animals, Vegetable choices you can make, and
Viewing mineral categories.
(4) Bring the keyword to the left.
- Explanation:
Users scan menu items, button titles, list elements, etc. from left to right.
If the first word indicates that this item
is not relevant, they can begin scanning the next item.
Select names so that the first word aids the user in recognizing and
discriminating among items.
- Example:
Menu items
Save Program, Run Program, and Debug Program
are quicker to distinguish than Program - Save, Program - Run, and
Program - Debug