Web Application Design Patterns- P7

Web Application Design Patterns- P7: This is the type of book you’ll want to read with your entire team and a fl ip chart becauseevery 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 designingtoday’s web-based applications.
Nội dung trích xuất từ tài liệu:
Web Application Design Patterns- P7166 CHAPTER 6 Searching and Filtering (a) (b) (c) 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. Pagination 167FIGURE 6.31 When presenting a large set of search results, Amazon divides them into multiplepages (with 12 results per page) and allows users to navigate them using pagination controls.page) of results at a time. In addition, breaking down a large list into manageablechunks makes page downloads faster and users can view results relatively quickly.HowDivide search results into a sequence of pages and allow users to navigatethrough them using, at a minimum, “next” and “previous” links.MINIMIZE PAGING AS WELL AS SCROLLINGDeciding the number of items to show on a search results page is a trade-offbetween scrolling and paging. Typically, for all text results with a minimaldescription 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 morethan 10 to 15 items. However, considering that users limit their exploration ofsearch results to just a few pages and they do not mind scrolling, a case canbe made for showing more search results on a page (Spool, 2008b). Showing50 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 resultsat a time when compared with 10 or 100 search results.2MAKE PAGINATION CONTROLS EASILY CLICKABLEWhen numbered links are included in pagination controls to allow users tojump directly to a specific search results page, they often present a very smalltarget for users to click. To ensure that pagination controls are easily clickable,use a larger target size and provide sufficient 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.2 Interestingly, the study found slower search times and lower preference for 100 search results ata time. This may be a case against showing an arbitrarily large number of search results.168 CHAPTER 6 Searching and Filtering 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). 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 first 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 justified 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 first few pages to find the items they need. According to Nielsen (2001), “Users almost never look beyond the second page of search results.” (a) (b) 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 presen ...