Web Application Design Patterns- P8

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 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- P8196 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 tochange 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 morescheduled events to prevent unnecessary navigation (Figure 7.25).ALLOW USERS TO SWITCH BETWEEN CALENDAR ANDLIST VIEWSAlthough events are typically shown in calendars because users may want toprint the events list for reference, offer users both a list view and a calendarview (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 toview them by months as well as regions (b). FIGURE 7.28 SanDiego.org allows users to search by date range, event type, and keywords.SolutionShow historical information as a timeline (Figure 7.29).WhyTimelines are appropriate for presenting time-based data because they allowusers to see relationships between events and facilitate comparison. They canalso help users see the historical context or rationale, if any, for the current state.200 CHAPTER 7 Lists FIGURE ...