Forms are a staple of the online experience. We use them daily for a host of activities from signing in/up, purchasing something, asking a question, to downloading a document. They come in all sizes, layouts, and configurations. Some are better executed than others and ultimately, impact our businesses adversely if their designs and usability are impaired. So, how do we ensure that in creating web forms, we get them right? I am speaking with Luke Wroblewski, Senior Principal at Yahoo! and author of a new book “Web Form Design: Filling in the Blanks”.

Q: First off, congratulations on the book. Help us understand, why does the design of web forms matter?
A: As you mentioned, forms are a core element of the online experience. Anywhere organizations are asking their customers to input information, Web forms are there: at the point of checkout in e-commerce; at the point of conversation in social applications; and at the point of data entry in productivity applications. Because actions like transactions in ecommerce, discussions in social sites, and data entry everywhere matter - forms matter. In these crucial flows, even small improvements in Web forms can make a big impact.

In my book, Jared Spool of User Interface Engineering shares a story where redesigning a two-field form resulted in an increase of $300 million in annual revenue for an online retailer. With returns like that possible, it’s no wonder form design matters.

Q: Users generally dislike completing forms. How can designers improve the user experience of the form completion process? What are some of the elements that should be taken into consideration in designing them?
A: The long answer is a lot of elements need to be considered: input field affordances, label layout, required indicators, inline validation, paths to completion, error and success messaging, start pages, content groupings, primary actions, additional inputs, smart defaults, personalized defaults, and the list goes on. So let me instead answer this by highlighting some of the broader areas to address in form design: form structure, form elements, and form interactions.

Form structure is the organization of the questions a form is going to ask people. Getting to the right set of questions requires designers to think of their forms as conversations instead of as interrogations. What is going to make people feel comfortable enough to respond to every question being asked? Are we asking questions in a logical order? Are there any questions we can remove or defer?

Too often, forms are simply laid out without a lot of thought given to the actual questions being asked. While form layout can aid comprehension and completion, the structure of a form can have a much bigger impact and is often not given enough consideration.

Form elements are the user interface components we use to ask and allow people to answer questions. This includes labels, inputs like radio buttons, text fields, checkboxes, and drop-down menus, actions, and messaging like help text and errors. Selecting the right combination of form elements requires an understanding of the advantages and disadvantages of each. Luckily, there’s a bevy of research that can help designers go from the quintessential answer of “it depends” to actionable solutions.

Form interactions are the behaviors that support and expedite form completion. Considerations like inline validation -that helps confirm correct answers, suggest options for correct answers, or help people stay within necessary limits for their answers- and additional inputs -that give people the opportunity to answer more detailed questions when they need to- are just a few examples of behaviors that can be taken into consideration.

Q: What is the biggest mistake you see designers making with the design of forms?
A: As I mentioned when discussing form organization earlier, one of the biggest mistakes Web designers and developers make is thinking about Web form design as a layout problem: “how will I arrange these labels & input fields on the screen?” You need to go deeper than that when designing forms and consider when, where, and how people encounter forms and design accordingly.

Another common problem I see a lot is designers forgetting that people want what is on the other side of a form. They want to buy something, they want to vote, or they want to make their voice heard. The form is just standing in their way. As a result, forms need to be designed in a way that makes it explicitly clear how to get through them quickly and easily. That means no distractions, concise questions, clear ways to respond, and a laser-like focus on completion. Let people get to the good stuff! They’ll love you for it.

Q: In your book, you mention the concept of ‘gradual engagement’. Would you explain what this is?
A: Gradual engagement is an alternative to the all too common sign-up form. I’m sure you’ve encountered your fair share. You come across a new Web service and the first thing you need to do is fill out a registration form. As a new customer experience, that sucks.

Through gradual engagement, we can communicate what Web services do and why people should care by allowing them to actually interact with the application in gradual ways. Have a Web application? Let me start using it before I need to fill in a registration form. Allow me to learn why it’s great before I commit to being a customer.

As an example, we can look at Genia Web service that allows anyone to set up a family tree and share it with family and friends. What’s the first thing potential customers need to do when they arrive at Geni? Fill out a registration form? Nope, they make a family tree. After all, that’s what’s Geni is for. Their approach to gradual engagement has given the service five million profiles in five months!

Q: One of the outcomes of Web 2.0 technologies on the form creation process is the ability to create dynamic forms with fancy features and options. What has been the impact of Web 2.0 technology on form design?
A: Ajax development allows us to get information back from a Web server without executing a full Web page refresh. As a result, we can do things like validate an answer someone has entered in real time or make suggestions for valid answers directly on the form.

We can also surface information and inputs in a dynamic manner – revealing only what people need when they need it. In some of the eye-tracking and usability testing we did for the book, we saw that hiding irrelevant form controls from people until they need them results in forms that are easy on the eyes and completed quite quickly. Ajax can certainly help with that!

Q: There is no formal standardization for the design of web forms. Some argue that there should be to ensure consistency across the Web and improve the user experience. What are your thoughts on this? Should forms be standardized and should they even be made cookie cutter?
A: Well I guess it depends on whether or not you believe there is a perfect Web form layout that works in all contexts. Frankly, I’m not so sure. For starters this comes back to the point I made earlier that many people assume form design is just finding a good layout for a set of questions people have to answer. Hence the belief a cookie cutter solution could work. But let’s even take the simple question of how to align labels in a form.

Testing has shown top-aligned labels cut down completion times and can boost completion rates. But other options still have their place. For example, left-aligned labels - though they required more than twice the amount of time to complete in testing- allow people to easily scan a list of labels and find the one they need when only one or two fields have to be updated. In this use case, left-aligned works best. In many other cases, speed is of the essence and top-aligned hits the mark. So which alignment should be the standard?

In just about every aspect of form design the right answer depends on the problem you are trying to solve. This is why I gravitate toward best practices that give people a way to think through a situation and find an appropriate solution instead of enforcing standards.

Now could some user interface standards help by creating consistency? Sure, but we’d have to really think through what made sense across many different contexts.

Q: How do you see the future of web form creation evolving and manifesting itself?
A: Personally, I hope to see Web forms subsumed into the natural flow of goals people are trying to achieve online instead of being stand alone Web pages that act as roadblocks to these goals. In some cases, this will mean solutions that manage information sharing for people. In other cases, it will mean questions tightly integrated within natural ways of getting things done. So it doesn’t feel like there’s a form there at all! Gradual engagement, which we talked about before, is a great approach to moving in this direction.

Q: Are the practices in your book being implemented at Yahoo :)?
A: Of course! I’m advocating more every day as well. In all seriousness, we’ll be releasing a set of Web form solutions on our public design patterns site soon that incorporates a lot of what’s in the book and what we have learned running hundreds of usability tests over the years.

Q: Any other books on the way?
A: Two is enough for now but you never know!

Thanks, Luke! The book also covers a host of great topics such as the path to completion, form labeling, input fields, actions, help text, errors and success, inline validation, and more. As a special offer for WebGuild readers, you can get a 10% discount off the purchase price of a digital (or print) copy of the book at http://rosenfeldmedia.com using promo code “WEBGUILD”.