Creating Online Help (Part 2): Strategies and Implementation

Designing Windows for Online Help

Designing online Help windows and screens represents one of the three major steps to developing a Help system. After creating your topics (which I cover in Part 1), you need to determine what type of windows will house these topics. When designing your windows and screens, consider the following ideas:

• Don't force context-sensitive Help windows to compete too aggressively for the screen real estate that is shared with your application. Users are typically annoyed when they have to resize their Help windows because they cover up the application that it references.
• When using context-sensitive Help windows, try to make your windows stay on top of other windows so that your users don't have to toggle their Help window back on top constantly after performing a step in a procedure.
• Don't cram too much information into a Help screen. Allow for adequate blank space in your topics and provide padding between the window and table borders and your text. This creates a design that your users will find easier to read.
• Avoid background images, watermarks, and colors that make the Help topic text difficult to read. Instead, choose conservative fonts and colors such as black or navy text on a white, cream, or very lightly colored background screen.
• When using background images or watermarks, make sure the window's default background color does not clash with the appearance of your background image or watermark. When displaying a topic with a background image or watermark, it often takes a brief moment for the background image to appear. If the Help screen's default background color differs sharply from a background image, a distracting flash of that background color will appear before the background image appears.
• Strive for simplicity in your Help design. For the most part, you need very few styles in a Help system. Keep your style conventions consistent. Work with vertical spacing and indentations to organize Help information visually.
• Take advantage of tables to organize complex information and make comparisons.
• Use pop-up definitions, as well as expanding or drop-down text, to explain terms used in main and secondary windows. Consider collecting your brief definitions in a glossary topic or inside a glossary tab.

Window Types

Three window types are available in HTML Help and WebHelp: main windows, secondary windows, and pop-up windows. Main and secondary windows are known as "static windows." They remain on your users' screens until they are manually closed. Secondary windows that appear from links in main windows close themselves when the main window is manually closed. Pop-up windows are known as "temporary" windows that remain on your users' screen only as long as the focus is on them. They close automatically.

Main Windows

Main Help windows typically include large amounts of conceptual and background text (see Figure 1). Although the Help author can configure main windows in any way, they normally feature a menu bar and a toolbar. The Help author may design a default size and position for all the main Help windows, although of course a user may resize or move the main and secondary Help windows however they prefer. You can also organize HTML Help windows so that they default to the size and position the user defined after the window was closed.

Figure 1. A main HTML Help window (Microsoft Solitaire)

Designing the default size and position of Help windows may be problematic for two reasons. On the one hand, you won't want to cover up too much of the software product. On the other hand, more scrolling is required for smaller windows and users generally prefer windows that do not require much scrolling. This is a conflict you must try to reconcile for the most optimal window design.

When using tables, it is vital to avoid forcing the user to scroll horizontally. Also, you want windows to be large enough to accommodate all your graphics, rather than force users to scroll across or down images.

Secondary Windows

Secondary windows appear in addition to, or instead of, a Help system's main Help window (see Figure 2). You can use them for many purposes. Unfortunately, you cannot use secondary windows inside HTML Help as easily or flexibly as you can in Windows Help. They are only available through links in the table of contents and index. There are ways to display secondary windows through links and buttons inside topics, but this requires workarounds. It is best to design secondary windows so that they do not cover up the area of the application they address.

Figure 2. Secondary Help window displayed on top of its parent window (Microsoft XP Professional)

Pop-up Windows

Pop-up windows are designed to display brief amounts of information off a parent main or secondary Help window (see Figure 3). They are ideal for definitions of unfamiliar terms or brief examples and images. They appear temporarily on top of larger windows that include topics with more involved text. By appearing temporarily when, say, a user selects a pop-up hyperlink composed of an unfamiliar term, the text that displays in a pop-up enables the user to maintain her point of view in the main window rather than jump away to a topic in the parent window.

Figure 3. A definition style topic in a pop-up window off the main Help window (Microsoft's Accessibility Options)

Another type of frequently used pop-up window is the "What's This?"–style pop-up window (see Figure 4). It is composed of small blocks of text in a temporary window. These pop-up windows typically appear when called as field-level, context-sensitive Help directly from the software product's interface.

Figure 4. A field-level, context-sensitive "What's This?"–style Help pop-up window (Microsoft Word XP)

Page 2 of 8

Previous Page

Next Page