Return Home

Time Between Projects
by Suzanne Hardy

Illustration © 2002
Ann W. Throckmorton

A little time between projects is a good opportunity to make changes in your online help that can significantly improve usability. The following three miniprojects use links to make big improvements in your online help. If you don't finish these improvements before your next project begins, they can be ongoing so that you work on them whenever you have a little time.

• Change the appearance of different types of links.
• Avoid repetition in your help system by linking to common topics.
• Use image maps to create links from images.

Change the appearance of links
In your HTML-based help system, you may have links that perform different functions when clicked, such as dynamic HTML links that drop down or expand to display text, popups that display a topic on top of another topic, and regular text links that jump to another destination such as a Web page. It's helpful to users if they know what to expect when they click a link¾are they going to see a different topic or Web page, or will further information be explained on the same page? Users appreciate anything that saves them time, and consistent styles and behavior in your online help can achieve this.

You can use your style sheet to accomplish the look you want. Sometimes tweaking your CSS (cascading style sheet) styles will get just the right effect.

The following code is an example of what you can add to your CSS style definitions. In this example, the popup link color is green and when users hover their mouse over the link, the text becomes underlined and bolded. If you always use this style for popups, it can be a good way to distinguish popups from links that jump to another page.

Add the following code to your style sheet (either in a linked .CSS file or in the embedded-style section of an .HTM file).

This is the basic style for the popup link:

a.MyPopupLink{
color: green;
text-decoration:none;
}

This is the popup link style when users hover their mouse over it:

a.MyPopupLink:Hover{
color: green;
text-decoration:underline;
font-weight:bold;
}

This is the popup link style after it is clicked, or visited. Specifying the visited color prevents display of the default visited style and ensures that the link color you want is displayed. Here, the style is defined in the same color as the unvisited link, so the original intent of the style definition (to differentiate it as a popup) is retained.

a.MyPopupLink:visited{
color:green;
}

After you've modified your style sheet with the link styles, you need to define the class of the <a> tag so that the style is applied. Here's an example of how the popup link would look in an HTM file:

<p>This is a <a class=MyPopupLink href="javascript:MyPopupFunction(' http://www.yahoo.com');">test link</a>.</p>

Depending on the HTML editor you're using, you may need to manually enter the class attribute of the <a> tag (or use a search-and-replace function to do so).

Avoid repetition by linking to a common topic
Do you find yourself repeating information in your help system? If your host application has several dialogs that share the same options or a particular feature is available from multiple locations in the application, it can be difficult to keep up with changes in your topics. Linking enables you to keep all the information in one place. Not only does this help you maintain your help system more efficiently, it helps your users by providing them with access to additional information you may not want to include in every topic.

For example, your application includes a new Connect button that can be found on six different dialogs. Since clicking the Connect button can result in a long list of possible results, the description for this button is also very long. Instead of repeating the description in six different context-sensitive help topics, create a separate topic that describes the button, and then link to the topic from the other six topics.

Another good time to use this linking strategy is when you have background or conceptual information that is mentioned in multiple topics. Since you never know how users access topics or where they've been in your help system, you don't have any idea whether they understand concepts unless you describe them in each topic. Save time and maintenance by linking to a single topic, and then you don't have to 1) assume your users already know it already,or 2) include the information in multiple locations.

One of the biggest benefits of online help is its dynamic navigation and linking capabilities. Use it to your fullest advantage to avoid maintaining duplicate content.

Use image maps to create links from images
Image maps are graphics with hotspots. When users click the hotspot, the target displays. Images in your help system can further explain your topic content or dialogs in the host application. With image maps, you can explain individual controls on a dialog without resorting to creating time-consuming callouts in a graphics editor. You can also link to more extensive information than the image provides, if necessary.

Popup links work especially well with image maps. Create topics that describe different parts of the image, and link the image map hotspots to those topics. For example, a screen shot of a dialog can link to a different topic for each option on the dialog.

When you are designing topics with image maps, make sure to let users know the areas on the image are clickable. For example, give instructions to "click the image below," or use a graphics editor to add visual clues for clicking.

Implementing linking strategies is worth the time involved to improve the usability of your help system. These ideas can also be done over time as an ongoing project. It's never too late to improve how your help system delivers information, and links can help you do it.