SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
This deck shows how to design accessible, understandable and mobile-friendly forms. We’ll explore the details of organising and writing good questions, the micro-interactions of form design and some popular challenges such as email and address.
This deck shows how to design accessible, understandable and mobile-friendly forms. We’ll explore the details of organising and writing good questions, the micro-interactions of form design and some popular challenges such as email and address.
9.
By doing user research, and diving into the detail
of the application process, the team has been
able to remove 170 questions from the
application process – that's 49% of the questions.
– Steve Wood
Simpler Carer's Allowance digital service now live
https://gds.blog.gov.uk/2014/11/28/simpler-carers-allowance-digital-service-now-live/
10.
Remove optional
1. Shortens the form
2. Required becomes default and does no
longer need an asterisk *
3. And if you can’t remove it, label the
optional fields instead of the required
ones
11.
Ironically, more people answered the optional
questions when they were asked after they
registered!
– Luke Wroblewski
The redesign of the eBay signup form
14.
Think of a form as a
conversation
Start EndTopic Topic Topic
15.
Start the conversation
• Reasons that would disqualify
someone
• Documents or numbers they need
• Bullet points are great
gov.uk/carers-allowance/how-to-claim
16.
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
17.
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
18.
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
25.
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
26.
The cardinal principle of industrial design:
content always appears on top.
– Josh Clark
Designing for touch
28.
Long help text
• Place help text under the label
29.
Long help text
• Place help text under the label
Example from: https://uxdesign.cc/the-anatomy-of-a-credit-card-
payment-form-32ec0e5708bb
30.
Form fields
• Big enough to touch
• Field size gives a clue to the
answer expected
31.
Use 44 pixels on the web
Josh Clark
Designing for Touch
32.
Radio button/check box
https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-
radios-and-checkboxes-on-gov-uk/
1. People like clicking circle/box
2. Tried to get them to click the label (add
grey background, remove the box, big
outline)
3. People still really like clicking boxes
4. Solution: make boxes/circles bigger
33.
Kill the drop down
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
34.
fuckdropdowns.com
– Eric Campbell and
Golden Krishna
Burn your select tags
– Alice Bartlett
35.
Possible solutions
Radio buttons
• Use analytics to find top choices
• Hide the rest under show more
36.
Possible solutions
Radio buttons
• Show top choices
• Hide the rest under show more
37.
Possible solutions
• Use autocomplete search
• Only works when the user is looking for
something they know
designnotes.blog.gov.uk/2017/04/20/were-building-an-autocomplete/
38.
Possible solutions
• Use autocomplete search
• Only works when the user is looking for
something they know
designnotes.blog.gov.uk/2017/04/20/were-building-an-autocomplete/
39.
Possible solutions
• Use autocomplete search
• Only works when the user is looking for
something they know
designnotes.blog.gov.uk/2017/04/20/were-building-an-autocomplete/
40.
Progress indicators
Problem
• Progress indicators are hard to fit on
small screens
Solution
• Use numbered steps
• Explain the process upfront
Register to vote
41.
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
Do less, problems as shared spaces
https://designnotes.blog.gov.uk/2014/07/07/do-less-problems-as-shared-spaces/
42.
Design details applied
Same structure and
questions, just easier to
read and easier to click
46.
Email
• Autocomplete email address
• Filter for spelling errors in popular
provider’s domains
Kickstarter
47.
Email
• Autocomplete email address
• Filter for spelling errors in popular
provider’s domains
• Confirm email address on screen
petitions.parliament.uk
48.
Email
• Autocomplete email address
• Filter for spelling errors in popular
provider’s domains
• Confirm email address on screen
petitions.parliament.uk
49.
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
55.
Final version
Steps automated and
content stripped down
56.
Recap
• Remove questions
• Challenge complexity
• Avoid dropdowns
• Automate and validate wherever you can
57.
Reading/watching tips
Forms that work
– Caroline Jarrett and Gerry Gaffney
Mobile Design Workshop (on Youtube)
– Luke Wroblewski, Conversations@Google
Gov.uk design notes
– https://designnotes.blog.gov.uk/