2007 Adobe Systems Incorporated. All Rights Reserved. 1 MAX 2007 CONNECT. DISCOVER. INSPIRE. Forms Gone Wild - Ten things your users wont like. Duane Nickull Sr. Technology Evangelist - Adobe Systems. 2007 Adobe Systems Incorporated. All Rights Reserved. 2 Agenda Aspects of form design for consideration Common principles and considerations Visual Data constraints. Logic The Top Ten List Ten common mistakes of form designers you do not want to do Summary, Resources and Q&A 2007 Adobe Systems Incorporated. All Rights Reserved. 3 Disclaimer! All of the form examples in this slide deck might appear similar to real world forms. Any resemblance is purely coincidental and this deck is not meant to represent any specific organizations forms. 2007 Adobe Systems Incorporated. All Rights Reserved. 4 Components of Form Design Information Design (Data Model / integration behind the Form) Interaction Design (dialog and experience, form flow) Visual Design (layout and presentation) Logic (invisible elements controlling interactions) 2007 Adobe Systems Incorporated. All Rights Reserved. 5 Principles of Good Visual Design Intuition Users should intuitively be able to figure it out. Alignment visually connect elements Proximity physically grouping related elements White Space - do not clutter forms. Duane Nickull(604) Senior Technical Evangelist Adobe Systems, Inc Park Avenue, San Jose, CA USA Duane Nickull Senior Technical Evangelist (604) Adobe Systems, Inc. 345 Park Avenue, San Jose, CA USA 2007 Adobe Systems Incorporated. All Rights Reserved. 6 Constraints on Form Design What data model you must collect and how it must be serialized/masked? Date: Consistency in data types (orderdate, birthdate, shipdate same format) What level of technical capabilities does the client have? Will the form have to be saved on/off line? If the form is long, you can really loose people First looks are important. Where does it make sense to constrain input and where should you provide freedom? 2007 Adobe Systems Incorporated. All Rights Reserved. 7 Bad Form Designs - Top Ten List 10 Poor Graphic Design and Layout 2007 Adobe Systems Incorporated. All Rights Reserved. 8 Case Study 1 What are the problems with this form? 2007 Adobe Systems Incorporated. All Rights Reserved. 9 Case Study 1 2007 Adobe Systems Incorporated. All Rights Reserved. 10 Case Study 1 2007 Adobe Systems Incorporated. All Rights Reserved. 11 Bad Form Designs - Top Ten List 9 Errant Tabbing Order on Fields 2007 Adobe Systems Incorporated. All Rights Reserved. 12 Tabbing order is important Demos - Commercial.pdf and BadTabbingOrder.pdfCommercial.pdf BadTabbingOrder.pdf Form Designers need to consider the logic and flow of information. By default, most forms will tab from top left to bottom right. Using Adobe LiveCycle Designer, you can control this to your advantage. There are times you may wish to override this. Designer? 2007 Adobe Systems Incorporated. All Rights Reserved. 13 Bad Form Designs - Top Ten List 8 Wrong Field and Data Types (FormCommercial.pdf) (FormCommercial.pdf) 2007 Adobe Systems Incorporated. All Rights Reserved. 14 Example 1 If you need the country of origin, what format must he answer be in? Should it be a drop down list of ISO country codes? Lessons: Constraining possible answers to match acceptable values at the point of capture should logically reduce errors in form use. Do not give your users the chance to enter a wrong choice however You must account for all possible values and situations. For example, what happens if the user does not know their ISO country code? They may think CA is for California or China? Best solution: CA - Canada (all regions) 2007 Adobe Systems Incorporated. All Rights Reserved. 15 Example 2 This sample is not granular enough. Pros: Flexible in what can be entered. Cons: Not structured, not easily integrated with systems, prone to interpretation errors. Resulting data set is larger than it has to be. If these go into a database, maxSize attribute for field must account for largest possibility in form. Hey that a O or a zero???? Very likely that some of this information is either known or will be entered again. You cannot constrain values to match what you need (example: country code). Lessons: Think carefully about granularity of fields and field types. 2007 Adobe Systems Incorporated. All Rights Reserved. 16 Bad Form Designs - Top Ten List 7 Making Text Fields/Areas to Small 2007 Adobe Systems Incorporated. All Rights Reserved. 17 Small entry fields are a no-no Dont make users scroll unnecessarily. Makes it really hard to edit and use the form. Result: less than optimal input. Provide users with the space they need. Example of not enough space. Example 2007 Adobe Systems Incorporated. All Rights Reserved. 18 Bad Form Designs - Top Ten List 6 Forcing Double Entry of Data 2007 Adobe Systems Incorporated. All Rights Reserved. 19 Think of the logic behind the form Use case - one user will submit several talk presentations for an upcoming conference. Here is a bad way to do it. Here Users core data needs to be submitted with the form - or does it? Model Driven Architecture can help. Data Model for submissions. Cardinality must be present. Example: One user submitting several presentations should only have to include a token to identify them, not submit all personal data each time to the organization. Correct Approach: Have users make an account! 2007 Adobe Systems Incorporated. All Rights Reserved. 20 Bad Form Designs - Top Ten List 5 GUI Poisoning 2007 Adobe Systems Incorporated. All Rights Reserved. 21 GUI Poisoning Is not just a visual idea - it is about not thinking about the way your form is presented to your users or the information you are collecting. Think about the Flow of the form: Submit buttons should appear at the bottom. Think about what information a user will need to make their decision and make sure they have it at the decision point. Very important on form fragments! Do not allow your users to do things they should not do (example withdraw money from one account in a certain currency without first converting the currency). Enforce business logic at decisions points. This is the entry point to workflow considerations! 2007 Adobe Systems Incorporated. All Rights Reserved. 22 Allows users to transfer from either CAD or USD account 2007 Adobe Systems Incorporated. All Rights Reserved. 23 But you didnt convert the currency!!! 2007 Adobe Systems Incorporated. All Rights Reserved. 24 Does this form make any sense? If you are already logged in, why do they need to collect your name,and phone number? Knowing how much you had available to convert might be better than asking them to guess. 2007 Adobe Systems Incorporated. All Rights Reserved. 25 Bad Form Designs - Top Ten List 4 Validating multiple fields on onBlur() 2007 Adobe Systems Incorporated. All Rights Reserved. 26 onBlur() Is an event that happens when you click outside of the form element currently in focus. General rule is you should only validate the form element in focus, not other elements. Not adhering to this can cause major frustrations for your users. Demo Demo 2007 Adobe Systems Incorporated. All Rights Reserved. 27 Bad Form Designs - Top Ten List 3 Errant Presentation Order of Fields 2007 Adobe Systems Incorporated. All Rights Reserved. 28 Wrong Order Example 2007 Adobe Systems Incorporated. All Rights Reserved. 29 Lessons If forms elements are dynamically set, present the elements that they are dependent upon first! Example: Making them chose a State and Zip before country is not logical if you are going to substitute a list of Provinces based on their country selection. Zip/Postal code validation is also dependent upon country selection (mask). Go a level higher in logic: Maybe you dont even need to ask them for that information if they were asked for a token to identify themselves first. Repurpose, reuse existing data first! 2007 Adobe Systems Incorporated. All Rights Reserved. 30 Bad Form Designs - Top Ten List 2 Scripting without Thinking 2007 Adobe Systems Incorporated. All Rights Reserved. 31 Words alone can not describe. Launch Launch Things to examine: How can you hold ctrl down and scroll at the same time? How does the user know their form is submitted? Be careful what you consider Mandatory! 2007 Adobe Systems Incorporated. All Rights Reserved. 32 Bad Form Designs - Top Ten List 1 Resetting all the fields if a User makes one mistake 2007 Adobe Systems Incorporated. All Rights Reserved. 33 Reset Rule 1: Reset shall only be used if it can be justified. Rule 2: Reset can rarely be justified! Flawed logic in inception. Why would you ever want to reset all fields rather than simply editing the ones you need? Exception: Dynamic Forms you may need to reset in order to view certain choices again. Workaround use Back buttons where forms are built using staged states. Most forms no longer include Reset. You should never reset all fields on a form based on one user error. Sadly this is based on a real world experience in the last 3 weeks ;-) 2007 Adobe Systems Incorporated. All Rights Reserved. 34 Wrap up Lessons learned Possibilities Where to go to continue working on good forms Q&A 2007 Adobe Systems Incorporated. All Rights Reserved. 35 A good forms designer Knows the logic and process behind the form. Why does the form exist? What process is it tied to? Understands the scope and breadth of their users. Multiple countries? Saving people time and resources. Makes visual appearance so great that users would never have to use a manual. Intuitive design is a key concept. Example of a great form Here Here 2007 Adobe Systems Incorporated. All Rights Reserved. 36 The 12 Steps (may be plagiarized, hey its humor) We admitted we were powerless over form design and that our forms had become unmanageable. We came to believe that a Power greater than ourselves could restore us to good form design. Made a decision to turn our will and our lives over to the care of Adobe LiveCycle Workbench / Designer and Flex Builder as we understand them. Made a searching and fearless moral inventory of our processes and logic. Admitted to our form users, to ourselves and to another human being the exact nature of our wrongly designed forms. Were entirely ready to use LiveCycle Designer/Flex Builder to remove all these defects of design and logic. Humbly asked Adobe LiveCycle Designer/Flex Builder to remove shortcomings in our forms. Made a list of all persons we had harmed by exposing them to our badly designed forms, and became willing to make amends to them all and re-design the forms for them. Made direct amends to such people wherever possible, except when to do so would injure them or expose mistakes in our business processes. Continued to take personal inventory and when we design bad GUIs promptly admitted it and deleted them. Sought through careful Model Driven Architecture (MDA) to improve our interactions with users, as we understand them, praying only for knowledge of a good user experience. Having had a spiritual awakening as the result of these steps, we tried to carry this message to others who design very bad forms and to help them practice these principles. 2007 Adobe Systems Incorporated. All Rights Reserved. 37 Q & A References: Form Developers meet and share ideas at Adobe LiveCycle Designer and Dreamweaver products can be downloaded from Check out Flex forms at Thank you! 2007 Adobe Systems Incorporated. All Rights Reserved. 38 2007 Adobe Systems Incorporated. All Rights Reserved. 39 Three (long) or four (short) bullets go here to describe the image, diagram or screenshot in the pod above *A 10 point footnote can go here, if necessary Split Pod Layout 2007 Adobe Systems Incorporated. All Rights Reserved. 40 This layout is generally used for diagrams or large photos that look awkward in a pod *A 10 point footnote can go here, if necessary No Pod Layout 2007 Adobe Systems Incorporated. All Rights Reserved. 41 Useful for comparing four concepts side-by-side *A 10 point footnote can go here, if necessary Pod 1 TitlePod 2 TitlePod 3 TitlePod 4 Title 4 Column Split Pod Layout 2007 Adobe Systems Incorporated. All Rights Reserved. 42 Information goes here, and one or two images can sit in the gray area on the right *A 10 point footnote can go here, if necessary Pod-On-Right Layout 2007 Adobe Systems Incorporated. All Rights Reserved. 43 Useful for comparing four concepts *A 10 point footnote can go here, if necessary Four Quadrant Split Pod Layout 2007 Adobe Systems Incorporated. All Rights Reserved. 44 Useful for comparing two concepts side-by-side with data content below Optional Split Pod Layout 2007 Adobe Systems Incorporated. All Rights Reserved. 45 Useful for comparing two concepts side-by-side with data content below Optional Split Pod Layout 2007 Adobe Systems Incorporated. All Rights Reserved. 46 General purpose layout for use with most slides Bullet 1 Sub Bullet 1 Sub-sub Bullet 1 Bullet 2 *A 10 point footnote can go here, if necessary Single Pod Layout