Web Application Design Patterns- P16

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 co

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

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)

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 navigasec-tion of the applicasec-tion 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

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

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

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)

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 cercer-tain 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

better understand an application’s functions and interaction and make it

pos-sible for them to fully utilize the application feature set

How

The main purpose of how-to guides or guided tours is to explain to users how

an application or certain functionality works This can be accomplished on

one screen ( Figure Web.18 ) or may require a guided tour to walk users through

each step in the task sequence ( Figure Web.19 ) They may also be implemented

as video demos ( Figure Web.20 ) How-to guides can be implemented either in

self-paced mode, demo mode, or a combination of both

Guided Tours

FIGURE WEB.18 Yahoo! Answers shows how it works

on just one screen

FIGURE WEB.19 Adobe ConnectNow Quick Start Guide walks users through each step for

tasks such as “ Sharing Your Screen, ” “ Broadcasting Video, ” and so forth

RELATED PATTERNS Guided tours are useful when users are faced with a BLANK SLATE (see Chapter 4)

HELP WIZARDS

Problem

Users who are unfamiliar with an application domain typically fi nd it diffi cult

to articulate their problem accurately or don’t know the appropriate trigger words to get to the relevant help information in APPLICATION HELP or HELP COMMUNITY In addition, when diagnosing a problem, which may have mul-tiple causes and thus mulmul-tiple solutions, they may not know the best way to tease out the appropriate solution

Solution

Guide users through a series of questions to arrive at a solution (or a set of solutions) ( Figure Web.21 ) This is not very different from recommender sys-tems that suggest solutions based on a series of questions aimed at capturing users ’ goals or requirements

Why

When troubleshooting, guided approaches are typically better at narrow-ing down the causes and gettnarrow-ing users to the solution(s) quickly In addition, although users fi nd describing their problem diffi cult because of their lack of domain expertise, they are more likely to respond appropriately to targeted questions and narrow down their solution choices

FIGURE WEB.20 Basecamp uses videos to introduce users to functions they have not explored To make help contextual, it offers the videos within the context of the functions so that users don’t have to search for answers in Help

How

Like a wizard, guide users one step at a time by asking them to identify the

problem (or general area in which they need help) to help narrow down

the list of available options Give suggestions along the way, and ask users if

the suggestion solved the problem; if not, offer additional suggestions as part

of the guided help Guided help may be designed as a typical wizard with

“ next ” and “ previous ” links ( Figure Web.22 ) or with all the scoping questions

presented on one screen (see Figure Web.21 )

Help Wizards

(a)

FIGURE WEB.21 Gmail helps users troubleshoot their problem by guiding them one step

at a time For example, if users are unable to access their account, they are asked to specify

a reason (a) When users select a reason, they are offered the steps to solve the problem (b)

Depending on the outcome, users may be offered additional steps (c)

(b)

(c)

FIGURE WEB.22 Microsoft’s File and Printer Sharing Troubleshooter assists users one step

at a time (a) and offers suggestions along the way as the solution scope narrows (b)

(b)

Related design patterns

HELP WIZARDS may follow the design practices for navigational WIZARDS (see Chapter 5) In addition, see the design practices for RATINGS for collect-ing user feedback on the usefulness of help wizards (see Chapter 9)

HELP COMMUNITY

Problem

Even when incorporating all the help approaches discussed so far, it’s almost impossible to anticipate all usage scenarios and user questions This is true especially for expert users, who often stretch the boundaries of the application and test its limits

Solution

Allow application users a venue such as discussion forums and blogs to facili-tate sharing problems, solutions, and experiences ( Figure Web.23 )

Why

Providing users with an open venue to discuss and share problems, solutions,

and experiences makes it easier for them to have their questions answered

and problems solved Often, the most active users on such forums are expert

users who may have encountered unusual problems and may have come up

with innovative solutions and workarounds that can provide useful insights to

application designers Such information may then be used to improve help as

well as the application’s functionality and usability

In addition, allowing users a way to share and store problems and solutions

makes it easy for them to fi nd answers any time, and they do not have to wait

on the phone for a customer support person to solve their problem

How

Make it easy for users to share their experiences in either a forum (i.e.,

dis-cussion groups) or a blog format and enable them to fi nd answers to their

questions This self-service approach is becoming common for both large

cor-porations and start-ups ( Figures Web.24 and Web.25 )

INTEGRATE COMMUNITY HELP WITH THE APPLICATION

Instead of treating help community as a standalone application, as is often the

case, integrate it with the application like contextual help This allows users to

access relevant discussions and post or answer questions ( Figure Web.26 )

MONITOR HELP COMMUNITY VENUES TO CONTROL SPAM,

SLANDER, AND INACCURATE INFORMATION

Help communities are a double-edged sword On the one hand, they afford a

self-service channel and make it easier for application users to get desired help;

Help Community

FIGURE WEB.23 Dell forums for Notebooks