Web Application Design Patterns- P8

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

Thêm vào BST

Báo xấu

94
lượt xem 14
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Web Application Design Patterns- P8: This is the type of book you’ll want to read with your entire team and a fl ip chart because every 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 designing today’s web-based applications.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Web Application Design Patterns- P8

196 CHAPTER 7 Lists (a) (b) 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. 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).
Event List 197 (a) (b) FIGURE 7.24 Google Calendar shows users a weekly view by default (a), but allows them to change it on the “Settings” page (b). FIGURE 7.25 Yahoo! Calendar highlights dates with entries by making them bold. 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.
198 CHAPTER 7 Lists (a) (b) FIGURE 7.26 Pepsi Center shows scheduled sporting events in both (a) calendar view and (b) list view. 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.
Timelines 199 (a) (b) 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). FIGURE 7.28 SanDiego.org allows users to search by date range, event type, and keywords. 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.
200 CHAPTER 7 Lists 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. 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 difﬁ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).
Timelines 201 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.
202 CHAPTER 7 Lists Related design patterns Large TIMELINES that don’t ﬁ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 difﬁ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 ﬁ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 ﬁ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.
Image Lists/Grids 203 FIGURE 7.34 Fotolia offers users several options to ﬁlter the image list, including by categories, image orientation, ﬁle type, and so forth. 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 ﬁ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).
204 CHAPTER 7 Lists 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. 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 efﬁcient and effective in their interaction if they can
Image Lists/Grids 205 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 ﬂip through to ﬁ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. 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).
206 CHAPTER 7 Lists MAPS Problem Items to be presented to users contain spatial information that refers to either geographical (e.g., location of restaurants on a map) or physical locations (e.g., seating in an aircraft, a concert hall, or a stadium). In addition, for users, it’s important to know the item’s location in a geographical or physical space as well as its relation to other items in the same space. Solution Show items on either the map of a region or space in question (Figure 7.40). (a) (b) FIGURE 7.40 Roost shows location of homes on a map (a), and United Airlines allows users to choose their seat by showing a seating map (b).
Maps 207 Why Because users are presented with spatial information, showing them on a map of the physical space eliminates the need for users to visualize its location. It also makes information more meaningful and relevant to user goals, such as ﬁnding a location, navigating to and from a location, and relating data to the targeted region. How Maps are typically used as a background image on which geographical, physi- cal, and statistical information are superimposed. Depending on users’ needs, maps may be represented as illustrations (using points, lines, and polygons), photographic or satellite images, text, or a combination (Figure 7.41). SHOW DETAILED INFORMATION ON DEMAND When showing several locations on a map, providing details of all of them at the same time could clutter the map and may make it difﬁcult for users to parse relevant information. In addition, users may be interested in seeing details of only a few locations. To minimize complexity, a common approach is to provide users necessary details when they hover over or click on map markers. Detailed information can then be presented as hovertips or pop-ups. Hovertips are typically used when details are not extensive, are purely informational in nature, and do not require users to take an action on the presented information, whereas pop-ups are used when users can take actions such as ﬁnd directions (Figure 7.42). Another alternative is to show the pop-up after a few seconds’ delay to support relatively new users who may not know what actions are available on the map markers (e.g., Microsoft’s Live Maps). FOR LARGE MAPS, PROVIDE USERS CONTEXT BY SHOWING OVERVIEWS When panning and zooming large maps, it is important that users do not feel lost and are able to maintain their sense of location. Overviews within the map help provide such context (Figure 7.43). Most map overviews support panning within them, allowing users to move the “region” box inside the overview, thus affecting the map being viewed. Some map overviews support zooming as well. However, using overviews for panning and zooming is generally not as efﬁcient as panning and zooming on the main map (Hornbæk et al., 2002) (see also the OVERVIEW-PLUS-DETAIL pattern in Chapter 8).
208 CHAPTER 7 Lists FIGURE 7.41 Google Maps shows a location using a map, satellite, terrain, and street views. FIGURE 7.42 Zillow provides details about a location when clicked, as users may take follow- up actions to view home information and comparable homes in that area. FIGURE 7.43 Yahoo! Maps provides the map overview in the top-right corner. The overview box not only provides context to users but also allows users to move the context rectangle within it.
Maps 209 CONSIDER USE OF SYMBOLS FOR SHOWING LOCATION TYPES Maps may have to show more than one type of location—for example, a map may show restaurants, gas stations, lodging facilities, and so forth. Use one or more of the following approaches to indicate different location types: Colors and shapes. Use of distinct colors and shapes is helpful when showing two to three location types on the map. Include a legend so that users can associate colors and shapes to location types. In addition, to not disadvan- tage users with color vision deﬁciencies, use colored markers in combina- tion with unique shapes. Pictographic symbols. Use recognizable pictographic symbols to identify types of locations such as restaurants, restrooms, gas stations, trail symbols, and so forth (Figure 7.44). Although not used to indicate a location type per se, using thumbnails of actual photographs to identify a location is becoming a popular way to indi- cate a location on a map (Figure 7.45). FIGURE 7.44 This trip plan from Yahoo! Travel uses pictographic symbols differentiating between places to visit, restaurants, hotels, and so forth.
210 CHAPTER 7 Lists FIGURE 7.45 This map view from Google Maps shows photographs for locations around San Francisco. COMPLEMENT MAP VIEWS WITH A LIST, OR TABULAR VIEW, OF ITEMS Although a map view is useful for showing location information, the location itself may have other attributes that are better represented in a list format. In addition, when users are interested in comparing attributes of items other than their location, tabular lists are more useful—for example, when comparing prices of homes shown on a map. Enable such comparison by offering users a list view of items in addition to the map view (Figure 7.46; see also TABULAR LISTS pattern earlier in this chapter). For data with just a few attributes, it may help to show the list and map views side by side to make it easy for users to either select a location from the list and see it on a map or select a location on the map and see it on the list with all its attributes (Figure 7.47). USE MAPS TO SHOW STATUS INFORMATION Maps are also useful for showing status information on dashboards. For exam- ple, ShipCompliant for Six88 uses the U.S. map to show wineries their ship- ping compliance information (Figure 7.48). USE MAPS TO SHOW REAL-TIME INFORMATION ABOUT MOVING OBJECTS Maps may also be used to show real-time information about the location of objects in transit (e.g., trucks, trains, airplanes, and so forth). Once equipped
Maps 211 (a) (b) FIGURE 7.46 By default, Zillow shows users search results in a map view (a). However, it allows users to click “See homes in a list” to change to a list view (b). with global positioning system (GPS) devices, an object’s current position can be overlaid on the map to show its current location. This is useful for tracking locations of a ﬂeet or ﬁguring out the current location of a train, for example (Figure 7.49). Related design patterns Large maps typically don’t ﬁt within the available screen space and often use the OVERVIEW-PLUS-DETAIL pattern to allow users to maintain their context. In addition, maps use DRAG-AND-DROP for panning. See Chapter 8 for more information.
212 CHAPTER 7 Lists FIGURE 7.47 Cisco shows users the list view and map view side by side when showing partner search results. FIGURE 7.48 Six88 uses the U.S. map to show wineries their shipping compliance information. When users hover over a state, they are also shown their off-site and on-site shipping compliance record. LIST ACTIONS Problem For items in lists, users may want to take one or more actions such as editing, deleting, comparing, and so forth. Desired actions may apply to an individual item or may require users to select two or more items. Solution For actions such as edit, delete, copy, and so forth that apply to individual items, clearly associate and show actions for each item. For actions that require
List Actions 213 FIGURE 7.49 This train map shows the current location of trains based on Swiss Trains’ timetable. Although it does not yet show actual train GPS positions, the site claims that the positions of trains is accurate. FIGURE 7.50 PriceGrabber shows “Compare Prices,” an action associated with each item, for every item in a product list. It also offers checkboxes in front of each item so that users can select two or more items and select “Compare” to get a side-by-side feature comparison of selected items. selection of two or more items, show checkboxes for each item in the list and corresponding actions outside the list (Figure 7.50). Baxley (2003) referred to list actions such as dedicated actions and shared actions, respectively. Why By selecting a dedicated action for an item, users are implicitly choosing the item. Therefore, asking users to select the item before the action is an unnec- essary step. In addition, long lists may require users to select an item and
214 CHAPTER 7 Lists then scroll up or down to apply the action, further making the interaction inefﬁcient. For lists that support both dedicated and shared actions (see Figure 7.50), if not separated, clearly indicating 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 when it helps reduce visual clutter (Figure 7.51). However, to minimize errors, consider disabling dedicated actions when users have selected more than one item in the list. HIGHLIGHT THE ROW CORRESPONDING TO THE SELECTED ITEM Showing selected items with only checkboxes often doesn’t give enough visual indication about their selected states. A common approach to make selected items salient is to highlight corresponding rows by changing their background colors (Figure 7.52; see also the HIGHLIGHT pattern in Chapter 12). FIGURE 7.51 For actions that may be applied to one or more items, like in this Hotmail example, it’s acceptable to group together all controls and have users select one or more items using checkboxes. FIGURE 7.52 Google Docs highlights selected items by changing the corresponding row’s background color.
List Actions 215 (a) (b) (c) FIGURE 7.53 Examples of lists with (a) dedicated actions as links, (b) as buttons on the “Your Account” page of Dominos, and (c) as icons. CONSIDER USE OF ICONS AND ACTION LISTS FOR DEDICATED ACTIONS Dedicated actions can be shown as a set of links, buttons, or icons (Figure 7.53). However, because dedicated actions are repeated for each list item, hav- ing several actions in the same row as links or buttons may require additional screen real estate and can add to the visual clutter. In such situations, consider using action menus (Figure 7.54). Another design option to allow dedicated actions in a limited space is to move less-common actions to the item’s “details” page or show them on hover (Figure 7.55). Although this approach hides some actions, it may help simplify the user interface. FOR LONG LISTS, REPEAT SHARED ACTIONS For long lists requiring scrolling, repeat shared actions above and below the list. This will either eliminate the need for scrolling, as users will have one set of shared actions always visible or at least minimize scrolling to initiate an action after they have selected items.