Tài liệu Web Application Design Patterns- P7 doc

CHAPTER 6 Searching and Filtering
166

FIGURE 6.30
The three common approaches to show sorting options are (a) links (designed
to appear as tabs), as on Buy.com’s site; (b) radio buttons, as on Forrester Research’s site; and
(c) a dropdown menu, as on Amazon’s site.
(a)
(b)
(c)
167
page) of results at a time. In addition, breaking down a large list into manageable
chunks makes page downloads faster and users can view results relatively quickly.
How
Divide search results into a sequence of pages and allow users to navigate
through them using, at a minimum, “ next ” and “ previous ” links.
MINIMIZE PAGING AS WELL AS SCROLLING
Deciding the number of items to show on a search results page is a trade-off
between scrolling and paging. Typically, for all text results with a minimal
description for each item, a search results page shows about 20 items at a time,
whereas for results that include images, users are typically shown no more
than 10 to 15 items. However, considering that users limit their exploration of
search results to just a few pages and they do not mind scrolling, a case can
be made for showing more search results on a page (Spool, 2008b). Showing
50 search results per page appears to be optimal as reported by Bernard et al.
(2002), who found the fastest search times and preference for 50 search results
at a time when compared with 10 or 100 search results.
2

MAKE PAGINATION CONTROLS EASILY CLICKABLE
When numbered links are included in pagination controls to allow users to

jump directly to a specifi c search results page, they often present a very small
target for users to click. To ensure that pagination controls are easily clickable,
use a larger target size and provide suffi cient space between them ( Figure 6.32 ).
Doing so also helps distinguish one pagination link from another and mini-
mizes inadvertent navigation to the wrong page.
Pagination

FIGURE 6.31
When presenting a large set of search results, Amazon divides them into multiple
pages (with 12 results per page) and allows users to navigate them using pagination controls.

2
Interestingly, the study found slower search times and lower preference for 100 search results at
a time. This may be a case against showing an arbitrarily large number of search results.
CHAPTER 6 Searching and Filtering
168
SHOW THE PRESENCE OF MORE SEARCH RESULTS,
IF APPLICABLE
In instances where the number of search results is excessive and cannot be
enumerated as pagination controls, indicate the presence of additional results
using either a “ more ” link or other indicators such as an ellipsis ( Figure 6.33 ).
SHOW TOTAL NUMBER OF RESULTS AND RANGE
USERS ARE VIEWING
Because pagination controls serve as both navigation and orientation mechanisms,
they should clearly indicate to users the page they are viewing, the pages they have
already viewed or skipped, and the pages they have yet to view. The page that users
are on should be clearly distinguished from the rest of the pages, and it should not
be clickable so that users can keep track of where they are ( Figure 6.34 ).
ALLOW USERS TO NAVIGATE DIRECTLY TO THE FIRST
PAGE OF SEARCH RESULTS

For really large datasets (more than 10 – 15 pages), allow users to jump to the
fi rst page, since it usually contains the most relevant results. Typically, users are
also shown a link to the last page in the search results. However, recently, when
showing a large number of search results, the link to the “ last ” page is disap-
pearing. This is justifi ed for two reasons. First, the last page contains the least-
relevant results, and users are unlikely to jump to the results on the last page.
Second, users typically do not go beyond a fi rst few pages to fi nd the items they
need. According to Nielsen (2001), “ Users almost never look beyond the second
page of search results. ”

FIGURE 6.32
A common design practice to increase the target size for pagination controls is
to box pagination controls, as shown in this example from UX Magazine ( www.uxmag.com ) .

FIGURE 6.33
Digg uses ellipses between pagination controls to indicate the presence of
additional search results (a). NexTag, on the other hand, indicates the presence of more pages
with a ϩ sign (b).
(a)
(b)

FIGURE 6.34
When navigating search results from Dell, users know they are seeing “ 13 – 24
of 4525 Results ” and that they are on the page 2 of the search results.
169
However, there are situations where the last page link is both appropriate and
necessary. If the resulting dataset can be sorted in multiple ways (e.g., alphabeti-
cally, chronologically, by price, and so forth), the last page link becomes rele-
vant, as it allows users to quickly see the last page of items with a predictable set
of search results — for example, items starting with Z, the most- or least-expen-

sive item, and so forth.
REPEAT THE PAGINATION CONTROLS AT THE
TOP OF THE PAGE
For short lists, pagination controls may be provided only at the bottom of the
list. However, in pages where search results would require users to scroll exten-
sively (e.g., when users are permitted to change the page size), repeat the pagi-
nation controls at the top of the page as well.
This technique can also be benefi cial for search results accompanied by an
alphabetical index. For example, users looking for an item beginning with the
word “ summit ” might jump to the beginning of the “ T ” pages and then use
pagination controls at the top of the page to go backward until they get to a
page the fi rst result of which is closest to the word “ summit. ”
DO NOT LINK PAGINATION CONTROLS THAT ARE NOT
RELEVANT
Like all navigation mechanisms, provide a clear indication to users as to where
they are in the search results set and where they can go. Prevent unnecessary
navigation actions by disabling pagination controls that do not navigate to
other search results pages ( Figure 6.35 ):

■
On the fi rst page, disable links to “ fi rst ” and/or “ previous ” pages.

■
On the last page, disable links to “ next ” and/or “ last ” pages.

■
Instead of showing the current page as a link, make it plain text or high-
light it in some fashion.
LABEL PAGINATION CONTROLS APPROPRIATELY
For most pagination controls, their labels and order are “ fi rst, ” “ previous, ” “ next, ”

and “ last. ” In applications where items are ordered chronologically, a more recent
trend is to label them to refl ect their chronological order — “ newest, ” “ newer, ”
“ older, ” and “ oldest ” — where “ newest ” is equivalent to “ fi rst ” ( Figure 6.36 ).
Pagination

FIGURE 6.35
Digg disables “ previous ” and “ next ” controls on the fi rst and last pages,
respectively. In addition, they highlight the current page and don’t link it to prevent unnecessary
navigation.
CHAPTER 6 Searching and Filtering
170
Related design patterns
An alternative to PAGINATION is CONTINUOUS SCROLLING, which allows
users to view all items in the search results as a scrolling list.
CONTINUOUS SCROLLING
Problem
Although pagination is a commonly used technique to navigate a large num-
ber of search results, users ’ interaction experience is not continuous since users
have to wait for the page to refresh before seeing the next set of results.
Solution
Allow users to scroll through results in a large scrolling list. Like pagination,
show users only a subset of data at a time. Request additional data in real time
from the server using Rich Internet Application (RIA) technologies such as Ajax
and show users the next set of search results as they reach the bottom of the
current list without page refreshes ( Figure 6.37 ).
(a)

FIGURE 6.36
Yahoo! Groups orders messages chronologically and uses labels “ Newest, ”
“ Newer, ” “ Older, ” and “ Oldest ” by default (a). When users change the sorting order, they reverse

the order of the labels (b).
(b)

FIGURE 6.37
Rutland Tool & Supply uses continuous scrolling to show users items in a
product list.
171
Why
Pagination requires users to switch attention between navigating pages and
reviewing search results. In addition, with pagination, interaction is challeng-
ing when users want to select items from different pages before applying an
action (e.g., when users want to compare items that are not all on the same
page). In such instances it’s often unclear to users whether their selections on
other “ pages ” were retained as they paged through search results and selected
items. In addition, pagination requires important screen real estate, often push-
ing content down the page. The continuous-scrolling approach solves these
issues by showing the items in a scrolling list and retrieving the next set of
items only when users reach the bottom of the list.
At this time, the evidence favoring continuous scrolling over pagination is
inconclusive. As mentioned before, Bernard et al. (2002) found that users took
longer and had a lower preference for search results pages with 100 items when
compared with 10 items or 50 items per page. However, this research was based
on paginated results and did not introduce continuous scrolling. Since interac-
tions such as comparison and selection become easier with continuous scroll-
ing, the approach should not be discounted.
How
Show users search results in a list with a subset of items exposed. As users
scroll down and reach the bottom of the current list, fetch new data and show
users the next set of items. To make scrolling appear smooth and continuous,
prefetch and store the next few sets of data and request additional data as users

scroll. If users have to wait for data to load, show a “ please wait … ” indicator
so users know that additional data are being retrieved ( Figure 6.38 ).
INDICATE TO USERS THE SUBSET OF ITEMS
THEY ARE VIEWING
Like the pagination pattern, show which items users are currently viewing
along with the total number of items in the search results ( Figure 6.39 ).
Continuous Scrolling

FIGURE 6.38
DZone.net shows an animated “ LOADING ” icon when it’s fetching additional
data from the server.
CHAPTER 6 Searching and Filtering
172
Related design patterns
CONTINUOUS SCROLLING is inappropriate when users are likely to bookmark
search results. For datasets with predictable patterns (e.g., alphabetical and chron-
ological), PAGINATION is a better choice because it allows users to jump to a
specifi c page or the last page without waiting for each intervening dataset to load.
FILTERING
Problem
Often, users ’ search criteria are too broad, resulting in a very large number of
results for them to wade through and identify results that match their needs.
Although users can redo searches by making search criteria more specifi c, they
may still end up with a large number of results.
Solution
Allow users to narrow down their list of search results by applying fi lters on
one or more data attributes ( Figure 6.40 ).
Why
When faced with a large number of search results, fi ltering is an effective
method to narrow them down to a manageable set. It also permits users to

FIGURE 6.39

MSN’s “ Live Search, ”
which employs
continuous-scrolling
approach, indicates
the result set users
are viewing — ” 29 – 40
of 13,900,000 ” in this
example.

FIGURE 6.40
Download.com allows users to fi lter the list of downloadable software by
operating system, license type, fi le size, and categories.
173
start searching with broader search criteria and later become more specifi c as
they learn more about the search result set and the available fi ltering attributes.
Allowing users to fi lter is similar to incorporating some of the advanced search
or parametric search functionalities on the search results page.
How
On the search results page, fi lters are usually shown as dropdown lists, a set of
radio buttons, or links ( Figure 6.41 ). As users fi lter by different attributes, the
remaining fi ltering options are not updated to refl ect the attributes available
in the remaining search results because they would be in a FACETED SEARCH
(see the following pattern). As a result, users could see “ zero ” items in the
search results for certain combination of fi ltering options. However, it is easy
for users to change or clear their fi lter criteria and return to the previous state
and manipulate search results by applying a different set of fi lters.
Related design patterns

FILTERING in traditional applications can become slow because applying fi lter-
ing criteria would require a page refresh. Therefore, consider using DYNAMIC
QUERYING (see Chapter 8), which updates search results as users make fi lter-
ing choices and affords a richer interactive experience to users. Using FACETED
SEARCH should also be considered as an alternative to fi ltering, because it
allows users to iteratively narrow down to the desired item(s) and eliminates
the possibility of a “ zero ” result set. In addition, when search results are pre-
sented as TABULAR LISTS, users may place fi ltering options in individual col-
umns (see Chapter 7).
Filtering

FIGURE 6.41
Expedia allows users to fi lter search results by airlines and shows fi ltering
options as links.
CHAPTER 6 Searching and Filtering
174
FACETED SEARCH
Problem
When presented with a large number of search results, users may fi nd it diffi -
cult to locate the desired item(s). Although they can apply fi lters to their search
result set, the possibility of an empty list of results with certain fi ltering options
cannot be avoided.
Solution
Allow users to narrow down the number of items in the search results based on
the relevant item attributes (i.e., facets) ( Figure 6.42 ). Narrowing search results
by selecting a facet essentially makes search criteria more precise, which can be
used to search within results to refi ne them. With each refi nement to the result
set, narrowing facets are updated to refl ect attributes that are available in the
updated search result set. Users can then use the updated facets to further nar-
row down results to a manageable, browsable set.

Why
Faceted search allows users to reduce the number of search results quickly
to get to the desired item(s). Showing narrowing options (facets) is easier
for users because they don’t have to know the syntax necessary to specify
their search precisely. Because narrowing attributes are derived from the search
result set, users are never left with an empty result set. In addition, being
able to see all available options, users can better understand how data are
structured and perhaps use that information to specify better searches in the
future.

FIGURE 6.42
Home Depot allows users to narrow search results using facets such as
“ Category, ” “ Price, ” “ Brand, ” and others.
175
How
Along with the search results, show users relevant facets with which to narrow
down their search results set. For each narrowing facet, show the correspond-
ing number of search results so users can easily judge the extent to which their
search results set will narrow when choosing that facet. As users make their
choices, update the set of narrowing facets based on the new set of search
results. Doing so allows users to iteratively refi ne their search results and quickly
reduce them ( Figure 6.43 ).
Faceted Search

FIGURE 6.43
Dell offers users narrowing facets such as product, category, and brand (a). For
each narrowing facet, users are shown the corresponding number of search results. As users
select a narrowing facet, the number of results is updated along with a set of facets (b).
(a)
(b)

CHAPTER 6 Searching and Filtering
176
ALLOW USERS TO REMOVE NARROWING FACETS
Show users their chosen narrowing facets and allow them to remove them as
necessary, to make it possible for them to backtrack and choose other facets to
narrow down results ( Figure 6.44 ).
Related design patterns
Like FILTERING, faceted search assumes page refreshes with user selection of
a narrowing option. Using DYNAMIC QUERYING is another option available
when using rich Internet applications where selecting a facet updates the result
set without page refreshes. FACETED NAVIGATION also typically accompanies
faceted search. The main difference between them is that the former focuses
strictly on users browsing the information space, whereas the latter is initiated
with a user search.
SAVED SEARCHES
Problem
Users may want to rerun one or more of their searches in the future. Specifying
the same search criteria over and over again is ineffi cient and error-prone, as
users may forget to include one or more criteria for complex searches.
Solution
Allow users to save their ad hoc search queries and resubmit them as needed.
In addition, consider allowing users to set alerts so they can be kept informed
of new items that match their search criteria ( Figure 6.45 ).

FIGURE 6.44
NexTag allows users to remove a facet by clicking the corresponding “ Back to
all … ” link in the “ Narrow These Results ” section.
177
Why
The ability to save searches can save users time, especially when searches are

complex and involve a combination of fi ltering, sorting, and customization
options. Even when searches are not complex, allowing users to save searches
makes it easy for them to remember past searches and share them with others.
Furthermore, allowing users to set notifi cation alerts for their saved searches
makes the application more useful because users don’t have to regularly run
their saved searches and identify changed items.
How
On the search results page, offer users an option to save their searches ( Figure
6.46 ). Place the “ Save Search ” action close to the search criteria so users can
clearly see the parameters on which they searched.
MAKE IT EASY FOR USERS TO RERUN THEIR SEARCHES
It is important that users be allowed to rerun their saved searches easily. If
saved searches are going to be accessed often, make them available and easily
Saved Searches
(a)

FIGURE 6.45
Roost allows users to save searches (a). When saving searches, users may
specify the frequency with which they want to be alerted of any new matches based on their
search criteria (b).
(b)