Tài liệu Web Application Design Patterns- P8 pdf

CHAPTER 7 Lists 196 Solution Use a calendar-like format to present items. In addition, consider showing items in a list view as well and allow users to switch between them ( Figure 7.23 ). Why Users generally know how to interact with calendars because of their familiar- ity with desktop applications such as Outlook, Entourage, iCal, and so forth. In addition, using a calendar view makes it easy for users to see scheduled events and helps them with planning because they can clearly see available and busy time slots. How Show users a calendar with an appropriate default view — for example, cal- endars for personal or business use typically show a weekly view by default. However, allow them to change it to a different view per their preference ( Figure 7.24 ). (a) FIGURE 7.23 When users click “ Calendar, ” Clemson University’s web site shows users a monthly events view by default (a) and allows them to switch to a weekly view or a daily view (b). In all views, users may navigate to another month or day using the calendar control or “ previous ” and “ next ” pagination controls. (b) 197 When using a calendar control for navigation, highlight days with one or more scheduled events to prevent unnecessary navigation ( Figure 7.25 ). ALLOW USERS TO SWITCH BETWEEN CALENDAR AND LIST VIEWS Although events are typically shown in calendars because users may want to print the events list for reference, offer users both a list view and a calendar view ( Figure 7.26 ). In the list view, order events chronologically. Event List (a) FIGURE 7.24 Google Calendar shows users a weekly view by default (a), but allows them to change it on the “ Settings ” page (b). (b) FIGURE 7.25 Yahoo! Calendar highlights dates with entries by making them bold. CHAPTER 7 Lists 198 If event information includes both location and schedule information, con- sider showing users a location view as well. Although locations are often effec- tive as maps (see the MAPS pattern later in this chapter), a list view may be more suitable if many events are scheduled for the same location, which may appear cluttered on maps ( Figure 7.27 ). ALLOW USERS TO SEARCH CALENDAR ENTRIES When the total number of events is too large to be reasonably shown in a cal- endar view, allow users to search calendar entries ( Figure 7.28 ). RELATED DESIGN PATTERNS When showing events in a list format, instead of a calendar format, use either the SIMPLE LIST or TABULAR LIST pattern depending on the number of attri- butes that need to be shown to users. In addition, use the SEARCH RESULTS pattern (see Chapter 6) when showing the results of event searches. TIMELINES Problem Users need to be presented with time-based historical information (hours/min- utes in a day, days of the week, months, years, etc.) to enable them to see trends and/or the evolution of an event. (a) FIGURE 7.26 Pepsi Center shows scheduled sporting events in both (a) calendar view and (b) list view. (b) 199 Solution Show historical information as a timeline ( Figure 7.29 ). Why Timelines are appropriate for presenting time-based data because they allow users to see relationships between events and facilitate comparison. They can also help users see the historical context or rationale, if any, for the current state. Timelines (a) FIGURE 7.27 Agile University shows the course calendar using lists (a) but allows users to view them by months as well as regions (b). (b) FIGURE 7.28 SanDiego.org allows users to search by date range, event type, and keywords. CHAPTER 7 Lists 200 How Show time along the horizontal axis and the data or event information along the vertical axis. When available screen real estate is limited, allow users to scroll or pan the timeline ( Figure 7.30 ) or compress the timeline and allow them to zoom in and out as desired ( Figure 7.31 ). ALLOW USERS TO ACCESS EVENT DETAILS Because a lot of information may be compressed in a small area, it may be diffi cult to show details on a timeline. Therefore, allow users to hover over or click on an event (or a data point) in the timeline to view its details ( Figure 7.32 ). FIGURE 7.29 National Geographic uses a timeline to help users navigate space travel content. The design also incorporates a CAROUSEL pattern (see Chapter 8) to allow users to navigate the timeline. FIGURE 7.30 This example from the SIMILE Timeline project from MIT shows dinosaurs along the geological scale. Users can pan the timeline by dragging horizontally and access information not visible in the available viewport. 201 Timelines FIGURE 7.31 Google Finance shows historical stock price information in two separate timelines, making the most of limited screen real estate. The timeline in the bottom frame (shown in gray) is the entire timeline for which the stock price was available. The timeline in the top frame shows details of the selected timeline segment. Users can select a timeline segment they want to view by manipulating the slider in the bottom frame. FIGURE 7.32 In this “ Rise of Life ” timeline from National Geographic , users can click on an event in the timeline to view its details in the bottom pane. CHAPTER 7 Lists 202 Related design patterns Large TIMELINES that don’t fi t within the available screen space often incor- porate the OVERVIEW-PLUS-DETAIL pattern (see Chapter 8) to allow users to zoom in and out to view details. IMAGE LISTS/GRIDS Problem Items presented to users are visual in nature, and presenting them using only their textual description may make it diffi cult for users to recognize and locate desired items. In addition, users may be able to recognize an item by its image but may be unfamiliar with the item’s name. Solution Show users items as image grids or image lists rather than a textual list. However, complement images with a textual description ( Figure 7.33 ). Why A picture is worth a thousand words. – A proverb Humans are able to recognize and recall images better than words (Paivio et al., 1968). Therefore, when showing multimedia content, such as photos, movies, music, and so forth, it’s easier for users to scan and fi nd the desired item when all items are presented as images rather than just in a textual list. The advantage of images over textual information — commonly referred to as Picture Superiority Effect (Lidwell et al., 2003) — is particularly evident in sit- uations where users may have been casually exposed to the image before or know what the “ prototypical ” image they are searching for looks like. For example, if users are looking for a photo, an artist, an album, or a video that they have seen before or remember one or more elements of, it’d be faster for them to fi nd it using images rather than text. Because memory for images and text together is generally better than text or images by themselves, consider FIGURE 7.33 Last.fm shows top videos as an image grid and includes brief textual information about the videos. 203 complementing images with textual description (Childers and Houston, 1984; Paivio et al., 1968). In the early days of the Web, bandwidth was a limiting factor, and the focus was on sharing textual information. With broadband becoming commonplace, user interaction is changing, as users are not only viewing and uploading pho- tos, music, and videos, but also sharing them. This has made the use of image lists quite commonplace. How Facilitate the quick scanning of items by showing item thumbnails in an image grid. Like other lists, consider providing users with necessary list pagi- nation, sorting, and fi ltering options ( Figure 7.34 ; see also the PAGINATION, SORTING, and FILTERING patterns in Chapter 6). When space is limited, image lists may be implemented using the CAROUSEL pattern, where users are shown fewer items at a time, but they can use naviga- tion controls to view images hidden from their view ( Figure 7.35 ; see also the CAROUSEL pattern in Chapter 8). SHOW USERS A PREVIEW OF THE IMAGES When thumbnails are used to represent actual images, consider showing users a preview of the larger image on hover to minimize unnecessary navigation ( Figure 7.36 ). Image Lists/Grids FIGURE 7.34 Fotolia offers users several options to fi lter the image list, including by categories, image orientation, fi le type, and so forth. CHAPTER 7 Lists 204 Image previews can also be integrated when an image list is part of a slide- show. Although the detailed image does not require navigating to another page, showing a preview makes it easy for users to distinguish between similar images, especially when thumbnails are relatively small in size ( Figure 7.37 ). EXPLORE USING AN IMAGE LIST AS AN ALTERNATIVE FOR OTHER LISTS Increasingly, interaction with the Web is becoming visual. The assumption is that users would be more effi cient and effective in their interaction if they can FIGURE 7.35 Yahoo! TV uses a carousel for its image lists. FIGURE 7.36 iStockphoto shows users image (or video) previews in a hover style. 205 view (or preview) content before navigating. Newer search engines have started exploring use of images to show search results ( Figures 7.38 and 7.39 ). Related design patterns Unlike lists, especially tabular lists, which can be quite compact, IMAGE LISTS/ GRIDS usually require more space. When screen space is limited, consider using the CAROUSEL pattern to accommodate more items (see Chapter 8). Image Lists/Grids FIGURE 7.37 This example from Vertigo SlideShow illustrates a thumbnail gallery to navigate images. It also provides image previews when users hover over a thumbnail. FIGURE 7.38 SearchMe shows search results primarily as a series of thumbnails of web pages that users can fl ip through to fi nd the desired page. In addition, if they had previously accessed a useful one (or not useful enough), it’s easier to visually recognize it when they see the image rather than just its title. FIGURE 7.39 Viewzi, a search engine, groups results in several categories and uses various types of image lists for different search result groups; the shopping view is shown here. [...]... reverse their action (Raskin, 2007) This approach is becoming common in applications (e.g., emails), where the “delete” action does not prompt a user confirmation but offers “undo” (Figure 7.59) The applications may allow users to undo only the last action, or they may allow several levels of undo similar to desktop applications Plus, the applications may support a “redo” function as well For list actions,... Related design patterns List utility functions are similar to LIST ACTIONS and require that users are shown appropriate acknowledgment messages after successful task completion 223 This page intentionally left blank CHAPTER 8 Rich Internet Applications 225 INTRODUCTION As discussed in Chapter 1, Rich Internet Applications (RIAs) can deliver responsiveness and interactivity comparable to desktop applications... the earliest rich interaction in web applications was a RICH-TEXT EDITOR, which enabled users to include formatted text on web pages without knowing the underlying HTML (HyperText Markup Language) With the advent of technologies such as Flash and Ajax (Asynchronous JavaScript and XML), richer interactions have become possible because they allow communications with web servers without explicit “submit”... which actions apply to individual items and which apply to multiple items would be a design challenge as well How Place dedicated actions in the same row as the list item and repeat them for each item in the list, and place shared actions outside the list If users may select one or more items, like in many web- based email applications, placing both dedicated and shared actions outside the list is acceptable... common export/download formats include Adobe PDF, Excel, CSV (comma-separated values), TSV (tab-separated values), and XML (eXtensible Markup Language), because they allow users to import data to a preferred spreadsheet or database application and manipulate or view the data as necessary The XML data format is also useful when data may be used as input to other applications and/or converted to other formats... unread, starred, and unstarred since selecting many items would make it difficult to show all items on the comparison DESIGN TO PREVENT SELECTION ERRORS In instances where users’ selections are constrained either by the number of items they can select or the specific items they can select, design the interface to prevent selection errors For example, if users cannot select more than 4 items from a list... allows users to print each artifact (“defect” in this example) to start on a separate page or continuously without any page breaks These features are especially helpful in team environments and show the web application striving to meet users’ offline needs 221 222 CHAPTER 7 Lists (a) (b) FIGURE 7.63 When printing a Morningstar portfolio, users are first shown print options and instructions to use the browser’s... (LIVE PREVIEW) Enabling such richer interactions requires use of direct manipulation techniques common in desktop applications such as DRAG-AND-DROP and interactive controls such as SLIDERS In addition, to communicate changes effected on the page and help users maintain their visual context, designers have started relying on visual effects (ANIMATIONS/TRANSITIONS) Popular techniques include showing delays... useful when data may be used as input to other applications and/or converted to other formats such as HTML (HyperText Markup Language) or SVG (Scalable Vector Graphics) for presentation purposes Adobe PDF is useful when it’s important to maintain the visual look of data being exported Another commonly used utility function is “Print.” This may be implemented as simply a “printer-friendly” version of... last two versions are selected for comparison (a) As soon as users select another version in a column, the radio buttons in the other column are automatically updated to offer only valid choices (b) This design prevents selection of the same version for comparison or selection of an older version of a more recent document and a newer version of an older document FIGURE 7.58 When deleting a milestone, Basecamp . outside the list. If users may select one or more items, like in many web- based email applications, placing both dedicated and shared actions outside the. 7.24 ). (a) FIGURE 7.23 When users click “ Calendar, ” Clemson University’s web site shows users a monthly events view by default (a) and allows them to