web form design: filling in the blanks
DESCRIPTION
Where would online video sharing site YouTube be without the form that enables its customers to upload over 70,000 videos per day? Many distinct visual elements on this form get in the way of seeing the questions the form is asking. On Macy’s every input is required and marked as such except for Middle Name and Attention. It may be clearer to simply mark these two fields as optional instead. On Barnes & Noble’s Web site, all the input fields are required and marked as such —why?TRANSCRIPT
W E B F O R M D E S I G N Filling in the Blanks
b y L U K E W R OBL E W S K I foreword by Jared Spool
Forms make or break the most crucial online interactions: checkout,
registration, and any task requiring information entry. In Web Form
Design, Luke Wroblewski draws on original research, his considerable
experience at Yahoo! and eBay, and the perspectives of many of the
field’s leading designers to show you everything you need to know about
designing effective and engaging web forms.
“Luke Wroblewski has done the entire world a great favor by writing this book. With deft explanations and clear examples, he presents a clear case for better Web forms and how to achieve them. This book will help you every day.”
ALAN COOPER ChairmanCooper
“If I could only send a copy of Web Form Design to the designer of every web form that’s frustrated me, I’d go bankrupt from the shipping charges alone. Please. Stop the pain. Read this book now.”
ERIC MEYERAuthor of CSS: The Definitive Guidemeyerweb.com
“Luke’s book is by far the most practical, comprehensive, data-driven guide for solving form design challenges. It is an essential reference that will become a must-read for many years.”
IRENE AUDirector, User ExperienceGoogle
www.rosenfeldmedia.com
MORE ON WEB FORM DESIGNwww.rosenfeldmedia.com/books/webforms/
WE
B FO
RM
DE
SIGN
by LUK
E WR
OB
LEWSK
I
WEB FORM DESIGNFILLING IN THE BLANKS
by: Luke Wroblewski
Rosenfeld MediaBrooklyn, New York
Enter code WFDDE for 10% o! any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com
TABLE OF CONTENTS
How to Use This Book xWho Should Read This Book? xi
What’s in the Book? xii
What Comes with the Book? xv
Frequently Asked Questions xviiiForeword xxiii
Form StructureCHAPTER 1 The Design of Forms 1Form Design Matters 5
The Impact of Form Design 16
Design Considerations 27
CHAPTER 2 Form Organization 31What to Include 32
Have a Conversation 37
Organizing Content 40
Group Distinctions 48
Best Practices 56
iiTable of Contents
CHAPTER 3 Path to Completion 59Name That Form 60
Start Pages 62
Clear Scan Lines 64
Minimal Distractions 68
Progress Indicators 70
Tabbing 81
Best Practices 85
Form ElementsCHAPTER 4Labels 86Label Alignment 87
Top-Aligned Labels 89
Right-Aligned Labels 94
Left-Aligned Labels 96
Labels Within Inputs 99
Mixed Alignments 102
Best Practices 104
CHAPTER 5 Input Fields 106Types of Input Fields 107
Field Lengths 116
Required Fields 119
iiiTable of Contents
TABLE OF CONTENTS
Input Groups 131
Flexible Inputs 132
Best Practices 136
CHAPTER 6 Actions 138Primary and Secondary Actions 139
Placement 147
Actions in Progress 150
Agree and Submit 155
Best Practices 158
CHAPTER 7 Help Text 160When to Help 161
Automatic Inline Help 166
User-Activated Inline Help 173
User-Activated Section Help 178
Secure Transactions 182
Best Practices 184
CHAPTER 8 Errors and Success 186Errors 187
Success 205
No Dead Ends 211
Best Practices 212
ivTable of Contents
TABLE OF CONTENTS
Form InteractionCHAPTER 9 Inline Validation 214Confirmation 215
Suggestions 225
Limits 228
Best Practices 230
CHAPTER 10 Unnecessary Inputs 231Removing Questions 232
Smart Defaults 239
Personalized Defaults 246
Best Practices 248
CHAPTER 11 Additional Inputs 249Inline Additions 250
Overlays 254
Progressive Engagement 265
Best Practices 269
vTable of Contents
TABLE OF CONTENTS
CHAPTER 12 Selection-Dependent Inputs 271Page-Level Selection 276
Horizontal Tabs 279
Vertical Tabs 282
Drop-Down List 285
Expose Below Radio Buttons 287
Expose Within Radio Buttons 290
Exposed Inactive 292
Exposed Groups 295
Best Practices 299
CHAPTER 13 Gradual Engagement 302Signing Up 303
Getting Engaged 306
Best Practices 316
CHAPTER 14 What’s Next? 317The Disappearing Form 318
The Changing Form 321
Getting It Built 329
viTable of Contents
TABLE OF CONTENTS
Index 331Acknowledgments 342About the Author 344
viiTable of Contents
TABLE OF CONTENTS
HOW TO USE THIS BOOK
xHow to Use this Book
Who Should Read this Book?
HOW TO USE THIS BOOK
xiHow to Use this Book
What’s in the Book?
HOW TO USE THIS BOOK
xiiHow to Use this Book
HOW TO USE THIS BOOK
xiiiHow to Use this Book
Chapter 1: Design of Forms Chapter 2: Form Organization Chapter 3: Path to Completion
Chapter 4: Labels Chapter 5: Input Fields Chapter 6: Actions Chapter 7: Help Text Chapter 8: Errors and Success
HOW TO USE THIS BOOK
xivHow to Use this Book
Chapter 9: Inline Validation Chapter 10: Unnecessary Inputs Chapter 11: Additional Inputs Chapter 12: Selection-Dependent Inputs Chapter 13: Gradual Engagement Chapter 14: What’s Next?
What Comes with the Book? ( http://
www.rosenfeldmedia.com/books/webforms)
HOW TO USE THIS BOOK
xvHow to Use this Book
( http://feeds.rosenfeldmedia.com/webforms/)
(http://www.flickr.com/photos/rosenfeldmedia).
HOW TO USE THIS BOOK
xviHow to Use this Book
HOW TO USE THIS BOOK
xviiHow to Use this Book
Why does Web form design matter?
See page 5
How should I organize my Web form—within one Web page or across several?
FREQUENTLY ASKED QUESTIONS
xviiiFrequently Asked Questions
See page 40.
If my form spans several Web pages, do I tell people what page they’re on?
See page 70.
FREQUENTLY ASKED QUESTIONS
xixFrequently Asked Questions
Should I top-, right-, or left-align the labels for input fields?
See page 87.
How are smart defaults used in Web forms?
See page 239.
FREQUENTLY ASKED QUESTIONS
xxFrequently Asked Questions
When should I include help text on my forms?
See page 164.
How should I indicate required input fields?
See page 119.
FREQUENTLY ASKED QUESTIONS
xxiFrequently Asked Questions
What’s the di!erence between a primary and secondary action?
See page 139.
FREQUENTLY ASKED QUESTIONS
xxiiFrequently Asked Questions
FOREWORD
xxiiiForeword
FOREWORD
xxivForeword
FOREWORD
xxvForeword
FOREWORD
xxviForeword
CHAPTER 1
The Design of Forms
Form Design Matters 5
The Impact of Form Design 16
Design Considerations 27
1 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
2Chapter 1
The Design of Forms
http://www.lukew.com/!/entry.
asp?532
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
3Chapter 1
The Design of Forms
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
4Chapter 1
The Design of Forms
FIGURE 1.1 http://www.flickr.com/photos/rosenfeldmedia/2366423465The registration form for Facebook, a very popular social networking service. Almost half of this form is devoted to a security check!
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
5Chapter 1
The Design of Forms
Form Design Matters
Ecommerce
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
6Chapter 1
The Design of Forms
Photograph by Andrew Walsh http://www.flickr.com/photos/radiofree/150535853
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
7Chapter 1
The Design of Forms
FIGURE 1.2When you’re shopping in a local store, checkout usually comes with a smile.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
8Chapter 1
The Design of Forms
Social Interactions
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
9Chapter 1
The Design of Forms
FIGURE 1.3top image: http://www.flickr.com/photos/rosenfeldmedia/2366423729
bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366423541
Browsing for products on the ecommerce site, eBay Express, is fun. Checking out, on the other hand, is a form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
10Chapter 1
The Design of Forms
FIGURE 1.4 http://www.flickr.com/photos/rosenfeldmedia/2366424337Unpacking a new Apple MacBook Pro is a tactile, engaging experience that reflects the quality of the product inside.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
11Chapter 1
The Design of Forms
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
12Chapter 1
The Design of Forms
FIGURE 1.5top image: http://www.flickr.com/photos/rosenfeldmedia/2367262662 botom image: http://www.flickr.com/photos/rosenfeldmedia/2366424417
Vox looks like a fun social network but if you want to join, you’ll need to fill out this new account form, which isn’t fun at all.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
13Chapter 1
The Design of Forms
Productivity
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
14Chapter 1
The Design of Forms
FIGURE 1.6top image: http://www.flickr.com/photos/rosenfeldmedia/2367263846 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366428127
California voter registration o"ine and online—it’s all just a form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
15Chapter 1
The Design of Forms
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
16Chapter 1
The Design of Forms
The Impact of Form Design
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
17Chapter 1
The Design of Forms
FIGURE 1.7 http://www.flickr.com/photos/rosenfeldmedia/2366428239Where would online video sharing site YouTube be without the form that enables its customers to upload over 70,000 videos per day?
http://portal.acm.org/citation.cfm?id=986078&dl=portal&dl=AC
M
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
18Chapter 1
The Design of Forms
19Chapter 1
The Design of Forms
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
FIGURE 1.8 http://www.flickr.com/photos/rosenfeldmedia/2367264212In the eBay registration redesign, customer support, usability findings, and site tracking data were used to illustrate major issues. The entire flow was mapped out page by page with site click-through data that illustrated user drop-o! and best practice analysis.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
20Chapter 1
The Design of Forms
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
21Chapter 1
The Design of Forms
FIGURE 1.9 http://www.flickr.com/photos/rosenfeldmedia/2366440213Eye-tracking data from Matteo Penzo’s study of form label layouts published in UXmatters, July 2006, showing how people’s eyes move through a simple form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
22Chapter 1
The Design of Forms
FIG
UR
E 1
.10
ht
tp://
ww
w.fl
ickr
.com
/pho
tos/
rose
nfel
dmed
ia/2
3664
2337
7A
Web
con
vent
ions
sur
vey
of o
nlin
e ch
ecko
ut fo
rms
that
illu
min
ates
so
me
inte
rest
ing
patt
erns
we’
ll lo
ok a
t in
a la
ter
chap
ter.
Web
Fo
rm D
esi
gn
: Fill
ing
in
th
e B
lan
ks
by L
uke
Wro
ble
wsk
i R
ose
nfe
ld M
ed
ia, 2
00
8; v
ers
ion
1.0
23C
hap
ter
1T
he D
esi
gn
of
Fo
rms
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
24Chapter 1
The Design of Forms
Perspective: Jared SpoolFounding Principal, User Interface Engineering
Changing a Button Increased Annual Revenues for a Web Site by $300 Million
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
25Chapter 1
The Design of Forms
Perspective: Jared Spool (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
26Chapter 1
The Design of Forms
Perspective: Jared Spool (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
27Chapter 1
The Design of Forms
Design Considerations
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
28Chapter 1
The Design of Forms
Design Principles
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
29Chapter 1
The Design of Forms
Design Patterns
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
30Chapter 1
The Design of Forms
Form Organization
What to Include 32
Have a Conversation 37
Organizing Content 40
Group Distinctions 48
Best Practices 56
CHAPTER 2
31 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
32Chapter 2
Form Organization
What to Include
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
33Chapter 2
Form Organization
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
34Chapter 2
Form Organization
WHAT TO THINK ABOUT BEFORE YOU START
USERS REALLY DO CARE ABOUT WHAT THEY’RE ASKED AND WHY
Perspective: Caroline JarrettUsability consultant, E!ortmark Ltd. Co-author: Forms That Work (Morgan Kaufmann, in press) Co-author: User Interface Design and Evaluation (Morgan Kaufmann, 2005)
People Before Pixels
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
35Chapter 2
Form Organization
START BY THINKING ABOUT PEOPLE AND RELATIONSHIPS
KEEP, CUT, POSTPONE, OR EXPLAIN: FOUR STRATEGIES FOR BETTER QUESTIONS
Perspective: Caroline Jarrett (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
36Chapter 2
Form Organization
YOUR VIEW, MY VIEW: BALANCING USER AND BUSINESS NEEDS
Perspective: Caroline Jarrett (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
37Chapter 2
Form Organization
Have a Conversation
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
38Chapter 2
Form Organization
FIGURE 2.1Two ways conversational language can clarify questions. “Day” and “Year” vs. “dd” and “yyyy”; “Preferred content” vs. “I prefer content from.”
http://www.flickr.com/photos/rosenfeldmedia/2366424557
http://www.flickr.com/photos/rosenfeldmedia/2366424481
http://www.flickr.com/photos/rosenfeldmedia/2367260500
http://www.flickr.com/photos/rosenfeldmedia/2367260436
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
39Chapter 2
Form Organization
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
40Chapter 2
Form Organization
Organizing Content
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
41Chapter 2
Form Organization
FIGURE 2.2 http://www.flickr.com/photos/rosenfeldmedia/2367260580The new Yahoo! registration form uses a conversational tone to engage new members.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
42Chapter 2
Form Organization
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
43Chapter 2
Form Organization
FIGURE 2.3 http://www.flickr.com/photos/rosenfeldmedia/2366424765Redfin groups the myriad of steps required to purchase a home into a series of manageable content groups. Each section has a title and some also include a bit of descriptive text.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
44Chapter 2
Form Organization
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
45Chapter 2
Form Organization
46Chapter 2
Form Organization
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
FIG
UR
E 2
.4
http
://w
ww
.flic
kr.c
om/p
hoto
s/ro
senf
eldm
edia
/236
7260
748
In t
his
Web
con
vent
ions
sur
vey,
the
que
stio
ns a
sked
by
15
ecom
mer
ce c
heck
out
form
s ar
e or
gani
zed
by t
he W
eb p
age
on
whi
ch t
hey
appe
ar: p
age
1, pa
ge 2
, and
so
on.
Web
Fo
rm D
esi
gn
: Fill
ing
in
th
e B
lan
ks
by L
uke
Wro
ble
wsk
i R
ose
nfe
ld M
ed
ia, 2
00
8; v
ers
ion
1.0
47C
hap
ter
2F
orm
Org
an
izati
on
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
48Chapter 2
Form Organization
Group Distinctions
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
49Chapter 2
Form Organization
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
50Chapter 2
Form Organization
FIGURE 2.5 http://www.flickr.com/photos/rosenfeldmedia/2367260810Many distinct visual elements on this form get in the way of seeing the questions the form is asking.
FIGURE 2.6 http://www.flickr.com/photos/rosenfeldmedia/2366425019A subtle background color change or thin rule is often all you need to e!ectively group related content in a form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
51Chapter 2
Form Organization
http://tinyurl.
com/fefbx
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
52Chapter 2
Form Organization
FIGURE 2.7 http://www.flickr.com/photos/rosenfeldmedia/2366424971Although it may be tempting to use alternating background colors to group left-aligned labels and their corresponding inputs, these elements can add a lot of visual noise to a form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
53Chapter 2
Form Organization
FIGURE 2.8 http://www.flickr.com/photos/rosenfeldmedia/2366425057The addition of excessive visual elements can distract from a form’s primary content: and interrupt the scan line of a form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
54Chapter 2
Form Organization
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
55Chapter 2
Form Organization
FIGURE 2.9 http://www.flickr.com/photos/rosenfeldmedia/2367260984The eBay Express checkout form uses a thin rule to separate meaningful content sections. Just the minimum amount is needed to make a clear distinction.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
56Chapter 2
Form Organization
Best Practices
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
57Chapter 2
Form Organization
Best Practices (continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
58Chapter 2
Form Organization
Best Practices (continued)
CHAPTER 3
Path to Completion
Name That Form 60
Start Pages 62
Clear Scan Lines 64
Minimal Distractions 68
Progress Indicators 70
Tabbing 81
Best Practices 85
59 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
60Chapter 3
Path to Completion
Name That Form
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
61Chapter 3
Path to Completion
FIGURE 3.1top image: http://www.flickr.com/photos/rosenfeldmedia/2366425337 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366425317
Clicking on the Activate Account link from the Fairmont Hotels front page leads to a form titled “Manage Your Fairmont President’s Club Profile.” Are you in the right place?
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
62Chapter 3
Path to Completion
Start Pages
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
63Chapter 3
Path to Completion
FIGURE 3.2 http://www.flickr.com/photos/rosenfeldmedia/2366425401A start page on Fidelity lets you know what it takes to complete this form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
64Chapter 3
Path to Completion
Clear Scan Lines
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
65Chapter 3
Path to Completion
FIGURE 3.3 http://www.flickr.com/photos/rosenfeldmedia/2367261378A composite eye-tracking image (heat map) from Etre (www.etre.com) showing what people look at when filling in a simple Web form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
66Chapter 3
Path to Completion
FIGURE 3.4Although the top form design includes some meaningful distinctions between content, the bottom PayPal form provides a clear path to completion because people can simply follow a straight line down.
http://www.flickr.com/photos/rosenfeldmedia/2367261472
http://www.flickr.com/photos/rosenfeldmedia/2367261684
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
67Chapter 3
Path to Completion
FIGURE 3.5 http://www.flickr.com/photos/rosenfeldmedia/2366425847A well-paced flow between questions requires adequate spacing between questions.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
68Chapter 3
Path to Completion
Minimal Distractions
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
69Chapter 3
Path to Completion
FIGURE 3.6top image: http://www.flickr.com/photos/rosenfeldmedia/2367262208 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366425901
While Amazon.com may merchandise its categories and specials through its Web site, once you are in checkout, there are no frills.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
70Chapter 3
Path to Completion
Progress Indicators
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
71Chapter 3
Path to Completion
FIGURE 3.7 http://www.flickr.com/photos/rosenfeldmedia/2367262288Redfin provides multiple progress indicators that indicate scope, position, and status information.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
72Chapter 3
Path to Completion
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
73Chapter 3
Path to Completion
FIGURE 3.8top image: http://www.flickr.com/photos/rosenfeldmedia/2366426465 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366426505
Fidelity.com features a two-level progress bar letting you know where you are in the process of filling in a long form. However, it disappears on step one (login), which is not included in the list of steps required.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
74Chapter 3
Path to Completion
FIGURE 3.9 http://www.flickr.com/photos/rosenfeldmedia/2366426533The three steps promised by Half.com can easily become many more.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
75Chapter 3
Path to Completion
FIGURE 3.10 http://www.flickr.com/photos/rosenfeldmedia/2367261014Amazon does not promise any number of pages, just a high-level set of tasks.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
76Chapter 3
Path to Completion
Perspective: Peter WallackAccessibility Program Director, Oracle
Designing Accessible Forms
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
77Chapter 3
Path to Completion
Perspective: Peter Wallack (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
78Chapter 3
Path to Completion
!
!
!
!
Perspective: Peter Wallack (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
79Chapter 3
Path to Completion
Perspective: Peter Wallack (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
80Chapter 3
Path to Completion
Perspective: Peter Wallack (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
81Chapter 3
Path to Completion
Tabbing
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
82Chapter 3
Path to Completion
FIGURE 3.11 http://www.flickr.com/photos/rosenfeldmedia/2366425259Tabbing through inputs on the O#ce Depot registration form could result in a lot of page jumping when changing columns.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
83Chapter 3
Path to Completion
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
84Chapter 3
Path to Completion
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
85Chapter 3
Path to Completion
Best Practices
CHAPTER 4
Labels
Label Alignment 87
Top-Aligned Labels 89
Right-Aligned Labels 94
Left-Aligned Labels 96
Labels Within Inputs 99
Mixed Alignments 102
Best Practices 104
86 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
87Chapter 4
Labels
Label Alignment
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
88Chapter 4
Labels
FIGURE 4.1 http://www.flickr.com/photos/rosenfeldmedia/2367264644Left-, right-, or top-aligned labels?
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
89Chapter 4
Labels
Top-Aligned Labels
FIGURE 4.2 http://www.flickr.com/photos/rosenfeldmedia/2366428797Some of the pros and cons of top-aligned labels.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
90Chapter 4
Labels
FIGURE 4.3 http://www.flickr.com/photos/rosenfeldmedia/2367264712Top-aligned labels on Apple.com provide ample room to group related input fields horizontally.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
91Chapter 4
Labels
http://tinyurl.com/fefbx
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
92Chapter 4
Labels
FIGURE 4.4 http://www.flickr.com/photos/rosenfeldmedia/2367264762Eye-tracking data for top-aligned labels by Matteo Penzo.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
93Chapter 4
Labels
FIGURE 4.5 http://www.flickr.com/photos/rosenfeldmedia/2366428949The eBay Express checkout form is an example of a top-aligned layout.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
94Chapter 4
Labels
Right-Aligned Labels
FIGURE 4.6 http://www.flickr.com/photos/rosenfeldmedia/2366428975Some of the pros and cons of right-aligned labels.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
95Chapter 4
Labels
FIGURE 4.7 http://www.flickr.com/photos/rosenfeldmedia/2367264946Eye-tracking data for right-aligned labels by Matteo Penzo.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
96Chapter 4
Labels
FIGURE 4.8 http://www.flickr.com/photos/rosenfeldmedia/2366429101LinkedIn’s registration form is an example of a right-aligned layout.
Left-Aligned Labels
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
97Chapter 4
Labels
FIGURE 4.9 http://www.flickr.com/photos/rosenfeldmedia/2366429129Some of the pros and cons of left-aligned labels.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
98Chapter 4
Labels
FIGURE 4.10 http://www.flickr.com/photos/rosenfeldmedia/2367264266Eye-tracking data for left-aligned labels by Matteo Penzo.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
99Chapter 4
Labels
Labels Within Inputs
FIGURE 4.11 http://www.flickr.com/photos/rosenfeldmedia/2366428457This advanced settings dialog from AdConnections is an example of where left-aligned labels might make sense.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
100Chapter 4
Labels
FIGURE 4.12 http://www.flickr.com/photos/rosenfeldmedia/2367264348In this simple form, labels within input fields are displayed as gray text and include an ellipsis to distinguish them from data.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
101Chapter 4
Labels
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
102Chapter 4
Labels
Mixed Alignments
FIGURE 4.13 http://www.flickr.com/photos/rosenfeldmedia/2367264474Always ensure there is an obvious di!erence between labels and data. In this example, a set of dashes around a drop-down menu label distinguishes it from an actual answer.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
103Chapter 4
Labels
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
104Chapter 4
Labels
Best Practices
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
105Chapter 4
Labels
Best Practices (continued)
CHAPTER 5
Input Fields
Types of Input Fields 107
Field Lengths 116
Required Fields 119
Input Groups 131
Flexible Inputs 132
Best Practices 136
106 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
107Chapter 5
Input Fields
Types of Input Fields
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
108Chapter 5
Input Fields
TABLE 5.1: TYPES OF INPUT FIELDS
INPUT FIELD
DESCRIPTION
FIGURE 5.1 http://www.flickr.com/photos/rosenfeldmedia/2367265752The various types of input fields found in Web forms.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
109Chapter 5
Input Fields
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
110Chapter 5
Input Fields
Perspective: Bob BaxleyAuthor: Making the Web Work: Designing E!ective Web Applications
Selecting Form Elements
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
111Chapter 5
Input Fields
Perspective: Bob Baxley (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
112Chapter 5
Input Fields
Perspective: Bob Baxley (Continued)
http://www.flickr.com/photos/rosenfeldmedia/2405434961
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
113Chapter 5
Input Fields
Perspective: Bob Baxley (Continued)
http://www.flickr.com/photos/rosenfeldmedia/2406266586
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
114Chapter 5
Input Fields
Perspective: Bob Baxley (Continued)
http://www.flickr.com/photos/rosenfeldmedia/2405434787
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
115Chapter 5
Input Fields
Perspective: Bob Baxley (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
116Chapter 5
Input Fields
Field Lengths
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
117Chapter 5
Input Fields
FIGURE 5.2 http://www.flickr.com/photos/rosenfeldmedia/2367265712The di!erent text box lengths on this eBay Express form provide an a!ordance that helps people understand how to answer questions.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
118Chapter 5
Input Fields
FIGURE 5.3 http://www.flickr.com/photos/rosenfeldmedia/2367265798Macy’s opted for a consistent input length for primarily aesthetic reasons. However, this approach doesn’t capitalize on natural a!ordances that can help people provide answers.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
119Chapter 5
Input Fields
FIGURE 5.4 http://www.flickr.com/photos/rosenfeldmedia/2366429989Varying input sizes abound on this form from Tick.
Required Fields
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
120Chapter 5
Input Fields
FIGURE 5.5 http://www.flickr.com/photos/rosenfeldmedia/2367266030Asterisks on the Hogan sign-up form indicate optional fields! Not what most people would expect.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
121Chapter 5
Input Fields
FIGURE 5.6http://www.flickr.com/photos/
rosenfeldmedia/2367266066
Indicating optional or required fields next to input field labels.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
122Chapter 5
Input Fields
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
123Chapter 5
Input Fields
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
124Chapter 5
Input Fields
FIGURE 5.7 http://www.flickr.com/photos/rosenfeldmedia/2367266224On Macy’s every input is required and marked as such except for Middle Name and Attention. It may be clearer to simply mark these two fields as optional instead.
FIGURE 5.8 http://www.flickr.com/photos/rosenfeldmedia/2366430295On Wal-Mart, every input is required but one (Address Line 2). Instead of marking everything required, the one optional field has been clearly marked optional, thereby reducing the amount of information on the form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
125Chapter 5
Input Fields
FIGURE 5.9 http://www.flickr.com/photos/rosenfeldmedia/2366430463On Barnes & Noble’s Web site, all the input fields are required and marked as such —why?
FIGURE 5.10 http://www.flickr.com/photos/rosenfeldmedia/2367265092When Barnes & Noble redesigned its site, the company kept the asterisks that indicated every input field was required but removed the text that explained what the asterisk indicated.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
126Chapter 5
Input Fields
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
127Chapter 5
Input Fields
FIGURES 5.11 & 5.12Figure 5.11: http://www.flickr.com/photos/rosenfeldmedia/2366429475 Figure 5.12: http://www.flickr.com/photos/rosenfeldmedia/2366429295
Try to scan each of these forms to see what input fields are required. When indicators are aligned with input fields instead of labels, it’s much harder to get a sense of which questions must be answered.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
128Chapter 5
Input Fields
THE CORE OF A FORM IS AN INPUT
Perspective: Micah AlpernDirector of Social Search, Yahoo! Inc.
The Structural Design of Forms
http://www.flickr.com/photos/rosenfeldmedia/2406455722
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
129Chapter 5
Input Fields
GROUPING INPUTS
Perspective: Micah Alpern (Continued)
http://www.flickr.com/photos/rosenfeldmedia/2406455536
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
130Chapter 5
Input Fields
STRUCTURAL DESIGN
Perspective: Micah Alpern (Continued)
http://www.flickr.com/photos/rosenfeldmedia/2405624141
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
131Chapter 5
Input Fields
Input Groups
FIGURE 5.13 http://www.flickr.com/photos/rosenfeldmedia/2366429509The grouping of inputs on eBay’s Sell Your Item format represents a meaningful structure.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
132Chapter 5
Input Fields
Flexible Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
133Chapter 5
Input Fields
FIGURE 5.14 http://www.flickr.com/photos/rosenfeldmedia/2367265570Input fields can be made flexible enough to accept multiple formats of a valid answer.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
134Chapter 5
Input Fields
FIGURE 5.15 http://www.flickr.com/photos/rosenfeldmedia/2366429699A flexible input on the Renkoo invitation form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
135Chapter 5
Input Fields
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
136Chapter 5
Input Fields
Best Practices
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
137Chapter 5
Input Fields
Best Practices (continued)
CHAPTER 6
Actions
Primary and Secondary Actions 139
Placement 147
Actions in Progress 150
Agree and Submit 155
Best Practices 158
138 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
139Chapter 6
Actions
Primary and Secondary Actions
FIGURE 6.1 http://www.flickr.com/photos/rosenfeldmedia/2367266922Primary and secondary actions on a Web form can be represented in ways that illuminate their importance.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
140Chapter 6
Actions
FIGURE 6.2top image: http://www.flickr.com/photos/rosenfeldmedia/2366430857 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367266990
Even on very short forms like this one from eBay, secondary actions can be problematic. Which button would you have pressed? The redesign makes it much clearer.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
141Chapter 6
Actions
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
142Chapter 6
Actions
http://www.lukew.com/resources/articles/
PSactions.asp
FIGURE 6.3 http://www.flickr.com/photos/rosenfeldmedia/2367267022Various ways to distinguish primary and secondary actions include di!erent button styles, combinations of buttons and links, and di!erent links styles.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
143Chapter 6
Actions
FIGURE 6.4 http://www.flickr.com/photos/rosenfeldmedia/2366430953The set of primary and secondary action designs tested for this book.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
144Chapter 6
Actions
FIGURE 6.5 http://www.flickr.com/photos/rosenfeldmedia/2366431053Eye fixations from a single participant when both primary and secondary actions were visually identical. Image provided by Etre.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
145Chapter 6
Actions
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
146Chapter 6
Actions
FIGURE 6.6 http://www.flickr.com/photos/rosenfeldmedia/2366431173Eye fixations from a single participant when primary and secondary di!ered in color. Image provided by Etre.
FIGURE 6.7 http://www.flickr.com/photos/rosenfeldmedia/2366431201Color and shape distinctions like those on Wufoo.com can be used to distinguish primary and secondary actions, but red text should be reserved for errors.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
147Chapter 6
Actions
Placement
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
148Chapter 6
Actions
FIGURE 6.8 http://www.flickr.com/photos/rosenfeldmedia/2367267446Eye fixations from a single participant when primary and secondary were separated. Image provided by Etre.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
149Chapter 6
Actions
FIGURE 6.9 http://www.flickr.com/photos/rosenfeldmedia/2406455214Eye fixations from a single participant when primary and secondary actions were centered on the bottom of a form. Image provided by Etre.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
150Chapter 6
Actions
Actions in Progress
FIGURE 6.10 http://www.flickr.com/photos/rosenfeldmedia/2367266540Avoid excessive instructions that tell people not to press Submit more than once.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
151Chapter 6
Actions
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
152Chapter 6
Actions
FIGURE 6.11 top image: http://www.flickr.com/photos/rosenfeldmedia/2367266580 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367266640
Basecamp provides progress indicators for form submission and file uploads using animated images.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
153Chapter 6
Actions
FIGURE 6.12 http://www.flickr.com/photos/rosenfeldmedia/2366430625Basecamp’s sign-up form disables the Submit button until all inputs have valid answers.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
154Chapter 6
Actions
FIGURE 6.13left image: http://www.flickr.com/photos/rosenfeldmedia/2366430675 right image: http://www.flickr.com/photos/rosenfeldmedia/2367266804
The ibahn activation form doesn’t display a primary action until someone selects the radio button. Not only does this form obscure a path to completion by hiding the primary action, but it also incorrectly uses radio buttons, which should never appear alone (see Chapter 5).
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
155Chapter 6
Actions
Agree and Submit
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
156Chapter 6
Actions
FIGURE 6.14 http://www.flickr.com/photos/rosenfeldmedia/2367266830Common options for marketing materials and terms of service agreements.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
157Chapter 6
Actions
FIGURES 6.15 & 6.16top image: http://www.flickr.com/photos/rosenfeldmedia/2366430793 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367266892
Two approaches for combining terms of service agreement and form completion into a single action.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
158Chapter 6
Actions
Best Practices
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
159Chapter 6
Actions
Best Practices (continued)
CHAPTER 7
Help Text
When to Help 161
Automatic Inline Help 166
User-Activated Inline Help 173
User-Activated Section Help 178
Secure Transactions 182
Best Practices 184
160 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
161Chapter 7Help Text
When to Help
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
162Chapter 7Help Text
FIGURE 7.1 http://www.flickr.com/photos/rosenfeldmedia/2366431987On this eBay form, excessive help text makes a single choice seem overly complex. There are over 10 di!erent ways to get help picking one of three radio buttons.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
163Chapter 7Help Text
FIGURE 7.2 http://www.flickr.com/photos/rosenfeldmedia/2366432069The three paragraphs of instructional text on this Fairmont Hotels page are likely to get passed over by most people.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
164Chapter 7Help Text
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
165Chapter 7Help Text
FIGURE 7.3 http://www.flickr.com/photos/rosenfeldmedia/2367268274On videoegg’s sign-up form, the minimum amount of help text required is used to help people answer questions.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
166Chapter 7Help Text
Automatic Inline Help
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
167Chapter 7Help Text
FIGURE 7.4 http://www.flickr.com/photos/rosenfeldmedia/2367268378On Wufoo, help text is automatically shown as people engage with input fields.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
168Chapter 7Help Text
FIGURE 7.5 http://www.flickr.com/photos/rosenfeldmedia/2366432243Here is an alternate presentation style for inline help text on Form Assembly.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
169Chapter 7Help Text
FIGURE 7.6 http://www.flickr.com/photos/rosenfeldmedia/2367268468SnapTax automatically reveals help text for related groups of input fields.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
170Chapter 7Help Text
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
171Chapter 7Help Text
FIGURE 7.7 http://www.flickr.com/photos/rosenfeldmedia/2367268488Help text within an input field on LinkedIn.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
172Chapter 7Help Text
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
173Chapter 7Help Text
User-Activated Inline Help
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
174Chapter 7Help Text
FIGURE 7.8 top image: http://www.flickr.com/photos/rosenfeldmedia/2367268550 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367268502
Juicy Studios’ user-activated in-line help system inserts help text within a form pushing everything down the page. This type of page “jumping” may disorient people as they complete a form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
175Chapter 7Help Text
FIGURE 7.9 http://www.flickr.com/photos/rosenfeldmedia/2367268622Wells Fargo uses a small window to reveal help text when people click on each input label.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
176Chapter 7Help Text
FIGURE 7.10 http://www.flickr.com/photos/rosenfeldmedia/2366431361Help text accessed with a mouse rollover can obscure input fields as seen in this sample form QLC.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
177Chapter 7Help Text
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
178Chapter 7Help Text
User-Activated Section Help
FIGURE 7.11 http://www.flickr.com/photos/rosenfeldmedia/2366431391Though many symbols have been used to represent help, the question mark icon continues to be the most recognizable.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
179Chapter 7Help Text
FIGURE 7.12 http://www.flickr.com/photos/rosenfeldmedia/2366431549Charles Schwab uses a new Web browser window to show large amounts of help text, including this chart.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
180Chapter 7Help Text
FIGURE 7.13 top image: http://www.flickr.com/photos/rosenfeldmedia/2366431643 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367267888
Vizu’s help section displays help text relevant to the active input fields within a consistent location on the form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
181Chapter 7Help Text
FIGURE 7.14 http://www.flickr.com/photos/rosenfeldmedia/2367267948eBay’s Sell Your Item Help panel can be turned on and o! at any time.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
182Chapter 7Help Text
Secure Transactions
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
183Chapter 7Help Text
FIGURE 7.15 top image: http://www.flickr.com/photos/rosenfeldmedia/2366431843 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367268014
Various ways of verifying a secure transaction.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
184Chapter 7Help Text
Best Practices
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
185Chapter 7Help Text
Best Practices (continued)
CHAPTER 8
Errors and Success
Errors 187
Success 205
No Dead Ends 211
Best Practices 212
186 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
187Chapter 8
Errors and Success
Errors
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
188Chapter 8
Errors and Success
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
189Chapter 8
Errors and Success
FIGURE 8.1 http://www.flickr.com/photos/rosenfeldmedia/2367269100Where’s the error on this Fairmont Hotels form?
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
190Chapter 8
Errors and Success
FIGURE 8.2 http://www.flickr.com/photos/rosenfeldmedia/2367269324A redesigned version of the Fairmont Hotels error page makes it much clearer that there is an error preventing people from continuing.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
191Chapter 8
Errors and Success
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
192Chapter 8
Errors and Success
FIGURE 8.3 http://www.flickr.com/photos/rosenfeldmedia/2367269388This error message lacks a title that associates it with an input field, is di#cult to read because of the centered, bold font, and has to be remembered when dismissed. Not a very e!ective way to remedy errors.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
193Chapter 8
Errors and Success
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
194Chapter 8
Errors and Success
FIGURE 8.4 http://www.flickr.com/photos/rosenfeldmedia/2367269446Several options for indicating errors with “double visual emphasis.”
HOW MANY TYPES OF MESSAGES?
Perspective: James Re!ellDirector, Search User Experience, Yahoo! Inc.
Fun with Messages
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
195Chapter 8
Errors and Success
ERROR MESSAGES
Perspective: James Re!ell (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
196Chapter 8
Errors and Success
SUCCESS MESSAGES
ANY OTHER KIND OF MESSAGES
HOW TO BUILD GREAT MESSAGES
Perspective: James Re!ell (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
197Chapter 8
Errors and Success
Perspective: James Re!ell (Continued)
http://www.flickr.com/photos/rosenfeldmedia/2405623933
left image: http://www.flickr.com/photos/rosenfeldmedia/2405623883 center image: http://www.flickr.com/photos/rosenfeldmedia/2405623863 right image: http://www.flickr.com/photos/rosenfeldmedia/2405623849
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
198Chapter 8
Errors and Success
WHEN TO BREAK THE RULES
Perspective: James Re!ell (Continued)
http://www.flickr.com/photos/rosenfeldmedia/2405623841
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
199Chapter 8
Errors and Success
FIGURE 8.5 http://www.flickr.com/photos/rosenfeldmedia/2366433263A clear message and ways to resolve multiple input errors on eBay.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
200Chapter 8
Errors and Success
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
201Chapter 8
Errors and Success
FIGURE 8.6 http://www.flickr.com/photos/rosenfeldmedia/2367269674On long forms, such as this one from QLC, a prominent error message and double visual emphasis on invalid input fields helps people quickly notice and remedy errors.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
202Chapter 8
Errors and Success
FIGURE 8.7 http://www.flickr.com/photos/rosenfeldmedia/2367269736A single prominent message lets people know an error happened on Jotspot Live. Though how to resolve it isn’t as clear.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
203Chapter 8
Errors and Success
FIGURE 8.8 http://www.flickr.com/photos/rosenfeldmedia/2366433543Boingo’s error message blends in with its surroundings and, as a result, can be hard to notice.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
204Chapter 8
Errors and Success
FIGURE 8.9 http://www.flickr.com/photos/rosenfeldmedia/2366433591On this short form, Wufoo does not utilize a top-level message and instead embeds instructions on how to remedy each error with each input field. Distinguishing the label from remedy instructions (right now both are bold) could help make these errors easier to scan.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
205Chapter 8
Errors and Success
Success
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
206Chapter 8
Errors and Success
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
207Chapter 8
Errors and Success
FIGURE 8.10 http://www.flickr.com/photos/rosenfeldmedia/2367268672Pownce uses a short success message that does not get in the way of further action and clearly explains the result of people’s actions.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
208Chapter 8
Errors and Success
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
209Chapter 8
Errors and Success
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
210Chapter 8
Errors and Success
FIGURE 8.11top left: http://www.flickr.com/photos/rosenfeldmedia/2366432541 bottom left: http://www.flickr.com/photos/rosenfeldmedia/2367268816 top right: http://www.flickr.com/photos/rosenfeldmedia/2366432665 bottom right: http://www.flickr.com/photos/rosenfeldmedia/2366432725
When you are adding a new message to Basecamp, a fading background color around your addition lets you know you have been successful.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
211Chapter 8
Errors and Success
No Dead Ends
FIGURE 8.12 http://www.flickr.com/photos/rosenfeldmedia/2367269044After you have connected with someone on the professional networking site LinkedIn, the success page provides several relevant next steps.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
212Chapter 8
Errors and Success
Best Practices
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
213Chapter 8
Errors and Success
Best Practices (continued)
CHAPTER 9
Inline Validation
Confirmation 215
Suggestions 225
Limits 228
Best Practices 230
214 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
215Chapter 9
Inline Validation
Confirmation
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
216Chapter 9
Inline Validation
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
217Chapter 9
Inline Validation
FIGURE 9.1top image: http://www.flickr.com/photos/rosenfeldmedia/2367269906 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366433731
In the Boingo sign-up form, people bounce back and forth trying to guess a valid username.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
218Chapter 9
Inline Validation
FIGURE 9.2top image: http://www.flickr.com/photos/rosenfeldmedia/2366433755 middle image: http://www.flickr.com/photos/rosenfeldmedia/2366433789 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367270044
The Newsvine sign-up form uses inline validation to get people to an appropriate display name quickly and without pogo-sticking between error states.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
219Chapter 9
Inline Validation
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
220Chapter 9
Inline Validation
FIGURE 9.3top image: http://www.flickr.com/photos/rosenfeldmedia/2367270092 middle image: http://www.flickr.com/photos/rosenfeldmedia/2366433889 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366433919
On eBay Express, a progress bar indicates how secure your password is in real time.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
221Chapter 9
Inline Validation
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
222Chapter 9
Inline Validation
FIGURE 9.4top image: http://www.flickr.com/photos/rosenfeldmedia/2366433981 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366433951
Lastfm.com uses inline validation on almost every input field in its sign-up form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
223Chapter 9
Inline Validation
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
224Chapter 9
Inline Validation
FIGURE 9.5top image: http://www.flickr.com/photos/rosenfeldmedia/2367270240 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366434047
Mint’s registration form interrupts people when they are answering questions with immediate error messages.
FIGURE 9.6 http://www.flickr.com/photos/rosenfeldmedia/2366434095Yahoo!’s registration form only validates an answer once someone has indicated he or she is done by moving to the next input field.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
225Chapter 9
Inline Validation
Suggestions
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
226Chapter 9
Inline Validation
FIGURE 9.7top image: http://www.flickr.com/photos/rosenfeldmedia/2367270442 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366434187
Kayak.com uses inline suggestions to help people provide valid answers for travel destinations.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
227Chapter 9
Inline Validation
FIGURE 9.8 http://www.flickr.com/photos/rosenfeldmedia/2366434297Yahoo!’s registration form provides a series of valid usernames based on your name.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
228Chapter 9
Inline Validation
Limits
FIGURE 9.9top image: http://www.flickr.com/photos/rosenfeldmedia/2367270528 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367270552
Inline validation can be used to communicate limits, such as the number of characters that can be included in this message on Yahoo! Local.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
229Chapter 9
Inline Validation
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
230Chapter 9
Inline Validation
Best Practices
CHAPTER 10
Unnecessary Inputs
Removing Questions 232
Smart Defaults 239
Personalized Defaults 246
Best Practices 248
231 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
232Chapter 10
Unnecessary Inputs
Removing Questions
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
233Chapter 10
Unnecessary Inputs
FIGURE 10.1 http://www.flickr.com/photos/rosenfeldmedia/2367270680eBay’s old registration form asked a number of questions that tripped up potential customers.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
234Chapter 10
Unnecessary Inputs
FIGURE 10.2 http://www.flickr.com/photos/rosenfeldmedia/2367270722This PayPal form asks people to select the type of credit card they are using to make a purchase. Is that necessary?
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
235Chapter 10
Unnecessary Inputs
FIGURE 10.3 http://www.flickr.com/photos/rosenfeldmedia/2367270740The redesigned PayPal form eliminates an unnecessary question by highlighting the type of credit card being used.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
236Chapter 10
Unnecessary Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
237Chapter 10
Unnecessary Inputs
FIGURE 10.4top image: http://www.flickr.com/photos/rosenfeldmedia/2366434677 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367270962
Weber’s checkout form tries to eliminate questions, but potentially ends up complicating the form more.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
238Chapter 10
Unnecessary Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
239Chapter 10
Unnecessary Inputs
Smart Defaults
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
240Chapter 10
Unnecessary Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
241Chapter 10
Unnecessary Inputs
FIGURE 10.5 http://www.flickr.com/photos/rosenfeldmedia/2366434777Smart defaults on the eBay “sell your item” form include answers for shipping service, insurance, and sales tax.
FIGURE 10.6 http://www.flickr.com/photos/rosenfeldmedia/2367271034This form defaults people into showing their real name and getting marketing materials from the site and third parties.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
242Chapter 10
Unnecessary Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
243Chapter 10
Unnecessary Inputs
FIGURE 10.7 http://www.flickr.com/photos/rosenfeldmedia/2366434835A set of radio buttons without an initially selected option on Redfin.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
244Chapter 10
Unnecessary Inputs
FIGURE 10.8 top image: http://www.flickr.com/photos/rosenfeldmedia/2366434865 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367271104
What’s the right default state for gender?
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
245Chapter 10
Unnecessary Inputs
FIGURE 10.9top image: http://www.flickr.com/photos/rosenfeldmedia/2366434913 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366434933
Let’s not assume we can guess everyone’s birth date.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
246Chapter 10
Unnecessary Inputs
Personalized Defaults
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
247Chapter 10
Unnecessary Inputs
FIGURE 10.10left image: http://www.flickr.com/photos/rosenfeldmedia/2367270636 right image: http://www.flickr.com/photos/rosenfeldmedia/2366434375
Smart defaults for travel options on the Expedia site, based on previous usage.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
248Chapter 10
Unnecessary Inputs
Best Practices
CHAPTER 11
Additional Inputs
Inline Additions 250
Overlays 254
Progressive Engagement 265
Best Practices 269
249 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
250Chapter 11
Additional Inputs
Inline Additions
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
251Chapter 11
Additional Inputs
FIGURE 11.1 http://www.flickr.com/photos/rosenfeldmedia/2366435241Adding a varying number of managers to a form doesn’t have to trip up people with only one manager.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
252Chapter 11
Additional Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
253Chapter 11
Additional Inputs
FIGURES 11.2 & 11.3Figure 11.2 http://www.flickr.com/photos/rosenfeldmedia/2367271520 Figure 11.3 http://www.flickr.com/photos/rosenfeldmedia/2366435381
Exposing additional inline options in Basecamp is triggered by well-labeled links.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
254Chapter 11
Additional Inputs
Overlays
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
255Chapter 11
Additional Inputs
FIGURE 11.4 http://www.flickr.com/photos/rosenfeldmedia/2366435399The date picker on Kayak is an example of an overlay that provides quick access to a lot of options.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
256Chapter 11
Additional Inputs
FIGURE 11.5 http://www.flickr.com/photos/rosenfeldmedia/2366435435Only one month’s worth of dates shows up in the Orbitz date selector.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
257Chapter 11
Additional Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
258Chapter 11
Additional Inputs
FIGURE 11.6 http://www.flickr.com/photos/rosenfeldmedia/2366435537Older iterations of the Expedia date picker featured an explicit action to bring up a calendar overlay.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
259Chapter 11
Additional Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
260Chapter 11
Additional Inputs
FIGURE 11.7top image: http://www.flickr.com/photos/rosenfeldmedia/2367271814 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367271858
The advanced notification preferences on the Renkoo profile form are displayed in a modal dialog window.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
261Chapter 11
Additional Inputs
FIGURE 11.8 http://www.flickr.com/photos/rosenfeldmedia/2366435721A modal overlay in eBay’s “Sell your Item” form lets people add or remove questions on the form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
262Chapter 11
Additional Inputs
Perspective: Jack Mo!ettInteraction Designer, Inmedius Inc. Adjunct Professor, West Virginia University
A Case Study of Explosive Ordnance Disposal
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
263Chapter 11
Additional Inputs
Perspective: Jack Mo!ett (Continued)
http://www.flickr.com/photos/rosenfeldmedia/2405623743
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
264Chapter 11
Additional Inputs
Perspective: Jack Mo!ett (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
265Chapter 11
Additional Inputs
Progressive Engagement
FIGURE 11.9top image: http://www.flickr.com/photos/rosenfeldmedia/2366435751 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367271976
Two ways of selecting a category for your video on YouTube.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
266Chapter 11
Additional Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
267Chapter 11
Additional Inputs
FIGURE 11.10top image: http://www.flickr.com/photos/rosenfeldmedia/2367271246 middle image: http://www.flickr.com/photos/rosenfeldmedia/2366435115 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367271374
A fun category selector on Renkoo.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
268Chapter 11
Additional Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
269Chapter 11
Additional Inputs
Best Practices
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
270Chapter 11
Additional Inputs
Best Practices (continued)
CHAPTER 12
Selection- Dependent Inputs
Page-Level Selection 276
Horizontal Tabs 279
Vertical Tabs 282
Drop-Down List 285
Expose Below Radio Buttons 287
Expose Within Radio Buttons 290
Exposed Inactive 292
Exposed Groups 295
Best Practices 299
271 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
272Chapter 12
Selection-Dependent Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
273Chapter 12
Selection-Dependent Inputs
FIGURE 12.1top image: http://www.flickr.com/photos/rosenfeldmedia/2366436465 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367272584
A simple selection-dependent input on Found Bin displays follow-up questions based on someone’s initial selection.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
274Chapter 12
Selection-Dependent Inputs
FIGURE 12.2top image: http://www.flickr.com/photos/rosenfeldmedia/2367272730 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367272832
Selection-dependent inputs on eBay’s download request page bring up a series of follow-up questions based on an initial response.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
275Chapter 12
Selection-Dependent Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
276Chapter 12
Selection-Dependent Inputs
Page-Level Selection
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
277Chapter 12
Selection-Dependent Inputs
FIGURE 12.3top image: http://www.flickr.com/photos/rosenfeldmedia/2366436649 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367272932
Page level selection-dependent inputs place follow-up questions on a separate Web page from the initial choice.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
278Chapter 12
Selection-Dependent Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
279Chapter 12
Selection-Dependent Inputs
Horizontal Tabs
FIGURE 12.4top image: http://www.flickr.com/photos/rosenfeldmedia/2366436711 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367272994
Horizontal tab selection-dependent inputs reveal follow-up questions when people click on each tab.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
280Chapter 12
Selection-Dependent Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
281Chapter 12
Selection-Dependent Inputs
FIGURE 12.5 http://www.flickr.com/photos/rosenfeldmedia/2367274164A heat map of people’s eye fixations on horizontal tab selection-dependent inputs reveals how this form is parsed visually. Image provided by Etre.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
282Chapter 12
Selection-Dependent Inputs
Vertical Tabs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
283Chapter 12
Selection-Dependent Inputs
FIGURE 12.6top image: http://www.flickr.com/photos/rosenfeldmedia/2366438013 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366438077
Vertical tab selection-dependent inputs reveal follow-up questions to the right of an initial selection.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
284Chapter 12
Selection-Dependent Inputs
FIGURE 12.7 http://www.flickr.com/photos/rosenfeldmedia/2366438237People’s eyes don’t have to travel far between initial options and additional inputs in vertical tab selection-dependent inputs. Image provided by Etre.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
285Chapter 12
Selection-Dependent Inputs
Drop-Down List
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
286Chapter 12
Selection-Dependent Inputs
FIGURE 12.8 http://www.flickr.com/photos/rosenfeldmedia/2367274446Drop-down list selection-dependent inputs allow people to select follow-up questions from a potentially long list of initial options without requiring a lot of screen real estate.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
287Chapter 12
Selection-Dependent Inputs
Expose Below Radio Buttons
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
288Chapter 12
Selection-Dependent Inputs
FIGURE 12.9top image: http://www.flickr.com/photos/rosenfeldmedia/2366438293 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366438361
Exposed below selection-dependent inputs surface follow-up questions in a consistent location below an initial set of questions.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
289Chapter 12
Selection-Dependent Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
290Chapter 12
Selection-Dependent Inputs
Expose Within Radio Buttons
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
291Chapter 12
Selection-Dependent Inputs
FIGURE 12.10top image: http://www.flickr.com/photos/rosenfeldmedia/2367272016 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367272050
Exposed within selection-dependent inputs surface follow-up questions directly below each initial choice.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
292Chapter 12
Selection-Dependent Inputs
Exposed Inactive
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
293Chapter 12
Selection-Dependent Inputs
FIGURE 12.11 http://www.flickr.com/photos/rosenfeldmedia/2367272100Exposed inactive selection-dependent inputs show all follow-up questions in an inactive state when not selected.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
294Chapter 12
Selection-Dependent Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
295Chapter 12
Selection-Dependent Inputs
Exposed Groups
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
296Chapter 12
Selection-Dependent Inputs
FIGURE 12.12 http://www.flickr.com/photos/rosenfeldmedia/2367272206Exposed groups of selection-dependent inputs show all follow-up questions in addition to an initial set of choices.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
297Chapter 12
Selection-Dependent Inputs
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
298Chapter 12
Selection-Dependent Inputs
FIGURE 12.13 http://www.flickr.com/photos/rosenfeldmedia/2367272560Exposed groups of selection-dependent inputs resulted in a lot of eye fixations. Image provided by Etre.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
299Chapter 12
Selection-Dependent Inputs
Best Practices
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
300Chapter 12
Selection-Dependent Inputs
Best Practices (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
301Chapter 12
Selection-Dependent Inputs
Best Practices (Continued)
CHAPTER 13
Gradual Engagement
Signing Up 303
Getting Engaged 306
Best Practices 316
302 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
303Chapter 13
Gradual Engagement
Signing Up
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
304Chapter 13
Gradual Engagement
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
305Chapter 13
Gradual Engagement
FIGURE 13.1 http://www.flickr.com/photos/rosenfeldmedia/2366438491A sign-up form greets new customers at Google Video.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
306Chapter 13
Gradual Engagement
Getting Engaged
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
307Chapter 13
Gradual Engagement
FIGURE 13.2top left image: http://www.flickr.com/photos/rosenfeldmedia/2366438917 bottom left image: http://www.flickr.com/photos/rosenfeldmedia/2367275200 top right image: http://www.flickr.com/photos/rosenfeldmedia/2366439049 bottom right image: http://www.flickr.com/photos/rosenfeldmedia/2367275452
The process of adding a video to Jumpcut introduces you to the services the site provides, namely online video editing.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
308Chapter 13
Gradual Engagement
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
309Chapter 13
Gradual Engagement
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
310Chapter 13
Gradual Engagement
FIGURE 13.3top image: http://www.flickr.com/photos/rosenfeldmedia/2367275524 middle image: http://www.flickr.com/photos/rosenfeldmedia/2366439355 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2366439381
Geni’s process of creating a family tree contains no explicit registration forms and gets people acquainted with Geni’s service right away.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
311Chapter 13
Gradual Engagement
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
312Chapter 13
Gradual Engagement
FIGURE 13.4top left image: http://www.flickr.com/photos/rosenfeldmedia/2366439499 bottom left image: http://www.flickr.com/photos/rosenfeldmedia/2367275802 top right image: http://www.flickr.com/photos/rosenfeldmedia/2367275864 bottom right image: http://www.flickr.com/photos/rosenfeldmedia/2367276000
Using TripIt starts by forwarding a travel confirmation email—not with a sign-up form.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
313Chapter 13
Gradual Engagement
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
314Chapter 13
Gradual Engagement
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
315Chapter 13
Gradual Engagement
FIGURE 13.5top image: http://www.flickr.com/photos/rosenfeldmedia/2366439793 middle image: http://www.flickr.com/photos/rosenfeldmedia/2367276076 bottom image: http://www.flickr.com/photos/rosenfeldmedia/2367276188
Fidelity’s myplan form divides a series of input into stand-alone slider interactions.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
316Chapter 13
Gradual Engagement
Best Practices
CHAPTER 14
What’s Next?
The Disappearing Form 318
The Changing Form 321
Getting It Built 329
317 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
318Chapter 14
What’s Next?
The Disappearing Form
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
319Chapter 14
What’s Next?
http://www.themindcanvas.com/
FIGURE 14.1 http://www.flickr.com/photos/rosenfeldmedia/2367276242Game-like elicitation methods in the Mind Canvas research tool.
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
320Chapter 14
What’s Next?
http://en.wikipedia.org/wiki/Windows_Live_ID
http://www.openid.net
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
321Chapter 14
What’s Next?
The Changing Form
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
322Chapter 14
What’s Next?
http://
tinyurl.com/25akke
FIGURE 14.2 http://www.flickr.com/photos/rosenfeldmedia/2367276428Microsoft’s O#ce menu hides options when you don’t use them frequently.
323Chapter 14
What’s Next?
STEP 1: LET THE FREAK FLAGS FLY!
Perspective: Aaron GustafsonPrincipal, Easy! Designs, LLC Contributing Author: Accelerated DOM Scripting with Ajax, APIs, and Libraries Member, Web Standards Project (WaSP)
Zen and the Art of HTML Forms
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
324Chapter 14
What’s Next?
STEP 2: FIND THE INNER MEANING.
STEP 3: BREAK DOWN THE MARKUP.
Perspective: Aaron Gustafson (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
325Chapter 14
What’s Next?
PUTTING IT ALL TOGETHER
<form ...>
<ol>
<li>What is your favorite fruit?</li>
...
</ol>
</form>
Perspective: Aaron Gustafson (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
326Chapter 14
What’s Next?
...
<li>
<fieldset>
<legend>What is your favorite fruit?</legend>
<ul>
<li>strawberries</li>
...
</ul>
</fieldset>
</li>
...
...
<li><label><input type=“radio” name=“fruit”
value=“strawberries” /> strawberries</label></li>
...
Perspective: Aaron Gustafson (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
327Chapter 14
What’s Next?
BUT WHAT ABOUT DESIGN?
label {
display: block;
}
form li {
margin-bottom: .5em;
}
Perspective: Aaron Gustafson (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
328Chapter 14
What’s Next?
label {
display: block;
float: left;
width: 40%;
}
form li {
clear: both;
margin-bottom: .5em;
}
Perspective: Aaron Gustafson (Continued)
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
329Chapter 14
What’s Next?
Getting It Built
http://wufoo.com/
http://www.formassembly.com/
http://www.w3.org/MarkUp/Forms/
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
330Chapter 14
What’s Next?
Index
331 Enter code WFDDE for 10% o! any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
332Index
A
321
7676
309
32087
158
211147
139150
116155
87102
128
5168
7579
208119166
B50 52123
209252
152153
110
10729
26985
104316
184230
136212
56
248
299203
216
32815
C254
14058
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
333Index
179109
1776
14750 52
7878
193
77
92
98129
155215
7740
4828
1394937
235328
2520
D
192 204
101
195 239246 321
177
30329
28
76
6852
285 300109 114
195166
E
240
18 19 232
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
334Index
273261
181
131199
955 93
116
2205 15
46196
25303
31679
187 194212
188
192195
187198
65 276246
247
262
287295
292
290
281
144 146148
6721
297
91 95 9864
284
F4
190112
21573
314325
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
335Index
20
2579
79329
2716
5110
76318
323128
68
4260
232
321
7267
128272 275
G
319319
308140
304303
308 318147
295129 131
323
H
166184
166162
238
177176
170173
178
170161174
295279 299
285176
323
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
336Index
I2 150
319154
257197
177
76
292
80
126
262250
166173
230215
219
228
269215
239128
228
265225
11387
13638
195
110132129 131
17099
116122119
81107
J33 34
201173
174306
K
255225
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
337Index
7679
L325
32787
8756 104
3899
5178
102
90
222
8051 88 96123325116
171 172211
78109
325320
26324
M
117124
196155
45
208
196
320322
320
262319
223259
260192
26279
113
N60
76218
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
338Index
116
O2 319
82320
15532
122233
256254
P276 299
254 301
42
239129
25219
65234
91
95 98246
133147
303
71
207 208139
151154
150
14213
1570
151152
73265
Q201
177
24832
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
339Index
232
R108 114
242287290
147238
7142
243194
25129
35
266134
259
25
126140
4588 94
176
S139
72
64
239
71139
142141
182
272299
285
287295
292
290279
276282
30320
169158
6724
62
71 72246
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
340Index
34139
187 196205
213211
225
T
84155
81 112
285279 299
282 29978
108 113
80
6078
88 89182
311183
53
U258
7818
173178
215
17076
303
31915
320319
V215230
219
228183
282 299285165
5249
18012
245
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
341Index
W124
7613
7722
23 46 57236
24175
323
329330
170 329167
X330
Y
22841
224 22717
265
Z236
ACKNOWLEDGMENTS
342Acknowledgments
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
343Acknowledgments
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
ABOUT THE AUTHOR
344About the Author
Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0
345About the Author
W E B F O R M D E S I G N Filling in the Blanks
b y L U K E W R OBL E W S K I foreword by Jared Spool
Forms make or break the most crucial online interactions: checkout,
registration, and any task requiring information entry. In Web Form
Design, Luke Wroblewski draws on original research, his considerable
experience at Yahoo! and eBay, and the perspectives of many of the
field’s leading designers to show you everything you need to know about
designing effective and engaging web forms.
“Luke Wroblewski has done the entire world a great favor by writing this book. With deft explanations and clear examples, he presents a clear case for better Web forms and how to achieve them. This book will help you every day.”
ALAN COOPER ChairmanCooper
“If I could only send a copy of Web Form Design to the designer of every web form that’s frustrated me, I’d go bankrupt from the shipping charges alone. Please. Stop the pain. Read this book now.”
ERIC MEYERAuthor of CSS: The Definitive Guidemeyerweb.com
“Luke’s book is by far the most practical, comprehensive, data-driven guide for solving form design challenges. It is an essential reference that will become a must-read for many years.”
IRENE AUDirector, User ExperienceGoogle
www.rosenfeldmedia.com
MORE ON WEB FORM DESIGNwww.rosenfeldmedia.com/books/webforms/
WE
B FO
RM
DE
SIGN
by LUK
E WR
OB
LEWSK
I