WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009...
Transcript of WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009...
![Page 1: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/1.jpg)
1!
1
WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009
2 Flickr photo by FHKE
Web Form Design in Action
![Page 2: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/2.jpg)
2!
3
4
Forms Suck.
![Page 3: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/3.jpg)
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
![Page 4: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/4.jpg)
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
![Page 5: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/5.jpg)
5!
9
Scan Line
10
Clear Scan Line
![Page 6: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/6.jpg)
6!
11
12
![Page 7: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/7.jpg)
7!
13
14
![Page 8: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/8.jpg)
8!
15
16
![Page 9: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/9.jpg)
9!
17
Path to completion
18
Path to completion
![Page 10: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/10.jpg)
10!
19
Progress Indicators
20
Progress Indicators
![Page 11: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/11.jpg)
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
![Page 12: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/12.jpg)
12!
23
1.! Path to Completion
7 BEST PRACTICES
24
What question am I answering here?
![Page 13: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/13.jpg)
13!
25
People jump right in
etre usability testing, March 2009
26
People jump right in
What question am I answering here?
Thanks Whitney!
![Page 14: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/14.jpg)
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
![Page 15: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/15.jpg)
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
![Page 16: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/16.jpg)
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
![Page 17: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/17.jpg)
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
![Page 18: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/18.jpg)
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
![Page 19: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/19.jpg)
19!
37
Labels within Input Fields
38
Labels within Input Fields
![Page 20: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/20.jpg)
20!
39
Labels within Input Fields
40
1.! Path to Completion
2.! Label Alignment
7 BEST PRACTICES
![Page 21: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/21.jpg)
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
![Page 22: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/22.jpg)
22!
43
44
Lots of Help/Tips
![Page 23: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/23.jpg)
23!
45
Automatic inline exposure
46
User-activated inline exposure
![Page 24: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/24.jpg)
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
![Page 25: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/25.jpg)
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?
![Page 26: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/26.jpg)
26!
51
Inline Validation
•! Provide real time feedback •! Validate inputs
•! Suggest valid inputs
•! Help users stay within limits
52
Unique User Name Validation
![Page 27: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/27.jpg)
27!
53
54
Password Validation
![Page 28: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/28.jpg)
28!
55
56
![Page 29: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/29.jpg)
29!
57
Input Validation
58
Validating Inputs
![Page 30: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/30.jpg)
30!
59
60
![Page 31: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/31.jpg)
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
![Page 32: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/32.jpg)
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.”
![Page 33: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/33.jpg)
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
![Page 34: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/34.jpg)
34!
67
Valid Input Suggestions
68
![Page 35: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/35.jpg)
35!
69
70
![Page 36: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/36.jpg)
36!
71
Input Masks
Do not gradually reveal formatting as people enter input
Surface formatting right up front
72
Maximum Character Count
![Page 37: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/37.jpg)
37!
73
74
![Page 38: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/38.jpg)
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
![Page 39: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/39.jpg)
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
![Page 40: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/40.jpg)
40!
79
80
![Page 41: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/41.jpg)
41!
81
82
![Page 42: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/42.jpg)
42!
83
84
![Page 43: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/43.jpg)
43!
85
86
![Page 44: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/44.jpg)
44!
87
88
![Page 45: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/45.jpg)
45!
89
90
![Page 46: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/46.jpg)
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
![Page 47: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/47.jpg)
47!
93
1.! Path to Completion
2.! Label Alignment
3.! Help & Tips
4.! Inline Validation
5.! Primary & Secondary Actions
7 BEST PRACTICES
94
![Page 48: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/48.jpg)
48!
95
96
![Page 49: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/49.jpg)
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
![Page 50: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/50.jpg)
50!
99
Have a Conversation
100
![Page 51: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/51.jpg)
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
![Page 52: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/52.jpg)
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
![Page 53: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/53.jpg)
53!
105
106
![Page 54: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/54.jpg)
54!
107
Oh boy. Not another form to fill out…
108
![Page 55: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/55.jpg)
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
![Page 56: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/56.jpg)
56!
111
112
![Page 57: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/57.jpg)
57!
113
5 Million Profiles in 5 Months
114
![Page 58: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/58.jpg)
58!
115
Gradual Engagement
116
![Page 59: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/59.jpg)
59!
117
118
![Page 60: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/60.jpg)
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
![Page 61: WEB FORM DESIGN IN ACTION · WEB FORM DESIGN IN ACTION LUKE WROBLEWSKI AN EVENT APART, OCTOBER 2009 Flickr photo by FHKE 2 Web Form Design in Action . 2! 3 4 ... Help & Tips can quickly](https://reader034.fdocuments.us/reader034/viewer/2022050507/5f98bb12ac396a2fa6352609/html5/thumbnails/61.jpg)
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