Five ways to finesse your web forms

Posted by on Mar 10, 2010 in User Experience | No Comments

As an active Web user, you most likely fill out several forms online every day, at a minimum. Forms are how we interact online, and they’re very much a part of our personal and professional lives, like it or not.

So why, as ubiquitous as they are, do so many Web forms leave us feeling frustrated? Why do so many users abandon  a form before they’re finished filling it out? Why does Luke Wroblewski, the man who literally wrote the book on Web form design and usability, feel like he has the right to stand up in front of several hundred Web designers (as he did at An Event Apart in San Francisco last December) and tell us that our forms “look like a poo storm?”

Forms are everywhere, and most of them are ineffective at best, downright unusable at worst. Even veteran Web users struggle to fill them out sometimes. Wroblewski explains the convoluted process that often turns the horse into a hobbled camel: regardless of who initially designs the form, marketing, sales, and IT all have a stake in what it inevitably becomes, each adding their own touches and requirements to it. And often nobody is minding the store to make sure the final form achieves its primary goal: getting users to complete it.

Here are some tips – from Wroblewski’s AEA presentation as well as a couple of my own — for the next time you have to manage the design of a Web form:

  1. Resist the urge to ask for every last detail. It’s understandable why it happens. The rare opportunity to get prospects to turn over information about themselves gets your salespeople and marketing teams salivating. But do you really need to ask for a person’s fax number? How about street address? What’s the least amount of information you can collect at this moment? People are more likely to fill out the form if they don’t have to labor over it. Consider each field and requested piece of information carefully before including it. And don’t forget to tell users how you’re planning to use the data, Wroblewski says — people won’t give you an email address or phone number if you’re planning to sell it to someone else or spam them repeatedly.
  2. Think linearly. How does the user’s eyes move through the form? Chances are, they do not naturally jump back and forth between side-by-side fields. Users tend to scan down the left side of the page, so your form should be designed accordingly, Wroblewski says. If you do need to jump around, use strong visual cues to draw users’ eyes to where you want them to go next. And by all means, avoid placing the “Clear All” button where users expect the “Submit” button to be — the biggest faux pas of Web form design is to stick a button in a user’s natural flow that will wipe out all of their hard work instead of rewarding them. It’s quite possible they’ll be so disgusted that they won’t bother filling the form out again after that.
  3. Don’t break with convention. Because we fill out so many of these things, we’ve all become very accustomed to the design standards of Web forms. Occasionally a talented interaction designer finds a way to tighten up space and give a form a truly unique look that also functions well. But often those who set out to build a better mousetrap fail in their attempts. Certain conventions work, so stick with them. For example, a trend is to place the field labels inside the fields. Designers also try placing them to the right or left, or underneath the field. But Wroblewski says studies show that users complete a form 10 times faster when the labels are placed above the field. Smart, thoughtful design is always welcome, but it’s not always necessary to innovate when a convention works perfectly.
  4. Treat the form as a holistic experience. Users get to the form from someplace, and when they finish the form they expect to be taken someplace else. People who create forms sometimes forget this, and focus more on the form itself than on the entire user flow. When sending the user to the form, be careful to only make promises based on reality — let users know what to expect and exactly what they will get from filling out the form. If using a multiple-part form, consider using a progress indicator, and make sure it’s accurate. (Wroblewski uses Fidelity.com as an example of a four-step progress indicator bar that misleads users by failing to mention the requirement to create an account in the middle of filling out the form, a major disruption in the flow.) And by all means spend as much time considering the confirmation page and process as you do the actual form. Users want to know they were successful, and want to be able to do something next as an immediate reward for their efforts.
  5. Use a writer. I’ve known some IT people who were great with words. Designers too. But much of the time, forms need content help. Instructions, labels and buttons often don’t communicate clearly what exactly users should do. Calls to action are unclear or nonexistent. And the opportunity to provide context-based help (such as pop-ups explaining what the information is for or why the company is requesting it) is often overlooked. An experienced Web writer can help you see the form from the user’s point of view and craft language that will make your form successful.

Leave a Reply