# Web Application Design Patterns- P5

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

0
61
lượt xem
10

## Web Application Design Patterns- P5

Mô tả tài liệu

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).
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)