Web Application Design Patterns- P16

WEB APPENDIX Help
6
Solution
Create a page to answer users ’ frequently asked questions (FAQs). It’s import-
ant that questions listed in this section really are “ frequently ” asked questions
and organized so that basic questions are answered before the advanced ones
( Figure Web.7 ).
Why
An FAQ page is where users are likely to go before going to more detailed
application-level help to see if their questions can be answered; many users
assume their questions are common and likely asked by others. Furthermore, com-
pared with other forms of help, FAQs are usually “ How do I … ? ” type questions.
Users can more readily relate them to their own task and quickly narrow down
their choices to a few appropriate questions or determine that their question is
not answered and consider other forms of help. Companies also benefi t because
they can reduce the calls to customer support ( Jarrett, 2007 ).

FIGURE WEB.6
QuickBooks Online incorporates application help as contextual help as well.
Depending on where users are within the application, clicking “ Help ” shows them the relevant
section of the application help in a separate window.

FIGURE WEB.7

FAQs on Digg.
Clicking on a
question causes
the area below it to
expand, revealing
the answer.
7

How
There are several options for presenting FAQs ( Figure Web.8 ). The most com-
mon approach is to list FAQs and link them to corresponding answers. When
users click a question, they are taken to the answer on the same page (with a
“ back to top ” link) or on a separate page (with a “ return ” link). Another option
is to show the answer just below the question by expanding the space below
the question. This approach is benefi cial, since it eliminates navigation to a dif-
ferent location to fi nd answers, and users do not have to continually return to
the list of questions to explore other questions. If the list is relatively short, it is
usually suffi cient to simply list questions and answers without requiring users
to navigate to the answer.
CATEGORIZE A LONG LIST OF FAQS
If the list of FAQs is long (e.g., more than 30), organize them based on com-
mon task categories, sections of the web application, or both. Categorizing
a set of questions allows users to quickly focus on one or more categories of
interest and get their questions answered quickly ( Figure Web.9 ).
Related design patterns
FAQs should be linked from the pages within the application where users
are likely to request help to make them contextual (CONTEXTUAL HELP).
Frequently Asked Questions
(a)

FIGURE WEB.8
FAQs can be presented by linking a list of questions to the answers with a
link to return to the list (a); expanding the answer in place when users click on a question (b);
or listing questions and answers together (c).
(b)
(c)
WEB APPENDIX Help
8

In addition, a link to an FAQ should be provided from APPLICATION HELP
as well as HELP COMMUNITY pages. Users should be offered the option to
review FAQs before exploring more extensive application-level help or submit-
ting questions that have already been answered to the user community.
APPLICATION HELP
Problem
Although many questions can be answered within the context of users ’ tasks
through contextual help and FAQs, there are tasks that require visiting several pages
within the application. Trying to embed answers to all questions, especially related
questions, on the same page can make the page visually cluttered and daunting.
Solution
Provide application-level help with detailed instructions for using and access-
ing the application’s functionality. In addition, make application-level help
accessible from all pages within the web application; the link or icon for help
is typically placed in the top-right corner of the page as part of the main or util-
ity navigation ( Figure Web.10 ).
Why
When users are unable to accomplish tasks, they are likely to resort to help.
Making help easily accessible can serve as a reassurance to users that they can
access help when needed. By linking individual pages in the application to
appropriate sections of the application-level help, it can also serve as contex-
tual help, making help even more useful.
How
Allow users to access help from all pages within the web application. Place the
link for help in a consistent location, commonly located in the top-right sec-
tion of the page as part of the primary or utility navigation of the application.
This placement may have been infl uenced by desktop applications where
“ Help ” is usually the last menu item in the menu bar ( Figure Web.11 ).

FIGURE WEB.9

Flickr organizes
questions in
categories such
as “ General
Flickr Questions, ”
“ Free Accounts, ”
“ Upgrading and
Gifts, ” and so forth.
9
CATEGORIZE HELP CONTENT
Treat help as a web application and organize it based on users ’ tasks or high-
level sections within the main application to ensure that users can get to the
desired sections quickly ( Figure Web.12 ).
Application Help

FIGURE WEB.10
Yahoo! offers application-level help and makes it accessible on all the
pages by placing a “ Help ” link in the top-right corner.

FIGURE WEB.11
Like many desktop applications, Microsoft Outlook places “ Help ” as the
last menu item.

FIGURE WEB.12
Gmail categorizes help into several sections: “ Your Account, ” “ Your
Messages, ” “ Your Contacts, ” and so on. In addition, where necessary, they offer subcategories
to make it easy to fi nd appropriate help sections.
WEB APPENDIX Help
10

OFFER SEARCH FUNCTIONALITY
For applications that have large help sections, offer a search feature so that
users don’t have to wade through different help categories to get to the appro-
priate help sections ( Figure Web.13 ).
HIGHLIGHT COMMON QUESTIONS
Anticipate the most common or popular questions for the web application and
highlight them on the main help page ( Figure Web.14 ). Regularly verify them
with traffi c patterns to help pages and update them as necessary.
ASK USERS TO RATE HELP CONTENT
Allow users to rate help information for its usefulness in answering their
questions and its effi cacy to assist them in accomplishing their tasks. Having

FIGURE WEB.13
Snapfi sh allows users to search help by both category and keywords.

FIGURE WEB.14
Google Docs Help Center categorizes content and highlights the top fi ve
questions.
11
a rating system in place allows help authors to identify potential problems
and improve help content to make it more useful ( Figure Web.15 ) (see the
RATINGS pattern in Chapter 9).
ALLOW USERS TO CONTACT CUSTOMER SUPPORT
If feasible, offer users the customer support phone number and/or a link to
customer support to get their question answered ( Figure Web.16 ).
Application Help

FIGURE WEB.15
PayPal has a very basic way to determine the usefulness of their help content. For
each question, they ask, “ Was this article helpful?, ” to which users can choose either “ Yes ” or “ No. ”

(a)

FIGURE WEB.16
Below the help information, Dell offers users a link to the “ Contact Us ” page
(a), which then offers several options: chat, email, and call tech support (b).
(b)
WEB APPENDIX Help
12
Related design patterns
Despite its comprehensiveness, APPLICATION HELP may not be able to answer
all users ’ questions. Therefore, consider complementing it with HELP
COMMUNITY, where users can post their questions and get them answered by
customer support staff or by other users of the application. In addition, con-
sider offering CLICK-TO-CHAT to allow users to get answers to their questions
quickly and directly from qualifi ed customer support personnel.
GUIDED TOURS
Problem
When starting to use a new application or exploring unfamiliar functionality
of an existing application, users may want to know how to accomplish certain
goals and/or tasks.
Solution
Offer users how-to guided tours, demos, or step-by-step explanations of how cer-
tain tasks can be accomplished or how certain functions works ( Figure Web.17 ).
Why
No matter how easy it is to use an application, at least a few users are going
to fi nd certain functions diffi cult to understand and use. This may be because
of their limited domain knowledge or exposure to certain modes of interac-
tion. Providing guided tours with explanations can help instill confi dence in
new users, not only in terms of how to accomplish certain tasks but also as
something that they can return to and review if necessary. Even users who are

familiar with the domain and application may want to refamiliarize themselves
when attempting not-so-frequent tasks or tasks that may be diffi cult or impos-
sible to undo. Offering guided tours, how-to guides, or demos can help users

FIGURE WEB.17

Microsoft Offi ce
Communicator
shows users how to
add communication
modes by offering
guided tours for
each communication
mode.