Web Form Design: Filling in the Blanks

374 Pages·2008·15.99 MB·English

by  Luke Wroblewski

Forms make or break the most crucial online interactions: checkout, W
E
registration, and any task requiring information entry. In Web Form B

F
Design, Luke Wroblewski draws on original research, his considerable O
R
M
experience at Yahoo! and eBay, and the perspectives of many of the

D
E
field’s leading designers to show you everything you need to know about
S
I
G
designing effective and engaging web forms.
N

b
y

“Luke Wroblewski has done the entire world a great favor by writing this book. With deft explanations L
U
and clear examples, he presents a clear case for better Web forms and how to achieve them. This K
E
book will help you every day.”
W
ALAN COOPER R
O
Chairman
B
Cooper L
E
W
“If I could only send a copy of Web Form Design to the designer of every web form that’s frustrated S
K
me, I’d go bankrupt from the shipping charges alone. Please. Stop the pain. Read this book now.”
I
ERIC MEYER
Author of CSS: The Definitive Guide
meyerweb.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 Au
Director, user Experience
Google
WEB FORM DESIGN
www.rosenfeldmedia.com
Filling in the Blanks
MORE ON WEB FORM DESIGN
by LUKE WROBLEWSKI foreword by Jared Spool
www.rosenfeldmedia.com/books/webforms/
Thank you for purchasing the digital edition of
Web Form Design: Filling in the Blanks!
You might note that the book’s images are
not always as crisp as would be ideal. There
are literally hundreds of images in this book,
and incorporating them at a higher resolution
would result in a file size that would be far too
large to download. That’s why we’ve made
each image available via Flickr. Just click on
the image or its Flickr URL, and you’ll launch
a crisper, more readable version of that image.
Although not an ideal work-around, we do
hope it makes for a better, more usable reading
experience. Please contact me with your
questions and suggestions; thank you!
Louis Rosenfeld, Publisher
Rosenfeld Media
[email protected]
Download at Boykma.Com
Web Form Design
Filling in the blanks
by: Luke Wroblewski
Rosenfeld Media
Brooklyn, New York
Enter code WFDDE for 10% off any Rosenfeld Media product directly
purchased from our site: http://rosenfeldmedia.com
Download at Boykma.Com
table oF contents
How to Use This Book x
Who should read this book? xi
What’s in the book? xii
What comes with the book? xv
Frequently Asked Questions xviii
Foreword xxiii
Form structure
ChaptER 1
The Design of Forms 1
Form Design matters 5
the impact of Form Design 16
Design considerations 27
ChaptER 2
Form Organization 31
What to include 32
have a conversation 37
organizing content 40
group Distinctions 48
best Practices 56
ii
table of contents
Download at Boykma.Com
table oF contents
ChaptER 3
Path to Completion 59
name that Form 60
start Pages 62
clear scan lines 64
minimal Distractions 68
Progress indicators 70
tabbing 81
best Practices 85
Form elements
ChaptER 4
Labels 86
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
ChaptER 5
Input Fields 106
types of input Fields 107
Field lengths 116
required Fields 119
iii
table of contents
Download at Boykma.Com
table oF contents
input groups 131
Flexible inputs 132
best Practices 136
ChaptER 6
Actions 138
Primary and secondary actions 139
Placement 147
actions in Progress 150
agree and submit 155
best Practices 158
ChaptER 7
Help Text 160
When 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 186
errors 187
success 205
no Dead ends 211
best Practices 212
iv
table of contents
Download at Boykma.Com
table oF contents
Form interaction
ChaptER 9
Inline Validation 214
confirmation 215
suggestions 225
limits 228
best Practices 230
ChaptER 10
Unnecessary Inputs 231
removing Questions 232
smart Defaults 239
Personalized Defaults 246
best Practices 248
ChaptER 11
Additional Inputs 249
inline additions 250
overlays 254
Progressive engagement 265
best Practices 269
v
table of contents
Download at Boykma.Com
table oF contents
ChaptER 12
Selection-Dependent Inputs 271
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
ChaptER 13
Gradual Engagement 302
signing Up 303
getting engaged 306
best Practices 316
ChaptER 14
What’s Next? 317
the Disappearing Form 318
the changing Form 321
getting it built 329
vi
table of contents
Download at Boykma.Com
table oF contents
Index 331
Acknowledgments 342
About the Author 344
vii
table of contents
Download at Boykma.Com
Web Form Design: Filling in the Blanks
By Luke Wroblewski
Rosenfeld Media, LLC
705 Carroll Street, #2L
Brooklyn, New York
11215 USA
On the web: www.rosenfeldmedia.com
Please send errors to: [email protected]
Publisher: Louis Rosenfeld
Editor/Production Editor: Marta Justak
Interior Layout: Susan Honeywell
Cover Design: The Heads of State
Indexer: Nancy Guenther
Proofreader: Chuck Hutchinson
© 2008 Rosenfeld Media, LLC
All Rights Reserved
ISBN: 1-933820-25-X
ISBN-13: 978-1-933820-25-5
Library of Congress Control Number: 2008923241
Printed and bound in the United States of America
Download at Boykma.Com