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) [...]... 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) CHAPTER 7 Lists 181 INTRODUCTION Lists are common in web applications for displaying a collection of items... lists—especially for search results With geographical map information being easily accessible through open application programming interfaces (APIs), map-based interaction is also becoming commonplace and item lists with geographical (or spatial) attributes are often complemented by MAPS In web applications, users do not simply view list items but take actions either on individual items (e.g., edit,... 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... Why Users’ familiarity with lists makes it a very effective design approach to present a set of items, especially when items are primarily text based and have basic actions associated with them For example, lists are commonly used on dashboards and portals (see Chapter 4), where users are shown a list of items such as to-dos, top referrer web sites, most popular products, and so forth (Few, 2006) Users... Tabular data are generally read in rows with items in rows and attribute values in columns Show attribute names in the table headers, unless they are implied by the data For effective design, it’s important that the table design FIGURE 7.6 This list of “Top 100 Blockbuster Online Rentals” shows movies and their corresponding attributes, such as rank, release date, MPAA (Motion Picture Association of America),... exception is when numbers in a column do not share the same unit of measure, in which case use left alignment so that users do not compare the numbers 187 188 CHAPTER 7 Lists FIGURE 7.10 Google Documents allows users to sort documents by columns and uses an arrow to indicate how a column is sorted In addition, a slight gradient in the column headers is used to suggest that they are clickable ALLOW USERS TO... corresponding data by using the SCOPE attribute in the tag, which helps users establish context for the table’s data Related design patterns Most large lists need to be filtered; see the FILTERING pattern in Chapter 6 and the DYNAMIC QUERYING pattern in Chapter 8 for the choices available to designers for narrowing large lists Large lists also typically cannot show all items on the same page, so PAGINATION... to-do items by default This makes the most common action of completing a to-do item visible and obvious Not-so-common actions, such as edit and delete, are shown to users on hover Tabular List Related design patterns Although a SIMPLE LIST may be acceptable for showing items with multiple attributes, consider a TABULAR LIST if the list needs to be sorted or list items compared based on one or more of... their saved searches easily If saved searches are going to be accessed often, make them available and easily 177 178 CHAPTER 6 Searching and Filtering 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... target, low target, and shares Users are likely to use this list to understand market values of their investments and determine the extent to which they have changed and the reasons for the change This design supports these user goals by showing market value and changes both individually and in aggregate match its intended use rather than relying on users to do additional analysis (Figure 7.7) MAKE TABULAR . results by applying a different set of fi lters. Related design patterns FILTERING in traditional applications can become slow because applying fi lter- ing. 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