Design better forms
•
11 j'aime•13,377 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Design better forms
Similaire à Design better forms (20)
Plus de Sjors Timmer
Plus de Sjors Timmer (16)
Dernier
Dernier (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/