Web Application Design Patterns- P5

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 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- P5106 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 fill up eventually, the first 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 first-time users would have such as how to get started, what to do next, and what will the page look like when filled 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 filled 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 find it difficult 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 first 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 first writeboard for this project” with “first” implying that users have not created a writeboard (Figure 4.34). Blank Slate 107FIGURE 4.32 Blinksale, an invoice management application, provides a brief explanationof the dashboard and shows an example dashboard page demonstrating to users what thedashboard will look like when filled in.FIGURE 4.33 On its blank-slate page, Box.net offers users several options (e.g., create a newfolder, create a new collaboration folder) to get started. It also offers an option to “Watch videodemo.”OFFER USERS RELEVANT TUTORIALS OR DEMOSMake users understand the steps involved in using a web application or a piece offunctionality by offering them tutorials or demos (see Figure 4.34). Make themtargeted 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 first 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 109FIGURE 4.36 Mint offers users help with initial account setup. They show the page withoutcontent dimmed with some sample data to give users a general idea of what the “Account”page will eventually look like.SHOW USERS AN EXAMPLE SCREENSHOTSet clear expectations of what the page will look like when filled by showing ascreenshot with sample content. Make it clear to users that they are not seeingreal data by inserting watermarks, such as “Sample data” or ...