nConveying precise information.Typography is perhaps the most widely discussed area of graphic design. And not surprisingly. We have been using books for centuries, and all the while we have been improving and changing them. Much of the knowledge that has accrued in book design can be applied to the design of electronic text, but certainly not all of it. These days, Help designers must be as familiar with electronic text as book designers have been with paper and print.
Text is something that all Help systems use. In fact, because of limitations—cost of goods, time, resources, display technology, and so on—text continues to be the dominant information element in Help files. For that reason, pay careful attention to the design issues that text raises. For example, how much text should you write for one screen? Which font should you use? Should you use color? Can tables and lists present information effectively online?
Text is good for:
nConveying precise information.
It is often impossible to judge visual parameters precisely, for example, the exact distance between two cities on a map. Consequently, where accuracy is required, numbers and words are more effective. (For example, maps translate their visual scale into numbers, “one inch equals 100 miles,” to be more precise.)
nDealing with abstract notions.
Pictures are not often used for depicting abstract ideas, such as “the meaning of happiness,” where traditionally words are much better suited.
nExpressing logical deductions.
Pictures and diagrams can only roughly approximate logical relationships. Words and mathematical notation are usually superior. For example, Venn diagrams are a useful way to illustrate the principles of set theory, but they are not the primary means of expressing those ideas.
However, text can look dull and unappealing when used alone. A “wall of text” is especially disastrous online because users become easily overwhelmed by the information. Text-only Help files also may present problems for poor readers.
For text, the most important factors are legibility and readability. Legibility describes how easily the individual letters and words can be differentiated from each other. Legibility involves many factors, but the most important factor is contrast. The higher the contrast, the more legible the text (if other factors are also considered). Most books achieve high contrast, and thus legibility, by printing black text on white paper. But printed materials also use inverse printing and color to gain high contrast—white text on a black background or dark red text on a yellow background, for example. The same factors apply on computer screens, and so most word processors display black text on a white background. Colored text is also legible on computer screens if there is sufficient contrast.
Readability is similar to legibility but refers more to the ease and comfort with which the text can be read. Obviously the text has to be legible to be readable. But other factors affect readability. For example, the text may be perfectly legible but not very readable if the line lengths are too long or the spacing is too crowded. Another factor of readability is formatting. Users have more difficulty reading text if it has a lot of formatting changes. Too many colors or frequent formatting changes make the information less readable.
When reading any material, people organize the material by categorizing the various text elements according to their importance. They usually do not read all the words with equal attention and in the same order in which they are presented. You can make reading considerably easier if the text elements are visually distinct and consistent within the Help file. For instance, white space provides visual relief for users and helps them assimilate the information; it also signals divisions within the material.
The ease with which users can read text depends upon several factors:
nIts physical size
A 10-point font is sufficient for most screen fonts.
nThe space between lines (known as leading)
Paragraph leading should facilitate reading by emphasizing each line of text. If lines are too close together, they can disrupt reading because of interference from the lines above and below the line being read. Adding sufficient space between lines improves the perceptual grouping of characters into rows.
nThe length of the line
How much leading you use depends on the type size and line length. For example, the longer the line, the more leading it requires because the user’s eye has a greater distance to travel when finding the start of each line.
nThe user’s distance from the screen
nThe angle at which the screen is viewed
Most of the time you can control only the first two factors, so pay particular attention to them to create the most readable text possible.
nParagraphs should generally be indicated by white space between them rather than by indenting the first line or by using other print conventions.
nLeft justification is the simplest and usually the best way to format the paragraphs because everything in the Help window is anchored to the left window border.
Right justification and center-justified text can be effective for single paragraphs or other special-case text, but it is not advisable for body text because it produces a ragged left margin that disrupts reading.
nDifferent reading tasks demand different reading styles, and the presentation should be compatible with the required style.
Is the user expected to read and remember the text, to locate particular items within it, or to react to some items without needing to remember them? For example, standard paragraph formatting is consistent with the user’s previous experience and is simpler to produce. However, if the user has to pick out one item from a set of items, the items should be displayed as a list.
nWhenever possible, avoid cramming too much information into a Help topic.
Help text is a form of hypertext, or nonlinear writing. Users move forward and backward through a series of connected Help screens. Instead of flipping pages directly; they flip them indirectly, on the display. Hypertext is usually more effective if you present text in smaller amounts, rather than in long chapters and sections as in printed books.
nGenerally, divide the information into small chunks, each topic occupying roughly the size of the Help window.
This means a topic may consist of 100 words, 50 words, or whatever amount is required to create a complete idea. How much text you place in a single chunk depends on several factors: the content of the information, the size of the Help window, the font size, and the amount of white space. Always keep these factors in mind when considering the amount of text that you include in a single topic. Do not follow print-based conventions such as filling the page with type; these conventions usually have little or no meaning when creating Help files.
Lists organize information using vertical and horizontal alignment, much like tables. The alignment provides a recognizable structure that tells users the information is related. It also tells them to read vertically, starting from the top of the list.
Online lists aren’t significantly different from printed lists. You should consider the effects of using indents and nested lists, however. These techniques may work better on the printed page than they do in the Help window. Creating too many margins using indents may make the information more difficult to read. Usually white space is a better alternative than indenting for differentiating lists from the rest of the topic. Use the following guidelines when creating lists:
nIf a number of items form an ordered group, place them in a list.
nBecause lists define groups, use visual formatting that reinforces and clarifies the list’s structure as a group.
For example, use an equal amount of space between list items and include plenty of white space around the list. Do not introduce different formatting elements within the group, such as bold or color, that differentiate elements and weaken the group’s internal structure. In other words, always treat all the items within the group the same.
nAvoid using lists within lists, or nested lists, because they may be ineffective online due to screen limitations.
You have more control in print because the page is fixed and is larger than the average Help window. A long nested list in a small window may lose its structure and look like blocks of text stacked irregularly on top of each other.
Like lists, tables structure information into recognizable groups. However, tables provide more control over the information and allow greater flexibility in how the information is presented.
Generally, information within a table invites users to scan in both directions—horizontally and vertically. Therefore, how you design the table depends on how you want users to read the information. In other words, you must decide which orientation—horizontal or vertical—best suits the information. Vertical alignment in a table suggests that the items within the column are the same type (related by information category); horizontal alignment signifies that all items in the row have the same functional relationship to each other.
In printed documents, tables are always a fixed size. In Windows Help, however, you can create relative tables. A relative table is one that adjusts the width of its columns as the user resizes the window. Because the column widths resize dynamically, use a relative table only if you want the information to wrap. If the information in the table requires a more controlled presentation, create a nonwrapping table and have the user scroll to see hidden information when the window is too small to see the whole table.
Use the following guidelines when creating online tables:
nTake care to ensure that the table reads well horizontally.
Although all tables have vertical columns, most tables are read horizontally.
nUse white space or thin rules to emphasize one orientation over another.
When designing horizontally read tables, use ample space between rows but only enough space between columns to separate them. Don’t spread the columns out to fill the screen.
You can also emphasize a table’s orientation by adding thin rules between columns or rows. Thin horizontal rules can help draw the user’s eye across the page. However, don’t use vertical rules unless users should read the table vertically; the vertical lines draw the user’s eye down the screen and make horizontal reading very difficult.
Using slightly different colored backgrounds for columns and rows also emphasizes the table’s orientation but is generally a bad idea because the color may destroy the table’s structure and interfere with readability.
nTo distinguish the table heading from the table text, use a formatting attribute such as bold.
Most tables use headings to show the table’s orientation and to label the information in the columns or rows. If information in the table is read in both directions, you may want to use both row and column headings.
nTry reversing the order of the table columns or wrapping wider items to two lines if the information you put in tables varies in width, creating irregular spaces or very large gaps between columns.
These techniques should help make elements within a column more evenly matched.
nIf a table is very long, you may want to group rows within the table by adding white space between the groups or by dividing the long table into two or more tables.
However, this implies that the information within the table can be divided into logical groupings.
nIf you must mix text and graphics in unusual ways in your Help file, consider using tables to create the effects you want instead of using indents, tabs, or other text-based formatting methods.
Computers do not arrange text and graphics the way you might for a book or magazine—by cutting and pasting things where you want them. Instead you have to rely on the word processor to position these elements in relation to each other. Tables provide a good solution to the problem by letting you place text and graphics precisely in a Help topic.