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.

Design better forms

10,244 views

Published on

This deck shows how to design accessible, understandable and mobile-friendly forms. We’ll explore the details of organising and writing good questions, the micro-interactions of form design and some popular challenges such as email and address.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Design better forms

  1. 1. Design better forms Sjors Timmer @sjors
  2. 2. Imagine a brief to redesign a donation form to work on mobile phones
  3. 3. Current version
  4. 4. First step: place the fields underneath each other
  5. 5. Question your questions Flow Design details Frequently asked questions 1. 2. 3. 4. Agenda
  6. 6. 1. Question your questions
  7. 7. Question protocol http://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php
  8. 8. Question protocol
  9. 9. By doing user research, and diving into the detail of the application process, the team has been able to remove 170 questions from the application process – that's 49% of the questions.
 
 – Steve Wood Simpler Carer's Allowance digital service now live https://gds.blog.gov.uk/2014/11/28/simpler-carers-allowance-digital-service-now-live/
  10. 10. Remove optional 1. Shortens the form 2. Required becomes default and does no longer need an asterisk * 3. And if you can’t remove it, label the optional fields instead of the required ones
  11. 11. Ironically, more people answered the optional questions when they were asked after they registered!
 
 – Luke Wroblewski The redesign of the eBay signup form
  12. 12. Remove all copy related to required fields
  13. 13. 2. Flow
  14. 14. Think of a form as a conversation Start EndTopic Topic Topic
  15. 15. Start the conversation • Reasons that would disqualify someone • Documents or numbers they need • Bullet points are great gov.uk/carers-allowance/how-to-claim
  16. 16. End the conversation • Thank them • State their actions • State reference number • Tell them what will happen next • Tell them how they can reach you • And make sure it prints well Thank you for your order! You successfully ordered 1 copy of Design better forms Your order number is #12345 You should receive a confirmation email within 5 minutes Your order should arrive between 25 and 27 September For any questions, contact us on 020123123 or a@b.com Print this page
  17. 17. https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/ Register to vote One thing per page • Low-confidence users find it easier to use • Works well on mobile devices • Works better for handling errors, branches, loops and saving progress
  18. 18. https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/ Register to vote ‘One thing’ could be: • one piece of information to understand • one decision to make • one question to answer
  19. 19. Register to vote
  20. 20. I’d rather see users bored than confused Joe Lanman Attributed
  21. 21. Amazon mobile check out 1234 1234 1234 1234
  22. 22. Think of a form as a conversation Start EndName Contact Address Donation Payment
  23. 23. One thing per page Split the form in one section per page
  24. 24. 3. Design details
  25. 25. Label placement Top labels are the most flexible • Keeps the text visible whilst typing • Can easily deal with translations • Can easily support a lot of help text • Allows the user to change the text size without breaking the layout
  26. 26. The cardinal principle of industrial design: content always appears on top. 
 – Josh Clark Designing for touch
  27. 27. Help text • Place help text under the label
  28. 28. Long help text • Place help text under the label
  29. 29. Long help text • Place help text under the label Example from: https://uxdesign.cc/the-anatomy-of-a-credit-card- payment-form-32ec0e5708bb
  30. 30. Form fields • Big enough to touch • Field size gives a clue to the answer expected
  31. 31. Use 44 pixels on the web Josh Clark Designing for Touch
  32. 32. Radio button/check box https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the- radios-and-checkboxes-on-gov-uk/ 1. People like clicking circle/box 2. Tried to get them to click the label (add grey background, remove the box, big outline) 3. People still really like clicking boxes 4. Solution: make boxes/circles bigger
  33. 33. Kill the drop down Problems users have with them • Unable to close the select • Typing into the select  • Confusing focused items with selected items • Touch screen: trying to pinch zoom select options Master
  34. 34. fuckdropdowns.com – Eric Campbell and Golden Krishna Burn your select tags – Alice Bartlett
  35. 35. Possible solutions Radio buttons • Use analytics to find top choices • Hide the rest under show more
  36. 36. Possible solutions Radio buttons • Show top choices • Hide the rest under show more
  37. 37. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know designnotes.blog.gov.uk/2017/04/20/were-building-an-autocomplete/
  38. 38. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know designnotes.blog.gov.uk/2017/04/20/were-building-an-autocomplete/
  39. 39. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know designnotes.blog.gov.uk/2017/04/20/were-building-an-autocomplete/
  40. 40. Progress indicators Problem • Progress indicators are hard to fit on small screens Solution • Use numbered steps • Explain the process upfront Register to vote
  41. 41. We removed the progress bar as an experiment. We measured the difference in our completion rates. We found that without a progress bar, completion rates stayed exactly the same Ben Holiday Do less, problems as shared spaces https://designnotes.blog.gov.uk/2014/07/07/do-less-problems-as-shared-spaces/
  42. 42. Design details applied Same structure and questions, just easier to read and easier to click
  43. 43. 4. Frequently asked questions
  44. 44. Email • Autocomplete email address Acorns
  45. 45. Email • Autocomplete email address
  46. 46. Email • Autocomplete email address • Filter for spelling errors in popular provider’s domains Kickstarter
  47. 47. Email • Autocomplete email address • Filter for spelling errors in popular provider’s domains • Confirm email address on screen petitions.parliament.uk
  48. 48. Email • Autocomplete email address • Filter for spelling errors in popular provider’s domains • Confirm email address on screen petitions.parliament.uk
  49. 49. Email • Autocomplete email address • Filter for spelling errors in popular provider’s domains • Confirm email address on screen • And/or there are services like neverbounce.com that actively validate email addresses
  50. 50. Address Postcode look up pcapredict.com
  51. 51. Address Postcode look up
  52. 52. Address Postcode look up
  53. 53. Date (of birth) • Default HTML5 date element doesn’t test well • 3 fields, looks boring, but tests well (for memorable dates)
  54. 54. https://twitter.com/QuiltingMuriel/status/640378046462099456
  55. 55. Final version Steps automated and content stripped down
  56. 56. Recap • Remove questions • Challenge complexity • Avoid dropdowns • Automate and validate wherever you can
  57. 57. Reading/watching tips Forms that work – Caroline Jarrett and Gerry Gaffney Mobile Design Workshop (on Youtube) – Luke Wroblewski, Conversations@Google Gov.uk design notes – https://designnotes.blog.gov.uk/
  58. 58. Thank you! Sjors Timmer @sjors notura.com

×