O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Forms usability design best practices experience dynamics web seminar

8.258 visualizações

Publicada em

Forms usability: Forms are a foundational element of web and web application user experience. How easily and comfortably can your users interact with and complete your forms? In short, how annoying are your forms?

Publicada em: Design
  • Seja o primeiro a comentar

Forms usability design best practices experience dynamics web seminar

  1. 1. Forms Usability Design Best Practices An Experience Dynamics training WEB SEMINAR With Frank Spillers, MS
  2. 2. About Your Speaker <ul><li>Frank Spillers </li></ul><ul><li>Masters Cognitive Science </li></ul><ul><li>11 years User Centered Design experience </li></ul><ul><li>Founder, Experience Dynamics- leading Usability Design Research firm </li></ul>
  3. 3. Agenda <ul><li>Forms are a foundational element of web and web application user experience. Users interact with forms when performing subscribe, sign-up or ecommerce check-out actions. </li></ul><ul><li>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? </li></ul><ul><ul><ul><li>Forms Usability Known Issues </li></ul></ul></ul><ul><ul><ul><li>10 Best Practices for Designing Form Elements </li></ul></ul></ul><ul><ul><ul><li>5 Form Conversion Essentials </li></ul></ul></ul><ul><ul><ul><li>Adding Desirability and Satisfaction to Forms </li></ul></ul></ul><ul><ul><ul><li>Forms Accessibility </li></ul></ul></ul><ul><ul><ul><li>Q & A </li></ul></ul></ul>
  4. 4. What’s wrong with this form?
  5. 5. What’s wrong with this form?
  6. 6. The Business of Forms <ul><li>Yesterday’s forms </li></ul><ul><li>Long </li></ul><ul><li>Tedious </li></ul><ul><li>Rude </li></ul><ul><li>Unhelpful </li></ul><ul><li>Demanding </li></ul><ul><li>Error handling centric </li></ul><ul><li>Today’s forms </li></ul><ul><li>Shorter </li></ul><ul><li>Breathable </li></ul><ul><li>Context-sensitive help </li></ul><ul><li>Interactive </li></ul><ul><li>Engaging </li></ul><ul><li>Rewarding (no mistakes!) </li></ul>
  7. 7. <ul><ul><ul><li>Forms Usability Known Issues </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  8. 8. <ul><ul><ul><li>People hate forms! </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  9. 9. <ul><ul><ul><li>Intention/ Purpose leads form design </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  10. 10. <ul><ul><ul><li>Please Ask for Less </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  11. 11. <ul><ul><ul><li>Vertical is faster </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>This is horizontal!
  12. 12. <ul><ul><ul><li>Error checking requires focused attention </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>What is required here?
  13. 13. <ul><ul><ul><li>Will they know what you mean? </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>What are Tags and why should I use them?
  14. 14. <ul><ul><ul><li>Page Layout and Design matters </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  15. 15. <ul><ul><ul><li>Reading adds stress to forms </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  16. 16. <ul><ul><ul><li>Large, centered buttons help </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  17. 17. <ul><ul><ul><li>2. 10 Best Practices for Designing Form Elements </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  18. 18. <ul><ul><ul><li>Pre-populate and prompt content </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>Best Practice : #1
  19. 19. <ul><ul><ul><li>Provide rule deciphering </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>Best Practice : #2
  20. 20. <ul><ul><ul><li>Maintain Relevancy/ Connection </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>Best Practice : #3
  21. 21. Best Practice : #4 <ul><ul><ul><li>Organize with visual grouping </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  22. 22. <ul><ul><ul><li>Make it easy to find the form! </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>Best Practice : #5
  23. 23. <ul><ul><ul><li>Treat it as an Instructional Conversation </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>Best Practice : #6
  24. 24. <ul><ul><ul><li>Ask to leave page </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>Best Practice : #7
  25. 25. <ul><ul><ul><li>Provide expert help tools </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>Best Practice : #8
  26. 26. <ul><ul><ul><li>Use dynamic elements </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>Best Practice : #9
  27. 27. <ul><ul><ul><li>Dynamically Display Next Steps </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>Best Practice : #10
  28. 28. <ul><ul><ul><li>3. 5 Form Conversion Essentials </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  29. 29. <ul><ul><ul><li>1. Text above textbox for rapid fill-out </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  30. 30. <ul><ul><ul><li>2. Add visual cues; make form fun </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  31. 31. <ul><ul><ul><li>3. Explain process/manage expectations </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  32. 32. <ul><ul><ul><li>4. Provide a high touch way out </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  33. 33. <ul><ul><ul><li>5. Reinforce Motivation </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  34. 34. <ul><ul><ul><li>Bonus tip: Up-sell at purchase fields </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  35. 35. <ul><ul><ul><li>4. Adding Desirability and Satisfaction to Forms </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  36. 36. <ul><ul><ul><li>Make field boxes big, roomy </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  37. 37. <ul><ul><ul><li>Use smart AJAX field logic </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>AJAX MaskedEdit AJAX AutoSuggest AJAX PopupControl
  38. 38. <ul><ul><ul><li>Provide context of use features </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  39. 39. <ul><ul><ul><li>Provide contextual help text </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  40. 40. <ul><ul><ul><li>Integrate instuctions/ remove reading </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  41. 41. <ul><ul><ul><li>Make Active action a button; passive a link </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>Avoid Clear or Reset buttons on forms!
  42. 42. <ul><ul><ul><li>Use appealing visual design </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  43. 43. <ul><ul><ul><li>5. Forms Accessibility </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  44. 44. Make Forms Accessible <ul><li>Access Tip: </li></ul><ul><li>Form elements need to be labeled with <label> tag. Also include instructions. </li></ul><ul><li>Radio buttons need a fieldset . </li></ul><ul><li>Use fieldsets and legends to group related form elements. </li></ul><ul><li>Note: all labeling should be semantic. </li></ul>
  45. 45. <ul><ul><ul><li>Support Screen Readers, Keyboard access </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><li>Access Tip: </li></ul><ul><li>Use tabindex attribute so users can tab across fields. </li></ul><ul><li>Set up shortcut keys using accesskey . </li></ul>
  46. 46. Make Script Accessible <ul><li>Access Tip: </li></ul><ul><li>Provide <noscript> option for JavaScript. </li></ul><ul><li>Let users select (link, keyboard select etc) an event. </li></ul><ul><li>Make scripts actionable via keyboard commands. </li></ul>
  47. 47. Accessible Error Handling <ul><li>Access Tip: </li></ul><ul><li>Indicate what happened and what needs to be done. </li></ul><ul><li>Use script prompts for incorrect field data re-entry. </li></ul><ul><li>--or-- </li></ul><ul><li>3. Link to error form fields from top of page. </li></ul>*WebAIM.org tip
  48. 48. <ul><ul><ul><li>6. Q & A </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  49. 49. thank you ! 1-800-978-9183 www.experiencedynamics.com Frank Spillers, MS [email_address]
  50. 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.