BEST PRACTICES FOR
FORM DESIGNLUKE WROBLEWSKIAUTHOR, WEB FORM DESIGN 20081

Luke Wroblewski
Yahoo! Inc.
• Senior Director, Product Ideation & Design
LukeW Interface Designs• Principal & Founder• Product design & strategy servicesAuthor• Web Form Design: Filling in the Blanks(Rosenfeld Media)• Functioning Form: Web applications, productstrategy, & 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.com2

Web Form Design• Web Form Design: Filling inthe Blanks• Rosenfeld Media, 2008• http://www.lukew.com/resources/
web_form_design.asp• 15% OFF with DiscountCode• 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

ACCESSONLINE

8DATA INPUT

9DATA INPUTONLINE

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 & data11

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

DESIGN PATTERNS• Repeatable design solutions
to common problems• Work “positively” forspecific problems in specificcontexts• Capture best practices thatsolve real user needs• Between principles &guidelines• A design vocabulary

14

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

15

Data Sources• Usability Testing• Errors, issues, assists, completion rates, time spentper 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, heatmaps, scan paths

BUSINESS OF DESIGN, EBAY INC. APRIL 2004

16

ONE AT A TIME

• Isolate individual bestpractices• Look at simple examplesof each17

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 tocompletion• Require more verticalspace• Spacing or contrast isvital to enableefficient scanning• Flexibility for
localization andcomplex inputs

20Top-aligned Labels

21

Right Aligned Labels• Clear association
between label andfield• Requires less verticalspace• More difficult to justscan labels due toleft rag• Fast completiontimes

22Right-aligned labels

23

Left Aligned Labels• When data required isunfamiliar• Enables label scanning• Less clear association
between label andfield• Requires less verticalspace• 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 theproper input fields• Excessive distances betweenlabels inputs forced users totake more time• Right-aligned labels• Reduced overall number offixations by nearly half• Form completion times werecut nearly in half

• Top-aligned labels• Permitted users to capture bothlabels & inputs with a single eyemovement’• Fastest completion times

26

BEST PRACTICE• For reduced
completion times &familiar data input: topaligned• When vertical screen
space is a constraint:right aligned• For unfamiliar, oradvanced data entry:
left aligned27

Required Form Fields• Indication of required fields ismost 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 ismost useful when• Very few fields are optional• Neither is realy useful when• All fields are required28

All fields required29

All fields required30

Most fields required31

Few fields optional

32

33

34

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

35

Field Lengths• Field lengths canprovide valuable
affordances• Appropriate fieldlengths provide enoughspace for inputs• Random field lengths
may add visual noise toa form

36

37

38

39

BEST PRACTICE• When possible, use
field length as anaffordance• Otherwise consider aconsistent length thatprovides 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 related41

Lots of content grouping42

Excessive visual noise

43

Minimum amount necessary

44

45

Minimum amount necessary

46

47

BEST PRACTICE• Use relevant content
groupings to organizeforms• Use the minimum
amount of visualelements necessary tocommunicate 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

BEST PRACTICE• Avoid secondary actions ifpossible• 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 aform if overused• In these cases, you may want to consider adynamic 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

BEST PRACTICE• Minimize the amount ofhelp & tips required tofill out a form• Help visible andadjacent to a data
request is most useful• When lots of unfamiliar
data is being
requested, consider
using a dynamic helpsystem

67

INTERACTION

68

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

69

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

70Remove UnnecessaryInputs

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

72

Smart Defaults

73

Path to Completion74

Clear Path to Completion

75

Path to completion

76

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

Tabbing• Many users interact with a form by“tabbing” between fields• Proper HTML markup can ensuretabbing works as expected• Multi-column form layouts may conflictwith expected tabbing behavior

78

79

BEST PRACTICE• Remember to accountfor tabbing behavior• Use the tabindex
attribute to control
tabbing order• Consider tabbing
expectations whenlaying 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 engagement81Exposing Options

82

Exposing Options

83

Dialog84

Progressive Disclosure85

Gradual Engagement

86

87

88

89

BEST PRACTICE• Map progressivedisclosure to prioritizeduser needs• Most effective whenuser-initiated• Maintain a consistentapproach90Selection Dependent Inputs• Sometimes an initial data input requires
or enables additional inputs• More options become available because ofan 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 Selected99

Exposed & Grouped100

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 impaired101

102

103

BEST PRACTICE• Maintain clear
relationship between
initial selection options• Clearly associate
additional inputs withtheir trigger• Avoid “jumping” thatdisassociates initial
selection options

104

FEEDBACK105

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

106

Inline Validation• Provide direct feedback as data isentered• 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 Count111

BEST PRACTICE• Use inline validation forinputs that havepotentially high errorrates• 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

BEST PRACTICE• Clearly communicate
an error has occurred:
top placement, visualcontrast• Provide actionable
remedies to correcterrors• Associate responsible
fields with primaryerror message• “Double” the visuallanguage where errors
have occurred

119

Progress• Sometimes actions require some time toprocess• Form submission• Data calculations• Uploads• Provide feedback when an action is inprogress120

Disable Submit Button

121

BEST PRACTICE• Provide indication oftasks in progress• Disable “submit”
button after user clicks
it to avoid duplicate
submissions122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

BEST PRACTICE• Clearly communicate adata submission has
been successful• Provide feedback incontext of datasubmitted

127

Additional Tips
• Avoid changing inputs provided byusers• 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 inthe 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• luke@lukew.com

133