Design better forms

Sjors Timmer
Sjors TimmerProduct Designer
Design better
forms
Sjors Timmer
@sjors
Imagine a brief to redesign a donation form to
work on mobile phones
Current version
First step: place the fields
underneath each other
Question your questions
Flow
Design details
Frequently asked questions
1.
2.
3.
4.
Agenda
1. Question your questions
Question protocol
http://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php
Question protocol
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/
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
Ironically, more people answered the optional
questions when they were asked after they
registered!



– Luke Wroblewski
The redesign of the eBay signup form
Remove all copy related to
required fields
2. Flow
Think of a form as a
conversation
Start EndTopic Topic Topic
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 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
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
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
Register to vote
I’d rather see users bored than confused
Joe Lanman
Attributed
Amazon mobile check out
1234 1234 1234 1234
Think of a form as a
conversation
Start EndName Contact Address Donation Payment
One thing per page
Split the form in one
section per page
3. Design details
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
The cardinal principle of industrial design:
content always appears on top.


– Josh Clark
Designing for touch
Help text
• Place help text under the label
Long help text
• Place help text under the label
Long help text
• Place help text under the label
Example from: https://uxdesign.cc/the-anatomy-of-a-credit-card-
payment-form-32ec0e5708bb
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
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
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
fuckdropdowns.com
– Eric Campbell and
Golden Krishna
Burn your select tags
– Alice Bartlett
Possible solutions
Radio buttons
• Use analytics to find top choices
• Hide the rest under show more
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
designnotes.blog.gov.uk/2017/04/20/were-building-an-autocomplete/
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/
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/
Progress indicators
Problem
• 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
Do less, problems as shared spaces
https://designnotes.blog.gov.uk/2014/07/07/do-less-problems-as-shared-spaces/
Design details applied
Same structure and
questions, just easier to
read and easier to click
4. Frequently asked questions
Email
• Autocomplete email address
Acorns
Email
• Autocomplete email address
Email
• Autocomplete email address
• Filter for spelling errors in popular
provider’s domains
Kickstarter
Email
• Autocomplete email address
• Filter for spelling errors in popular
provider’s domains
• Confirm email address on screen
petitions.parliament.uk
Email
• Autocomplete email address
• Filter for spelling errors in popular
provider’s domains
• Confirm email address on screen
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
Address
Postcode look up
pcapredict.com
Address
Postcode look up
Address
Postcode 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
Final version
Steps automated and
content stripped down
Recap
• Remove questions
• Challenge complexity
• Avoid dropdowns
• Automate and validate wherever you can
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/
Thank you!
Sjors Timmer
@sjors
notura.com
1 of 58

Recommended

Virtualization, Containers, Docker and scalable container management services by
Virtualization, Containers, Docker and scalable container management servicesVirtualization, Containers, Docker and scalable container management services
Virtualization, Containers, Docker and scalable container management servicesabhishek chawla
2.3K views56 slides
Introduction Node.js by
Introduction Node.jsIntroduction Node.js
Introduction Node.jsErik van Appeldoorn
15.3K views39 slides
JIRA 업무 생산성 향상 및 프로젝트 관리 by
JIRA 업무 생산성 향상 및 프로젝트 관리JIRA 업무 생산성 향상 및 프로젝트 관리
JIRA 업무 생산성 향상 및 프로젝트 관리KwangSeob Jeong
38.7K views68 slides
웹 접근성 평가도구 OpenWAX 뜯어보기 by
웹 접근성 평가도구 OpenWAX 뜯어보기웹 접근성 평가도구 OpenWAX 뜯어보기
웹 접근성 평가도구 OpenWAX 뜯어보기Goonoo Kim
8.8K views40 slides
Ux 101: Personas (Español) by
Ux 101: Personas (Español)Ux 101: Personas (Español)
Ux 101: Personas (Español)Susana Castillo
2.3K views11 slides
Confluence를 활용한 콘텐츠 협업 방법 - 모우소프트 by
Confluence를 활용한 콘텐츠 협업 방법 - 모우소프트Confluence를 활용한 콘텐츠 협업 방법 - 모우소프트
Confluence를 활용한 콘텐츠 협업 방법 - 모우소프트Atlassian 대한민국
3.9K views31 slides

More Related Content

What's hot

Introduction to Docker - VIT Campus by
Introduction to Docker - VIT CampusIntroduction to Docker - VIT Campus
Introduction to Docker - VIT CampusAjeet Singh Raina
2.1K views91 slides
How to Convert a Component Design into an MUI React Code by
How to Convert a Component Design into an MUI React CodeHow to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React CodeWrapPixel
212 views16 slides
Webdriver io presentation by
Webdriver io presentationWebdriver io presentation
Webdriver io presentationJoão Nabais
1.8K views14 slides
Docker Introduction by
Docker IntroductionDocker Introduction
Docker IntroductionJeffrey Ellin
631 views35 slides
Progressive Web Apps(PWA) by
Progressive Web Apps(PWA)Progressive Web Apps(PWA)
Progressive Web Apps(PWA)Muhamad Fahriza Novriansyah
302 views9 slides
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성 by
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성KwangSeob Jeong
22K views80 slides

What's hot(20)

How to Convert a Component Design into an MUI React Code by WrapPixel
How to Convert a Component Design into an MUI React CodeHow to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React Code
WrapPixel212 views
Webdriver io presentation by João Nabais
Webdriver io presentationWebdriver io presentation
Webdriver io presentation
João Nabais1.8K views
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성 by KwangSeob Jeong
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성
KwangSeob Jeong22K views
Docker Introduction by Peng Xiao
Docker IntroductionDocker Introduction
Docker Introduction
Peng Xiao1.5K views
Introduction to Node.js by Rob O'Doherty
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
Rob O'Doherty2.9K views
UX Best Practices by Theresa Neil
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil25.7K views
Alphorm.com Java 8: les nouveautés by Alphorm
Alphorm.com Java 8: les nouveautésAlphorm.com Java 8: les nouveautés
Alphorm.com Java 8: les nouveautés
Alphorm25.1K views
Webdriver.io by LinkMe Srl
Webdriver.io Webdriver.io
Webdriver.io
LinkMe Srl2K views
Inversion of Control and Dependency Injection by Dinesh Sharma
Inversion of Control and Dependency InjectionInversion of Control and Dependency Injection
Inversion of Control and Dependency Injection
Dinesh Sharma4.8K views
UX RULES: 10 ESSENTIAL PRINCIPLES by Jeremy Robinson
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson13K views
코틀린 멀티플랫폼, 미지와의 조우 by Arawn Park
코틀린 멀티플랫폼, 미지와의 조우코틀린 멀티플랫폼, 미지와의 조우
코틀린 멀티플랫폼, 미지와의 조우
Arawn Park994 views
Progressive Web App by Subodh Garg
Progressive Web AppProgressive Web App
Progressive Web App
Subodh Garg373 views

Similar to Design better forms

Design better forms – Mobile UX London by
Design better forms – Mobile UX LondonDesign better forms – Mobile UX London
Design better forms – Mobile UX LondonSjors Timmer
6.9K views77 slides
Digital Assistant Competitive Analysis by
Digital Assistant Competitive AnalysisDigital Assistant Competitive Analysis
Digital Assistant Competitive Analysisreallysiansia
244 views44 slides
05 DIGI CREATIVE people&process by
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&processSheSaysCREATIVE
374 views45 slides
CMS Crash Course! by
CMS Crash Course!CMS Crash Course!
CMS Crash Course!TechSoup Canada
1.5K views31 slides
Usability Testing by Rajdeep Gupta, Misys by
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysSTC India UX SIG
905 views24 slides
Week 8 - Interactive News Editing and Producing by
Week 8 - Interactive News Editing and ProducingWeek 8 - Interactive News Editing and Producing
Week 8 - Interactive News Editing and Producingkurtgessler
689 views34 slides

Similar to Design better forms(20)

Design better forms – Mobile UX London by Sjors Timmer
Design better forms – Mobile UX LondonDesign better forms – Mobile UX London
Design better forms – Mobile UX London
Sjors Timmer6.9K views
Digital Assistant Competitive Analysis by reallysiansia
Digital Assistant Competitive AnalysisDigital Assistant Competitive Analysis
Digital Assistant Competitive Analysis
reallysiansia244 views
Usability Testing by Rajdeep Gupta, Misys by STC India UX SIG
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, Misys
STC India UX SIG905 views
Week 8 - Interactive News Editing and Producing by kurtgessler
Week 8 - Interactive News Editing and ProducingWeek 8 - Interactive News Editing and Producing
Week 8 - Interactive News Editing and Producing
kurtgessler689 views
unit5_usability.pptx by SrilekhaK12
unit5_usability.pptxunit5_usability.pptx
unit5_usability.pptx
SrilekhaK1210 views
Create free website by fullerhqim
Create free websiteCreate free website
Create free website
fullerhqim440 views
Mobile Project Management by Lee Schlenker
Mobile Project ManagementMobile Project Management
Mobile Project Management
Lee Schlenker740 views
MR Summary Presentation by markrichman
MR Summary PresentationMR Summary Presentation
MR Summary Presentation
markrichman346 views
3sixty Live Boston: Designing for the Mobile Inbox by Litmus
3sixty Live Boston: Designing for the Mobile Inbox3sixty Live Boston: Designing for the Mobile Inbox
3sixty Live Boston: Designing for the Mobile Inbox
Litmus2.1K views
Guerilla Human Computer Interaction and Customer Based Design by Quentin Christensen
Guerilla Human Computer Interaction and Customer Based DesignGuerilla Human Computer Interaction and Customer Based Design
Guerilla Human Computer Interaction and Customer Based Design
User centered design workshop by Patrick McNeil
User centered design workshopUser centered design workshop
User centered design workshop
Patrick McNeil50.3K views
UX Bootcamp - August 2016 by Jacklyn Burgan
UX Bootcamp - August 2016UX Bootcamp - August 2016
UX Bootcamp - August 2016
Jacklyn Burgan1.5K views
Good vs Evil SharePoint Customizing by Stacy Deere
Good vs Evil SharePoint CustomizingGood vs Evil SharePoint Customizing
Good vs Evil SharePoint Customizing
Stacy Deere848 views
UX design for every screen by Four Kitchens
UX design for every screenUX design for every screen
UX design for every screen
Four Kitchens2.7K views
Rapidly Design A Solution To A Real World Problem by Benjamin Bowes
Rapidly Design A Solution To A Real World ProblemRapidly Design A Solution To A Real World Problem
Rapidly Design A Solution To A Real World Problem
Benjamin Bowes1K views

More from Sjors Timmer

Space as medium for interaction design by
Space as medium for interaction designSpace as medium for interaction design
Space as medium for interaction designSjors Timmer
1.1K views49 slides
Space as a material for interaction design by
Space as a material for interaction designSpace as a material for interaction design
Space as a material for interaction designSjors Timmer
2.4K views55 slides
A room for understanding by
A room for understandingA room for understanding
A room for understandingSjors Timmer
894 views47 slides
The Foundations of Spatial Computing by
The Foundations of Spatial ComputingThe Foundations of Spatial Computing
The Foundations of Spatial ComputingSjors Timmer
996 views38 slides
A room for understanding by
A room for understandingA room for understanding
A room for understandingSjors Timmer
1.1K views52 slides
Design better forms – UXBristol by
Design better forms  – UXBristolDesign better forms  – UXBristol
Design better forms – UXBristolSjors Timmer
1.3K views53 slides

More from Sjors Timmer(16)

Space as medium for interaction design by Sjors Timmer
Space as medium for interaction designSpace as medium for interaction design
Space as medium for interaction design
Sjors Timmer1.1K views
Space as a material for interaction design by Sjors Timmer
Space as a material for interaction designSpace as a material for interaction design
Space as a material for interaction design
Sjors Timmer2.4K views
A room for understanding by Sjors Timmer
A room for understandingA room for understanding
A room for understanding
Sjors Timmer894 views
The Foundations of Spatial Computing by Sjors Timmer
The Foundations of Spatial ComputingThe Foundations of Spatial Computing
The Foundations of Spatial Computing
Sjors Timmer996 views
A room for understanding by Sjors Timmer
A room for understandingA room for understanding
A room for understanding
Sjors Timmer1.1K views
Design better forms – UXBristol by Sjors Timmer
Design better forms  – UXBristolDesign better forms  – UXBristol
Design better forms – UXBristol
Sjors Timmer1.3K views
Using Time to Your Advantage by Sjors Timmer
Using Time to Your AdvantageUsing Time to Your Advantage
Using Time to Your Advantage
Sjors Timmer1.6K views
How Tom Cruise Ruined Interaction Design by Sjors Timmer
How Tom Cruise Ruined Interaction DesignHow Tom Cruise Ruined Interaction Design
How Tom Cruise Ruined Interaction Design
Sjors Timmer6.9K views
Exploring eternal questions through interaction design by Sjors Timmer
Exploring eternal questions through interaction designExploring eternal questions through interaction design
Exploring eternal questions through interaction design
Sjors Timmer6.9K views
Rem Koolhaas –designing the design process by Sjors Timmer
Rem Koolhaas –designing the design processRem Koolhaas –designing the design process
Rem Koolhaas –designing the design process
Sjors Timmer59.9K views
Design and complexity by Sjors Timmer
Design and complexityDesign and complexity
Design and complexity
Sjors Timmer3.8K views
15 startup tools to help you designing your startup by Sjors Timmer
15 startup tools to help you designing your startup15 startup tools to help you designing your startup
15 startup tools to help you designing your startup
Sjors Timmer6.2K views
Social Networks Sjors Timmer by Sjors Timmer
Social Networks Sjors TimmerSocial Networks Sjors Timmer
Social Networks Sjors Timmer
Sjors Timmer1.1K views
Design For Learning by Sjors Timmer
Design For LearningDesign For Learning
Design For Learning
Sjors Timmer1.1K views

Recently uploaded

IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf by
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdfIEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdfNirmalanGanapathy1
8 views36 slides
Task 3 copy.pptx by
Task 3 copy.pptxTask 3 copy.pptx
Task 3 copy.pptxZaraCooper2
21 views19 slides
TISFLEET WEB DESIGN PROJECT by
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECTRabius Sany
38 views13 slides
commercial interior designers -Dortodesigns studio.pdf by
commercial interior designers -Dortodesigns  studio.pdfcommercial interior designers -Dortodesigns  studio.pdf
commercial interior designers -Dortodesigns studio.pdfPrasadgyb
5 views2 slides
SS25 Fashion Key Items trend book by
SS25 Fashion Key Items trend bookSS25 Fashion Key Items trend book
SS25 Fashion Key Items trend bookPeclers Paris
123 views4 slides
Big Deal Curmel Moton Shirt by
Big Deal Curmel Moton ShirtBig Deal Curmel Moton Shirt
Big Deal Curmel Moton Shirtbrandshop1
8 views1 slide

Recently uploaded(20)

IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf by NirmalanGanapathy1
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdfIEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
TISFLEET WEB DESIGN PROJECT by Rabius Sany
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECT
Rabius Sany38 views
commercial interior designers -Dortodesigns studio.pdf by Prasadgyb
commercial interior designers -Dortodesigns  studio.pdfcommercial interior designers -Dortodesigns  studio.pdf
commercial interior designers -Dortodesigns studio.pdf
Prasadgyb5 views
SS25 Fashion Key Items trend book by Peclers Paris
SS25 Fashion Key Items trend bookSS25 Fashion Key Items trend book
SS25 Fashion Key Items trend book
Peclers Paris123 views
Big Deal Curmel Moton Shirt by brandshop1
Big Deal Curmel Moton ShirtBig Deal Curmel Moton Shirt
Big Deal Curmel Moton Shirt
brandshop18 views
Designing Effective AR Experiences by Kumar Ahir
Designing Effective AR ExperiencesDesigning Effective AR Experiences
Designing Effective AR Experiences
Kumar Ahir5 views
Free World aids day Template from Best presentation design agency by slideceotemplates
Free World aids day Template from Best presentation design agencyFree World aids day Template from Best presentation design agency
Free World aids day Template from Best presentation design agency
StratPlanning Manual 220713.pdf by Lakewalk Media
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media15 views
Scopic UX Design Test Task.pdf by Atiqur Rahaman
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
Atiqur Rahaman283 views
Oregon Ducks 4 Spencer Webb Hoodie by brandshop1
Oregon Ducks 4 Spencer Webb HoodieOregon Ducks 4 Spencer Webb Hoodie
Oregon Ducks 4 Spencer Webb Hoodie
brandshop112 views

Design better forms