How to design a highly usable form with the help of a good book

One of the most useful books I’ve read in the past few years is Web Form Design by Luke Wroblewski. The reason I like this book so much is simple: when I’m working on a big form project or reviewing someone else’s work, it’s very easy to grab the book and flip through the best practices at the end of each chapter, using it as a rubric, as well as a source of much-needed inspiration. 

Over time, though, I realized that rather than dig out my ebook, I could just create a checklist that I could use to prompt me on some pivotal issues. The actual explanation of what you should do and why, of course, is in Luke W’s book. Which you should buy it. Right now. I’m not kidding. Anyway, his book has examples of high-quality patterns and the research to back to it up so you don’t look foolish when you are questioned about why you are recommending a certain label alignment over another, or why you chose those smart defaults. So, to the checklist…

High-Level Form Organization

Does the form need a start page?

  • The form needs room to explain need, purpose, and incentive, if any.

  • The form requires specific information that should be compiled or found before starting. (Example, tax returns and bank statements)

  • The form requires an investment of time. Warn the user. (Example, long surveys)

Should the form be broken into multiple pages?

  • Does the form contain a lengthy amount of question groups that are relatively independent of each other?

  • Can you ask optional questions after a form is completed?

  • Is the form a good candidate for progress indicators?

Have you considered gradual engagement for sign up and registration?

Questions & Form Inputs

  • Have you grouped questions/fields by types (contact, billing info, etc.)?

  • Have you eliminated unnecessary questions/form fields?

  • Have you clearly identified optional or required fields, using a label for whichever is in the minority?

  • Are labels in natural/plain language and consistently formatted?

  • Can you top align labels? If not, can you right align? If mobile, have you top-aligned labels?

  • Do the field lengths provide meaningful affordances? (Example, a ZIP code field for the U.S. should be 5 characters long, not 27.)

  • Have you set smart defaults?

  • Are there any areas of the form that could be enhanced by hiding irrelevant form controls/using progressive disclosure?

Buttons

  • Are your primary actions, such as save or register buttons, aligned with input fields?

  • Can you remove secondary actions like clear and reset?

  • If you use secondary actions, are they visually distinct from the primary action?

  • Can users undo secondary actions if accidentally clicked?

Help Text, Error Messages, and Success Pages

  • Do you need that help text? Is it clear and concise? Any input limits or restrictions? (Example, password must contain XYZ.)

  • Are error messages clearly communicated by both a top-level message and a contextual message near the affected field?

  • Have you considered in-line validation for questions/fields with high error rates or specific formatting requirements?

  • Have you clearly communicated the successful completion of the form? And it's not a dead end, right? 

user experience designJulie Young