Divide and Conquer: Providing Web-based User Assistance at the Point of Use

By Scott DeLoach

Contents

Click a link below to jump to a particular section; click any "CONTENTS" image following a section heading to jump back here.

Introduction

Web-based applications provide numerous display options for embedded user assistance (UA). Unfortunately, most applications continue to provide a unified, external help system to answer all user questions. An external help system is an excellent approach to providing in-depth conceptual information and procedures. The weakness of an external help system is that it's a passive, external resource. The user has to realize they need assistance, open the help, locate the relevant information, and return their focus to the application. For many questions, this process feels like too much effort for the perceived benefit. As a result, users do not use the help system.

Most user questions should be answered at the point of use (or rather, the point of confusion) using embedded assistance. To the user, embedded assistance provides a large benefit with practically no effort. After using embedded assistance, users are much more likely to click on help links and spend more time using the external help system.

In this article, I will explain how we can use field labels, popup windows, UA panels, and dedicated UA areas to assist users. My goal is to help you select the best embedded assistance display option for different types of UA information.

Basic Questions: Field Labels and Tips    Link to the article contents

One of the most common question that users have is "What do I type into this field?". Unfortunately, poorly written field descriptions are a major reason that users think that help systems are not useful. It only takes a few field descriptions like "First Name - Enter your first name" to convince users that opening the help is a waste of time.

In most cases, the user only has a basic question such as, "What is the maximum number of characters I can type into this field?". These questions should be answered as part of the field label. In the screenshot below from Hotmail (www.hotmail.com), the password field label informs the user that their password must be at least six characters without spaces.

This information should also be provided in a procedural topic about creating a Hotmail account, but the user should not have to open the external help system to answer a quick question.

Exceptions, Photos, and Related Fields: Popup Windows    Link to the article contents

Obviously, not all field-level questions can be answered with field labels. These questions are often based on exceptions like "What if I don't have a middle name?". Other questions, such as "How do these fields relate to each other?", or "What is the difference between these two items?", are best answered using a table, list, or photograph.

The Dodge website (www.dodge.com) uses embedded DHTML windows to provide help for related fields. These grouped help topics allow the user to answer multiple questions at the same time, and they make it much easier to see how different fields are related to each other.

The Dodge site also uses popup windows to provide photographs of truck parts and accessories. These popups allow the user to verify that they have selected the right item. In the screenshot below, the user has clicked on the "Next Generation 4.7L Magnum(R) Engine" link to open the popup window. This website is designed to help people purchase cars and trucks, and the photographs do an excellent job of education the user while marketing the products.

Advanced Questions: UA Panels    Link to the article contents

UA panels provide enough space to answer advanced questions, such as "Why do you need this information?". They normally appear and disappear when the user clicks on a link. However, some applications provide dedicated UA panels. In the example below, the Alamo website (www.alamo.com), includes a static UA panel to assist customers as they rent a car. The UA panel's topics focus on why the user should provide the requested information, how this information is used, and how to handle special cases. The UA panel is large enough to answer numerous questions, and it can link to help topics in an external help window if needed.

Since the UA panel is always on the screen, the Alamo website uses JavaScript to automatically describe the field that has focus. The user never has to ask for help, and relevant assistance is always available on the screen.

Overviews: Page and Section Introductions    Link to the article contents

Page overviews can be used to introduce an application page and to reassure users that they are on the correct page. If a page is divided into multiple sections, each section might have its own overview.

The Bank of America website (www.bankofamerica.com) uses page and section introductions to describe basic concepts and tasks. Each section also links to a popup help topic that provides section-specific procedures and more in-depth conceptual information. When needed, the Bank of America site also uses a dedicated UA panel to answer common user questions. Section-specific questions and short answers are provided within sections (see "Why aren't all of my payees listed here?" in the screenshot). By answering common user questions in the application, the Bank of America site increases user success.

The Neiman Marcus website (www.neimanmarcus.com) provides a rarely-seen but very effective approach to page overviews. The search page, as seen below, provides a description of the search tool with callouts and descriptions directly below the search area. This information is presented as a large graphic, so the user cannot click inside the instructional fields.

This approach provides an excellent overview of the search tool. However, one slight improvement might be to emphasize the difference between the actual search area and the instructional search area. Using a different background color or enclosing the help area in a box might reduce user confusion.

Conclusion    Link to the article contents

Each display option has strengths and weaknesses, and this article is not meant to suggest that any of the display options should only be used for only one type of information. The examples represent best practice uses for each option that capitalize on their strengths. I encourage you to use these examples and ideas as a starting point as you design your UA systems. Most of all, I hope that you see the benefits of combining these embedded UA display options with an external help system to better meet your users' needs.

Matthew Ellison

Scott DeLoach is a founding partner of User First Services (www.userfirst.net), an Atlanta-based consulting company that specializes in designing and creating user assistance. Over the last 12 years, Scott has presented over 60 papers on web-based Help, interface design, embedded user assistance, usability, and JavaScript coding at conferences across the US and Canada, and around the world. He has been developing online Help systems since 1992 and is a certified RoboHelp instructor. Scott holds a Master's Degree in Technical and Scientific Communication from Miami University.

Scott will be presenting an expanded version of this article—"Developing Embedded User Assistance for Web-based Applications"—at the 2004 WritersUA Conference.


up