Design better forms – UXBristol

Design better
forms
Sjors Timmer
@sjors

Question your questions
Flow
Design details
1.
2.
3.

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-ﬁeld-is-necessary.php
Question protocol
Question Who wants it? Why? Required? What if there's a
mistake
Question type Can it be
removed?
Comments
First name All organisers Personal tickets Yes Double check via
email
From memory No Can it be merged with la
Last name All organisers Personal tickets Yes Double check via
email
From memory No
Email address Fullfilment Send
confirmation/updates
Yes Error message
displayed
From memory No
Confirm email Fullfilment Validation of email
address
Yes Error message
displayed
From memory Possibly Can email be validated i
efficient way?
Card type Payment provider Validating payment Yes Payment
fails/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

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
ﬁnd 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

(Re)move optional
1. Remove as many optional questions as
possible
2. Label optional ﬁelds 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

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
mistake
Question type Can it be
removed?
Comments
First name All organisers Personal tickets Yes Double check via
email
From memory No Can it be merged with last name?
Last name All organisers Personal tickets Yes Double check via
email
From memory No
Email address Fullfilment Send
confirmation/updates
Yes Error message
displayed
From memory No
Confirm email Fullfilment Validation of email
address
Yes Error message
displayed
From memory Possibly Can email be validated in a more
efficient way?
Card type Payment provider Validating payment Yes Payment
fails/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

Think of a form as a
conversation
Start End

Start the conversation
• Reasons that would disqualify
someone
• Documents or numbers they need
• Bullet points are great
gov.uk/carers-allowance/how-to-claim

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 conﬁrmation 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

https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/
Register to vote
One thing per page
• Low-conﬁdence users ﬁnd it easier
to use
• Works well on mobile devices
• Works better for handling errors,
branches, loops and saving progress

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

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

Amazon mobile check out
1234 1234 1234 1234

Exercise:
Draw a form flow
• Use your question protocol
• Group questions in one topic per box
• Make it ﬂow like a conversation
• Together with your neighbour
• 5 minutes

Label placement
Top labels are the most ﬂexible
• 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

Form fields
• Big enough to touch
• Field size gives a clue to the
answer expected

Use 44 pixels on the web
Josh Clark
Designing for Touch

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

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 solutions
Radio 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

Email
• Autocomplete email address
• Filter for spelling errors in popular
provider’s domains
• Conﬁrm email address on screen
• And/or there are services like
neverbounce.com that actively
validate email addresses
Acorns

Email

Email
Kickstarter

Email
petitions.parliament.uk

Address
Postcode look up
pcapredict.com

Date of birth
• Default HTML5 date element
doesn’t test well
• 3 ﬁelds, 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

Recap
• Place the labels on top
• Avoid dropdowns
• Keep your elements simple
• Automate and validate wherever you can

Exercise:
Start sketching the form
• Use your question protocol
• Follow your ﬂow
• Sketch for a mobile screen
• It’s ok if you don’t ﬁnish it
• Together with your neighbour
• 15 minutes

Reading/watching tips
Designing for Touch
– Josh Clark
Forms that work
– Caroline Jarrett and Gerry Gaﬀney
Mobile Design Essentials Part 1 & 2
– Luke Wroblewski
Gov.uk Design patterns
designpatterns.hackpad.com

Thank you!
Sjors Timmer
@sjors

Design better forms – UXBristol

More Related Content

What's hot

Similar to Design better forms – UXBristol

More from Sjors Timmer

Recently uploaded

Design better forms – UXBristol