design better forms – uxbristol
TRANSCRIPT
![Page 1: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/1.jpg)
Design better formsSjors Timmer @sjors
![Page 2: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/2.jpg)
Question your questions
Flow
Design details
1.
2.
3.
![Page 3: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/3.jpg)
1. Question your questions
![Page 4: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/4.jpg)
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
mistakeQuestion type Can it be
removed?Comments
First name All organisers Personal tickets Yes Double check viaemail
From memory No Can it be merged with last name?
Last name All organisers Personal tickets Yes Double check viaemail
From memory No
Email address Fullfilment Sendconfirmation/updates
Yes Error messagedisplayed
From memory No
Confirm email Fullfilment Validation of emailaddress
Yes Error messagedisplayed
From memory Possibly Can email be validated in a moreefficient way?
Card type Payment provider Validating payment Yes Paymentfails/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
![Page 5: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/5.jpg)
Type of answer
![Page 6: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/6.jpg)
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
![Page 7: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/7.jpg)
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/
![Page 8: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/8.jpg)
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
![Page 9: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/9.jpg)
(Re)move optional1. Remove as many optional questions as
possible
2. Label optional fields left with “(optional)”
3. Remove required *
![Page 10: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/10.jpg)
Ironically, more people answered the optional questions when they were asked after they registered! – Luke Wroblewski The redesign of the eBay signup form
![Page 11: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/11.jpg)
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
mistakeQuestion type Can it be
removed?Comments
First name All organisers Personal tickets Yes Double check viaemail
From memory No Can it be merged with last name?
Last name All organisers Personal tickets Yes Double check viaemail
From memory No
Email address Fullfilment Sendconfirmation/updates
Yes Error messagedisplayed
From memory No
Confirm email Fullfilment Validation of emailaddress
Yes Error messagedisplayed
From memory Possibly Can email be validated in a moreefficient way?
Card type Payment provider Validating payment Yes Paymentfails/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
![Page 12: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/12.jpg)
2. Flow
![Page 13: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/13.jpg)
Think of a form as a conversation
Start End
![Page 14: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/14.jpg)
Start the conversation• Reasons that would disqualify
someone
• Documents or numbers they need
• Bullet points are great
gov.uk/carers-allowance/how-to-claim
![Page 15: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/15.jpg)
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 [email protected]
Print this page
![Page 16: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/16.jpg)
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
![Page 17: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/17.jpg)
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
![Page 18: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/18.jpg)
Register to vote
![Page 19: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/19.jpg)
I’d rather see users bored than confused
Joe Lanman Attributed
![Page 20: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/20.jpg)
Amazon mobile check out
1234 1234 1234 1234
![Page 21: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/21.jpg)
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
![Page 22: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/22.jpg)
3. Design details
![Page 23: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/23.jpg)
Label placementTop 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
![Page 24: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/24.jpg)
The cardinal principle of industrial design: content always appears on top. – Josh Clark Designing for touch
![Page 25: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/25.jpg)
Help text• Place help text under the label
• Show/hide, help text for minority user group
employmenttribunals.service.gov.uk/apply
![Page 26: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/26.jpg)
Help text• Place help text under the label
• Show/hide, help text for minority user group
employmenttribunals.service.gov.uk/apply
![Page 27: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/27.jpg)
Form fields• Big enough to touch
• Field size gives a clue to the answer expected
![Page 28: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/28.jpg)
Use 44 pixels on the web
Josh Clark Designing for Touch
![Page 29: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/29.jpg)
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
![Page 30: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/30.jpg)
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
![Page 31: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/31.jpg)
Possible solutionsRadio buttons
• Show top choices
• Hide the rest under show more
![Page 32: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/32.jpg)
Possible solutionsRadio buttons
• Show top choices
• Hide the rest under show more
![Page 33: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/33.jpg)
Possible solutions• Use autocomplete search
• Only works when the user is looking for something they know
baymard.com/labs/country-selector
![Page 34: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/34.jpg)
Possible solutions• Use autocomplete search
• Only works when the user is looking for something they know
baymard.com/labs/country-selector
![Page 35: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/35.jpg)
Possible solutions• Use autocomplete search
• Only works when the user is looking for something they know
baymard.com/labs/country-selector
![Page 36: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/36.jpg)
Frequently asked questions
![Page 37: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/37.jpg)
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
![Page 38: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/38.jpg)
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
![Page 39: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/39.jpg)
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
![Page 40: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/40.jpg)
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
![Page 41: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/41.jpg)
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
![Page 43: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/43.jpg)
AddressPostcode look up
![Page 44: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/44.jpg)
AddressPostcode look up
![Page 45: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/45.jpg)
Date of birth• Default HTML5 date element
doesn’t test well
• 3 fields, looks boring, but tests well (for memorable dates)
![Page 46: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/46.jpg)
https://twitter.com/QuiltingMuriel/status/640378046462099456
![Page 47: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/47.jpg)
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/
![Page 48: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/48.jpg)
Passwords• Allow users to see their password
• But don’t do it by default
• Encourage length by showing a strength indicator
Google account
![Page 49: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/49.jpg)
Passwords• Allow users to see their password
• But don’t do it by default
• Encourage length by showing a strength indicator
Google account
![Page 50: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/50.jpg)
Recap• Place the labels on top
• Avoid dropdowns
• Keep your elements simple
• Automate and validate wherever you can
![Page 51: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/51.jpg)
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
![Page 52: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/52.jpg)
Reading/watching tipsDesigning 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
![Page 53: Design better forms – UXBristol](https://reader033.vdocuments.mx/reader033/viewer/2022052705/58e99dbb1a28ab9c318b4587/html5/thumbnails/53.jpg)
Thank you!
Sjors Timmer @sjors