Design better forms
•11 likes•13,342 views
Report
Share
Download to read offline
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.
More Related Content
What's hot
What's hot(20)
Similar to Design better forms
Similar to Design better forms(20)
More from Sjors Timmer
More from Sjors Timmer(16)
Recently uploaded
Recently uploaded(20)
Design better forms
- 2. Imagine a brief to redesign a donation form to work on mobile phones
- 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
- 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 fields 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 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. 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. 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
- 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. 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 find 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/
- 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. 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 fit 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 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. 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 • Confirm email address on screen petitions.parliament.uk
- 48. Email • Autocomplete email address • Filter for spelling errors in popular provider’s domains • Confirm email address on screen petitions.parliament.uk
- 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
- 53. Date (of birth) • Default HTML5 date element doesn’t test well • 3 fields, looks boring, but tests well (for memorable dates)
- 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 Gaffney Mobile Design Workshop (on Youtube) – Luke Wroblewski, Conversations@Google Gov.uk design notes – https://designnotes.blog.gov.uk/