This document provides tips for designing better forms. It recommends starting with structure by thinking of a form as a conversation with the user. Key elements to focus on include building trust with the user, preparing them for the form, using headings to guide them through sections, and crafting clear and appropriate questions. When designing the form, best practices include placing labels above fields, using readable fonts and spacing, avoiding dropdowns when possible, and automating validation. Form elements should be designed to be easily filled out on mobile. The document concludes with reading recommendations on the topic of form design.
11. 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
14. 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
15. 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
16. 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/
17. 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
19. 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
20. Mark optional fields
1. Remove as many optional questions as
possible
2. Label optional fields left with “(optional)”
3. Remove required *
21. Ironically, more people answered the optional
questions when they were asked after they
registered!
– Luke Wroblewski
The redesign of the eBay signup form
23. Progress indicators
Problem
• Progress indicators are hard to fit on
small screens
Solution
• Use numbered steps
• Explain the process upfront
Register to vote
24. 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/
27. • Consider building your form in
sections
• Approach it like an app
• Login
• Forward and back
• Save progress
• Overview before submitting
Complex progress
Turbotax
28. 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
31. Don’t design the form
• Use Facebook connect, Twitter connect, Paypal, etc.
32. A modular approach
• The basics
• Label placement
• Readable text
• The elements
• Fields, radio-buttons, dropdown
• Popular questions
• Name
• Email
• Passwords
34. 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
35. The cardinal principle of industrial design:
content always appears on top.
– Josh Clark
Designing for touch
36. Help text
• Place help text under the label
• Show/hide, help text for minority
user group
employmenttribunals.service.gov.uk/apply
37. Help text
• Place help text under the label
• Show/hide, help text for minority
user group
employmenttribunals.service.gov.uk/apply
38. Extended help
• Additional context for question
• Detailed guidelines for answers
employmenttribunals.service.gov.uk/apply
39. 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
40. 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
44. 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
45. Keyboard access
• Don’t break tab index
• Helps users with motor/vision
challenges
• Helps power users to tab through
• Highlight focused element
47. Use 44 pixels on the web
Josh Clark
Designing for Touch
48. Form fields
• Big enough to touch
• Field size gives a clue to the
answer expected
49. HTML 5 type
email, number, tel, url
<label for=“phone”>
Phone number</label>
<input type="tel" name="phone"/>
50. Radio button/check box
Use the label tag
<input id=“nationality-irish“ type="checkbox"
name=“is-irish” />
<label for=“nationality-irish”>Irish</label>
51. 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
59. Title
• Remove title question
• If not possible, allow for ‘other’
• So Her Majesty doesn’t feel left out
Carer’s allowance
60. Name
Leave it up to the user to tell you how
they would like to be addressed
61. 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
62. 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
63. 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
64. 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
65. 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
71. 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/
72. Passwords
• Allow users to see their password
• But don’t do it by default
• Encourage length by showing a
strength indicator
Google account
73. Passwords
• Allow users to see their password
• But don’t do it by default
• Encourage length by showing a
strength indicator
Google account
74. 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
76. 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