Web Application Design Patterns- P2

Web Application Design Patterns- P2: 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- P216 CHAPTER 2 Forms It’s important, however, to remember that web applications are developed using HTML and do not offer all the form controls available on popular plat- forms such as Windows and Macintosh. Specifically, the interaction in web applications is limited to the following form elements: text fields (single line and multiline), radio buttons, checkboxes, dropdown lists, scrolling lists, but- tons (including image buttons), and a special control to browse files. Some of the missing controls are spin control, combo-box, tree control, and tabs. Although these controls have been implemented using some clever combina- tions of HTML, CSS, and JavaScript, they are workarounds and not true con- trols because they are not available as part of the basic markup language. CLEAR BENEFITS Problem When presented with a form, users may not understand how filling it out and submitting it helps them accomplish their goals and tasks. Solution When designing, clearly indicate benefits of filling out and submitting forms. This is particularly important when users are creating a new account (i.e., regis- tration forms), which is the first step before many web applications allow them access to their functionality (Figure 2.1). Why Users may not want to fill out forms and provide personal information unless they understand the benefits they will get in return and how it helps them FIGURE 2.1 LinkedIn clearly lists the benefits of registering in the section “LinkedIn helps you….” Clear Benefits 17achieve their goals. In addition, they may be concerned about the securityof their personal information, since they may not know how it will be used.Clearly indicating benefits and addressing users’ concerns about security andprivacy are the first steps in ensuring that users will not abandon the forms.HowUsers should be made aware of the benefits of filling out forms, even if it’s justa one-field form like signing up for email newsletters (Figure 2.2).EXPLAIN THE BENEFITS OF REGISTERING ON LOGIN FORMSWhen users view the login form, and if they are not registered application users,it’s a perfect opportunity to describe registration benefits to them. This makes iteasy for users to decide whether they want to register or not (Figure 2.3).EXPLAIN THE BENEFITS BEFORE LEADING USERSTO THE FORMIn many cases, users have to be led to a form. If they don’t know the benefits,they may not bother to click the link or button that leads them to the form.Therefore, it’s important that the form’s benefits are described before usersFIGURE 2.2 User Interface Engineering (UIE) lists benefits of signing up for their emailnewsletter, “UIEtips.”FIGURE 2.3 Blockbuster lists the benefits of signing up with Blockbuster.com and offersa “free” trial period as an added incentive for registering.18 CHAPTER 2 Forms FIGURE 2.4 Plaxo describes the benefits of becoming a member alongside the sign-up button, and for new and unfamiliar concepts, they offer users the opportunity to learn more through a demo or a tour. FIGURE 2.5 Prosper (a marketplace for money borrowers and lenders) provides information about how borrowing and lending works using “How to Borrow” and “How to Lend” links. get to the form. One way to accomplish this is with clear link labels, such as “Transfer Money” or “Pay Bills,” instead of generic link labels, such as “Learn More” or “Continue.” When benefits may not be clear to users, it helps to describe them near the action (Figure 2.4). Increasingly, web applications offer functionality and benefits that may be dif- ficult to explain with just a few statements. Or, even when the benefits are clear, users may want to learn more about how the benefits are realized when using the application. To explain such functionality in detail, offer users options to learn more about how the web application works and reduce their anxiety about filling out any required forms (Figures 2.5 and 2.6). Related design patterns For many complex web applications and those that require users to pay upfront, consider offering a “CLICK-TO-CHAT” option (see Web Appendix: Help), which allows users to ask questions directly to a qualified company ...