Whether surveys or forms are your final product or a part of your website/app, creating usable surveys and forms is crucial to a strong user experience for both the user entering information and the user receiving the information. In this session, you will learn about UX principles that drive a strong user experience when completing surveys/forms. The session will focus on understanding the key components of surveys/forms, what they are used for, and how to use them effectively. Topics include using labels to make forms and surveys easier, writing clear instructions, reducing respondent burden, and determining appropriate input fields such as check boxes versus radio buttons. Examples will include findings from usability studies and empirical research, some of which include eye tracking. Usability testing, eye tracking, and other user experience research methods will be discussed.
1. User Centered Design of
Forms and Surveys
Jen
Romano-‐Bergstrom
UX
Researcher
Facebook
jenrb@8.com
June
23,
2015
UXPA
|
Coronado,
CA
Emily
Geisen
Survey
Methodologist
RTI
egeisen@rP.org
#UXPA2015
@romanocog
2. Web Form and Survey Design
Input
Fields
• Check
Boxes
&
Radio
BuUons
• Drop-‐Down
Menus
• Open-‐Ended
Responses
• Dates
&
Calendars
NavigaPon
• Paging
&
Scrolling
• Previous
&
Next
Text
and
Visual
Layout
• Visual
Layout
• Label
Placement
• Providing
InstrucPons
• Error
Messages
2
#UXPA2015
@romanocog
3. Ac;vity
• How
long
did
it
take
you
to
get
here
today?
• What
is
today’s
date?
3
#UXPA2015
@romanocog
5. Web Form and Survey Design
Input
Fields
• Check
Boxes
&
Radio
BuUons
• Drop-‐Down
Menus
• Open-‐Ended
Responses
• Dates
&
Calendars
NavigaPon
• Paging
&
Scrolling
• Previous
&
Next
Text
and
Visual
Layout
• Visual
Layout
• Label
Placement
• Providing
InstrucPons
• Error
Messages
5
#UXPA2015
@romanocog
6. Check Boxes & Radio BuEons
6
#UXPA2015
@romanocog
Use
check
boxes
for
“select
all
that
apply”
and
radio
buUons
for
“select
only
one.”
Always.
7. Check Boxes & Radio Grid
(forced choice)
Smyth
et
al.,
2006;
Thomas
&
Klein,
2006,
Smyth
et
al,
2008;
Dykema
et
al.,
2011;
Callegaro
et
al.,
2015
7
#UXPA2015
@romanocog
Forced
choice
grids
elicit
more
posiPve
responses
than
check
all
that
apply.
8. Drop-‐Down Menus
• Ensures
consistent,
codeable
answers
(e.g.,
FL
not
Fla.)
• Saves
space
compared
to
radio
buUons
8
#UXPA2015
@romanocog
Use
drop-‐down
menus
for
long,
discrete
lists.
9. Drop-‐Down Menus:
Reduce Op;ons
9
#UXPA2015
@romanocog
Only
provide
the
opPons
that
are
necessary
for
data
quality.
10. Open-‐Ended Responses
10
#UXPA2015
@romanocog
Type
Example
NarraPve
Describe…
Short
verbal
responses
What
was
your
occupaPon?
Single
word/phrase
responses
Name
Frequency/Numeric
response
How
many
Pmes…
FormaUed
number/verbal
Telephone
number
11. Open-‐Ended Responses:
Narra;ve
Wells
et
al.,
2012
32.8 characters 38.4 characters
~700 Rs
11
#UXPA2015
@romanocog
Open-‐ended
boxes
give
a
message:
• Large
boxes
=
tell
a
story.
Avoid
verPcal
scrolling,
when
possible.
Always
avoid
horizontal
scrolling.
12. Open-‐Ended Responses:
Numeric
12
#UXPA2015
@romanocog
When
the
response
type
is
always
going
to
be
the
same,
provide
the
format:
• Separate
boxes
Annual
Salary/Earned
Income:
$
,
.00
13. • June
23,
2015
vs.
6/23/2015
vs.
6/23/15
vs.
Jun
23
vs.
2015-‐6-‐23
• Use
a
format
that
will
always
provide
responses
in
same
way
• Use
drop-‐down
for
DOB
or
known
dates
• Use
calendar
(unless
range
is
too
big)
Dates & Calendars
• Dates
are
not
suitable
for
open-‐ended
13
#UXPA2015
@romanocog
When
the
response
type
is
always
going
to
be
the
same,
provide
the
format:
• Separate
boxes
• Drop-‐down
• Calendar
14. Pre-‐Filled Responses
• Use
pre-‐filled
or
“default”
opPons
with
cauPon
• What
if
the
user
doesn’t
noPce
it?
• Default
opPons
in
survey
quesPons
can
cause
bias
14
#UXPA2015
@romanocog
Use
the
pre-‐filled
default
for
forms
that
are
used
repeatedly.
Do
not
pre-‐fill
with
one-‐use
forms
and
surveys.
15. Web Form and Survey Design
Input
Fields
• Check
Boxes
&
Radio
BuUons
• Drop-‐Down
Menus
• Open-‐Ended
Responses
• Dates
&
Calendars
NavigaPon
• Paging
&
Scrolling
• Previous
&
Next
Text
and
Visual
Layout
• Visual
Layout
• Label
Placement
• Providing
InstrucPons
• Error
Messages
15
#UXPA2015
@romanocog
16. Paging & Scrolling
Paging
• Single
or
mulPple
quesPons
per
page
• Complex
skip
paUerns
• Data
from
each
page
saved
• Can
be
suspended/
resumed
• Order
of
responding
can
be
controlled
• Requires
more
mouse
clicks
Scrolling
• All
on
one
staPc
page
• No
data
is
saved
unPl
submiUed
at
end
• Can
lose
all
data
• Respondent
can
review/
change
responses
• QuesPons
can
be
answered
out
of
order
• Similar
look-‐and-‐feel
as
paper
16
#UXPA2015
@romanocog
17. Paging on Mobile
• MulPple
quesPon
format
is
difficult
for
quesPons
with
text
entry
• The
keyboard
can
block
lower
quesPons
so
they
are
not
visible
• Can
result
in
quesPons
being
skipped
• Could
affect
perceived
context
of
the
survey
quesPons
Geisen,
Olmsted,
Goerman,
Lakhe
(2014)
17
#UXPA2015
@romanocog
18. Paging & Scrolling
• LiUle
advantage
(breakoffs,
nonresponse,
Pme,
straightlining)
of
one
over
the
other
• Mixed
approach
may
be
best
(scrolling
for
similar
quesPons,
paging
between
topics)
• Choice
should
be
driven
by
content
and
target
audience
• Scrolling
for
forms
or
short
surveys
with
few
skip
paUerns;
respondent
needs
to
see
previous
responses
• Paging
for
long
surveys
with
intricate
skip
paUerns;
quesPons
should
be
answered
in
order
Couper
2001;
Gonyea
2007;
Peytchev,
Couper,
McCabe,
Crawford
2006;
Vehovar,
Manfreda,
Batagelj
2000
18
#UXPA2015
@romanocog
19. General Naviga;on
• In
a
paging
survey,
awer
entering
a
response
• Proceed
to
next
page
• Return
to
previous
page
(somePmes)
• Quit
or
stop
• Launch
separate
page
with
Help,
definiPons,
etc.
• Prevailing
pracPce
is
to
put
the
Next
(or
ConPnue)
buUon
on
the
right
19
#UXPA2015
@romanocog
20. Previous & Next BuEons
• Next
should
be
on
the
right
• Web
applicaPon
order
• Everyday
devices
• Logical
reading
order
20
#UXPA2015
@romanocog
25. Single-‐Column Format: Preferred*
25
#UXPA2015
@romanocog
Single-‐column
format
is
best,
but
*mulPple-‐
column
format
works
well
for
items
that
“go
together,”
such
as:
• Date
• Zip
Code
• Phone
Number
26. Labels:
Inside, Below, Above?
Inside:
Avoid
prompts
inside
text
box;
saves
space,
but
disappears
when
typing
Below:
Prompt
outside
of
the
box
results
in
more
complete
names
Below
&
Separate
Boxes:
Provides
even
more
complete
names
Geisen,
Olmsted,
Goerman,
Lakhe
(2014)
Labels
Above
&
Separate
Boxes
is
best:
• Quicker
• Easier
to
see
• Not
covered
up
by
keyboard
26
#UXPA2015
@romanocog
28. Introduc;ons on Separate Screen
28
#UXPA2015
@romanocog
• IntroducPon
on
the
opening
log-‐in
screen
is
not
read.
• IntroducPon
on
the
next
screen
is
read.
Provide
introducPons
on
separate
screens.
Individual
gaze
plots
and
aggregate
heat
map
(lower
right):
parPcipants
did
not
read
intro
screen.
29. Introduc;ons on Separate Screen
• Intros
before
quesPons
are
owen
ignored
• When
moved
to
a
separate
screen,
they
are
read
more
owen
• Improved
reporPng
Geisen,
Olmsted,
Goerman,
Lakhe
(2014)
29
#UXPA2015
@romanocog
Provide
introducPons
on
separate
screens.
30. Clarifying Instruc;ons
Redline,
2013
30
#UXPA2015
@romanocog
Start
with
the
target
quesPon
and
add
mulPple
clarifying
quesPons.
• Percentage
of
valid
responses
was
higher
with
clarificaPon
• Longer
response
Pme
when
before
item
• Before
item
is
beUer
than
awer
• Asking
a
series
of
quesPons
is
best
31. Clarifying Instruc;ons
31
#UXPA2015
@romanocog
Use
clarifying
instrucPons
only
when
they
are
necessary.
33. Reducing Instruc;ons
• Eliminate
obvious
instrucPons
(e.g.,
“Please
enter
name
and
address”)
• Avoid
blocks
of
text:
“Chunk”
instrucPons
into
Bullets,
steps,
or
sentences
33
#UXPA2015
@romanocog
People
only
read
what
they
need
to
read.
Include
only
what
is
necessary.
34. 34
#UXPA2015
@romanocog
He,
Siu,
Strohl,
&
Chaparro
(2014).
Reducing Instruc;ons
People
only
read
what
they
need
to
read.
Include
only
what
is
necessary.
35. 35
Messages
should
be:
• Near
the
item
• PosiPve
• Helpful,
suggesPng
how
to
help
• In
the
correct
language
#UXPA2015
@romanocog
Error Messages
36. • Should
be
near
the
item
• Should
be
posiPve
and
helpful,
suggesPng
HOW
to
help
• Bad
error
message:
36
Messages
should
be:
• Near
the
item
• PosiPve
• Helpful,
suggesPng
how
to
help
• In
the
correct
language
Consider
a
graphic
near
the
item.
#UXPA2015
@romanocog
Error Messages
37. “How
do
I
advance
to
the
next
screen?”
“It
seems
like
it's
stuck
on
the
screen.”
Gaze
Plot:
Awer
gezng
an
error
message,
the
parPcipant
had
to
search
all
over
the
screen
to
find
the
missing
field.
37
#UXPA2015
@romanocog
Error Messages
Messages
should
be:
• Near
the
item
• PosiPve
• Helpful,
suggesPng
how
to
help
• In
the
correct
language
Consider
a
graphic
near
the
item.
38. Op;mize Across Devices
38
Test
surveys
and
forms
across
devices,
and
test
the
errors
too.
#UXPA2015
@romanocog
40. Op;mize Across Devices
Desktop
Tablet
Smartphone
• What
story
do
the
open-‐ended
boxes
tell?
• Is
there
a
beUer
way
to
ask
QuesPon
1?
40
#UXPA2015
@romanocog
42. Summary:
Input
Fields
• Check
Boxes
&
Radio
BuUons
• Drop-‐Down
Menus
• Open-‐Ended
Responses
• Calendars
42
#UXPA2015
@romanocog
Use
drop-‐down
menus
for
long,
discrete
lists.
Only
provide
responses
that
are
necessary.
Use
check
boxes
for
“select
all
that
apply.”
Use
radio
buUons
for
“select
only
one.”
For
open-‐ended
responses:
• Use
large
boxes
for
more
text
• When
the
response
is
always
going
to
be
the
same,
provide
the
format
• Separate
boxes
• Drop-‐down
menu
• Calendar
43. Summary:
NavigaPon
• Paging
&
Scrolling
• Previous
&
Next
43
• LiUle
advantage
of
paging
vs.
scrolling
• Should
be
driven
by
content
and
target
audience
• Mixed
approach
may
be
best
(scrolling
for
similar
quesPons,
paging
between
topics)
#UXPA2015
@romanocog
44. Summary:
Text
and
Visual
Layout
• Visual
Layout
• Label
Placement
• Providing
InstrucPons
• Error
Messages
44
InstrucPons
are
owen
ignored
or
skimmed.
• Place
introducPons
on
separate
screen/page.
• Embed
instrucPons
into
survey
quesPon.
• Make
definiPons
easy
to
access.
• Rule
of
2s:
Key
info
in
first
two
paragraphs,
sentences,
words.
Use
only
one
column
and
one
quesPon
per
row
(with
excepPons).
Labels
or
quesPons
go
above
input
fields.
Input
field
length
should
match
expected
response.
#UXPA2015
@romanocog
Error
messages
should
be:
• PosiPve
and
helpful
• Near
the
item
with
an
error.
45. Thank You!
June
23,
2015
UXPA
|
Coronado,
CA
Jen
Romano-‐Bergstrom
UX
Researcher
Facebook
jenrb@8.com
Emily
Geisen
Survey
Methodologist
RTI
egeisen@rP.org
#UXPA2015
@romanocog
46. References
• Callegaro,
M.,
Murakami,
M.,
Tepman,
Z.,
&
Henderson,
V.
(2015).
Yes-‐no
answers
versus
check-‐all
in
self-‐administered
modes.
InternaPonal
Journal
of
Market
Research,
57(2),
203-‐223.
• Couper,
M.P.
(2001),
“The
Promises
and
Perils
of
Web
Surveys.”
In
A.
Westlake.,
W.
Sykes,
T.
Manners,
and
M.
Riggs
(eds.),
The
Challenge
of
the
Internet.
London:
AssociaPon
for
Survey
CompuPng,
pp.
35-‐56.
Conrad,
F.G.,
Couper,
M.P.,
Tourangeau,
R.,
and
Peytchev,
A.
(2006),
“Use
and
Non-‐Use
of
ClarificaPon
Features
in
Web
Surveys.”
Journal
of
Official
StaPsPcs,
22
(2):
245-‐269.
• Dykema,
J.,
Schaeffer,
N.C.,
Beach,
J.,
Lein,
V.
&
Day,
B.
(2011)
Designing
quesPons
for
web
surveys:
effects
of
check-‐list,
check-‐all,
and
stand-‐alone
response
formats
on
survey
reports
and
data
quality.
Paper
presented
at
the
66th
Annual
Conference
of
the
American
AssociaPon
for
Public
Opinion
Research,
Phoenix,
AZ.
• Geisen,
Olmsted,
Goerman,
Lakhe
(2014)
Planning
for
the
future:
Usability
tesPng
for
the
2020
Census.
Paper
presented
at
the
2014
FedCASIC
Workship,
Washington,
DC.
• Gonyea,
R.,
Chamberlain,
T.,
Kennedy,
J.
(2007)
The
impact
of
format
changes
on
web
survey
abandonment
and
response
distribuPons.
Paper
presented
at
the
62nd
Annual
Conference
of
the
American
AssociaPon
for
Public
Opinion
Research.
• Peytchev,
A.,
Couper,
M.,
McCabe,
S.,
&
Crawford,
S.
(2006).
Web
survey
design:
Paging
vs.
scrolling.
Public
Opinion
Quarterly,
70(4),
596–607.
47. References (con;nued)
• Peytchev,
A.,
Conrad,
F.,
Couper,
M.,
&
Tourangeau,
R.
(2007,
May).
Minimizing
respondent
effort
increases
use
of
definiKons
in
web
surveys.
Presented
at
American
AssociaPon
for
Public
Opinion
Research
conference,
Anaheim,
CA.
• Peytchev,
A.,
Conrad,
F.,
Couper,
M.
P.,
&
Tourangeau,
R.
(2010).
Increasing
respondents’
use
of
definiPons
in
web
surveys.
Journal
of
Official
StaKsKcs,
26(4),
633–650.
• Redline,
C.
(2013).
Clarifying
Categorical
Concepts
in
a
Web
Survey.
Public
Opinion
Quarterly,
77(S1),
89-‐105.
• Smyth,
J.D.,
Dillman,
D.A.,
ChrisPan,
L.M.
&
Stern,
M.J.
(2006)
Comparing
check-‐all
and
forced-‐choice
quesPon
formats
in
web
surveys.
Public
Opinion
Quarterly,
70,
1,
pp.
66–77.
• Smyth,
J.D.,
ChrisPan,
L.M.
&
Dillman,
D.A.
(2008)
Does
‘yes
or
no’
on
the
telephone
mean
the
same
as
‘check-‐all-‐that-‐apply’
on
the
web?
Public
Opinion
Quarterly,
72,
1,
pp.
103–
113.
• Thomas,
R.K.
&
Klein,
J.D.
(2006)
Merely
incidental?
Effect
on
response
format
on
selfreported
behavior.
Journal
of
Official
StaPsPcs,
22,
2,
pp.
221–244.
• Vehovar,
Vasja,
Katja
Lozar
Manfreda,
and
Zenel
Batagelj.
2000.
“Design
Issues
in
Web
Surveys.”
Proceedings
of
the
American
StaPsPcal
AssociaPon,
Survey
Research
Methods
SecPon,
pp.
983–88.