articles

Designing a Help System for a Web Site

By Theresa Wilkinson, W-edge design
Reprinted with permission from the STC Intercom magazine - April 1999.

When I look at Web sites, I don’t really see what is there -- I look more for what is not there. Even with the sites I now manage, I am always looking for ways to improve the site for the users.

When I worked for a large insurance company, my team as tasked with re-designing the customer service area for a external Web site that supports annuities and mutual fund customers. I proposed redesigning the entire site including an actual help system (like with ones you can create with ROBOHELP) to reduce customer service support calls. I was really surprised that everyone thought this was such a novel idea -- I thought it made perfect sense. Then, it hit me -- you don’t see a lot of help systems for Web sites.

Doing some homework

Researching everything is one of the ways I try to stay on top in the ever-changing world of Web design. So naturally, when thinking of adding a help system to the site, I investigated help systems within the investment sites that I frequent. What I discovered really surprised me: Most of the sites I visited included a glossary of terms (few were helpful) and some sites had frequently-asked questions (a couple had both). But that was all. So how do you go about adding a context-sensitive help system and a glossary to a Web site? And the answer is: It’s all in page design.

Designing pages for a help

When thinking through the help system for this site, I knew what I didn’t want: a long scrolling contents page (a page consisting of a list of tasks) and a lot of jumps between tasks. The reason is that users could get lost and never make it back to the page they needed help to use. I wanted a glossary of terms but didn’t want the user to confuse glossary terms with field definitions. (Glossary terms explain the meaning of words used in the industry; field definitions give specific instructions on filling out an individual field on a Web page.) So I proposed to my team that we design our Web pages around the user’s tasks: Each Web page would contain one task and that task page (as I am calling them) would link to its own specific help page.

Reorganizing the site

When the user lands on the main page of the site, they are presented, as in any other site, with the standard navigation for the site.

The original site was poorly organized. The information on it was badly written, not consistent, and just plain confusing. I contacted our customer service departments and discovered that an average of thirty-five calls a day were from the Internet users. Their questions consisted of forgotten passwords, confusion on a task originally called "Establishing an Account Profile" (renamed "Setting Up Online Access"), fund performance and ticker symbol questions (confusing layout of fund page), navigation (users did not understand the navigational system), and how to get their money out of accounts (information that was not included in the original site). So, obviously, any information a help system could provide to answer any or all of these questions would save the company money.

First, I decided to do was to reorganize the site (help-like information was originally in four different places) and make the navigation easier to use. The new system, navigation (accessible from every page the site) would consist of:

• Products
• Company
• Groups
• Planning
• Service Center
• Contents

The Service Center would include these elements:

• Tell Me More...
• Setting Up Online Access
• Logging On
• Glossary

I then started to organize and write the new help system. The tasks, "Setting Up Online Access" and "Logging On," would each have their own separate help pages. A main Help button on each of these pages would link the task page to its help page. The help page would consist of the task-related help with numbered steps and field definitions.

In addition to the main Help button for each page, there would be individual Help buttons alongside each field that the user had to fill out. These buttons would also be linked to the corresponding help page. However, whereas the main Help button would take you to the top of the help page, the Help buttons alongside each field would take you to the corresponding field definitions somewhere in the help page.

Figure here with text: This idea using a simplified version of the “Logging On” page. Accessing a particular point within the help page is done using an HTML feature called target anchor tags.

Depending on the task, the text of most help pages should fit into a 640-by-480 screen. The "Tell Me More..." page, which is the default when clicking on the Service Center link, would contain the frequently asked questions and a separate link to the Glossary.

So, designing a context-sensitive help system for a Web site is possible. As with designing any Web site, it’s all in the planning a detailed page design. The planning I have described here may not sound all that difficult, but in fact it was, and I hope that all the hard work my team put into this help system helps you.