Web Application Design Patterns- P6

Web Application Design Patterns- P6

Web Application Design Patterns- P6: This is the type of book you’ll want to read with your entire team and a fl ip chart because
every page will produce a list of actionable changes for the applications you’re developing.
Pawan Vora has produced an amazing catalogue of the essential patterns for designing
today’s web-based applications.

Nội dung Text: Web Application Design Patterns- P6

136 CHAPTER 5 Navigation
page. Because of their placement near primary and secondary navigations,
breadcrumbs shouldn’t visually compete for attention or distract users from
the main navigation mechanisms.
Related design patterns
Breadcrumbs should be given lesser emphasis than other important elements
on the page, such as the page title, PRIMARY NAVIGATION, and SECONDARY
NAVIGATION (see VISUAL HIERARCHY pattern in Chapter 12).
WIZARDS
Problem
Users need to complete several steps in a speciﬁc order to complete a task (e.g.,
checking out an item on an e-commerce site, making reservations, ﬁling taxes,
and so forth). Because most users are going to perform the task occasionally,
they may not acquire enough familiarity or expertise to remember the steps
and their order for successfully accomplishing it.
Solution
Guide users through steps, one at a time, in a predetermined sequence (Figure
5.32). Such interfaces are commonly referred to as wizards.
FIGURE 5.32 British Airways walks users through a wizard to help them make ﬂight
reservations.

Wizards 137
Why
Wizards are useful when users must go through a speciﬁc sequence of steps and
perform a set of individual tasks in succession (e.g., checkout for e-commerce
applications or opening an account with a ﬁnancial institution). They are also
useful for complex tasks with branches or dependencies among elements,
which require considerable domain knowledge to complete (Dryer, 1997).
By breaking such tasks into smaller steps and guiding users through each
step, wizards hide the complexity of the underlying task. They require users
to focus on only a few data elements at a time and let the application keep
track of what they have done and still need to do. Additionally, by guid-
ing users through each step, errors are minimized and the chances of users
successfully accomplishing the task are improved. Finally, wizards are also
useful when a task is critical for accomplishing users’ goals (Wickham et al.,
2002). For example, in e-commerce applications, checkout is a critical task for
purchasing items.
How
As a ﬁrst step, identify all information or groups of information and the order
in which they need to be presented to users to complete the desired task. In
addition, identify any dependencies or branches between them to ensure that
the dependent tasks occur later in the sequence. For example, in an e-commerce
checkout process, shipping information usually comes before payment infor-
mation because the shipping address and shipping options (such as delivery
timeframe, tax-exempt status, and so forth) are used to calculate tax and ship-
ping charges, which contribute to the total price. Only after knowing the total
price should users be asked for billing and payment information. Once infor-
mation, grouping, and order are identiﬁed, break them up into individual steps
so that logically related groups are together.
Once the steps, sequence, and branching decisions, if any, are made design
pages in a wizard style—that is, present each step on a separate page and allow
navigation between them with “next” or “continue” and “previous” or “back”
actions (Figure 5.33).
Although typical wizard implementation has individual steps on separate
pages, a recent trend is to consider an accordion interface design approach
(Figure 5.34). This design shows all the steps on the same page but, like a wiz-
ard, makes only one step visible at a time. As users choose to go to the next
step, the current step is collapsed and information corresponding to the next
step is expanded and made available. Users may go to any previous step by
clicking the corresponding step heading, which then expands that step and
collapses the current step. This design approach is effective for wizards with
just a few steps because the headings that represent steps and facilitate naviga-
tion can take up excessive space on the page, leaving little room for content in
each step.

138 CHAPTER 5 Navigation
FIGURE 5.33 The TurboTax wizard uses “Back” and “Continue” actions to guide users
to complete their taxes.
FIGURE 5.34 Adobe uses a wizard-style interaction, but as an accordian to show all the steps
on the same page. After a step is completed and users click “Continue,” the next step is
revealed.

Wizards 139
LIMIT THE NUMBER OF STEPS IN THE WIZARD
When developing wizards, the number of steps needed must be balanced with
the amount of information asked from users on each step. Users should feel
that they are making good progress through the wizard and that each page
shows logically grouped information. At the same time, they shouldn’t feel that
most of their time is spent waiting for pages to refresh to go to the next step.
Nor should they feel they have to backtrack often to change information pro-
vided in previous steps. Typically, wizards shouldn’t require more than ﬁve to
seven steps to accomplish a task (Wickham et al., 2002).
CLEARLY SHOW WIZARD STEPS
Show each step in the wizard as either a set of horizontal steps or tabs (Figure
5.35) or vertically as a list or table of contents. The latter is preferred when
one or more steps may have substeps. Usability tests for desktop-application
wizards have shown vertical placement of steps to be more effective than hor-
izontal placement (Wickham et al., 2002). However, vertical placement does
require additional space and may have to be traded off against content to be
presented for each step.
BEGIN WITH AN OVERVIEW PAGE FOR VERY INFREQUENTLY
USED WIZARDS
For wizards used very infrequently (perhaps, only once), such as initial con-
ﬁguration or application setup, use an overview page to explain and introduce
the process and its steps (Figure 5.36).
FIGURE 5.35 Washington Mutual shows the steps for opening an account horizontally
above the form.
FIGURE 5.36 Citibank provides an overview page that outlines steps included in the
wizard for opening an EZ Checking account.

140 CHAPTER 5 Navigation
FIGURE 5.37 Amazon offers a summary page that asks users to review information before
placing orders. In addition, it offers users the option to set defaults for current delivery and
payment options, to minimize the number of steps they need to go through in future checkouts.
SUMMARIZE INFORMATION ON THE WIZARD’S LAST PAGE
On the last page of the wizard, summarize users’ information and actions and
explain what will happen when they press “Finish.” Whenever possible, make
the ﬁnal action indicative of the task being completed—for example, “Place
Order” or “Create Blog” (Figure 5.37).
INCLUDE AS MANY DEFAULTS AS POSSIBLE
Like any good web form, include as many defaults as possible (see the SMART
DEFAULTS pattern in Chapter 2), especially in situations where users may have
entered information in previous steps or during previous interactions. For
example, in a checkout wizard, the billing address could be prepopulated with
the shipping address from the previous step, or users can be offered an option
to indicate that their billing address is the same as the shipping address.
CLEARLY INDICATE USERS’ PROGRESS THROUGH
THE WIZARD
Provide users a clear indication of where they are in the wizard, what steps they
have completed, and how many remain. This way, users know what to expect
and do not become impatient about the time it’s taking them to complete the
task (Figure 5.38).
REMOVE UNNECESSARY LINKS AND BUTTONS IN THE WIZARD
Users should not be distracted with extraneous links and buttons when com-
pleting a task using wizards. Therefore, remove all extraneous links, navigation,

Wizards 141
FIGURE 5.38 Progressive’s site shows where users are in the quoting process, the steps
they have completed, and the remaining steps.
FIGURE 5.39 TurboTax Online allows users to save their information and offers them the
option to return to the wizard from where they left off.
search bars, and buttons except those required for branding, privacy policy, and
legal disclaimers.
ALLOW USERS TO SAVE INFORMATION AND RETURN
TO WHERE THEY LEFT OFF
When an entire application uses a wizard-style interface or includes several
“subwizards” within it, allow users to save their information so that in subse-
quent visits, they may start from where they left off and complete their tasks
in multiple sessions. A good example is TurboTax Online, which allows users
to do their taxes online using a wizard interface. Depending on the complex-
ity and ready availability of information required to ﬁle the tax return, users
may require interaction over a period of time to complete their taxes. To ensure
usability of such applications, it’s important that the information entered by
users is saved and they are returned to the step where they left off when they
return to the application at a later time (Figure 5.39).

CHAPTER 6
Searching and Filtering
143
INTRODUCTION
For web applications of a reasonable size, accessing information only by navi-
gating the application hierarchy can become cumbersome and compromise
usability. Therefore, it’s important that information within web applications be
made searchable to get users to desired items quickly and efﬁciently.
Searching can be done either in an unrestricted manner, where users enter their
query as a set of keywords or key phrases in a search ﬁeld (SIMPLE SEARCH),
or in a directed and structured manner, where users specify desired values of
the item attributes they are searching (PARAMETRIC SEARCH). Simple searches
are usually sufﬁcient for most users, but those who have more experience and
prefer specifying their search precisely may beneﬁt from using ADVANCED
SEARCH, which allows the formulation of complex search queries. Regardless
of the search mechanism offered, users can always beneﬁt by getting some
guidance on how they can improve their searches and formulate better queries
(SEARCH TIPS).
After users have submitted their criteria, web applications show matched items
ordered by relevance (SEARCH RESULTS). Although ordering by relevance is
the most appropriate way to present search results, users may prefer to reorder
them using other criteria (e.g., price when purchasing items) to get to desired
items (SORTING).
For performance reasons and to not overwhelm users with too many items,
search results are usually presented in subsets of 10 to 20 such that users can
navigate through results using controls such as next, previous, ﬁrst, last, and
so forth (PAGINATION). An alternative emerging approach is CONTINUOUS
SCROLLING, which also presents users a subset of search results at a time, but
instead of pagination controls, it presents additional search results as users
scroll to the bottom of the current set of results. Both approaches attempt to
address a common problem with searching—too many search results.
Users are typically offered mechanisms such as FILTERING or FACETED
SEARCH to narrow down the list of search results to a manageable number.

144 CHAPTER 6 Searching and Filtering
Both mechanisms remove items within the search results that do not match
the selected ﬁlters or facets. The difference, however, is that in FILTERING,
users are offered narrowing options that remain the same irrespective of the
presented search results. FACETED SEARCH, however, is dynamic and the nar-
rowing options offered to users are derived from search results themselves and
continue to update as users narrow their result set.
After users have searched, ﬁltered, and sorted results to their liking, consider
allowing them to save their queries (SAVED SEARCHES) and set up alerts so
that they can rerun saved queries and stay informed of new matches.
SIMPLE SEARCH
Problem
Navigating deep application hierarchies can be cumbersome and an inefﬁcient
way to get to known items in web applications. In addition, it may be unclear
to users where the desired item is in the hierarchy given the available naviga-
tion options.
Solution
Allow users to search for items using keywords or key phrases and place the search
feature in a consistent location throughout the application (Figure 6.1).
Why
When users know exactly what they are looking for, searching is easier and
more efﬁcient than navigating the application hierarchy; this is also referred
to as a known-item search. Even when a search doesn’t get users directly to the
desired item, it may allow them to skip several levels of navigation to a point
where they can navigate the rest of the hierarchy and get to the desired item
quickly. Additionally, most users are not familiar with search concepts such as
Boolean operators1 (Nielsen, 1997) and feel more comfortable using simpler
FIGURE 6.1 A simple search box on Digg allows users to search information using keywords.
1
Boolean queries are expressed in words or phrases, combined using the Boolean operators such
as AND, OR, NOT, XOR, and so on.

Simple Search 145
keyword searches than advanced searches (Spink et al., 2001; see the
ADVANCED SEARCH pattern later in this chapter).
A simple search may also beneﬁt users in quickly determining if an item exists
in an application. For example, users may want to know if an e-commerce
application offers item X. Searching for item X to determine whether it is
offered by the application can be far more efﬁcient than navigating through
the information hierarchy.
How
Allow users to search by entering one or more keywords into a search text ﬁeld.
In addition, let users search for key phrases by enclosing keywords within
quotes; when searching for key phrases, users are shown results containing the
exact phrase. In addition, avoid forcing users to click the “Search” button or tab
to the “Search” button; rather, let users submit their search using the “Enter” or
“Return” key.
PLACE SEARCH IN A CONSISTENT LOCATION
Place the search feature in a consistent location throughout the application to
make it easier to ﬁnd. Typically, it is placed in or near the page header (Figure 6.2)
in one of the following locations:
■ The top-right of the page.
■ The center of the page in the header area or just below it (this is quite
common in portals such as Yahoo!, MSN, and iGoogle).
■ The top-left above browsing options (e.g., above product categories in
e-commerce applications).
The top-right and top-left regions are preferred locations for placing search,
since they closely match users’ expectations of its placement on a page (Shaikh
and Lenz, 2006).
With search available on all pages, users do not have to return to the home
page or a dedicated search page to conduct their search. This allows users to
begin new searches and reach speciﬁc content quickly from anywhere in the
application.
SET THE SEARCH SCOPE
For applications with hundreds and thousands of items and several item cat-
egories, allow users to restrict search to a category by letting them specify the
scope of their search. Depending on the number of scoping options available,
use radio buttons, a dropdown list, images, or tabs (Figure 6.3). However, it’s
important that the page does not refresh when users choose a scoping option.
Do not scope search by default or require users to select a scoping category.
Users may not know the category to which an item belongs, which may be the

146 CHAPTER 6 Searching and Filtering
(a)
(b)
(c)
FIGURE 6.2 Common placement of search areas are (a) top-right corner, (b) in the center near
the header area, and (c) top-left corner above the browse categories.
main reason they are searching. Therefore, default the search scope to “all” cat-
egories. As users navigate speciﬁc categories within the application (e.g., books,
music, etc.), change the default search scope to that category but still allow
users to change the scope.

Simple Search 147
(a)
(b)
(c)
FIGURE 6.3 Amazon uses a dropdown menu to allow users to limit their search scope to a
category (a). Ask and Yahoo! allow users to scope their search by showing categories as icons
(b) or tablike links (c).
USE FAMILIAR LABELS FOR THE SEARCH BUTTON
Common options for action-button labels to execute a search are: “Search,”
“Find,” “Go,” and some form of an arrow graphic. When using “Go” or an
arrow graphic, it’s important that the search input box is prefaced with a
“Search:” label. When using “Search” and “Find” as button labels, using sepa-
rate ﬁeld labels is unnecessary (Figure 6.4).
FIGURE 6.4 CNET uses a “Go” button to execute a search and uses the label “Search:” before
the search input ﬁeld.

148 CHAPTER 6 Searching and Filtering
FIGURE 6.5
Home Depot puts
the prompt within
the search ﬁeld to
indicate to users
what they can enter.
FIGURE 6.6 Answers.com suggests matching search terms as users enter information in
the search box. Users can click an item from the suggested list and go to the corresponding
page.
Since users may not know what they can search on, offer a prompt and/
or examples of what they can enter in the search ﬁeld. Because of the lim-
ited space available near most search areas, a common practice is to embed
the search prompt within the search ﬁeld (Figure 6.5). However, remove the
prompt as soon as users focus on the search ﬁeld so that they do not have to
delete the prompt text before entering search terms.
SUGGEST EFFECTIVE KEYWORDS
Prompt users with appropriate keywords and search terms as they start typing
in the search box to reduce typing errors and increase the relevance of search
results (Figure 6.6; see also the AUTOSUGGEST/AUTOCOMPLETION pattern
in Chapter 8).
SUPPORT COMPLEX SEARCHES WITHIN
THE SIMPLE SEARCH FIELD
To allow expert users to enter more precise search queries in the simple search
box, it’s often useful to support a domain-speciﬁc search language that sup-
ports the ADVANCED SEARCH functionality (Figure 6.7).

Parametric Search 149
FIGURE 6.7 Nabble, a web application for forums, offers a speciﬁc search language to its
members to allow them to enter precise queries. For example, to search in the “Apache” forum
only, users can include “forum:Apache” in their query.
Related design patterns
If searching can be structured or directed, consider the use of PARAMETRIC
SEARCH because it allows users to specify search criteria more precisely. For
expert users, offer a separate ADVANCED SEARCH option and include SEARCH
TIPS that explain ways in which users can improve search effectiveness.
PARAMETRIC SEARCH
Problem
Users may not know the best way to formulate their search queries as keywords
or key phrases when looking for items with several attributes (e.g., prices of red-
eye ﬂights from Denver to San Francisco departing the following Wednesday
and returning Friday). This may lead them to specify a search that is either too
general, requiring them to wade through a large number of irrelevant results, or
too speciﬁc, thereby eliminating many useful results.
Solution
Allow searching for items based on their characteristics (i.e., parameters). For
example, when searching for ﬂights, ask users to specify departure city, arrival
city, departure and arrival dates, and so forth. In addition, where applicable,
restrict users’ search query by requiring them to choose from a predetermined
set of options presented as dropdown lists, radio buttons, or checkboxes
(Figure 6.8).
Why
Allowing users to specify their search in a structured manner makes it easy for them
to formulate search queries and prevents them from making assumptions about
which attributes are searchable. In some instances, searching by a set of parameters
seems more natural than doing a free-form keyword search—for example, making
ﬂight, hotel, or car reservations; ﬁnding driving directions; ﬁnding homes to buy
or sell; ﬁnding people with speciﬁc proﬁles and interests; and so forth.

150 CHAPTER 6 Searching and Filtering
FIGURE 6.8 Match.com, like many other dating service sites, allows users to formulate
their search by asking for their gender, “seeking” gender, ages, and ZIP code. They also
offer advanced options to allow users to indicate interests, income level, and so forth.
FIGURE 6.9 Yahoo! Travel shows users search parameters relevant only for the selected tab.
How
Ask users to enter search criteria in a form with clearly identiﬁed search param-
eters. Where appropriate, segment the form into multiple sections so that only
appropriate search ﬁelds are shown to users (Figure 6.9).
HIDE NOT-SO-COMMON SEARCH PARAMETERS
Even when using a parametric search, it’s important to keep the search simple
and not overwhelm users by offering search parameters they are unlikely to use.
Hide infrequently used options under “advanced options” or “more options”
and make them available only when users request them (Figure 6.10).
Related design patterns
Although a PARAMETRIC SEARCH can help capture precise search crite-
ria, it does not eliminate the possibility of large numbers of search results.
Allow users to narrow down their search results by using either FILTERING or
FACETED SEARCH.

Advanced Search 151
(a) (b)
FIGURE 6.10 Expedia’s “Build your trip” hides not-so-common options (a). It shows them only
when users select the “Airline, ﬁrst or business class, …” link under “Additional options” (b).
ADVANCED SEARCH
Problem
An important problem faced by users when searching is a large number
of search results, many of which are neither relevant nor useful to them.
Narrowing and ﬁltering options are useful, but they address the problem after
users have been presented with search results (see the FILTERING pattern later
in this chapter). In addition, because ﬁltering options typically allow users to
reﬁne search results iteratively, it may take users several reﬁnement steps before
they can get to a manageable search result set.
Solution
Offer users an advanced search option so that they can precisely formulate
their search query (Figure 6.11).

152 CHAPTER 6 Searching and Filtering
FIGURE 6.11 The IRS’s “Advanced Search Options” page offers users various options, which
allows users to specify their search query more precisely.
(a)
(b)
FIGURE 6.12 The IRS offers an “Advanced Search” link near the simple search box (a),
whereas MSN’s Live Search offers the “Advanced” link on the search results page (b).
Why
No matter how well designed the search engine, users are likely to be faced
with irrelevant results. Although FILTERING helps reduce the number of irrel-
evant search results, it helps only after the initial search query is run and results
are presented. An advanced search allows users to be more precise when speci-
fying search queries, thus reducing irrelevant results upfront.
How
Offer users an advanced search link near the search box (see the SIMPLE
SEARCH pattern earlier in this chapter) or on the search results page (Figure
6.12). For most applications with complex or varied content, it makes sense to
always have an advanced search link near the simple search box. However, if it’s
preferable to let users attempt a simple search before attempting an advanced

Advanced Search 153
FIGURE 6.13 iStockphoto’s “Advanced Search” offers users a variety of ways to precisely
specify search criteria, including a search by type of media, color, type of information to show/
hide on ﬁle details, and so forth. In addition, iStockphoto offers an interesting approach to
hierarchically narrow down category options. This screenshot shows category and subcategory
selections for “People” and “Ethnicity.”
search, place the advanced search link on the search results page. This allows
users to review search results before formulating a complex search query.
On the advanced search page, offer users options to precisely specify their
query by allowing them to combine keywords with include (e.g., AND, OR)
and exclude (e.g., NOT) options, and specify values for speciﬁc properties such
as date ranges and content type. In addition, offer users control over output
options such as information to include on the search results page, number of
results per page, sorting of results, and so forth (Figure 6.13).
SIMPLIFY TERMINOLOGY
Although advanced search targets expert users, designers can only assume users’
domain expertise and not necessarily their search expertise. Advanced search
should still be easy to understand. For example, instead of asking users to spec-
ify their search criteria using Boolean operators such as AND, OR, XOR, etc.,
offer users options such as “all of these words,” “any of these words,” “none of
these words,” and so forth (Figure 6.14).
ALLOW USERS TO RETURN TO THE BASIC SEARCH PAGE
The wide variety of options offered on an advanced search page may be over-
whelming to some users. Allow them to return to the simple search. If the
advanced search overlays on the current page, like iStockphoto’s in Figure 6.13,

154 CHAPTER 6 Searching and Filtering
(a)
(b)
FIGURE 6.14 The “Advanced Search” pages from Flickr (a) and Safari Books (b) use simple
terminology and avoid using Boolean operators.
(a)
(b)
FIGURE 6.15 Flickr offers a return to the basic search link below the “Search” button on the
advanced search page (a) that takes users to the simple search page (b).
clicking “Back to Basic Search” can remove the overlay and return users to the
original search. On the other hand, if the advanced search is a separate page,
allow users to return to a dedicated basic search page (Figure 6.15). In order to
avoid confusion, do not show both basic search and advanced search on the
same page.

Search Tips 155
Related design patterns
Like PARAMETRIC SEARCH, use of ADVANCED SEARCH does not guarantee
fewer search results and can beneﬁt from FILTERING or FACETED SEARCH to
help users narrow down SEARCH RESULTS.
SEARCH TIPS
Problem
The quality of search results often depends on how well users have been able to
specify their search intent. There are typically a myriad of ways search engines
allow users to make their intent clear. However, this information is usually
unavailable to users, making it difﬁcult for them to be precise when specifying
their search criteria.
Solution
Offer users easily accessible search tips and explain different ways of specifying
search criteria and formulating precise search queries (Figure 6.16).
Why
Search engines used by web applications vary in how they combine key-
words and build precise search queries. Users cannot be expected to know the
nuances of every search engine they encounter. Search tips can describe to users
in a simple language ways to effectively use the search feature.
FIGURE 6.16 The IRS’s “Search Tips” page offers guidance on how its search works and how
users can improve their search queries. They offer search tips not only for simple and advanced
searches, but also for the search results page. It also offers tips for conducting searches
within PDF (Adobe Acrobat’s Portable Document Format) documents (not shown here). This is
important for IRS, as many of their available publications and forms are in the PDF format.