1.
Design better
forms
Sjors Timmer
@sjors

2.
Imagine a brief to redesign a donation form to
work on mobile phones

3.
Current version

4.
First step: place the fields
underneath each other

5.
Question your questions
Flow
Design details
Frequently asked questions
1.
2.
3.
4.
Agenda

6.
1. Question your questions

7.
Question protocol
http://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php

8.
Question protocol

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

12.
Remove all copy related to
required fields

13.
2. Flow

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

19.
Register to vote

20.
I’d rather see users bored than confused
Joe Lanman
Attributed

21.
Amazon mobile check out
1234 1234 1234 1234

22.
Think of a form as a
conversation
Start EndName Contact Address Donation Payment

23.
One thing per page
Split the form in one
section per page

24.
3. Design details

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

27.
Help text
• Place help text under the label

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

43.
4. Frequently asked questions

44.
Email
• Autocomplete email address
Acorns

45.
Email
• Autocomplete email address

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

50.
Address
Postcode look up
pcapredict.com

51.
Address
Postcode look up

52.
Address
Postcode look up

53.
Date (of birth)
• Default HTML5 date element
doesn’t test well
• 3 fields, looks boring, but tests well
(for memorable dates)

54.
https://twitter.com/QuiltingMuriel/status/640378046462099456

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/

58.
Thank you!
Sjors Timmer
@sjors
notura.com