H8 Context-Sensitive Help

H8 Context-Sensitive Help

graphics/common.jpg Background

People will always encounter problems, finding that they need more information to complete a task. This may even occur when they are trying to complete a task in a PROCESS FUNNEL (H1). Help your customers by offering context-sensitive help that provides additional information related to the current task. This pattern describes context-sensitive help in general, presenting guidelines for how to use it most effectively.

graphics/common.jpg Problem

Customers sometimes need highly specific help to complete a task.

Sometimes, in the middle of a task, customers have questions that cannot be answered on the current page. Your Web site might already have a help page, but it does not make sense to force your customers to go to that page and lose the context of their work.

Address this problem by providing context-sensitive help. This means providing appropriate answers, both in text and links, near where customers are likely to have questions. The content might include any of the following:

  • An example of what is expected, helping to PREVENT ERRORS(K12)

  • A MEANINGFUL ERROR MESSAGE (K13) describing the problem and how to solve it

  • Detailed descriptions (such as the POP-UP WINDOW (H6) in Figure H8.1 describing a feature in great detail)

    Figure H8.1. Dell provides links to context-sensitive help to give customers detailed descriptions of features. This context-sensitive help is contained in a pop-up window, letting customers maintain the context of the task while seeing the information they need.

    (www.dell.com, October 24, 2001)


  • Steps describing how to do the task

  • Part of the FREQUENTLY ASKED QUESTIONS (H7) page

In this section we describe some ways of using context-sensitive help on your Web site.

Place Context-Sensitive Help near Where It Is Needed

Place links and text to help your customers spatially. As Figure H8.2 shows, MSN Hotmail puts a "Why Sign Up?" link right next to links letting customers sign up for an e-mail account on its SIGN IN/NEW ACCOUNT (H2) page. MSN Hotmail also has "Forgot Your Password?" and "Problems Signing In?" links right next to where customers can sign in and check their e-mail.

Figure H8.2. MSN Hotmail offers a great deal of context-sensitive help on its sign-in/new account page. Help appears in the form of friendly questions, such as "Why Sign Up?" "Forgot Your Password?" and "Problems Signing In?"

(www.hotmail.com, October 26, 2001)


Consider Using Pop-Up Windows to Let Customers Maintain Context

Use a POP-UP WINDOW (H6) to display help when people need to see the help page and stay on the same page. The résumé builder service provided by Monster.com, shown in Figure H8.3, has links to sample titles and objectives. Clicking on one of these links opens a pop-up window that contains examples, letting people see the information and still type in their information in the text fields.

Figure H8.3. Monster.com, a Web site that matches job seekers with employers, provides a service where prospective job hunters build online résumés. This screen shot shows the step of the résumé builder in which job hunters are expected to enter in a title and objective. To help, Monster.com provides links to examples, which appear in pop-up windows.

(www.monster.com, October 26, 2001)


graphics/common.jpg Solution

Help your customers by placing context-sensitive text and links near where they are needed on a page. Consider using pop-up windows to display the help, letting people continue with their tasks.

Figure H8.4. Context-sensitive help should be placed near the content that needs it.


graphics/common.jpg Consider These Other Patterns

Use context-sensitive help to PREVENT ERRORS (K12) and to provide MEANINGFUL ERROR MESSAGES (K13). Link context-sensitive help to a specific FREQUENTLY ASKED QUESTION (H7), or display it in a POP-UP WINDOW (H6) to let people maintain the context of a task.

     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows