Design better forms – Mobile UX London
•
13 likes•6,890 views
This document provides tips for designing better forms. It recommends starting with structure by thinking of a form as a conversation with the user. Key elements to focus on include building trust with the user, preparing them for the form, using headings to guide them through sections, and crafting clear and appropriate questions. When designing the form, best practices include placing labels above fields, using readable fonts and spacing, avoiding dropdowns when possible, and automating validation. Form elements should be designed to be easily filled out on mobile. The document concludes with reading recommendations on the topic of form design.
Recommended
More Related Content
What's hot
What's hot (13)
Similar to Design better forms – Mobile UX London
Similar to Design better forms – Mobile UX London (20)
More from Sjors Timmer
More from Sjors Timmer (15)
Recently uploaded
Recently uploaded (20)
Design better forms – Mobile UX London
- 2. About me • Freelance interaction designer • Currently working at Farfetch • Worked at Zopa • Worked at MoJ Digital Services
- 4. Think of a form as a conversation
- 5. 1.1 Start with trust
- 6. Provide context • Where am I? • What am I asked to do? facebook.com
- 7. A familiar place • Does the form follow good design practices? • Does the form match the rest of the site? facebook.com
- 8. Is it easy to contact the organisation? zopa.com/loans Contact details
- 9. 1.2 Structure the conversation
- 10. Start End
- 11. Preparing the user • Reasons that would disqualify someone • 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.3 Questions and Answers
- 14. 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. 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
- 16. 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/
- 17. Think and write answers • Where most thinking needs to happen • In the form of a question or a section • Talk to the people who will be using these answers • Add help or even a writing guide employmenttribunals.service.gov.uk/apply
- 18. Appropriate questions • Appropriateness depends on context • Get it wrong and people provide you with made-up data
- 19. When to use help text • Explain what you will do with the answer • Where to find the answer • Provide context for open answers • Test when to use help text
- 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
- 23. Progress indicators Problem • Progress indicators are hard to fit on small screens Solution • Use numbered steps • Explain the process upfront Register to vote
- 24. 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/
- 25. 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
- 26. One thing per page
- 27. • Consider building your form in sections • Approach it like an app • Login • Forward and back • Save progress • Overview before submitting Complex progress Turbotax
- 28. Success page • 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
- 29. Recap • Build trust • Prepare the users • Headings • Questions and answers • Simple progress indicators • Success page
- 30. 2. Design the form
- 31. Don’t design the form • Use Facebook connect, Twitter connect, Paypal, etc.
- 32. A modular approach • The basics • Label placement • Readable text • The elements • Fields, radio-buttons, dropdown • Popular questions • Name • Email • Passwords
- 33. The basics
- 34. 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
- 35. The cardinal principle of industrial design: content always appears on top. – Josh Clark Designing for touch
- 36. Help text • Place help text under the label • Show/hide, help text for minority user group employmenttribunals.service.gov.uk/apply
- 37. Help text • Place help text under the label • Show/hide, help text for minority user group employmenttribunals.service.gov.uk/apply
- 38. Extended help • Additional context for question • Detailed guidelines for answers employmenttribunals.service.gov.uk/apply
- 39. Error text • See it as additional clarification • 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 • Don’t rely on colour alone: • http://colororacle.org/ for colour blind people
- 40. Error text • See it as additional clarification • 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 • Don’t rely on colour alone: • http://colororacle.org/ for colour blind people
- 41. Readable text Good combination of • Font size • Background colour/font colour • Font weight • White space
- 42. Typeface http://thomasbyttebier.be/blog/the-best-ui-typeface-goes-unnoticed Helvetica: Illiterate 1iiLl 38rnm Fira: Illiterate 1iiLl 38rnm Roboto: Illiterate 1iiLl 38rnm
- 43. Colorsafe.co
- 44. 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
- 45. Keyboard access • Don’t break tab index • Helps users with motor/vision challenges • Helps power users to tab through • Highlight focused element
- 47. Use 44 pixels on the web Josh Clark Designing for Touch
- 48. Form fields • Big enough to touch • Field size gives a clue to the answer expected
- 49. HTML 5 type email, number, tel, url <label for=“phone”> Phone number</label> <input type="tel" name="phone"/>
- 50. Radio button/check box Use the label tag <input id=“nationality-irish“ type="checkbox" name=“is-irish” /> <label for=“nationality-irish”>Irish</label>
- 51. Drop down (aka select) Find on Youtube: Alice Bartlett: Burn your select tags 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
- 52. Possible solutions Radio buttons • Show top choices • Hide the rest under show more
- 53. Possible solutions Radio buttons • Show top choices • Hide the rest under show more
- 54. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
- 55. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
- 56. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
- 57. Submit buttons • Align left in line with the fields • Full width on mobile • Describe the action • Don’t display any cancel button Netflix
- 59. Title • Remove title question • If not possible, allow for ‘other’ • So Her Majesty doesn’t feel left out Carer’s allowance
- 60. Name Leave it up to the user to tell you how they would like to be addressed
- 61. 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 Acorns
- 62. 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
- 63. 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
- 64. 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
- 65. 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
- 69. Date of birth • Default HTML5 date element doesn’t test well • 3 fields, looks boring, but tests well (for memorable dates)
- 71. 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/
- 72. Passwords • Allow users to see their password • But don’t do it by default • Encourage length by showing a strength indicator Google account
- 73. Passwords • Allow users to see their password • But don’t do it by default • Encourage length by showing a strength indicator Google account
- 74. Recap • Place the labels on top • Choose a good combination of colour and size of fonts • Avoid dropdowns • Keep your elements simple • Automate and validate wherever you can
- 76. Reading/watching tips Designing for Touch – Josh Clark Forms that work – Caroline Jarrett and Gerry Gaffney Mobile Design Essentials Part 1 & 2 – Luke Wroblewski Gov.uk Design patterns designpatterns.hackpad.com