Design better forms

1. Design better forms Sjors Timmer @sjors

2. Imagine a brief to redesign a donation form to work on mobile phones

3. Current version

4. First step: place the fields underneath each other

5. Question your questions Flow Design details Frequently asked questions 1. 2. 3. 4. Agenda

6. 1. Question your questions

7. Question protocol http://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-ﬁeld-is-necessary.php

8. Question protocol

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. 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 ﬁelds instead of the required ones

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. Remove all copy related to required fields

13. 2. Flow

14. Think of a form as a conversation Start EndTopic Topic Topic

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. 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 conﬁrmation 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. https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/ Register to vote One thing per page • Low-conﬁdence users ﬁnd it easier to use • Works well on mobile devices • Works better for handling errors, branches, loops and saving progress

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. Register to vote

20. I’d rather see users bored than confused Joe Lanman Attributed

21. Amazon mobile check out 1234 1234 1234 1234

22. Think of a form as a conversation Start EndName Contact Address Donation Payment

23. One thing per page Split the form in one section per page

24. 3. Design details

25. Label placement Top labels are the most ﬂexible • 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. The cardinal principle of industrial design: content always appears on top.   – Josh Clark Designing for touch

27. Help text • Place help text under the label

28. Long help text • Place help text under the label

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. Form fields • Big enough to touch • Field size gives a clue to the answer expected

31. Use 44 pixels on the web Josh Clark Designing for Touch

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. 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. fuckdropdowns.com – Eric Campbell and Golden Krishna Burn your select tags – Alice Bartlett

35. Possible solutions Radio buttons • Use analytics to ﬁnd top choices • Hide the rest under show more

36. Possible solutions Radio buttons • Show top choices • Hide the rest under show more

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/

40. Progress indicators Problem • Progress indicators are hard to ﬁt on small screens Solution • Use numbered steps • Explain the process upfront Register to vote

41. We removed the progress bar as an experiment. We measured the diﬀerence 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. Design details applied Same structure and questions, just easier to read and easier to click

43. 4. Frequently asked questions

44. Email • Autocomplete email address Acorns

45. Email • Autocomplete email address

46. Email • Autocomplete email address • Filter for spelling errors in popular provider’s domains Kickstarter

47. Email • Autocomplete email address • Filter for spelling errors in popular provider’s domains • Conﬁrm email address on screen petitions.parliament.uk

48. Email • Autocomplete email address • Filter for spelling errors in popular provider’s domains • Conﬁrm email address on screen petitions.parliament.uk

49. Email • Autocomplete email address • Filter for spelling errors in popular provider’s domains • Conﬁrm email address on screen • And/or there are services like neverbounce.com that actively validate email addresses

50. Address Postcode look up pcapredict.com

51. Address Postcode look up

52. Address Postcode look up

53. Date (of birth) • Default HTML5 date element doesn’t test well • 3 ﬁelds, looks boring, but tests well (for memorable dates)

54. https://twitter.com/QuiltingMuriel/status/640378046462099456

55. Final version Steps automated and content stripped down

56. Recap • Remove questions • Challenge complexity • Avoid dropdowns • Automate and validate wherever you can

57. Reading/watching tips Forms that work – Caroline Jarrett and Gerry Gaﬀney Mobile Design Workshop (on Youtube) – Luke Wroblewski, Conversations@Google Gov.uk design notes – https://designnotes.blog.gov.uk/

58. Thank you! Sjors Timmer @sjors notura.com