If you have worked with JavaHelp or have seen presentations on it, you might be growing accustomed to the standard navigational interface that Sun Microsystems provides with its Java-based online help system. Unless you work with third-party tools or have explored alternative implementations of JavaHelp, you're probably settling for the non-intuitive (not to mention boring) folder and file icons represented in the following illustration:

These icons, used in a standard JavaHelp table of contents (TOC), are the standard icons that Sun ships with JavaHelp. While they certainly help the user distinguish between categories and help topics, they don't help the user determine the type of help topic before opening it. However, you shouldn't let this standard deployment of JavaHelp limit you in how you deploy your help systems to your users. Take advantage of JavaHelp's flexibility as a help system, and present a TOC that not only looks professional but also helps users decide before opening a help topic if it is in fact the type of help topic they are looking for.

The first thing to realize is that there are several types of help topics that a user anticipates when seeking online help. Some of these topic types include:

• Conceptual help
• Procedural help (how to)
• Troubleshooting

Note: Help authors could categorize many more types of help topics. But for the sake of this article, I'll list only these three types.

What if you had a set of help topics under one TOC category that explained text formatting for a word processor system? (Hint: Take a look at the previous illustration.) One topic might include overview information describing text formatting options, another might provide steps on how to apply the text formatting, and yet another might provide troubleshooting information in case the text formatting does not work. Now, what if you had several help topics for each of these different topic types? You can see how that one category could quickly contain many different types of help topics.

Note: Again, help authors could argue that you could restructure the TOC so that only troubleshooting topics were listed under one category and procedural topics were listed under another. But that subject is not the focus of this article. I use this basic example simply to demonstrate how you can manipulate the TOC icons to suit unique purposes.

The following illustration shows how you could modify the TOC for the same help system and use custom icons to enable users to visualize the type of help topic before opening it:

In this new TOC, one icon represents conceptual help topics, another icon represents procedural topics, and a third icon represents a troubleshooting topic. With this new model, users can quickly determine if a particular topic is the type that will help them find the information they need. If users want to know the procedure for working with text formats, they can simply look for the icon with the step numbers. If they want to know concepts, they can look for the icon representing lines of text.

Implementing a system like this one is fairly simple, assuming you have a designer to design and create icons for each topic type. Once you have a library of icons, you can implement the new structure with the code in the JavaHelp map and TOC files.

First, take a look at the code in the map file for the first TOC example (without the multiple icons):

   <mapID target="img.toplevelfolder" url="Images/toplevel.gif" />

   <mapID target="format" url="Topics/Formatting/Format.htm" />
   <mapID target="howtoformat" url="Topics/Formatting/Howtoformat.htm" />
   <mapID target="colors" url="Topics/Formatting/Colors.htm" />
   <mapID target="howtocolors" url="Topics/Formatting/Howtocolors.htm" />
   <mapID target="tsformat" url="Topics/Formatting/Tsformat.htm" />

Notice that the only icon mapped to an image file is the top-level icon (the toplevel.gif in the first line of the sample code). The top-level icon is the icon that appears at the top of the TOC, next to the heading "Word Processor Help." This particular map file does not map icons to image files for the category and topic icons because the HelpSet Viewer does not require any icon information for categories and topics if using the default icons. However, if you want to use customized icons, as in the second TOC example, you must map the new icons in the map file to your custom image files:

   <mapID target="img.toplevelfolder" url="Images/Toplevel.gif" />
   <mapID target="img.category" url="Images/Category.gif" />
   <mapID target="ing.concept" url="Images/Concept.gif" />
   <mapID target="img.howto" url="Images/Howto.gif">
   <mapID target="img.troubleshoot" url="Images/Trblshot.gif">

   <mapID target="format" url="Topics/Formatting/Format.htm" />
   <mapID target="howtoformat" url="Topics/Formatting/Howtoformat.htm" />
   <mapID target="colors" url="Topics/Formatting/Colors.htm" />
   <mapID target="howtocolors" url="Topics/Formatting/Howtocolors.htm" />
   <mapID target="tsformat" url="Topics/Formatting/Tsformat.htm" />

Notice that this new map file now has mappings for all of the new TOC icons. This mapping assumes, of course, that you have placed the custom icon image files in your help system's Images directory. Unfortunately, mapping these icons in the map file is only a fraction of the work required to implement the icons. You now must specify the icons in the TOC file so that the HelpSet Viewer knows which icons to display with each category and topic.

Take a look at the code in the original TOC file:

   <tocitem image="img.toplevelfolder" target="overview" text="Word Processor Help">
      <tocitem text="Text Formatting">
        <tocitem target="format" text="Text Formatting Options"/>
        <tocitem target="colors" text="Font Colors"/>
        <tocitem target="howtoformat" text="Applying Text Formatting"/>
        <tocitem target="howtocolors" text="Changing Font Colors"/>
        <tocitem target="tsformat" text="Formatting Problems"/>
      </tocitem>
   </tocitem>

Notice that the top-level icon is the only icon specified (indicated by the image="img.toplevelfolder" parameter in the first line of code). Again, the HelpSet Viewer does not require any icon information for categories and topics if using the default icons. However, if you want to use custom icons, you must add an image parameter to each line that uses a custom icon in the TOC. Your TOC file would now resemble the following code:

   <tocitem image="img.toplevelfolder" target="overview" text="Word Processor Help">
      <tocitem image="img.category" text="Text Formatting">
        <tocitem image="ing.concept" target="format" text="Text Formatting Options"/>
        <tocitem image="ing.concept" target="colors" text="Font Colors"/>
        <tocitem image="img.howto" target="howtoformat" text="Applying Text Formatting"/>
        <tocitem image="img.howto" target="howtocolors" text="Changing Font Colors"/>
        <tocitem image="img.troubleshoot" target="tsformat" text="Formatting Problems"/>
      </tocitem>
   </tocitem>

Notice that each image parameter uses a map ID that is specified in the map file. The parameter instructs the HelpSet Viewer to display that particular icon at the beginning of the line in the TOC. In this example, I use the img.concept map ID for conceptual topics, the img.howto map ID for procedural topics, and img.troubleshoot for the troubleshooting topic.

Keep in mind that the types of icons you use are only limited to the talent of the illustrator creating the icon image files. Be sure to test different icon sizes with your help system to make sure the icon does not create awkward spacing between and around your help topic titles. You might wonder if all of this extra work is worth it, but I'm sure the users of your help system would tell you it is.