Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing better forms

87 views

Published on

This talk was originally given by Cristina Viganò and Sam Hooper at an event organised by Cyber-Duck for World Usability Day 2017.

Published in: Design
  • Be the first to comment

Designing better forms

  1. 1. Designing better Forms
  2. 2. World Usability Day Welcome to Cristina Viganò Senior UX Designer @CrVigano Sam Hooper UX Designer @shooperux
  3. 3. SAID NO ONE EVER WHEN TALKING ABOUT FORMS…
  4. 4. 5 AGENDA Why forms are important Part 1 Forms 101: Dos and Don’ts of form Part 2 Q&A and Beers
  5. 5. Why are forms important?1
  6. 6. 1st real interaction users have with a product or service
  7. 7. 1% increase in revenue for every 100 milliseconds that Amazon is faster
  8. 8. 12bn dollars a year lost by Expedia for asking users to enter ‘Company Name’ on their booking form
  9. 9. Forms 101 Dos and Don’ts of form design 2
  10. 10. 1. KEEP IT SHORT AND EASY
  11. 11. https://go.marketo.com/rs/marketob2/images/Marketo-Secret-Sauce-for-Revenue-2011-May-Jon.pdf
  12. 12. www.shopforanagent.co.uk
  13. 13. www.shopforanagent.co.uk
  14. 14. 30 less conversions if Captchas are used (Stanford University)
  15. 15. 2. ORDER AND GROUPING
  16. 16. https://uxdesign.cc/design-better-forms-96fadca0f49c
  17. 17. register.virginsport.com, www.parkrun.org.uk VS
  18. 18. www.airbnb.com
  19. 19. www.airbnb.com
  20. 20. 3. USE PROGRESSIVE DISCLOSURE
  21. 21. www.britishairways.com
  22. 22. www.alitalia.com
  23. 23. Eventbrite app
  24. 24. 4. LAYOUT
  25. 25. Vertical structure, with labels left aligned on top of each field www.cyber-duck.co.uk
  26. 26. Good size of fields and good spacing between fields make it easy to fill in www.cyber-duck.co.uk
  27. 27. Submit button is prominent www.cyber-duck.co.uk
  28. 28. 6. INSTRUCTIONS AND LANGUAGE
  29. 29. www.creativeunited.org.uk
  30. 30. www.dlcuk.com
  31. 31. www.darkpatterns.org.uk
  32. 32. 5. FIELD TYPES
  33. 33. Field states
  34. 34. Only use drop downs when you have to
  35. 35. Only use drop downs when you have to
  36. 36. Only use drop downs when you have to
  37. 37. www.gov.uk.co.uk Be smart where you can be
  38. 38. register.virginsport.com, facebook.com
  39. 39. 7. ERROR MESSAGES
  40. 40. Identify what error has been made
  41. 41. Show error and completion messages, but only when the user stops typing
  42. 42. Don’t hide useful instructions
  43. 43. Thank You! ANY QUESTIONS?
  44. 44. Useful resources - Design better forms - 58 Form Design Best Practices & Form UX Examples - Form design for complex applications

×