Luke Wroblewski

Yahoo! Inc.
• Senior Principal, Product Ideation & Design
LukeW Interface Designs
• Principal & Founder
BEST PRACTICES FOR • Product design & strategy services

FORM DESIGN Author

• Site-Seeing: A Visual Approach to Web Usability
(Wiley & Sons)
LUKE WROBLEWSKI • Form Design Best Practices (Upcoming)
AN EVENT APART, CHICAGO 2007 • Functioning Form: Web applications, product
strategy, & interface design articles
Previously
• eBay Inc., Lead Designer
• University of Illinois, Instructor
• NCSA, Senior Designer
http://www.lukew.com

WHY DOES FORM SHOPPING

DESIGN MATTER?

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

3 4

SHOPPING ACCESS
ONLINE

Images from Flickr users katielips, pealco, and *nathan

5 6

1
ACCESS DATA INPUT
ONLINE

7 8

Why Forms Matter

• How customers “talk” to companies online
• Commerce ($)
• User: Enable purchasing
• Business: Maximize sales
• Access (membership)
DATA INPUT • User: Enable participation
ONLINE • Business: Increase customers & grow communities
• Engagment
• User: Enable information entry & manipulation
• Business: Accumulate content & data

9 10

Design Principles Multiple Data Sources

• Minimize the pain
• Usability Testing
• No one likes filing in forms
• Errors, issues, assists, completion rates, time
• Smart defaults, inline validation, forgiving inputs spent per task, satisfaction scores
• Illuminate a path to completion
• Customer Support
• Consider the context
• Top problems, number of incidents
• Familiar vs. foreign
• Frequently used vs. rarely used
• Best Practices
• Ensure consistent communication • Common solutions, unique approaches
• Errors, Help, Success
• Single voice despite many stakeholders • Site Tracking
• Completion rates, entry points, exit points,
elements utilized, data entered

BUSINESS OF DESIGN, EBAY INC. APRIL 2004

11 12

2
Design Patterns

Visual Communication
Information Affordances

+
Engagement INFORMATION
Interaction Disclosure

+
Response
Feedback Verification

13 14

Information Top Aligned Labels

• Layout • When data being
• Label positioning collected is familiar
• Content groupings • Minimize time to
completion
• Input Affordances
• Require more vertical
• Formats, required fields space
• Actions • Spacing or contrast is
• Primary & secondary vital to enable
efficient scanning
• Help & Tips
• Flexibility for
• Visual Hierarchy localization and
complex inputs

15 16

Top-aligned Labels 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

17 18

3
 Right-aligned labels 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

19 20

Eye-tracking Data
Left-aligned labels
• 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

21 22

Required Form Fields

• 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
• 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

23 24

4
 All fields required
All fields required

25 26

Most fields required Few fields optional

27 28

29 30

5
 Field Lengths

• 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
• Field lengths can
provide valuable
affordances
• Appropriate field
lengths provide enough
space for inputs
• Random field lengths
may add visual noise to
a form

31 32

33 34

• When possible, use

field length as an
affordance
BEST PRACTICE
• Otherwise consider a
consistent length that
provides enough room
for inputs

35 36

6
Content Grouping Lots of 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

37 38

Excessive visual noise

Minimum amount necessary

39 40

Minimum amount necessary

41 42

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

43 44

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

45 46

• Avoid secondary
actions if possible
BEST PRACTICE • Otherwise, ensure a
clear visual distinction
between primary &
secondary actions

47 48

8
Help & Tips Help Text

• 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

49 50

Lots of Help/Tips

51 52

Automatic inline exposure

Automatic inline exposure

53 54

9
 User-activated inline exposure
User-activated inline exposure

55 56

User-activated section exposure

• 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

57 58

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

59 60

10
Path to Completion
• Primary goal for every form is
completion Remove Unnecessary
• Every input requires consideration & Inputs
action
• Remove all unnecessary data requests
• Enable flexible data input
• Provide a clear path
• Enable smart defaults

61 62

Flexible Data Input Smart Defaults

(555) 123-4444
555-123-4444
555 123 4444
555.123.4444
5551234444

63 64

Clear Path to Completion

Path to Completion

65 66

11
 Path to completion

• 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

67 68

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

69 70

Progressive Disclosure
• Not all users require all available
options all the time
• Remember to account • Progressive disclosure provides
for tabbing behavior additional options when appropriate
• Use the tabindex • Advanced options
BEST PRACTICE attribute to control
tabbing order • Gradual engagement
• Consider tabbing
expectations when
laying out forms

71 72

12
 Exposing Options

Exposing Options

73 74

Dialog

Progressive Disclosure

75 76

Gradual Engagement

77 78

13
 • Map progressive
disclosure to
BEST PRACTICE prioritized user needs
• Most effective when
user-initiated
• Maintain a consistent
approach

79 80

Selection Dependent Inputs

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

81 82

Section Tabs
Page Level

83 84

14
Section Finger Tabs Section Selectors

85 86

Expose Below
Expose Within

87 88

Inactive Until Selected

Exposed & Grouped

89 90

15
Exposing Dependent Inputs
• Page Level
• Requires additional step
• Section Tabs
• Often go unnoticed
• Require smart defaults • Maintain clear
• Finger Section Tabs relationship between
• Follow path to completion scan line initial selection options
• Section Selectors
BEST PRACTICE
• Clearly associate
• Effectively Group information additional inputs with
• Hide some options their trigger
• Expose Below & Expose Within • Avoid “jumping” that
• Potential for confusion disassociates initial
• Inactive Until Selected & Exposed within Groups selection options
• Association between primary selection is impaired

91 92

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

93 94

Inline Validation
Password Validation

• Provide direct feedback as data is

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

95 96

16
Unique User Name Validation
Valid Input Suggestions

97 98

Maximum Character Count

• Use inline validation for

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

99 100

Errors
Error Messaging
• 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

101 102

17
 Short Forms: too much? Short Forms

103 104

Short Forms

105 106

Progress
• Sometimes actions require some time to
• Clearly communicate process
an error has occurred: • Form submission
top placement, visual
contrast • Data calculations
• Provide actionable • Uploads
BEST PRACTICE remedies to correct
errors • Provide feedback when an action is in
• Associate responsible progress
fields with primary
error message
• “Double” the visual
language where errors
have occurred

107 108

18
 Disable Submit Button

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

109 110

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

111 112

Animated Indication

113 114

19
 Additional Tips
• Avoid changing inputs provided by
users
• With later inputs
• Clearly communicate a • After an error has occurred
data submission has
been successful • Let users know if difficult to obtain
BEST PRACTICE
• Provide feedback in information is required prior to sending
context of data them to a form
submitted

115 116

Accessibility & Mark-up Web Form Creation Tools

• Use <label> tags to associate labels with inputs
• Properly read by screen readers
• Most browsers treat text with <label> tags as
clickable: larger actions • Wufoo
• Use the tabindex attribute to provide a “tabbing” path • http://www.wufoo.com
• Provides control over tabbing order • Form Assembly
• Enables forms to be navigated by keyboard • http://www.formassembly.com
• Consider the accesskey attribute for additional • icebrrg
keyboard support
• http://www.icebrrg.com
• Direct access to associated input fields
• Consider <fieldset> to group related form fields

117 118

For more information…

• Functioning Form
• www.lukew.com/ff/
• Web Form Design Best Practices
• www.rosenfeldmedia.com/books/web
forms/
• Winter 2008
• Drop me a note
• luke@lukew.com

119

20