1

1

BEST PRACTICES FORWEB FORM DESIGNLUKE WROBLEWSKIUSER INTERFACE 12, BOSTON 2007

2

Luke Wroblewski

Yahoo! Inc.• Senior Principal, Product Ideation & Design

LukeW Interface Designs• Principal & Founder• Product design & strategy services

Author• Site-Seeing: A Visual Approach to Web Usability

(Wiley & Sons)• Form Design Best Practices (Rosenfeld Media) -

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

2

3

WHY DOES FORMDESIGN MATTER?

4

SHOPPING

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

3

5

SHOPPINGONLINE

6

ACCESS

Images from Flickr users katielips, pealco, and *nathan

4

7

ACCESSONLINE

8

DATA INPUT

5

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

• Engagement• User: Enable information entry & manipulation• Business: Accumulate content & data

6

11

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

12

Multiple Data Sources

• Usability Testing• Errors, issues, assists, completion rates, time

spent per task, satisfaction scores

• Customer Support• Top problems, number of incidents

• Best Practices• Common solutions, unique approaches

• Site Tracking• Completion rates, entry points, exit points,

elements utilized, data entered

• Eye Tracking• Number of fixations, gaze paths, length of

fixations

BUSINESS OF DESIGN, EBAY INC. APRIL 2004

7

13

Design Patterns

Information

Interaction

Feedback

+

+

Visual CommunicationAffordances

EngagementDisclosure

ResponseVerification

14

INFORMATION

8

15

Information

• Layout• Label positioning• Content groupings

• Input Affordances• Formats, required fields

• Actions• Primary & secondary

• Help & Tips• Visual Hierarchy

16

Top Aligned Labels

• When data beingcollected is familiar

• Minimize time tocompletion

• Require more verticalspace

• Spacing or contrast isvital to enableefficient scanning

• Flexibility forlocalization andcomplex inputs

9

17

Top-aligned Labels

18

Right Aligned Labels

• Clear associationbetween label andfield

• Requires less verticalspace

• More difficult to justscan labels due toleft rag

• Fast completiontimes

10

19

Right-aligned labels

20

Left Aligned Labels

• When data required isunfamiliar

• Enables labelscanning

• Less clear associationbetween label andfield

• Requires less verticalspace

• Changing label lengthmay impair layout

11

21

Left-aligned labels

22

Eye-tracking Data

• July 2006 study by MatteoPenzo

• Left-aligned labels• Easily associated labels with

the proper input fields• Excessive distances between

labels inputs forced users totake 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 captureboth labels & inputs with asingle eye movement’

• Fastest completion times

12

23

• For reducedcompletion times &familiar data input: topaligned

• When vertical screenspace is a constraint:right aligned

• For unfamiliar, oradvanced data entry:left aligned

BEST PRACTICE

24

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 required

13

25

All fields required

26

All fields required

14

27

Most fields required

28

Few fields optional

15

29

30

16

31

• Try to avoid optionalfields

• If most fields arerequired: indicateoptional fields

• If most fields areoptional: indicaterequired fields

• Text is best, but * oftenworks for requiredfields

• Associate indicatorswith labels

BEST PRACTICE

32

Field Lengths

• Field lengths canprovide valuableaffordances

• Appropriate fieldlengths provide enoughspace for inputs

• Random field lengthsmay add visual noise toa form

17

33

34

18

35

36

• When possible, usefield length as anaffordance

• Otherwise consider aconsistent length thatprovides enough roomfor inputs

BEST PRACTICE

19

37

Content Grouping

• Content relationshipsprovide a structuredway to organize a form

• Groupings provide• A way to scan

information required at ahigh level

• A sense of howinformation within a formis related

38

Lots of content grouping

20

39

Excessive visual noise

40

Minimum amount necessary

21

41

42

Minimum amount necessary

22

43

44

• Use relevant contentgroupings to organizeforms

• Use the minimumamount of visualelements necessary tocommunicate usefulrelationships

BEST PRACTICE

23

45

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 matchtheir importance

46

24

47

48

25

49

50

26

51

52

27

53

• Avoid secondary actions ifpossible

• Otherwise, ensure a clearvisual distinction betweenprimary & secondary actions

• Align primary actions withinput fields for a clear pathto completion

BEST PRACTICE

54

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

28

55

Help Text

56

Lots of Help/Tips

29

57

58

Automatic inline exposure

30

59

Automatic inline exposure

60

User-activated inline exposure

31

61

User-activated inline exposure

62

User-activated dialog exposure

32

63

User-activated section exposure

64

Automatic section exposure

33

65

• Minimize the amount ofhelp & tips required tofill out a form

• Help visible andadjacent to a datarequest is most useful

• When lots of unfamiliardata is beingrequested, considerusing a dynamic helpsystem

BEST PRACTICE

66

INTERACTION

34

67

Interaction

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

68

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

35

69

Remove Unnecessary Inputs

70

Remove Unnecessary Inputs

36

71

Remove Unnecessary Inputs

72

Flexible Data Input

(555) 123-4444555-123-4444555 123 4444555.123.44445551234444

37

73

Smart Defaults

74

Path to Completion

38

75

Clear Path to Completion

76

Path to completion

39

77

• Remove allunnecessary datarequests

• Enable smart defaults• Employ flexible data

entry• Illuminate a clear path

to completion• For long forms, show

progress & save

BEST PRACTICE

78

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

40

79

80

• Remember to accountfor tabbing behavior

• Use the tabindexattribute to controltabbing order

• Consider tabbingexpectations whenlaying out forms

BEST PRACTICE

41

81

Progressive Disclosure

• Not all users require all availableoptions all the time

• Progressive disclosure providesadditional options when appropriate• Advanced options• Gradual engagement

82

Exposing Options

42

83

Exposing Options

84

Dialog

43

85

Progressive Disclosure

86

Gradual Engagement

44

87

88

45

89

90

• Map progressivedisclosure toprioritized user needs

• Most effective whenuser-initiated

• Maintain a consistentapproach

BEST PRACTICE

46

91

Selection Dependent Inputs

• Sometimes an initial data input requiresor enables additional inputs• More options become available because of

an initial input• Further clarification required due to initial

input

92

Selection Dependent Inputs

47

93

Page Level

94

Section Tabs

48

95

Section Finger Tabs

96

Section Selectors

49

97

Expose Below

98

Expose Within

50

99

Inactive Until Selected

100

Exposed & Grouped

51

101

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

102

52

103

104

• Maintain clearrelationship betweeninitial selection options

• Clearly associateadditional inputs withtheir trigger

• Avoid “jumping” thatdisassociates initialselection options

BEST PRACTICE

53

105

FEEDBACK

106

Feedback

• Inline validation• Assistance

• Errors• Indication & Resolution

• Progress• Indication

• Success• Verification

54

107

Inline Validation

• Provide direct feedback as data isentered• Validate inputs• Suggest valid inputs• Help users stay within limits

108

Password Validation

55

109

Unique User Name Validation

110

Input Field Validation

56

111

Valid Input Suggestions

112

Maximum Character Count

57

113

• Use inline validation forinputs that havepotentially high errorrates

• Use suggested inputsto disambiguate

• Communicate limits

BEST PRACTICE

114

Errors

• Errors are used to ensure all requireddata 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

58

115

Error Messaging

116

Short Forms: too much?

59

117

Short Forms

118

Short Forms

60

119

120

• Clearly communicatean error has occurred:top placement, visualcontrast

• Provide actionableremedies to correcterrors

• Associate responsiblefields with primaryerror message

• “Double” the visuallanguage where errorshave occurred

BEST PRACTICE

61

121

Progress

• Sometimes actions require some time toprocess• Form submission• Data calculations• Uploads

• Provide feedback when an action is inprogress

122

Disable Submit Button

62

123

• Provide indication oftasks in progress

• Disable “submit”button after user clicksit to avoid duplicatesubmissions

BEST PRACTICE

124

Success

• After successful form completionconfirm data input in context• On updated page• On revised form

• Provide feedback via• Message (removable)• Animated Indicator

63

125

126

64

127

Animated Indication

128

• Clearly communicate adata submission hasbeen successful

• Provide feedback incontext of datasubmitted

BEST PRACTICE

65

129

Additional Tips

• Avoid changing inputs provided byusers• With later inputs• After an error has occurred

• Let users know if difficult to obtaininformation is required prior to sendingthem to a form

130

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 additionalkeyboard support• Direct access to associated input fields

• Consider <fieldset> to group related form fields

66

131

PUTTING IT ALLTOGETHER…

132

67

133

134

Web Form Creation Tools

• Wufoo• http://www.wufoo.com

• Form Assembly• http://www.formassembly.com

• icebrrg• http://www.icebrrg.com

68

135

For more information…

• Functioning Form• www.lukew.com/ff/

• Web Form Design BestPractices• www.rosenfeldmedia.com• Early 2008

• Drop me a note• luke@lukew.com