# Web Application Design Patterns- P5

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

0
78
lượt xem
10

## Web Application Design Patterns- P5

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

Web Application Design Patterns- P5: 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)

Lưu

## Nội dung Text: Web Application Design Patterns- P5

1. 106 CHAPTER 4 Application Main Page requires effort on the users’ part. Therefore, if it’s possible to infer their needs and content can be personalized—for example, based on information provided by them—consider complementing customization with PERSONALIZATION approaches. BLANK SLATE Problem Many web applications start out empty because they rely on users to pro- vide data (e.g., a defect-tracking application, online calendar, to-do list, etc.). Although the application pages will ﬁll up eventually, the ﬁrst time users access the application (or a new functionality within the application) they’ll see an empty page—a “blank slate.” They may be confused as to what to do next and may get an impression that the application is not working as desired when they see a page without content. Solution On the blank-slate page, answer questions that ﬁrst-time users would have such as how to get started, what to do next, and what will the page look like when ﬁlled in with data (37signals, 2006). This can be accomplished by explaining to users the best ways to get started via tutorials and help texts and/or show a typical screenshot of the page ﬁlled with content (Figure 4.32). Why Any guidance that can be offered to users during their initial interaction with a web application makes them feel comfortable with the application and helps them get started quickly. In addition, when faced with an empty page, users may ﬁnd it difﬁcult to determine scope and the extent of functionality offered by the web application, thus limiting the degree to which they are able to inter- act with the application. Having a blank-slate page serves several purposes for users: it sets appropriate expectations, encourages taking action, familiarizes them with what the page will eventually look like, and creates a positive ﬁrst impression of the applica- tion (Hoekman, 2008; 37signals, 2006). How An important design feature of an effective blank-slate page is one or more prominently displayed action(s) that would remove the blank slate and get users familiar with the application (Figure 4.33). The actions may be accompanied by messages informing users why they are not seeing any content. For example, Basecamp uses messages such as “Create the ﬁrst writeboard for this project” with “ﬁrst” implying that users have not created a writeboard (Figure 4.34).
2. Blank Slate 107 FIGURE 4.32 Blinksale, an invoice management application, provides a brief explanation of the dashboard and shows an example dashboard page demonstrating to users what the dashboard will look like when ﬁlled in. FIGURE 4.33 On its blank-slate page, Box.net offers users several options (e.g., create a new folder, create a new collaboration folder) to get started. It also offers an option to “Watch video demo.” OFFER USERS RELEVANT TUTORIALS OR DEMOS Make users understand the steps involved in using a web application or a piece of functionality by offering them tutorials or demos (see Figure 4.34). Make them targeted and short in duration so that users can start using the application quickly.
3. 108 CHAPTER 4 Application Main Page FIGURE 4.34 Basecamp shows the message “Create the ﬁrst writeboard for this project” to indicate that users haven’t created any writeboards. It also shows what a writeboard looks like and offers users a video demo (approximately 2 minutes) to learn more about writeboards. FIGURE 4.35 Blinksale uses both the “Example” watermark and dims the screenshot on the blank-slate page.
4. Blank Slate 109 FIGURE 4.36 Mint offers users help with initial account setup. They show the page without content dimmed with some sample data to give users a general idea of what the “Account” page will eventually look like. SHOW USERS AN EXAMPLE SCREENSHOT Set clear expectations of what the page will look like when ﬁlled by showing a screenshot with sample content. Make it clear to users that they are not seeing real data by inserting watermarks, such as “Sample data” or “Example,” or dim the screenshot to make it recede into the background (Figure 4.35). ASSIST USERS IN THE INITIAL SETUP If there are certain tasks users must do before they can use the web application, offer options to guide them through the initial setup process. For example, for a ﬁnancial application, users can be offered to set up accounts (Figure 4.36). Related design patterns BLANK SLATE offers necessary guidance to new users of the application so that they can become productive with the application quickly. The need for assisting users does not completely go away after they have interacted with the applica- tion and ﬁlled it with data. It’s important to continue assisting users throughout their interaction with the application using CONTEXTUAL HELP, FREQUENTLY ASKED QUESTIONS, and APPLICATION HELP (see the Web Help Appendix at www.elsevierdirect.com/9780123742650 and the INPUT HINTS/PROMPTS pattern in Chapter 2).
8. Primary Navigation 113 How Place primary navigation either horizontally at the top of the page or verti- cally running down the page, either on the left or right side. Web applications have typically favored placing primary navigation horizontally (Figure 5.2); Adkisson (2002) found that 87 percent (65 of 73 sites) of e-commerce appli- cations placed the primary navigation horizontally at the top of the page. This is understandable, since placing primary navigation vertically reduces avail- able horizontal space. For web applications presenting tabular data with many columns, vertical placement of primary navigation could result in horizontal scrolling or make tabular data appear cluttered. Placing primary navigation horizontally, however, limits the number of naviga- tion options it can offer users before requiring them to scroll horizontally. To avoid horizontal scrolling, web applications often resort to having a “more” option (usually depicted as an arrow icon) to allow users to see additional nav- igation choices (Figure 5.3); this is similar to toolbars in desktop applications FIGURE 5.2 Rally places primary navigation horizontally to accommodate tabular data that has several columns. FIGURE 5.3 SalesForce uses an arrow tab that allows users access to additional primary navigation options that could not be accommodated horizontally.
9. 114 CHAPTER 5 Navigation Table 5.1 Beneﬁts and Limitations of Horizontal and Vertical Table 5.1 Placement of Primary Navigation Horizontal Placement Vertical Placement Beneﬁts Allows more horizontal space Is easier to scale. Can easily for content. Beneﬁcial if the web accommodate 10–15 menu application requires showing options without requiring tabular data with several users to scroll on monitors columns. with 1024 768 resolution. Allows multiple levels of navigation options as a hierarchical structure. Limitations Difﬁcult to scale. Cannot Requires horizontal space typically accommodate more limiting the space available than 8–10 navigation options for application content. on monitors with 1024 768 resolution. If multiple navigation levels are desired and shown as cascading levels, horizontal navigation breaks down beyond two to three levels. Also, with multiple cascading levels, content gets pushed down. such as Microsoft Word, Firefox, and others. Table 5.1 summarizes the beneﬁts and limitations of horizontal and vertical placement of primary navigation. Regardless of the placement of primary navigation, it is important that it be positioned consistently and made available throughout the application. MAKE PRIMARY NAVIGATION VISUALLY SALIENT Because users rely on primary navigation to access the main functionality of the web application, make it salient and clearly differentiated from the page content (Figure 5.4). HIGHLIGHT THE SELECTED NAVIGATION OPTION Highlight the selected navigation option to let users know where they are within the application. This can be accomplished by visually distinguishing the selected navigation option from others by varying its font, background, color, and/or border (Figure 5.5).
10. Primary Navigation 115 FIGURE 5.4 Plaxo uses global navigation that is clearly distinguishable from the rest of the page. FIGURE 5.5 Backpack makes the selected option appear like a tab to visually distinguish it from other navigation options. REMOVE PRIMARY NAVIGATION FOR TASKS WITH SELF-CONTAINED NAVIGATION Typically, primary navigation should be placed in and made available con- sistently throughout the application. However, for multistep tasks with their self-contained navigation (e.g., wizard-based), to minimize distractions or to prevent data loss (e.g., checkout, initial setup, or registration) primary naviga- tion may be removed (Figure 5.6). Because wizardlike tasks are often supported by their own navigation, removing primary navigation also avoids potential confusion among multiple navigation mechanisms (see the WIZARDS pattern later in this chapter). ESTABLISH A CORRECT INFORMATION “SCENT” THROUGH EFFECTIVE LABELING Primary navigation labels are very important for establishing a correct informa- tion “scent” for the application. The notion of an information “scent” is based on the information foraging theory, which explains mechanisms used by people when searching for information (Chi et al., 2000; Pirolli and Card, 1999). This
11. 116 CHAPTER 5 Navigation FIGURE 5.6 Gap removes all forms of navigation (other than that required for purchasing items) as soon as users begin the checkout process. This site uses the accordion1 approach to navigate for sign in, shipping, payment, and so forth. theory suggests that, when faced with a variety of options, users choose the one offering them the strongest indication or “scent” that will take them closer to the desired information. When applied to primary navigation, if labels repre- senting navigation options fail to provide a strong “scent,” not only will users take longer to decide which option to choose, but they may also navigate down the wrong paths, leading to inefﬁcient interaction and a frustrating experience. Simply stated, from navigation labels, users should be able to form correct expectations of information they will be able to access and tasks they will be able to accomplish by choosing a navigation option without actually selecting it. TIP The need to establish a correct information “scent” applies to all types of navigation systems, not just primary navigation. 1 The accordion approach shows users content for only one navigation option at a time. Clicking another navigation option expands the content within it and collapses other choices. The accor- dion interface is similar to a tab-based navigation in that both the approaches show content within only one navigation option at a time. The main difference is in the accordion menu’s visual representation and the accompanying “sliding” animation effect for revealing content within each navigation option.
17. 122 CHAPTER 5 Navigation FIGURE 5.14 Zoho allows users to change applications using the “Switch to” dropdown list in the utility navigation. FIGURE 5.15 Dominos’ online ordering application allows users to switch between English and Spanish (labeled “Español”) as a utility navigation option. are utility functions that are “local” in nature and apply to the content within the page, such as export to Excel or XML, printer friendly, email to a friend, and so forth, and are placed closer to the content to which they apply (see the LIST UTILITY FUNCTIONS pattern in Chapter 7). In addition, options to change the page language or country are offered in the utility navigation region (see the LANGUAGE SELECTOR and GLOBAL GATEWAY patterns in Chapter 10). FACETED NAVIGATION Problem Items such as wines, diamonds, recipes, cameras, computers, and many oth- ers can be classiﬁed along several attributes. For example, wines can be classi- ﬁed based on its type (e.g., red, white), region (e.g., California, France, Spain, Australia), price (e.g., less than $20,$20–$30, etc.), and several others. Thus, there is no one widely accepted hierarchical structure that can be used for navi- gation. In fact, a navigation scheme can be devised for each attribute it carries. Designing a navigation approach based on just one attribute would make navi- gation inefﬁcient and unsatisfactory to a large number of users. 18. Faceted Navigation 123 Solution Offer users a faceted navigation approach where users can choose any facet (i.e., attribute) of the item to navigate. With each selection of a facet, show users additional navigation choices based on facets that are valid for the remaining items (Figure 5.16). FIGURE 5.16 Wine.com uses a faceted navigation approach to help users navigate. With each selection, there are fewer available facets based on valid attributes for the remaining items. Therefore, navigation choices available for (a) Red Wine Cabernet Sauvignon are different from those for (b) Red Wine Cabernet Sauvignon$20–\$40 (price range). (a) (b)