Web Application Design Patterns- P6

Web Application Design Patterns- P6: 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- P6136 CHAPTER 5 Navigation page. Because of their placement near primary and secondary navigations, breadcrumbs shouldn’t visually compete for attention or distract users from the main navigation mechanisms. Related design patterns Breadcrumbs should be given lesser emphasis than other important elements on the page, such as the page title, PRIMARY NAVIGATION, and SECONDARY NAVIGATION (see VISUAL HIERARCHY pattern in Chapter 12). WIZARDS Problem Users need to complete several steps in a specific order to complete a task (e.g., checking out an item on an e-commerce site, making reservations, filing taxes, and so forth). Because most users are going to perform the task occasionally, they may not acquire enough familiarity or expertise to remember the steps and their order for successfully accomplishing it. Solution Guide users through steps, one at a time, in a predetermined sequence (Figure 5.32). Such interfaces are commonly referred to as wizards. FIGURE 5.32 British Airways walks users through a wizard to help them make flight reservations. Wizards 137WhyWizards are useful when users must go through a specific sequence of steps andperform a set of individual tasks in succession (e.g., checkout for e-commerceapplications or opening an account with a financial institution). They are alsouseful for complex tasks with branches or dependencies among elements,which require considerable domain knowledge to complete (Dryer, 1997).By breaking such tasks into smaller steps and guiding users through eachstep, wizards hide the complexity of the underlying task. They require usersto focus on only a few data elements at a time and let the application keeptrack of what they have done and still need to do. Additionally, by guid-ing users through each step, errors are minimized and the chances of userssuccessfully accomplishing the task are improved. Finally, wizards are alsouseful when a task is critical for accomplishing users’ goals (Wickham et al.,2002). For example, in e-commerce applications, checkout is a critical task forpurchasing items.HowAs a first step, identify all information or groups of information and the orderin which they need to be presented to users to complete the desired task. Inaddition, identify any dependencies or branches between them to ensure thatthe dependent tasks occur later in the sequence. For example, in an e-commercecheckout process, shipping information usually comes before payment infor-mation because the shipping address and shipping options (such as deliverytimeframe, tax-exempt status, and so forth) are used to calculate tax and ship-ping charges, which contribute to the total price. Only after knowing the totalprice should users be asked for billing and payment information. Once infor-mation, grouping, and order are identified, break them up into individual stepsso that logically related groups are together.Once the steps, sequence, and branching decisions, if any, are made designpages in a wizard style—that is, present each step on a separate page and allownavigation between them with “next” or “continue” and “previous” or “back”actions (Figure 5.33).Although typical wizard implementation has individual steps on separatepages, a recent trend is to consider an accordion interface design approach(Figure 5.34). This design shows all the steps on the same page but, like a wiz-ard, makes only one step visible at a time. As users choose to go to the nextstep, the current step is collapsed and information corresponding to the nextstep is expanded and made available. Users may go to any previous step byclicking the corresponding step heading, which then expands that step andcollapses the current step. This design approach is effective for wizards withjust a few steps because the headings that represent steps and facilitate naviga-tion can take up excessive space on the page, leaving little room for content ineach step.138 CHAPTER 5 Navigation FIGURE 5.33 The TurboTax wizard uses “Back” and “Continue” actions to guide users to complete their taxes. FIGURE 5.34 Adobe uses a wizard-style interaction, but as an accordian to show all the steps on the same page. After a step is completed and users click “Continue,” the next step is revealed. Wizards 139LIMIT THE NUMBER OF STEPS IN THE WIZARDWhen developing wi ...