Ideas for design of complex transactions by @cjforms 2013
Â
Web forms usability
1. November 2012
U sa b ility o f w e b fo rm s
Practical guidelines
that you can easily follow
Suffix
Mr.
First Name Middle Name (optional)
Harry Bill
Last Name Generation (optional)
Bradley Junior
Patient ID Patient Alias
2. Introduction
What is a form?
— Why forms matter
— What this talk is about
— Three layers of the form
— Processes
8. Why forms matter
— Fo ms are everywhere
r
— Checkout, registration, data entry
— Bad forms can have
serious consequences
9.
10. Why forms matter
— Fo ms are everywhere
r
— Checkout, registration, data entry
— Bad forms can have
serious consequences
— Good forms create good
experiences
11.
12.
13. What this talk is about
— How to design good forms
— How to avoid design mistakes
14. Three layers of the form
Three layers of the form
— Relationtship
— Conversation
— Appearance
15. Three layers of the form
The relationship of a form
is the relationship between
the organization that is asking
the questions and the person
who is answering
16. Three layers of the form
The conversation of a form
comes from the questions that
it asks, any other instructions,
and the way the form is
arranged into topics
17. Three layers of the form
The appearance of a form
is the way that it looks:
the arrangement of text,
input areas, graphics,
and the use of color
19. Processes
First draft appears
from somewhere
Try to persuade
stakeholders to change
what they want
Write and rewrite
questions
Jiggle layout
Pull together
to make the form
something logical
look tidy
for topic order
Launch it –
no time for testing
20. Processes
—A m essy but typical process
— Methodical process that
actually works
21. Relationship Conversation Appearance
Persuading
Making
Writing useful
Taking care
people
questions easy
instructions of the details
to answer to answer
Asking for
Making
Making
the right
Choosing
the form
the form
information forms controls flow easily look easy
Testing
22. Part #1
Relationship
— Persuading people to answer
— Asking for the right information
23. Persuading people to answer
— If you understand people,
you design better forms
24. Persuading people to answer
How people react to forms:
— Readers
— Rushers
— Refusers
25. Persuading people to answer
Three rules that influence
response rates:
— Establish trust
— Reduce social costs
— Increase rewards
28. Asking for the right information
— Asking for information
that you don’t need is bad
29. Asking for the right information
— As ing for information
k
that you don’t need is bad
— Find out why you need
the information
30. Asking for the right information
— Check with stakeholders
— Check with people who work
with the information
31. Asking for the right information
— Users will assume that you will
actually use the information
you request, so make sure
you do use it in a sensible way
32. Asking for the right information
— Find out what your competitors
and similar organizations
are doing
33. Part #2
Conversation
— Making questions easy to answer
— Writing instructions
— Choosing controls
— Making the form flow easily
42. Making questions easy to answer
— As one question at a time
k
— Turn negative questions
into positive ones
43. Making questions easy to answer
— Ask one question at a time
— Turn negative questions
into positive ones
— Clarify meaning by careful grouping
44. Making questions easy to answer
— Ask one question at a time
— Turn negative questions
into positive ones
— Clarify meaning by careful grouping
— Get rid of decision points
48. Making questions easy to answer
— Th nk about whether users
i
will want to answer
— Is this the right moment
in the relationship
to ask this question?
49. Making questions easy to answer
— An think about forcing users
d
into your options
50. Making questions easy to answer
— An think about forcing users
d
into your options
— Could you offer an “other” option
to cater for the unexpected?
54. Writing instructions
— A ood title that says
g
what the form is for
— A list of anything that users
might have to gather
to answer the questions
58. Writing instructions
For better instructions:
— Wr te them in plain language
i
— Place them to where
they are needed
59. Writing instructions
For better instructions:
— Write them in plain language
— Place them to where
they are needed
— Cut the ones that aren’t needed
62. Choosing controls
— Is it more natural to type
rather than select?
— Are the answers easily mistyped?
63. Choosing controls
— Is it more natural to type
rather than select?
— Are the answers easily mistyped?
— How many options are there?
64. Choosing controls
— Is it more natural to type
rather than select?
— Are the answers easily mistyped?
— How many options are there?
— Is the user allowed to select
more than one option?
72. Making the form flow easily
Break up long forms by topic
— Crush the fields onto
as few pages as possible
— Split across multiple pages
by dividing the form into topics
74. Making the form flow easily
— Keep to one topic at a time
— Ask anticipated questions before
surprising ones, and less intrusive
before more intrusive
77. Making the form flow easily
Use progress indicators
— Form is a defined series of steps
78. Making the form flow easily
Use progress indicators
— Form is a defined series of steps
— There is a real progress from
one step to another
79. Making the form flow easily
Use progress indicators
— Form is a defined series of steps
— There is a real progress from
one step to another
— Form can be easily completed
in one session
82. Making the form flow easily
Use summary menus
— Form don’t really progress
83. Making the form flow easily
Use summary menus
— Form don’t really progress
— User is allowed to complete
the steps in any order
84. Making the form flow easily
Use summary menus
— Form don’t really progress
— User is allowed to complete
the steps in any order
— User is allowed to store the form
and come back to it later
89. Making the form flow easily
Be gentle with errors
— Use validation
90. Making the form flow easily
Be gentle with errors
— Use validation
— Be polite
91. Making the form flow easily
Finish the conversation smoothly
92. Making the form flow easily
Finish the conversation smoothly
— Provide a “thank you”
93. Making the form flow easily
Finish the conversation smoothly
— Provide a “thank you”
— Let the user know
what will happen next
94. Making the form flow easily
Finish the conversation smoothly
— Provide a “thank you”
— Let the user know
what will happen next
— Offer a suitable next landing point
within your website
95. Part #3
Appearance
— Taking care of the details
— Making a form look easy
96. Taking care of the details
Don’t stress over the details
97. Taking care of the details
Don’t stress over the details
— Decide on one way to deal with
each detail and then stick to it
98. Taking care of the details
Don’t stress over the details
— Decide on one way to deal with
each detail and then stick to it
— Create a mini-style guide
for your team or organization
99.
100. Taking care of the details
Don’t stress over the details
— Decide on one way to deal with
each detail and then stick to it
— Create a mini-style guide
for your team or organization
— Be flexible
101. Taking care of the details
Labels
— Stick the label to its field
— Don’t use colons
— Use sentence case
— Labels in bold are harder to read
102. Taking care of the details
Top-aligned labels
— The best way in terms of speed
— Long questions
— Consumes screen real estate
103. Taking care of the details
Right-aligned labels
— Not so many questions
— Short questions
— Easy answers
104. Taking care of the details
Left-aligned labels
— The slowest option
— Lots of questions
— Long questions
— Complex answers
105. Taking care of the details
Labels within fields
— Extreme space constraints
— Ensure the right interaction
106. Taking care of the details
Fields
— Different field lenghts provide
meaningful affordances
— When there’s clearly more
than one way to format an answer,
consider flexible field
107. Taking care of the details
Indicating required fields
— Use * for required
— Use (optional) for nonrequired
— Include explanation
of the indicator you choose
108. Taking care of the details
Buttons
— Avoid secondary actions on forms
whenever possible
— Otherwise ensure that there
is a clear visual distinction
109. Making a form look easy
“Attractive things
works better”
110. Making a form look easy
— Make sure users know who you are:
logos and branding
111. Making a form look easy
— Make sure users know who you are:
logos and branding
— Check your colors for legibility
112. Making a form look easy
— Make sure users know who you are:
logos and branding
— Check your colors for legibility
— Use grids
113. Making a form look easy
— Make sure users know who you are:
logos and branding
— Check your colors for legibility
— Use grids
— Use grouping
114. Making a form look easy
— Make sure users know who you are:
logos and branding
— Check your colors for legibility
— Use grids
— Use grouping
— Avoid two-column forms
115. Part #4
Testing
— Us bility testing is easy
a
and gets quick results
116. Testing
— “H y you” test
e
— If the client can’t afford or
is not interested in performing
a user test, use personas
117. Testing
— Test with more users
(five is usually enough)
— Try to get “real” users