nIf you use a graphic next to a hot spot (in lists of jumps, for example), make both the graphic and the text hot.Graphics include line art, icons, screen shots of the interface, and pictures with hot spots (hypergraphics). Use graphic images to illustrate concepts and present information visually.
Because of the complex localization process, work closely with your international team to determine the best localization strategies for the graphics in your product.
nIf you use a graphic next to a hot spot (in lists of jumps, for example), make both the graphic and the text hot.
Users tend to click anything that looks like a picture, whether or not you intend it to be hot. Including graphic elements with text hot spots provides users some flexibility, or “forgiveness,” when choosing the hot spot.
nSince information in the Help window is anchored on the left, position bitmaps flush with the left margin, not centered, when they appear alone in a paragraph.
nIf you include graphics within text paragraphs, carefully consider the size of the graphics because they may interfere with the leading.
As a rule of thumb, graphics smaller or slightly larger than the cap-height will not cause layout problems; graphics larger than the cap-height will throw off the paragraph leading.
nWhen providing Help on an application’s terminology, include graphics of the interface elements along with the definition.
A great deal of users’ difficulty in learning new applications is their unfamiliarity with terminology. Many of these terms also have visual equivalents, scroll bars, tool bars, pointers, icons, and custom controls, for example. Showing a small graphic of the term being discussed can help users learn the names of visual elements they must know to use the application (Figure 4.x).
nAvoid confusion between the Help graphic and the application interface when presenting screen shots of the interface.
The danger in using screen shots in Help is that they are easily confused with the “real thing.” One way to avoid confusion is to reduce scale, as in Figure 4.x:
You can often achieve more emphatic results by presenting a partial screen shot. This method also allows you to focus on just that part of the interface you are illustrating (Figure 4.x).
Or you can frame the screen shot with a colored background to avoid confusion (Figure 4.x).
Another method is to make the graphics you use for screen shots appear more schematic-like, making them monochrome and simplifying the details, as in Figure 4.x.
nFor visual presentation and readability, add white space to the left and right of a bitmap in text, or above and below a bitmap in its own paragraph (Figure 4.x).
nConsider carefully how graphics are combined with text in individual topics.
Depending on the color, size, and number of graphics in a topic, they can easily dominate the text and draw the user’s eye to them. If the graphics function as subordinate elements in the topic, their dominance will make the information less readable.
nUse separate graphics for the active and inactive states of custom controls (buttons, for example) that you add to Help topics.
In Windows, menu commands and dialog box options that are unavailable appear dimmed (grey instead of black), so users learn to rely on the application to control availability for them. Providing similar behavior in your Help file will make your controls more consistent with normal Windows behavior.
nBecause of the complex localization process, avoid combining both text and graphics on icons and buttons.
If you include text callouts or explanatory text in graphics, the entire graphic must be recreated in each language to localize the product. Text that is separate from the graphic can be translated without recreating the graphic. For example, in some cases you can create a table and place the graphic in one column and the text in another column (Figure 4.x).
nDevelop a consistent strategy for using graphics that will enhance rather than detract from information.
Don’t burden users with unnecessary, decorative graphics. If the function of a graphic is to embellish the topic (make it interesting, beautiful, or colorful, for example), it may detract from the information presented in the topic and result in less effective communication.
nBe consistent with the visual grammar you create for your Help file by reinforcing the distinction between “hot” graphics and illustrative graphics.
If a certain graphic is hot in one topic, it should be hot in other topics where it occurs. This is especially important when using icons because users match the visual appearance with certain behavior. Changing the function of a graphic without changing its appearance will be confusing. If you do not want the graphic to be hot in all cases, create two distinctly different versions of it.
One way of making the differentiation clear is to use interface conventions for hot graphics, such as three-dimensional buttons (Figure 4.x).
Or, you can use white space to separate the graphic from surrounding text and provide a well-positioned instructional phrase that tells users that the graphic is “hot” or “not hot.”
Another method is to create graphics with text callouts that are formatted the same as hot spots in the Help interface:
If the graphics are purely conceptual art, they can be created in a different style from other graphics:
nTo facilitate the localization process, contact your international team to obtain the localized text that needs to be inserted in each bitmap and create these bitmaps according to the size of this localized text.