Downloaded 149 times
![thank you ! 1-800-978-9183 www.experiencedynamics.com Frank Spillers, MS [email_address]](https://image.slidesharecdn.com/formsusabilitydesignbestpractices-experiencedynamicswebseminar-100728182634-phpapp01/75/Forms-usability-design-best-practices-experience-dynamics-web-seminar-49-2048.jpg)
Uploaded byExperience Dynamics
Forms usability design best practices experience dynamics web seminar
This document outlines best practices for designing user-friendly web forms, emphasizing the importance of ease of use and accessibility. It provides ten best practices for form design, five essentials for improving form conversion, and tips for enhancing desirability and satisfaction. Additionally, it suggests accessibility measures to ensure form elements are user-friendly for all users, including those with disabilities.
More Related Content
Similar to Forms usability design best practices experience dynamics web seminar
Forms usability design best practices experience dynamics web seminar
- 1. Forms Usability DesignBest Practices An Experience Dynamics training WEB SEMINAR With Frank Spillers, MS
- 2. About Your SpeakerFrank Spillers Masters Cognitive Science 11 years User Centered Design experience Founder, Experience Dynamics- leading Usability Design Research firm
- 3. Agenda Formsare a foundational element of web and web application user experience. Users interact with forms when performing subscribe, sign-up or ecommerce check-out actions. Forms are used for data-entry and to make things happen on search interfaces, in pop-up windows and more. How easily and comfortably can your users interact with and complete your forms? In short, how annoying are your forms? Forms Usability Known Issues 10 Best Practices for Designing Form Elements 5 Form Conversion Essentials Adding Desirability and Satisfaction to Forms Forms Accessibility Q & A
- 4. What’s wrong withthis form?
- 5. What’s wrong withthis form?
- 6. The Business ofForms Yesterday’s forms Long Tedious Rude Unhelpful Demanding Error handling centric Today’s forms Shorter Breathable Context-sensitive help Interactive Engaging Rewarding (no mistakes!)
- 7. Forms Usability KnownIssues
- 8.
- 9. Intention/ Purpose leadsform design
- 10. Please Ask forLess
- 11. Vertical is faster This is horizontal!
- 12. Error checking requiresfocused attention What is required here?
- 13. Will they knowwhat you mean? What are Tags and why should I use them?
- 14. Page Layout andDesign matters
- 15. Reading adds stressto forms
- 16.
- 17. 2. 10 BestPractices for Designing Form Elements
- 18. Pre-populate and promptcontent Best Practice : #1
- 19. Provide rule deciphering Best Practice : #2
- 20. Maintain Relevancy/ Connection Best Practice : #3
- 21. Best Practice : #4 Organize with visual grouping
- 22. Make it easyto find the form! Best Practice : #5
- 23. Treat it asan Instructional Conversation Best Practice : #6
- 24. Ask to leavepage Best Practice : #7
- 25. Provide expert helptools Best Practice : #8
- 26. Use dynamic elements Best Practice : #9
- 27. Dynamically Display NextSteps Best Practice : #10
- 28. 3. 5 FormConversion Essentials
- 29. 1. Text abovetextbox for rapid fill-out
- 30. 2. Add visualcues; make form fun
- 31. 3. Explain process/manageexpectations
- 32. 4. Provide ahigh touch way out
- 33.
- 34. Bonus tip: Up-sellat purchase fields
- 35. 4. Adding Desirabilityand Satisfaction to Forms
- 36. Make field boxesbig, roomy
- 37. Use smart AJAXfield logic AJAX MaskedEdit AJAX AutoSuggest AJAX PopupControl
- 38. Provide context ofuse features
- 39.
- 40.
- 41. Make Active actiona button; passive a link Avoid Clear or Reset buttons on forms!
- 42. Use appealing visualdesign
- 43.
- 44. Make Forms AccessibleAccess Tip: Form elements need to be labeled with <label> tag. Also include instructions. Radio buttons need a fieldset . Use fieldsets and legends to group related form elements. Note: all labeling should be semantic.
- 45. Support Screen Readers,Keyboard access Access Tip: Use tabindex attribute so users can tab across fields. Set up shortcut keys using accesskey .
- 46. Make Script AccessibleAccess Tip: Provide <noscript> option for JavaScript. Let users select (link, keyboard select etc) an event. Make scripts actionable via keyboard commands.
- 47. Accessible Error HandlingAccess Tip: Indicate what happened and what needs to be done. Use script prompts for incorrect field data re-entry. --or-- 3. Link to error form fields from top of page. *WebAIM.org tip
- 48.
- 49. thank you! 1-800-978-9183 www.experiencedynamics.com Frank Spillers, MS [email_address]
- 50. About Experience Dynamics: Experience Dynamics is a professional usability design research firm. Through its User Centered Design services, Experience Dynamics assists organizations with removing the frustration and confusion that plagues most website and software development projects. Companies benefiting from Experience Dynamics actionable usability recommendations include AutoNation, IBM, Hewlett Packard, Intel, Verizon, Microsoft, Four Seasons, Washington Mutual, Bank One, Target, Land Rover, Providence Health System and KeyBank. About Experience Dynamics web seminars: Experience Dynamics offers a recurring set of usability web seminars on hot usability topics. The web seminars provide an overview and quick review of key issues and opportunities related to best practices in usability research. The seminars are presented by Frank Spillers, MS, a recognized expert in the field of usability engineering and user experience design. Experience Dynamics seminars are complimentary and are attended by companies including Intel, Citigroup, KeyBank, The Hartford, Fujitsu, Intuit, EMC Corp, Chase, US Bank, Apple, Amazon.com, Business Objects, Mentor Graphics, GM, Toyota and others.
Editor's Notes
- #45 http://www.portlandonline.com/water/index.CFM?a=267167&c=39678 http://www.portlandonline.com/index.cfm
- #47 https://www.portlandonline.com/index.cfm?new=1&show_message=1&login=1