W E B F ORM DE S I GN Filling in the Blanks by LUKE WROBLEWSK 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 Chairman Cooper “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 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 www.rosenfeldmedia.com MORE ON WEB FORM DESIGN www.rosenfeldmedia.com/books/webforms/ W E B F OR M D E S I G N by LUKE WROBLEWSK I WEB FORM DESIGN FILLING IN THE BLANKS by: Luke Wroblewski Rosenfeld Media Brooklyn, New York Enter code WFDDE for 10% o any Rosenfeld Media product directly purchased from our site: http://rosenfeldmedia.com Download from Library of Wow! eBook www.wowebook.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 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 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 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 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 TABLE OF CONTENTS Index 331 Acknowledgments 342 About the Author 344 vii Table of Contents TABLE OF CONTENTS 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: errata@rosenfeldmedia.com 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 For everyone who has had to ll in a form. [...]... with the Book? This book’s companion Web site ( http:// www.rosenfeldmedia.com/books/ webforms) contains pointers to useful Web form design articles that I’ve found and I’ve also written It includes a calendar of my upcoming talks, and a place for you to engage in discussion with others interested in Web form design We expect to post information on new Web form design- related resources xv How to Use... customers can complete your forms And that’s where this book will help Who Should Read this Book? Web Form Design: Filling in the Blanks is truly for anyone who needs to design or develop xi How to Use this Book How to Use this Book Web forms—and who doesn’t? Whatever type of designer you are—usability engineer, Web developer, product manager, visual designer, interaction designer, or information architect—... things they want Forms suck We should design accordingly Figure 1.1 http://www.flickr.com/photos/rosenfeldmedia/2366423465 The registration form for Facebook, a very popular social networking service Almost half of this form is devoted to a security check! Chapter 1 The Design of Forms Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0 Form Design Matters Though... right design solutions for your forms, the content within each chapter explains the what, when, and why that informs each best practice Section One, Form Structure,” begins with an overview of why form design matters and the principles behind good form design The remaining chapters provide a set of best practices for organizing forms and focusing people on their primary goal of completing a form xiii... tags or discrepancies of cost, and bids you “good day” (see Figure 1.2) Chapter 1 The Design of Forms Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0 Photograph by Andrew Walsh http://www.flickr.com/photos/radiofree/150535853 Chapter 1 The Design of Forms Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0 Figure... of the form for example, about the things they’d get or be empowered to do All this illustrates why our primary goal when designing forms needs to be getting people through them quickly and easily Or better yet, making them invisible in a way that gets Chapter 1 The Design of Forms Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0 organizations the information... the insights and best practices for Web form design I’ve accumulated through 12 years of designing Web experiences Wherever possible, I’ve xii How to Use this Book How to Use this Book conducted or referenced research to better understand the impact of Web form design decisions Where no research was available, I’ve called on my own experiences and those of other designers and developers Just about... between you and community members is a form If you’ve built a productivity-based Web application, forms enable key interactions that let people create and manage content See page 5 for more information How should I organize my Web form within one Web page or across several? Who is filling the form in and why? Answering this up front allows us to think about our forms as a deliberate conversation instead... information I need,” and that request shows up in front of people as a form 1 Lou Carbone introduced me to the terms “inside out” and “outside in” to describe how companies think about their services in a talk at MIX07: http://www.lukew.com/ff/entry asp?532 Chapter 1 The Design of Forms Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0 For example, a Web. .. The Design of Forms Web Form Design: Filling in the Blanks by Luke Wroblewski Rosenfeld Media, 2008; version 1.0 Figure 1.3 top 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 Chapter 1 The Design of Forms . better Web forms and how to achieve them. This book will help you every day.” ALAN COOPER Chairman Cooper “If I could only send a copy of Web Form Design to the designer of every web form that’s. Experience Google www.rosenfeldmedia.com MORE ON WEB FORM DESIGN www.rosenfeldmedia.com/books/webforms/ W E B F OR M D E S I G N by LUKE WROBLEWSK I WEB FORM DESIGN FILLING IN THE BLANKS by: Luke Wroblewski Rosenfeld. 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