Design better forms with the question protocol
•
3 likes•1,345 views
Slides for my UXBristol workshop on the UX of forms.
Recommended
More Related Content
What's hot
What's hot (16)
Similar to Design better forms with the question protocol
Similar to Design better forms with the question protocol (20)
More from Sjors Timmer
More from Sjors Timmer (15)
Recently uploaded
Recently uploaded (20)
Design better forms with the question protocol
- 2. Question your questions Flow Design details 1. 2. 3.
- 3. 1. Question your questions
- 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
- 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. 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. 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. (Re)move optional 1. Remove as many optional questions as possible 2. Label optional fields left with “(optional)” 3. Remove required *
- 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. 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. 2. Flow
- 13. Think of a form as a conversation Start End
- 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. 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. 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. 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. Register to vote
- 19. I’d rather see users bored than confused Joe Lanman Attributed
- 20. Amazon mobile check out 1234 1234 1234 1234
- 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
- 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. The cardinal principle of industrial design: content always appears on top. – Josh Clark Designing for touch
- 25. Help text • Place help text under the label • Show/hide, help text for minority user group employmenttribunals.service.gov.uk/apply
- 26. Help text • Place help text under the label • Show/hide, help text for minority user group employmenttribunals.service.gov.uk/apply
- 27. Form fields • Big enough to touch • Field size gives a clue to the answer expected
- 28. Use 44 pixels on the web Josh Clark Designing for Touch
- 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. 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. Possible solutions Radio buttons • Show top choices • Hide the rest under show more
- 32. Possible solutions Radio buttons • Show top choices • Hide the rest under show more
- 33. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
- 34. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
- 35. Possible solutions • Use autocomplete search • Only works when the user is looking for something they know baymard.com/labs/country-selector
- 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. 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. 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. 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. 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
- 45. Date of birth • Default HTML5 date element doesn’t test well • 3 fields, looks boring, but tests well (for memorable dates)
- 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. Passwords • Allow users to see their password • But don’t do it by default • Encourage length by showing a strength indicator Google account
- 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. Recap • Place the labels on top • Avoid dropdowns • Keep your elements simple • Automate and validate wherever you can
- 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. 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