Post on 16-Apr-2017
Design better formsSjors Timmer @sjors
About me• Freelance interaction designer
• Currently working at Farfetch
• Worked at Zopa
• Worked at MoJ Digital Services
1. Create structure
Think of a form as a conversation
1.1 Start with trust
A familiar place• Does the form follow good design
practices?
• Does the form match the rest of the site?
facebook.com
1.2 Structure the conversation
Start End
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
Headings• Guide users through the text
• Break the form at appropriate points
1.3 Questions and Answers
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
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
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/
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
Appropriate questions• Appropriateness depends on context
• Get it wrong and people provide you with made-up data
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
Mark optional fields1. Remove as many optional questions as
possible
2. Label optional fields left with “(optional)”
3. Remove required *
Ironically, more people answered the optional questions when they were asked after they registered! – Luke Wroblewski The redesign of the eBay signup form
1.4 Progress indicators
Progress indicatorsProblem
• Progress indicators are hard to fit on small screens
Solution
• Use numbered steps
• Explain the process upfront
Register to vote
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/
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
One thing per page
• Consider building your form in sections
• Approach it like an app
• Login
• Forward and back
• Save progress
• Overview before submitting
Complex progress
Turbotax
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
Recap• Build trust
• Prepare the users
• Headings
• Questions and answers
• Simple progress indicators
• Success page
2. Design the form
Don’t design the form• Use Facebook connect, Twitter connect, Paypal, etc.
A modular approach• The basics
• Label placement
• Readable text
• The elements
• Fields, radio-buttons, dropdown
• Popular questions
• Name
• Passwords
The basics
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
The cardinal principle of industrial design: content always appears on top. – Josh Clark Designing for touch
Help text• Place help text under the label
• Show/hide, help text for minority user group
employmenttribunals.service.gov.uk/apply
Help text• Place help text under the label
• Show/hide, help text for minority user group
employmenttribunals.service.gov.uk/apply
Extended help• Additional context for question
• Detailed guidelines for answers
employmenttribunals.service.gov.uk/apply
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
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
Readable textGood combination of
• Font size
• Background colour/font colour
• Font weight
• White space
Typeface
http://thomasbyttebier.be/blog/the-best-ui-typeface-goes-unnoticed
Helvetica: Illiterate 1iiLl 38rnm
Fira: Illiterate 1iiLl 38rnm
Roboto: Illiterate 1iiLl 38rnm
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
Keyboard access• Don’t break tab index
• Helps users with motor/vision challenges
• Helps power users to tab through
• Highlight focused element
2.2 Form elements
Use 44 pixels on the web
Josh Clark Designing for Touch
Form fields• Big enough to touch
• Field size gives a clue to the answer expected
HTML 5 typeemail, number, tel, url
<label for=“phone”>
Phone number</label>
<input type="tel" name="phone"/>
Radio button/check boxUse the label tag
<input id=“nationality-irish“ type="checkbox" name=“is-irish” /> <label for=“nationality-irish”>Irish</label>
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
Possible solutionsRadio buttons
• Show top choices
• Hide the rest under show more
Possible solutionsRadio buttons
• Show top choices
• Hide the rest under show more
Possible solutions• Use autocomplete search
• Only works when the user is looking for something they know
baymard.com/labs/country-selector
Possible solutions• Use autocomplete search
• Only works when the user is looking for something they know
baymard.com/labs/country-selector
Possible solutions• Use autocomplete search
• Only works when the user is looking for something they know
baymard.com/labs/country-selector
Submit buttons• Align left in line with the fields
• Full width on mobile
• Describe the action
• Don’t display any cancel button
Netflix
2.3 Popular combinations
Title• Remove title question
• If not possible, allow for ‘other’
• So Her Majesty doesn’t feel left out
Carer’s allowance
NameLeave it up to the user to tell you how they would like to be addressed
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
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
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
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
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
AddressPostcode look up
AddressPostcode look up
Date of birth• Default HTML5 date element
doesn’t test well
• 3 fields, looks boring, but tests well (for memorable dates)
https://twitter.com/QuiltingMuriel/status/640378046462099456
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/
Passwords• Allow users to see their password
• But don’t do it by default
• Encourage length by showing a strength indicator
Google account
Passwords• Allow users to see their password
• But don’t do it by default
• Encourage length by showing a strength indicator
Google account
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
Start End
Help
Validation
A conversation
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
Thank you!
Sjors Timmer @sjors