Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design better forms – UXBristol

829 views

Published on

Slides for my UXBristol workshop on the UX of forms.

Published in: Design
  • Be the first to comment

Design better forms – UXBristol

  1. 1. Design better forms Sjors Timmer @sjors
  2. 2. Question your questions Flow Design details 1. 2. 3.
  3. 3. 1. Question your questions
  4. 4. Question protocol • Every question you ask • Who wants the answer? • Why do they want it? • Required to answer? • What if there’s a mistake? • Question type • Can it be removed? • Comments http://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php Question protocol Question Who wants it? Why? Required? What if there's a mistake Question type Can it be removed? Comments First name All organisers Personal tickets Yes Double check via email From memory No Can it be merged with la Last name All organisers Personal tickets Yes Double check via email From memory No Email address Fullfilment Send confirmation/updates Yes Error message displayed From memory No Confirm email Fullfilment Validation of email address Yes Error message displayed From memory Possibly Can email be validated i efficient way? Card type Payment provider Validating payment Yes Payment fails/registration fails Look up Possibly Card number Expiration date (month/year) CSC Country Address 1 Address 2 City State/province Postal code Job title Company/organization Twitter handle Industry Size of company Terms and conditions
  5. 5. Type of answer
  6. 6. 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
  7. 7. 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/
  8. 8. 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
  9. 9. (Re)move optional 1. Remove as many optional questions as possible 2. Label optional fields left with “(optional)” 3. Remove required *
  10. 10. Ironically, more people answered the optional questions when they were asked after they registered!
 
 – Luke Wroblewski The redesign of the eBay signup form
  11. 11. Exercise: Question protocol • Take the two handouts • Look at the booking form and • Look at the question protocol • Fill in as much as you can • On your own • 5 minutes Booking form Question protocol Question Who wants it? Why? Required? What if there's a mistake Question type Can it be removed? Comments First name All organisers Personal tickets Yes Double check via email From memory No Can it be merged with last name? Last name All organisers Personal tickets Yes Double check via email From memory No Email address Fullfilment Send confirmation/updates Yes Error message displayed From memory No Confirm email Fullfilment Validation of email address Yes Error message displayed From memory Possibly Can email be validated in a more efficient way? Card type Payment provider Validating payment Yes Payment fails/registration fails Look up Possibly Card number Expiration date (month/year) CSC Country Address 1 Address 2 City State/province Postal code Job title Company/organization Twitter handle Industry Size of company Terms and conditions
  12. 12. 2. Flow
  13. 13. Think of a form as a conversation Start End
  14. 14. Start the conversation • Reasons that would disqualify someone • Documents or numbers they need • Bullet points are great gov.uk/carers-allowance/how-to-claim
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. Register to vote
  19. 19. I’d rather see users bored than confused Joe Lanman Attributed
  20. 20. Amazon mobile check out 1234 1234 1234 1234
  21. 21. Exercise: Draw a form flow • Use your question protocol • Group questions in one topic per box • Make it flow like a conversation • Together with your neighbour • 5 minutes
  22. 22. 3. Design details
  23. 23. 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
  24. 24. The cardinal principle of industrial design: content always appears on top. 
 – Josh Clark Designing for touch
  25. 25. Help text • Place help text under the label • Show/hide, help text for minority user group employmenttribunals.service.gov.uk/apply
  26. 26. Help text • Place help text under the label • Show/hide, help text for minority user group employmenttribunals.service.gov.uk/apply
  27. 27. Form fields • Big enough to touch • Field size gives a clue to the answer expected
  28. 28. Use 44 pixels on the web Josh Clark Designing for Touch
  29. 29. Radio button/check box Use the label tag to increase the hit area <input id=“nationality-irish“ type="checkbox" name=“is-irish” /> <label for=“nationality-irish”>Irish</label> Visually increase squares and circles
  30. 30. 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
  31. 31. Possible solutions Radio buttons • Show top choices • Hide the rest under show more
  32. 32. Possible solutions Radio buttons • Show top choices • Hide the rest under show more
  33. 33. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
  34. 34. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
  35. 35. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
  36. 36. Frequently asked questions
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. Address Postcode look up pcapredict.com
  43. 43. Address Postcode look up
  44. 44. Address Postcode look up
  45. 45. Date of birth • Default HTML5 date element doesn’t test well • 3 fields, looks boring, but tests well (for memorable dates)
  46. 46. https://twitter.com/QuiltingMuriel/status/640378046462099456
  47. 47. 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/
  48. 48. Passwords • Allow users to see their password • But don’t do it by default • Encourage length by showing a strength indicator Google account
  49. 49. Passwords • Allow users to see their password • But don’t do it by default • Encourage length by showing a strength indicator Google account
  50. 50. Recap • Place the labels on top • Avoid dropdowns • Keep your elements simple • Automate and validate wherever you can
  51. 51. Exercise: Start sketching the form • Use your question protocol • Follow your flow • Sketch for a mobile screen • It’s ok if you don’t finish it • Together with your neighbour • 15 minutes
  52. 52. 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
  53. 53. Thank you! Sjors Timmer @sjors

×