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

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 typical

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)

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

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

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, chronologialphabeti-cally, 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 ):

■ 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

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

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 applychalleng-ing 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-scrollpush-ing 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

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

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 uslter-ing DYNAMIC

QUERYING (see Chapter 8), which updates search results as users make fi

lter-ing choices and affords a richer interactive experience to users Uslter-ing 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

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

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)

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

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)

FIGURE 6.48 COHomeFinder allows users to manage their saved searches in their “ My Account ” section

FIGURE 6.46 Monster, a job-posting and -searching application, offers users the opportunity to save their searches on the “ Job Search Results ” page next to the search criteria

FIGURE 6.47 Roost allows users to access their saved searches by showing them as a dropdown list The “ My Saved Searches ” option is part of the utility navigation in the page header

accessible on the main page ( Figure 6.47 ) or include them in the utility gation in the page header region Also, consider making them available in the “ Your Account ” section, where it would be easier for users to manage their list

navi-of saved searches ( Figure 6.48 )

Saved Searches

FIGURE 6.49 When saving search results, Yahoo! Jobs offers users the option to set up

necessary alert/notifi cation options Users can specify both the notifi cation method (e.g., mail or

Yahoo! Instant Messenger) and its frequency

FIGURE 6.50 Both Indeed (a) and Forrester Research (b) allow users to save their searches

either as an email alert or an RSS feed

(a)

(b)

CONSIDER OFFERING NOTIFICATION OPTIONS

Asking users to save their searches may not be enough, because users may not remember to check their saved searches regularly and review updates Even when they do rerun their searches, they may fi nd it diffi cult to identify changed items Make saved searches more useful by offering users the option to create alerts and set up notifi cation so they can be informed of changes ( Figure 6.49 )

A more recent trend is to allow users to save their searches as email alerts or subscribe to Really Simple Syndication (RSS) feeds ( Figure 6.50 ) Once sub-scribed, users can use an RSS reader software to monitor the feeds for updates.This eliminates the need for users to sign in to the application to access their saved searches

Related design patterns

If two or more users have the need to perform the same search, allow users

to share their saved searches with other members in their group (see the SHARING pattern in Chapter 9)