Embed Size (px)
Citation preview
1!
1
WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009
2 Flickr photo by FHKE
Web Form Design in Action
2!
3
4
Forms Suck.
3!
5
But Form Design Matters
•! How customers “talk” to companies online •! Commerce ($)
•! User: Enable purchasing
•! Business: Maximize sales
•! Engagement •! User: Enable information entry & manipulation
•! Business: Accumulate content & data
•! Access (membership) •! User: Enable participation
•! Business: Increase customers & grow communities
6
65,000 videos per day July 2006
234,000 videos per day Nov 2008
2008 data based on 13 hours of video uploaded per minute
4!
7
What do I need to fill in here?
8
Path to Completion
•! Primary goal for every form is completion •! Provide a clear scan line & visual pacing
•! Show Progress •! Scope, progress, status
5!
9
Scan Line
10
Clear Scan Line
6!
11
12
7!
13
14
8!
15
16
9!
17
Path to completion
18
Path to completion
10!
19
Progress Indicators
20
Progress Indicators
11!
21
Progress Indicators
22
•! Illuminate a clear path to completion
•! Use progress indicators to communicate scope, status, and position
•! If requiring substantial time or information look-up, consider using a start page
•! Use more general progress indicators for forms with variable sequences
BEST PRACTICE
12!
23
1.! Path to Completion
7 BEST PRACTICES
24
What question am I answering here?
13!
25
People jump right in
etre usability testing, March 2009
26
People jump right in
What question am I answering here?
Thanks Whitney!
14!
27
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
28
Top-aligned Labels
15!
29
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
30
Right-aligned labels
16!
31
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
32
Left-aligned labels
17!
33
Eye-tracking Data
•! 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’
•! Ten times faster than left-aligned
34
18!
35
•! For reduced completion times & familiar data input: top aligned
•! When vertical screen space is a constraint: right aligned
•! For unfamiliar, or advanced data entry: left aligned
BEST PRACTICE
36
Labels within Input Fields
19!
37
Labels within Input Fields
38
Labels within Input Fields
20!
39
Labels within Input Fields
40
1.! Path to Completion
2.! Label Alignment
7 BEST PRACTICES
21!
41
Why do you need my email? Are you going to send me spam or a receipt?
Why do I have to create a user name? I just want to get online!
42
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
22!
43
44
Lots of Help/Tips
23!
45
Automatic inline exposure
46
User-activated inline exposure
24!
47
User-activated section exposure
48
•! Minimize the amount of help & tips required to fill out a form
•! Help visible and adjacent to a data request is most useful
•! When people maybe unsure about why or how to answer, consider automatic inline system
•! For complex & reused forms, consider user-activated system
•! Use inline help unless you have a lot of help content (text, graphics, charts)
•! Use a consistent help section if you have a lot of help content
BEST PRACTICE
25!
49
1.! Path to Completion
2.! Label Alignment
3.! Help & Tips
7 BEST PRACTICES
50
How can I possibly know what user names are available? Why do you make me keep guessing?
26!
51
Inline Validation
•! Provide real time feedback •! Validate inputs
•! Suggest valid inputs
•! Help users stay within limits
52
Unique User Name Validation
27!
53
54
Password Validation
28!
55
56
29!
57
Input Validation
58
Validating Inputs
30!
59
60
31!
61
Inline Validation Testing
VS. a page submit/refresh model •! 22% increase in completions
•! 31% increase in satisfaction ratings
•! 42% decrease in completion times
•! 22% decrease in errors made
•! 47% decrease in number of eye fixations
etre usability testing, March 2009
62
30% noticed inline validation in top part of form: name, email, gender, location
Where to use inline validation
“How do you know that’s my correct email address?”
etre usability testing, March 2009
32!
63
80-100% noticed inline validation in bottom part of form: user ID & password
Where to use inline validation
etre usability testing, March 2009
64
Highest success rates, lowest number of errors, shortest time to completion, highest satisfaction rates
When to show inline validation
etre usability testing, March 2009
7-10 seconds slower
“It’s frustrating that you don’t get the chance to put anything in [the field] before it’s flashing red at you.”
33!
65
When to show inline validation
etre usability testing, March 2009
66
How to show inline validation
etre usability testing, March 2009
Most people are “hunt and peck” typists
Persistent messages support both “check as you go” & “check after complete” done strategies
34!
67
Valid Input Suggestions
68
35!
69
70
36!
71
Input Masks
Do not gradually reveal formatting as people enter input
Surface formatting right up front
72
Maximum Character Count
37!
73
74
38!
75
•! Use inline validation for inputs that have potentially high error rates
•! Validate “open” inputs after people finish
•! Keep validation messages persistent
•! Use suggested inputs to disambiguate
•! Communicate limits
BEST PRACTICE
76
1.! Path to Completion
2.! Label Alignment
3.! Help & Tips
4.! Inline Validation 7 BEST PRACTICES
39!
77
These both look the same. Yet one resets all my work!
78
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
40!
79
80
41!
81
82
42!
83
84
43!
85
86
44!
87
88
45!
89
90
46!
91
92
•! Avoid secondary actions if possible
•! Otherwise, ensure a clear visual distinction between primary & secondary actions
•! Align primary actions with input fields for a clear path to completion
BEST PRACTICE
47!
93
1.! Path to Completion
2.! Label Alignment
3.! Help & Tips
4.! Inline Validation
5.! Primary & Secondary Actions
7 BEST PRACTICES
94
48!
95
96
49!
97
Form Organization
•! What to include •! Keep, cut, postpone, or explain
•! Speak with one voice
•! Have a conversation
•! Use natural breaks to organize content
98
•! User Experience
•! Sales
•! Engineering
•! Marketing
•! Legal
Outbreak blog 07
50!
99
Have a Conversation
100
51!
101
102
•! Take the time to evaluate every question you ask
•! Ensure your forms speak with one voice
•! Strive for succinctness
•! If a form naturally breaks down into a few short topics, use a single Web page
•! When a form contains a large number of questions that are only related by a few topics, try multiple Web pages
•! When a form contains a large number of questions related to a single topic, one long Web page
BEST PRACTICE
52!
103
1.! Path to Completion
2.! Label Alignment
3.! Help & Tips
4.! Inline Validation
5.! Primary & Secondary Actions
6.! Form Organization
7 BEST PRACTICES
104
53!
105
106
54!
107
Oh boy. Not another form to fill out…
108
55!
109
110
Gradual Engagement
•! Sign up forms must die •! Web services should engage people
•! Explain what service does
•! Allow people to use it
•! Sign up is an outcome
56!
111
112
57!
113
5 Million Profiles in 5 Months
114
58!
115
Gradual Engagement
116
59!
117
118
60!
119
120
•! Try to avoid sign-up forms
•! Reflect your service’s core essence through lightweight interactions
•! Make people successful instantly
•! If you auto-generate accounts, ensure there is clear way to access them
•! Do not simply distribute the various input fields in a sign-up form across multiple pages
BEST PRACTICE
61!
121
1.! Path to Completion
2.! Label Alignment
3.! Help & Tips
4.! Inline Validation
5.! Primary & Secondary Actions
6.! Form Organization
7.! Gradual Engagement
7 BEST PRACTICES
122
For more information…
•!More Information •! @lukewdesign
•! www.lukew.com/ff/
•!Web Form Design •! www.rosenfeldmedia.com/books/
webforms/ •! 2 to give away
•! Discount code: FOLUKE15
