BEST PRACTICES FOR

FORM DESIGN
LUKE WROBLEWSKI
AUTHOR, WEB FORM DESIGN 2008

1
Luke Wroblewski
Yahoo! Inc.
•
Senior Director, Product Ideation & Design
LukeW Interface Designs
•
Principal & Founder
•
Product design & strategy services
Author
•
Web Form Design: Filling in the Blanks
(Rosenfeld Media)
•
Functioning Form: Web applications, product
strategy, & interface design articles
•
Site-Seeing: A Visual Approach to Web Usability
(Wiley & Sons)
Previously
•
eBay Inc., Lead Designer
•
University of Illinois, Instructor
•
NCSA, Senior Designer
http://www.lukew.com

2
Web Form Design

•
Web Form Design: Filling in

the Blanks
•
Rosenfeld Media, 2008
•
http://www.lukew.com/resources/
web_form_design.asp

•
15% OFF with Discount

Code
•
FOLUKE15
•
http://rosenfeldmedia.com/
books/webforms/

3
WHY DOES FORM
DESIGN MATTER?

4
SHOPPING

http://www.flickr.com/photos/radiofree/150535853/
http://www.flickr.com/photos/stitch/187139723/

5
SHOPPING
ONLINE

6
ACCESS

Images from Flickr users katielips, pealco, and *nathan

7
ACCESS
ONLINE

8
DATA INPUT

9
DATA INPUT
ONLINE

10
Why Forms Matter

•
How customers “talk” to companies online

•
Commerce ($)
•
User: Enable purchasing
•
Business: Maximize sales
•
Access (membership)
•
User: Enable participation
•
Business: Increase customers & grow communities
•
Engagment
•
User: Enable information entry & manipulation
•
Business: Accumulate content & data

11
65,000 videos per day –July 2006

12
Design Principles
•
Minimize the pain
•
No one likes filing in forms
•
Smart defaults, inline validation, forgiving inputs
•
Illuminate a path to completion
•
Consider the context
•
Familiar vs. foreign
•
Frequently used vs. rarely used
•
Ensure consistent communication
•
Errors, Help, Success
•
Single voice despite many stakeholders

13
 •
Repeatable design solutions
to common problems
•
Work “positively” for
DESIGN PATTERNS specific problems in specific
contexts
•
Capture best practices that
solve real user needs
•
Between principles &
guidelines
•
A design vocabulary

14
 •
If your goals are… , try
solution…
“IT DEPENDS”
•
If your constraints are…,
try solution…

15
Data Sources
•
Usability Testing
•
Errors, issues, assists, completion rates, time spent
per task, satisfaction scores
•
Field Testing
•
Sources used, environment, context
•
Customer Support
•
Top problems, number of incidents
•
Web Conventions Survey
•
Common solutions, unique approaches
•
Site Tracking
•
Completion rates, entry points, exit points, elements
utilized, data entered
•
Eye Tracking
•
Number of eye fixations, length of fixations, heat
maps, scan paths

BUSINESS OF DESIGN, EBAY INC. APRIL 2004 16

 •
Isolate individual best
practices
ONE AT A TIME
•
Look at simple examples
of each

17
INFORMATION

18
Information
•
Layout
•
Label positioning
•
Content groupings
•
Input Affordances
•
Formats, required fields
•
Actions
•
Primary & secondary
•
Help & Tips
•
Visual Hierarchy

19
Top Aligned Labels
•
When data being
collected is familiar
•
Minimize time to
completion
•
Require more vertical
space
•
Spacing or contrast is
vital to enable
efficient scanning
•
Flexibility for
localization and
complex inputs

20
Top-aligned Labels

21
Right Aligned Labels
•
Clear association
between label and
field
•
Requires less vertical
space
•
More difficult to just
scan labels due to
left rag
•
Fast completion
times

22
Right-aligned labels

23
Left Aligned Labels
•
When data required is
unfamiliar
•
Enables label scanning
•
Less clear association
between label and
field
•
Requires less vertical
space
•
Changing label length
may impair layout

24
Left-aligned labels

25
Eye-tracking Data
•
July 2006 study by Matteo
Penzo
•
Left-aligned labels
•
Easily associated labels with the
proper input fields
•
Excessive distances between
labels inputs forced users to
take more time
•
Right-aligned labels
•
Reduced overall number of
fixations by nearly half
•
Form completion times were
cut nearly in half
•
Top-aligned labels
•
Permitted users to capture both
labels & inputs with a single eye
movement’
•
Fastest completion times

26
 •
For reduced
completion times &
familiar data input: top
aligned
BEST PRACTICE •
When vertical screen
space is a constraint:
right aligned
•
For unfamiliar, or
advanced data entry:
left aligned

27
Required Form Fields
•
Indication of required fields is
most useful when
•
There are lots of fields
•
But very few are required
•
Enables users to scan form to see
what needs to be filled in
•
Indication of optional fields is
most useful when
•
Very few fields are optional
•
Neither is realy useful when
•
All fields are required

28
All fields required

29
All fields required

30
Most fields required

31
Few fields optional

32
33
34
 •
Try to avoid optional
fields
•
If most fields are
required: indicate
optional fields
BEST PRACTICE •
If most fields are
optional: indicate
required fields
•
Text is best, but * often
works for required
fields
•
Associate indicators
with labels

35
Field Lengths

•
Field lengths can

provide valuable
affordances
•
Appropriate field
lengths provide enough
space for inputs
•
Random field lengths
may add visual noise to
a form

36
37
38
39
 •
When possible, use
field length as an
BEST PRACTICE affordance
•
Otherwise consider a
consistent length that
provides enough room
for inputs

40
Content Grouping

•
Content relationships
provide a structured
way to organize a form
•
Groupings provide
•
A way to scan information
required at a high level
•
A sense of how
information within a form
is related

41
Lots of content grouping

42
Excessive visual noise

43
Minimum amount necessary

44
45
Minimum amount necessary

46
47
 •
Use relevant content
groupings to organize
BEST PRACTICE forms
•
Use the minimum
amount of visual
elements necessary to
communicate useful
relationships

48
Actions

•
Not all form actions are equal

•
Reset, Cancel, & Go Back are secondary actions: rarely
need to be used (if at all)
•
Save, Continue, & Submit are primary actions: directly
responsible for form completion
•
The visual presentation of actions should match
their importance
49
50
51
52
53
54
55
 •
Avoid secondary actions if
possible
BEST PRACTICE •
Otherwise, ensure a clear
visual distinction between
primary & secondary actions
•
Align primary actions with
input fields for a clear path
to completion

56
Help & Tips

•
Help & Tips are useful when:

•
Asking for unfamiliar data
•
Users may question why data is being requested
•
There are recommended ways of providing data
•
Certain data requests are optional
•
However, Help & Tips can quickly overwhelm a
form if overused
•
In these cases, you may want to consider a
dynamic solution
•
Automatic inline exposure
•
User activated inline exposure
•
User activated section exposure

57
Help Text

58
Lots of Help/Tips

59
60
Automatic inline exposure

61
Automatic inline exposure

62
User-activated inline exposure

63
User-activated inline exposure

64
User-activated dialog exposure

65
User-activated section exposure

66
 •
Minimize the amount of
help & tips required to
fill out a form
•
Help visible and
BEST PRACTICE adjacent to a data
request is most useful
•
When lots of unfamiliar
data is being
requested, consider
using a dynamic help
system

67
INTERACTION

68
Interaction

•
Path to Completion
•
“Tabbing”
•
Progressive Disclosure
•
Exposing dependencies

69
Path to Completion

•
Primary goal for every form is

completion
•
Every input requires consideration &
action
•
Remove all unnecessary data requests
•
Enable flexible data input
•
Provide a clear path
•
Enable smart defaults

70
Remove Unnecessary
Inputs

71
Flexible Data Input
(555) 123-4444
555-123-4444
555 123 4444
555.123.4444
5551234444

72
Smart Defaults

73
Path to Completion

74
Clear Path to Completion

75
Path to completion

76
 •
Remove all unnecessary
data requests
•
Enable smart defaults
BEST PRACTICE •
Employ flexible data
entry
•
Illuminate a clear path
to completion
•
For long forms, show
progress & save

77
Tabbing

•
Many users interact with a form by

“tabbing” between fields
•
Proper HTML markup can ensure
tabbing works as expected
•
Multi-column form layouts may conflict
with expected tabbing behavior

78
79
 •
Remember to account
for tabbing behavior
BEST PRACTICE •
Use the tabindex
attribute to control
tabbing order
•
Consider tabbing
expectations when
laying out forms

80
Progressive Disclosure

•
Not all users require all available

options all the time
•
Progressive disclosure provides
additional options when appropriate
•
Advanced options
•
Gradual engagement

81
Exposing Options

82
Exposing Options

83
Dialog

84
Progressive Disclosure

85
Gradual Engagement

86
87
88
89
 •
Map progressive
disclosure to prioritized
BEST PRACTICE user needs
•
Most effective when
user-initiated
•
Maintain a consistent
approach

90
Selection Dependent Inputs

•
Sometimes an initial data input requires

or enables additional inputs
•
More options become available because of
an initial input
•
Further clarification required due to initial
input

91
Selection Dependent Inputs

92
Page Level

93
Section Tabs

94
Section Finger Tabs

95
Section Selectors

96
Expose Below

97
Expose Within

98
Inactive Until Selected

99
Exposed & Grouped

100
Exposing Dependent Inputs
•
Page Level
•
Requires additional step
•
Section Tabs
•
Often go unnoticed
•
Require smart defaults
•
Finger Section Tabs
•
Follow path to completion scan line
•
Section Selectors
•
Effectively Group information
•
Hide some options
•
Expose Below & Expose Within
•
Potential for confusion
•
Inactive Until Selected & Exposed within Groups
•
Association between primary selection is impaired

101
102
103
 •
Maintain clear
relationship between
BEST PRACTICE initial selection options
•
Clearly associate
additional inputs with
their trigger
•
Avoid “jumping” that
disassociates initial
selection options

104
FEEDBACK

105
Feedback

•
Inline validation
•
Assistance
•
Errors
•
Indication & Resolution
•
Progress
•
Indication
•
Success
•
Verification

106
Inline Validation

•
Provide direct feedback as data is

entered
•
Validate inputs
•
Suggest valid inputs
•
Help users stay within limits

107
Password Validation

108
Unique User Name Validation

109
Valid Input Suggestions

110
Maximum Character Count

111
 •
Use inline validation for
inputs that have
BEST PRACTICE potentially high error
rates
•
Use suggested inputs
to disambiguate
•
Communicate limits

112
Errors

•
Errors are used to ensure all required

data is provided and valid
•
Clear labels, affordances, help/tips &
validation can help reduce errors
•
But some errors may still occur
•
Provide clear resolution in as few steps
as possible

113
Error Messaging

114
Short Forms: too much?

115
Short Forms

116
Short Forms

117
118
 •
Clearly communicate
an error has occurred:
top placement, visual
contrast
BEST PRACTICE •
Provide actionable
remedies to correct
errors
•
Associate responsible
fields with primary
error message
•
“Double” the visual
language where errors
have occurred

119
Progress

•
Sometimes actions require some time to

process
•
Form submission
•
Data calculations
•
Uploads
•
Provide feedback when an action is in
progress

120
Disable Submit Button

121
 •
Provide indication of
tasks in progress
BEST PRACTICE •
Disable “submit”
button after user clicks
it to avoid duplicate
submissions

122
Success

•
After successful form completion

confirm data input in context
•
On updated page
•
On revised form
•
Provide feedback via
•
Message (removable)
•
Animated Indicator

123
124
125
Animated Indication

126
 •
Clearly communicate a
data submission has
BEST PRACTICE been successful
•
Provide feedback in
context of data
submitted

127
Additional Tips

•
Avoid changing inputs provided by

users
•
With later inputs
•
After an error has occurred
•
Let users know if difficult to obtain
information is required prior to sending
them to a form

128
Accessibility & Mark-up
•
Use <label> tags to associate labels with inputs
•
Properly read by screen readers
•
Most browsers treat text with <label> tags as
clickable: larger actions
•
Use the tabindex attribute to provide a “tabbing” path
•
Provides control over tabbing order
•
Enables forms to be navigated by keyboard
•
Consider the accesskey attribute for additional keyboard
support
•
Direct access to associated input fields
•
Consider <fieldset> to group related form fields

129
Web Form Creation Tools

•
Wufoo
•
http://www.wufoo.com
•
Form Assembly
•
http://www.formassembly.com
•
icebrrg
•
http://www.icebrrg.com

130
PUTTING IT ALL
TOGETHER…

131
132
For more information…

•
Web Form Design: Filling in

the Blanks
•
http://www.lukew.com/resources/
web_form_design.asp
•
Functioning Form
•
www.lukew.com/ff/
•
Site-Seeing: A Visual
Approach to Web Usability
•
Wiley & Sons
•
Drop me a note
•
[email protected]

133