Web Application Design Patterns- P5

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

Thêm vào BST

Báo xấu

107
lượt xem 13
download

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) Đăng nhập để gửi bình luận!

Lưu

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

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).
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.
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.
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).
This page intentionally left blank
CHAPTER 5 Navigation 111 INTRODUCTION Designing navigation is about establishing relationships between various applica- tion parts (i.e., content and functionality) and conveying their importance and hierarchy to efﬁciently and effectively facilitate completion of user tasks. This includes organization, labeling, and presentation of content and functionality. This chapter focuses on patterns related to the types of navigation systems and their presentation; to learn about the organization and labeling of navigation sys- tems, see Morville and Rosenfeld (2006), Kalbach (2007), and Fleming (1998). Most web applications are organized hierarchically and thus allow users access to its content and functionality using levels of navigation. At the highest level, PRIMARY NAVIGATION, or global navigation, shows top-level categories or groupings that users can access from anywhere within the application. By mak- ing it available throughout the application, it also helps orient users within the application. SECONDARY NAVIGATION, or local navigation, shows users sec- ond and subsequent levels of navigation options for the selected primary nav- igation option. In addition to primary and secondary navigations, users also need a quick way to access a few key functions (e.g., login, logout, language selector, etc.) and content (e.g., help, cart, account, etc.). Like primary naviga- tion, these key functions and content areas need to be made available through- out the application (UTILITY NAVIGATION). Although primary and secondary navigation are useful in supporting an appli- cation’s hierarchical structure, content in many applications is multidimen- sional and does not afford a unique hierarchical navigation scheme. FACETED NAVIGATION has emerged as an effective approach to allow maximum ﬂex- ibility and support a variety of tasks by offering the ability to navigate using multiple attributes and not restricting users to only one (e.g., a facet) with which to start navigation. In addition to the hierarchical navigation approaches, users also beneﬁt from nonhierarchical ways to access information using indexes, related items lists, rec- ommendations, and so forth (SUPPLEMENTAL NAVIGATION). Supplemental
112 CHAPTER 5 Navigation navigation systems are intended not only as alternative ways of accessing content but also to encourage exploration. More recent applications, especially those that rely on user-generated and user-contributed content, allow users to discover new content by offering a navigation approach based on folkson- omies—a structure derived from user-provided labels describing application content (TAG CLOUDS). Another important function of navigation is that of orienting users and letting them know where they are within the application. Support for orientation is usually provided by location trails, commonly referred to as BREADCRUMBS. While most application navigation is intended to get users to their desired content or function, there are instances where navigation is used to help users accomplish tasks by guiding them one step at a time (WIZARDS). This is par- ticularly the case for infrequent, yet important, multistep tasks that have depen- dencies that users may be unfamiliar with. PRIMARY NAVIGATION Problem The most common functionality and high-level categories (or objects) within web applications need to be readily available and understood by users. Additionally, users should be able to navigate quickly among major sections from anywhere within the web application. Solution Offer users a consistent way to navigate to main application functions and place them in a consistent and salient manner on all application pages (Figure 5.1). Why For web applications, primary navigation plays a crucial role in facilitating navigation and orientation. It serves as both a table of contents by exposing high-level application functions and an orientation mechanism that lets users know where they are within the application’s structure (see also the BREADCRUMBS pattern later in this chapter). FIGURE 5.1 LinkedIn uses a tab-based approach that allows users access to important application features and functionalities.
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.
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).
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
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.
Secondary Navigation 117 Related design patterns Most web applications support hierarchical navigation, requiring both primary navigation and SECONDARY NAVIGATION. For deeper navigation hierarchies, consider using BREADCRUMBS to orient users and show them where they are in the application. SECONDARY NAVIGATION Problem Users need a way to access navigation options in the application’s hierarchy at levels below the primary navigation. Solution Show users secondary navigation that corresponds to the selected primary navi- gation option. In addition, clearly show the hierarchical relationship between the primary and each secondary level of navigation (Figure 5.7). Why Navigation in most web applications is designed to support its hierarchical structure,2 which is typically two to three levels deep. Secondary navigation com- plements primary navigation and makes it easy for users to navigate the appli- cation’s structure at levels below the primary navigation. Although secondary navigation options change based on the selected primary navigation, their place- ment within the application should be consistent to encourage exploration. How Clearly indicate the primary navigation option to which the secondary (and deeper) levels of navigation belong. When primary navigation is placed hori- zontally, secondary navigation options are either placed horizontally nested below the primary navigation (see Figure 5.6) or vertically as either left or right navigation bars (Figure 5.8). FIGURE 5.7 Rally shows secondary navigation nested below the selected primary navigation option. Although not common, Rally allows users to add their own secondary navigation option. 2 This doesn’t exclude other navigation approaches such as quick links to related items, alpha- betical indexes, breadcrumbs, and so forth (see the SUPPLEMENTAL NAVIGATION pattern later in this chapter). However, hierarchies are simpler to understand and offer a familiar way to organize information. Therefore, they are the preferred approach for structuring information (Morville and Rosenfeld, 2006).
118 CHAPTER 5 Navigation FIGURE 5.8 Gap uses an inverted-L navigation layout by placing primary navigation horizontally at the top of the page and secondary navigation vertically on the left. Placing secondary navigation vertically on the left or right is usually preferred when the total number of secondary navigation options cannot be accommo- dated horizontally or when the navigation choices are available at even deeper levels. Vertical placement of secondary navigation allows for necessary scal- ability as users navigate down the hierarchy. Although an inverted-L navigation layout—that is, placing secondary navigation on the left and primary naviga- tion at the top of page—is quite common, Kalbach and Bosenick (2003) did not ﬁnd any evidence of its beneﬁts when compared to its placement on the right. When showing deep hierarchies, it’s common to show navigation in an indented list in a treelike structure (Figure 5.9) The use of menus similar to desktop applications for showing secondary navi- gation options is becoming popular for web applications (Figure 5.10); they are also referred to as dynamic menus, ﬂy-out menus, pop-up menus, and dropdown menus. Menus have the beneﬁt of not taking up additional space and allowing users to explore navigation hierarchy without requiring them to select a primary naviga- tion option. However, menus have several downsides as well. Most important, users prefer to have all choices visible instead of hidden in dropdown menus. Bernard and Hamblin (2003) found a strong dislike as well as longer search times for horizontal placement of menus when compared with vertical place- ment. In addition, they may be difﬁcult for users who use assistive technolo- gies (e.g., screen readers) if they are activated by mouse hovers. For improving accessibility, they should be activated by a click of the mouse, and navigation options should be accessible via keyboard. They also may be disorienting to users, since the context of the selected option would be missing; this concern
Secondary Navigation 119 FIGURE 5.9 Wal-Mart uses a treelike navigation scheme for second and third levels of secondary navigation. (a) (b) FIGURE 5.10 PriceGrabber (a) and Sony (b) use menus to show secondary navigation options. Because Sony has a deeper navigation structure, it also uses cascading menus.
120 CHAPTER 5 Navigation can be alleviated to a certain extent by the use of location breadcrumbs (see the BREADCRUMBS pattern later in this chapter). HIGHLIGHT SELECTED PRIMARY AND SECONDARY NAVIGATION OPTIONS To orient users with the application, highlight the currently selected navigation option, both primary and secondary, in some way, such as by a combination of font size and weight, foreground and background colors, and border size and colors (see Figure 5.10). Related design patterns Because an application’s hierarchical structure is made accessible through its navigation system, SECONDARY NAVIGATION cannot be considered without the PRIMARY NAVIGATION. Use of BREADCRUMBS is also recommended, as they not only make an item’s placement in the hierarchy visible, but they also allow an efﬁcient way to backtrack to a higher level in the hierarchy. UTILITY NAVIGATION Problem Users need access to certain functions and tools, such as their shopping cart, help, log in, log out, account information, preferences, language selections, country selections, text-size selections, and so forth, on all application pages. Although they are key functions and need to be accessed from anywhere in the application, they are typically not used frequently. Solution Group such functions and tools (i.e., utilities) and allow users access to them from all pages within the application. Because they need to be accessible from anywhere in the application, place them in the header region (Figure 5.11). Why Utility navigation allows users quick access to important and key application functions. By placing them in a consistent, expected location throughout the application, users can ﬁnd them easily. However, they are not the primary mechanism for navigating the application and should be given less visual prominence when compared with the primary navigation. FIGURE 5.11 Snapﬁsh separates utility navigation functions—“log out,” “help,” “your cart,” and “your account”—in the top-right area of the page.
Utility Navigation 121 FIGURE 5.12 Buy.com uses an icon for the cart and uses orange to visually distinguish “View Cart” from other navigation options. FIGURE 5.13 Rally Agile Pro allows users to switch workspaces by selecting a different workspace from a dropdown list in the utility navigation area. How Place utility navigation in the header region (preferably in the top-right corner of the page) of all web application pages. In addition, give it less visual promi- nence over the primary navigation. EMPHASIZE COMMONLY ACCESSED FUNCTIONS For utility functions accessed more frequently than others (e.g., shopping carts for e-commerce applications), make them salient by supplementing their labels with icons and/or by using a visual treatment that clearly distinguishes them from other utility navigation options (Figure 5.12). USE UTILITY NAVIGATION TO ALLOW SWITCHING AMONG WORKSPACES OR APPLICATIONS Web applications that allow users to create and access multiple workspaces— for example, multiple projects—often use a utility navigation to allow them to switch between workspaces (Figure 5.13). Similarly, application suites, such as those offered by Google and Zoho, allow users to switch among applications using utility navigation (Figure 5.14). INCLUDE A LANGUAGE SELECTOR IN UTILITY NAVIGATION Web applications supporting multiple languages usually include options to change the language (or the country) as a utility navigation option (Figure 5.15; see also the LANGUAGE SELECTOR pattern in Chapter 10). Related design patterns Utility navigation options discussed here are “global” in nature (e.g., they apply to the entire page) and are placed in the header region. However, there
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.
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)
124 CHAPTER 5 Navigation Why In contrast to hierarchical navigation based on only one attribute, faceted navigation offers users the ability to navigate to desired items based on several attributes. In addition, users can select any available attribute to start their nav- igation. Another important beneﬁt is that an empty result set is not possible with faceted navigation. Because faceted navigation is generated from “facets” (or attributes) of the remaining items themselves, users see at least one choice at the end of the navigation. In fact, this is one important difference between faceted navigation (or faceted searching) from ﬁltering (see the FILTERING and FACETED SEARCH patterns in Chapter 6). How Show users all available facets to start their navigation (Figure 5.17). After users have selected the initial facet, show them items belonging to the selected facet along with the updated navigation choices derived from the remaining items’ facets. Additional facets may be placed vertically to the left or horizon- tally above the items list depending on the total number of facets available and the overall application design; horizontal placement may be limiting for items with several facets (Figure 5.18). FIGURE 5.17 Epicurious offers users several facets to choose from to browse recipes. KEEP USERS INFORMED OF THEIR SELECTIONS Avoid disorientation by showing users their selections with mechanisms such as BREADCRUMBS above the item list (Figure 5.19). (See the BREADCRUMBS pattern later in this chapter.)
Faceted Navigation 125 (a) (b) FIGURE 5.18 NexTag places facets on the left (a) and CNet places them at the top (b). Related design patterns As mentioned, BREADCRUMBS can be used to indicate users’ choices when using faceted navigation. In addition, applications using faceted navigation usually support FACETED SEARCH as well (see Chapter 6).