Design better forms – Mobile UX London

3,782 views

Published on

Slides for my Mobile UX London Workshop on Form Design

Published in: Design
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,782
On SlideShare
0
From Embeds
0
Number of Embeds
1,093
Actions
Shares
0
Downloads
23
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Design better forms – Mobile UX London

  1. 1. Design better forms Sjors Timmer @sjors
  2. 2. About me • Freelance interaction designer • Currently working at Farfetch • Worked at Zopa • Worked at MoJ Digital Services
  3. 3. 1. Create structure
  4. 4. Think of a form as a conversation
  5. 5. 1.1 Start with trust
  6. 6. Provide context • Where am I? • What am I asked to do? facebook.com
  7. 7. A familiar place • Does the form follow good design practices? • Does the form match the rest of the site? facebook.com
  8. 8. Is it easy to contact the organisation? zopa.com/loans Contact details
  9. 9. 1.2 Structure the conversation
  10. 10. Start End
  11. 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. 12. Headings • Guide users through the text • Break the form at appropriate points
  13. 13. 1.3 Questions and Answers
  14. 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. 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. 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. 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. 18. Appropriate questions • Appropriateness depends on context • Get it wrong and people provide you with made-up data
  19. 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. 20. Mark optional fields 1. Remove as many optional questions as possible 2. Label optional fields left with “(optional)” 3. Remove required *
  21. 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. 22. 1.4 Progress indicators
  23. 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. 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. 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. 26. One thing per page
  27. 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. 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. 29. Recap • Build trust • Prepare the users • Headings • Questions and answers • Simple progress indicators • Success page
  30. 30. 2. Design the form
  31. 31. Don’t design the form • Use Facebook connect, Twitter connect, Paypal, etc.
  32. 32. A modular approach • The basics • Label placement • Readable text • The elements • Fields, radio-buttons, dropdown • Popular questions • Name • Email • Passwords
  33. 33. The basics
  34. 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. 35. The cardinal principle of industrial design: content always appears on top. 
 – Josh Clark Designing for touch
  36. 36. Help text • Place help text under the label • Show/hide, help text for minority user group employmenttribunals.service.gov.uk/apply
  37. 37. Help text • Place help text under the label • Show/hide, help text for minority user group employmenttribunals.service.gov.uk/apply
  38. 38. Extended help • Additional context for question • Detailed guidelines for answers employmenttribunals.service.gov.uk/apply
  39. 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. 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. 41. Readable text Good combination of • Font size • Background colour/font colour • Font weight • White space
  42. 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. 43. Colorsafe.co
  44. 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. 45. Keyboard access • Don’t break tab index • Helps users with motor/vision challenges • Helps power users to tab through • Highlight focused element
  46. 46. 2.2 Form elements
  47. 47. Use 44 pixels on the web Josh Clark Designing for Touch
  48. 48. Form fields • Big enough to touch • Field size gives a clue to the answer expected
  49. 49. HTML 5 type email, number, tel, url <label for=“phone”> Phone number</label> <input type="tel" name="phone"/>
  50. 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. 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. 52. Possible solutions Radio buttons • Show top choices • Hide the rest under show more
  53. 53. Possible solutions Radio buttons • Show top choices • Hide the rest under show more
  54. 54. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
  55. 55. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
  56. 56. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
  57. 57. Submit buttons • Align left in line with the fields • Full width on mobile • Describe the action • Don’t display any cancel button Netflix
  58. 58. 2.3 Popular combinations
  59. 59. Title • Remove title question • If not possible, allow for ‘other’ • So Her Majesty doesn’t feel left out Carer’s allowance
  60. 60. Name Leave it up to the user to tell you how they would like to be addressed
  61. 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. 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. 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. 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. 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
  66. 66. Address Postcode look up pcapredict.com
  67. 67. Address Postcode look up
  68. 68. Address Postcode look up
  69. 69. Date of birth • Default HTML5 date element doesn’t test well • 3 fields, looks boring, but tests well (for memorable dates)
  70. 70. https://twitter.com/QuiltingMuriel/status/640378046462099456
  71. 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. 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. 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. 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
  75. 75. Start End Help Validation A conversation
  76. 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
  77. 77. Thank you! Sjors Timmer @sjors

×