Design better forms

Design forms that are usable, accessible and work on mobile phones and tablets. The slides of my UX Cambridge talk

Transcript

1. Design better forms Sjors Timmer @sjors Painting
2. About me • Sjors Timmer • Freelance interaction designer • Designed forms at MoJ Digital Services • Designed forms at Zopa
3. Write the copy Design the form 1. 2.
4. 1. Write the copy Reading tip: Forms that work by Caroline Jarrett and Gerry Gaffney
5. 1.1 Build trust
6. Provide context • Where am I? • What am I asked to do? facebook.com
7. Good design • Does the form match the rest of the site? • Does the form follow good design practices? facebook.com
8. Is it easy to contact the organisation? zopa.com/loans Contact details
9. Appropriate questions • Appropriateness depends on context • Get it wrong and people provide you with made-up data
10. A form is like a conversation Start End
11. Before you start • State reasons that would disqualify someone • State documents or numbers they need • Only state how long it will take if it goes against expectations • Bullet points are great gov.uk/carers-allowance/how-to-claim
12. Headings • Guide users through the text • Break the form at appropriate points
13. 1.2 Answers and help • Three types of answers • Three types of help text
14. 1. From memory answers • Short simple labels • No need to tell people upfront • No need for help text, but you might want to tell why you need an answer facebook.com
15. 2. Look up answers • Mention it in the preparation section • Simple and short label • Information on where you can find the answer gov.uk/carers-allowance/
16. Help text • Show help text • Help text for minority user group employmenttribunals.service.gov.uk/apply
17. 3. Think and write answers • Where most thinking needs to happen • In the form of a question or a section • Add help or even a writing guide employmenttribunals.service.gov.uk/apply
18. Extended help • Additional context for question • Detailed guidelines for answers employmenttribunals.service.gov.uk/apply
19. Answers • From memory • Look up • Think and write Help • Show help • Toggle help • External guide
20. Mark optional fields 1. Remove as many optional questions as possible 2. Label optional fields left with “(optional)” 3. Remove required *
21. Ironically, more people answered the optional questions when they were asked after they registered!
 
 – Luke Wroblewski The redesign of the eBay signup form
22. Progress indicators Problem • Progress indicators are hard to fit on small screens Solution • Use numbered steps • Explain the process upfront Register to vote
23. 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 https://designnotes.blog.gov.uk/2014/07/07/do-less-problems-as-shared-spaces/
24. • Consider building your form in sections • Approach it like an app • Login • Forward and back • Save progress • Overview before submitting Complex progress Turbotax
25. Success page • Thank them • Restate their actions • State reference number • State what will happen next • State 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
26. 2. Design the form Reading tip: Gov.uk’s design hackpad and design patterns
27. 2.1 Accessibility
28. Label placement Top labels are the most flexible • Work with long text • Don’t break if someone resizes the text • Can deal with a lot of help text
29. Label tag <input id=“nationality-irish“ type="checkbox" name=“is-irish” /> <label for=“nationality-irish”>Irish</label>
30. Readability Good combination of • Font size • Background colour/font colour • Font weight • White space
31. Colorsafe.co
32. Typeface http://thomasbyttebier.be/blog/the-best-ui-typeface-goes-unnoticed Helvetica: Illiterate 1iiLl 38rnm Fira: Illiterate 1iiLl 38rnm Roboto: Illiterate 1iiLl 38rnm
33. 1. Set the brightness of your mobile device to its lowest setting 2. Open up your website on the device and begin browsing around http://a11yproject.com/ Simple contrast test
34. Keyboard access • Don’t break tab index • Helps users with motor/vision challenges • Helps power users to tab through • Highlight focused element
35. 1. Un-plug/turn off your mouse 2. Use the Tab key to browse 3. Use Enter to select elements 4. Some menus and form elements may require ↑ ↓ ← → arrow keys Simple keyboard test http://a11yproject.com/
36. 1. Attach second screen 2. Place website to second screen 3. Turn on voice over 4. Turn off second screen 5. Navigate website via keyboard ‘Simple’ audio test Via Mehmed
37. 2.2 Form elements • Reading tip: Atomic Design by Brat Frost
38. Form fields • Big enough to touch • Field size gives a clue to the answer expected
39. HTML 5 type email, number, tel, url <label for=“phone”> Phone number</label> <input type="tel" name="phone"/>
40. Drop down (aka select) Video tip: 
 Alice Bartlett: Burn your select tags Problems users have with drop downs • Unable to close the select • Typing into the select • Confusing focused items with selected items • Touch screen: trying to pinch zoom select options Master
41. Possible solutions Radio buttons • Show top choices • Hide the rest under show more
42. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
43. Submit buttons • Align left in line with the fields • Full width on mobile • Describe the action • Don’t display any cancel button Netflix
44. 2.3 Popular combinations
45. Title • Remove title question • If not possible, allow for ‘other’ • Helps you to learn about what you might need to add in the future Carer’s allowance
46. Name Leave it up to the user to tell you how they would like to be addressed
47. 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
48. 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 Kickstarter
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 petitions.parliament.uk
50. 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 petitions.parliament.uk
51. Address Postcode look up
52. Date of birth • Default HTML5 date element doesn’t test well • 3 fields, looks boring, but tests well (for memorable dates) • Reading tip: Asking for date of birth
53. https://twitter.com/QuiltingMuriel/status/640378046462099456
54. Passwords • Allow users to see their password • But don’t do it by default • Encourage length by showing a strength indicator Google account
55. Passwords We have successfully trained everyone to use passwords that are hard to remember, but easy for computers to guess. XKCD https://xkcd.com/936/
56. Prevent errors Use inline validation for • Email • Password • Country • Address Don’t use it for • Things you can not know, like title and name
57. Hard validation • Place error message on the top • Link to sections • If the user can do multiple things wrong, think about creating multiple error messages for each field • Shorter pages allow people to deal with errors faster • Reading tip: Errors and validation
58. Colourblindness • Don’t rely on (red) colour alone • Deuteranopia affects about 5% of all men • Simulate how colourblindness affects your page: colororacle.org/
59. Start End Help Validation A form is like a conversation
60. Thank you! Sjors Timmer @sjors