Web Form Design

Filling in the Blanks

By Luke Wroblewski

  • Ebooks only
  • Web Form Design Cover
  • Forms make or break the most crucial online interactions: checkout (commerce), registration (community), data input (participation and sharing), 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. Online forms are ubiquitous and ubiquitously annoying but they don’t have to be. Wroblewski shows Web designers how to present forms that gather necessary information without unnecessarily badgering and annoying visitors. 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; author, The Inmates are Running the Asylum

    Illustrations View all on Flickr

    • WFD000a:  Front Cover
    • WFD000b:  Back Cover
    • WFD001: Figure 1.1
    • WFD002: Figure 1.2a
    • WFD003: Figure 1.2b
    • WFD004: Figure 1.3a
    • WFD005: Figure 1.3b
    • WFD006: Figure 1.4

    Web Form Design Blog View all Blog posts

    Table of Contents

    • Chapter 1: The 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
    • 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?

    FAQ

    We’ve identified some common questions about web form design. The short answers are provided here; and longer ones are available, of course, in the book.

    1. Why does Web form design matter?
      Forms enable commerce, communities, and productivity on the Web to thrive. If you are in online retail, your goal is to sell things. But standing in the way of your products and your customers is a checkout form. If you are developing social software, your goal is to grow your community. Standing in 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.
    2. 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 of the inputs for a database. When you approach forms as a conversation, natural breaks will emerge between topics. When these distinct topics are short enough to fit into a few sections, a single Web page will probably work best to organize them. When each section begins to run long, multiple Web pages may be required to break up the conversation into meaningful, understandable topics.
    3. If my form spans several Web pages, do I tell people what page they’re on?
      When the questions that need to be answered before a Web form is complete are spread across multiple Web pages, you may want to include an overview of the number of Web pages involved (scope), an indication of what page you are on (position), and a way to save and return to your progress (status). Though closely integrated, these three progress indicators perform different functions.
    4. Should I top-, right-, or left-align the labels for input fields?
      When you are trying to reduce completion times or if you need flexible label lengths for localization, consider top-aligned labels. When you have similar goals but vertical screen real estate constraints, consider right-aligned labels. When your form requires people to scan labels to learn what’s required or to answer a few specific questions out of many, consider left-aligned labels.
    5. How are smart defaults used in Web forms?
      Smart defaults can help people answer questions by putting default selections in place that serve the interests of most people. There are many opportunities within Web forms to utilize the power of smart defaults to reduce the number of choices people have to make and thereby expedite form completion.
    6. When should I include help text on my forms?
      You should consider adding help text when: forms ask for unfamiliar data; people question why they are being asked for specific data; people may be concerned about the security or privacy of their data; there are recommended ways of providing data; and certain data fields are optional or required when the bulk of the form is not.
    7. How should I indicate required input fields?
      If most of the inputs on a form are required, indicate the few that are optional. If most of the inputs on a form are optional, indicate the few that are required. When indicating what form fields are either required or optional, text is the most clear. However, the * symbol is relatively well understood to mean required.
    8. What’s the difference between a primary and secondary action?
      Actions such as Submit, Save, or Continue are intended to enable completion, which is the primary goal of just about anyone who has started filling in a form. As a result, they are often referred to as primary actions. Secondary actions, on the other hand, tend to be less utilized.

    Excerpts

    • Chapter 1 (PDF)

    Foreword

    I’m sorry to break this to you, but your life is about to change.

    I know this because of a study we conducted years ago when we had the opportunity to observe Master Cabinetmakers. What does building kitchen cabinets have to do with designing forms in an online application? Let me explain…

    The purpose of our study was to look at the difference between those who do mediocre work and those whose work is excellent. We picked a variety of trades to study, where we could find people who were true masters. We wanted to see the differences between the masters’ work and those of people whose skills weren’t as refined.

    This brought us to cabinetmakers. Cabinetry is a very old craft, and the people who master it are amazing in their talents and skills. They can create something that is both useful and beautiful. The best are aware their products are only a piece of the overall décor and know how to blend their results perfectly into the surrounding experience. After all, when we’re in the kitchen, it’s about the cooking and the family interaction—not about eternal admiration of the dovetail joints holding the utensils in place.

    One of the biggest takeaways from our research was the carpenters’ extreme attention to detail. Even though each person we interviewed had years of experience, nothing was taken for granted. Every hinge and joint was finely crafted, almost as if it were the most important element in their entire career. The pride they took in the final cabinet was the sum of the pride they took in each individual element.

    Cabinetmakers aren’t the only folks who behave this way. So are the master craftsmen of our own field, like Luke Wroblewski. In this book, Luke applies that same loving attention to detail to the design of Web forms. Like the cabinetmakers, his masterwork is both useful and beautiful. But unlike many craftsmen, Luke is willing to share his secrets outside the guildhall.

    You are about to learn the secret element of making great forms and, once you start applying this knowledge, you’ll also realize that the perfection of the online experience comes from the sum of the perfect form elements and flows that go into it.

    This is what will change your life: the new appreciation of how subtlety and nuance in form design can have dramatic overall effects on the total online experience (and your bottom line). And, once you learn to control those subtleties and nuances, you, too, will be a master of your craft.

    As I said, your life is about to change. It starts right … now!

    Jared M. Spool
    Founding Principal, User Interface Engineering

    Acknowledgments

    Though countless Web designers, developers, and their forms inspired and influenced the content in this book, there was a particular sequence of events that made the book itself possible.

    Step one was the eBay Platform design team—Jamie Hoover, Micah Alpern, James Reffell, and Larry Cornett—who showed me the power of subtle design choices in Web forms. Their work and insights built the groundwork for how and why I think about form design. And three of them took their time to review this book in its early stages—thanks guys.

    Step two came from Joshua Porter, Jared Spool, and Christine Perfetti at User Interface Engineering (UIE) who believed I could present a session about form design at their Web App Summit in January of 2007. This was the spark that led me to take what I knew about Web form design and turn it into something that could be shared with others.

    Step three was Liz Danzico and Lou Rosenfeld at Rosenfeld Media believing that we had the makings of a book on our hands and bringing in Marta Justak and Susan Honeywell to help make it happen through top-notch editing and design. Simon Griffin, Paul Schwartfeger, Dan Griffin and colleagues at Etre Ltd. in London (www.etre.com) rounded out this fantastic team with original eye-tracking and usability research just for this book.

    Along the way, the comments and questions from bloggers, conference attendees, mailing lists, fellow designers, researchers, and developers stewed big thoughts and added the insights that made this book what it is today. Although I lack the room to list everyone, I would like to highlight the work of Matteo Penzo, Caroline Jarrett, Bob Baxley, and Aaron Gustafson in spreading the good form design gospel.

    Of course, none of these pieces would have fit into place if it weren’t for the continual support (and patience) of my wife Amanda. Thanks for letting a Web geek type away late into the night….

    Testimonials

    Luke Wroblewski has done the entire world a great favor by writing this book. Online forms are ubiquitous and ubiquitously annoying but they don’t have to be. Wroblewski shows Web designers how to present forms that gather necessary information without unnecessarily badgering and annoying visitors. 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; author, The Inmates are Running the Asylum

    If I could only send a copy of Web Form Design Best Practices 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 (meyerweb.com), author of CSS: The Definitive Guide

    Luke’s book is by far the most practical, comprehensive, data-driven guide for solving form design challenges that plague every interface designer. It is an essential reference that will become a must-read for many years

    Irene Au, Director of User Experience, Google

    Form design has historically been an afterthought, a partial chapter in past web design primers. Thankfully, we now have Luke’s indispensable best practices in print. This book will now sit on my desk whenever I’m designing an application.

    Dan Cederholm, Principal, SimpleBits; author of Bulletproof Web Design

    Through really clear examples and succinct best practices, Luke brings joy to designing forms. I love this book and will be adding it to my list of “must haves.”

    Bill Scott, Director UI Engineering, Netflix; former Yahoo! Ajax Evangelist

    Luke’s book is a concrete, practical roadmap for making the guts of any web product or service work better. He has made thinking about forms fun—and more important, he has put the user front and center in his approach. This is great stuff!

    Michael Dearing, Consulting Associate Professor, d.school Stanford University; former SVP and General Manager, eBay.com

    It’s about web forms, but, more broadly, it is a lesson in how to think about web design. It should be on every web designer’s frequent-reference bookshelf after a cover-to-cover read.

    Larry Tesler, SVP, User Experience and Design, Yahoo! Inc.

    Luke has become the foremost expert on form design in the design industry and has now put together all his thoughts in an easy to use book. This is a must read book for anyone making forms online.

    Preston Smalley, Director, Interaction Design, eBay Inc.

    I just wanted to say that the book is fantastic! It’s very refreshing to see a book with very practical advice for both novice and seasoned designers.

    Daniela Jorge, Director, User Experience at Intuit