Project Management

Create user-friendly Web forms

How do you keep users interested in completing a long Web form? Here's a sure-fire two-step process.

This article originally appeared as a Design and Usability Tactics e-newsletter.

By Jim Kukral

If it's true that the average human spends one third of his or her life waiting in line, then the average Web user probably spends one third of his or her Internet experience filling out Web forms—or trying to, at least.

That's why it's our job to design forms that are easy to understand and, most importantly, complete. After all, if users stop halfway through a form, the goal of getting users to complete the Web form fails—and so do we.

So how do you keep a user interested in completing a Web form, especially when the form is extremely long? The following two-step process is a sure-fire way to help you get the most out of your Web forms.

Step 1: Determining the goal and value

Assess what value the outcome of the task will provide to your organization and the user. If there's little or no value, why should you build it, and why should users take the time to fill out the form? Once you determine that both parties would benefit, start thinking about what to put in the Web form.

The key is don't get greedy. Many organizations believe that you must have excessive amounts of information flowing to them from the users. In reality, smaller, more targeted chunks of information are more useful. Also, users don't want to provide more information than they think the organization should have (i.e., don't give the impression that you're prying).

In other words, tread lightly when you consider what you're going to ask users. Ultimately, if your organization can't glean any information from users, not only do you not get any value from the Web form, but you also risk tarnishing the brand image you've worked hard to build.

Step 2: Providing incentives for completion

The user must feel that the value or outcome outweighs the cost (or time) of having to fill out the form. Therefore, unless you provide users with something of value in return, the chances diminish that the user will finish the task.

Incentives can be whatever you're willing to provide. Here are examples of possible incentives:

  • Give away a gift certificate for some of your products in return for the user's contact information.
  • Provide the user a chance for entry into a sweepstakes or other type of contest.
  • Offer a free download of some expert content or information pertinent to the business at hand.

Construct a usable online form

Once you pinpoint why the particular Web form is necessary and why users will be willing to fill it out, it's time to focus on constructing a usable online form that virtually anyone can understand, as well as finish.

Even for short forms, we can't just put an input box on the screen with a Sign Up or Register button and expect the user to know what to do. We also cannot assume that users will know what everything means, or exactly where to put their answers. History has shown this is true (think: Florida and the butterfly ballot).

When you design your Web form, take into consideration the following six steps to help ensure users will complete the form.

Make sure the form requires no scrolling

First, present your Web form in a space on the screen that the user can see without scrolling. This space should be directly within the main content area of your Web site, as it's the primary piece of information on the page.

Be upfront about the form's length

Figure out the length of the form. At this stage, the worst mistake you can make is to create a gigantic one-page form. Instead, pre-determine how many questions or inputs you're going to produce, and then break the form into smaller steps.

From the beginning, let the users know how many steps the form will entail, and then continue to show them how far they have to go with each new step in the process.

Clearly identify fields, buttons, and boxes

Every field, button, or box must be clearly labeled and associated with its proper function. For instance, use bold to signify the input designations (e.g., First Name), and always display errors using red type. (Do not make the user search for the error.)

Utilize a table layout

To ensure that your form lines up, you should employ a simple HTML table layout. Adjust the cell padding or cell spacing to create space variances between all fields and to adjust to your taste.


<form>
<table border="0" width="100%" cellpadding=4 cellspacing=2>
  <tr>
    <td width="50%" align=right valign=top><b>First Name:</b></td>
    <td width="50%" align=left valign=top><input type="text" name="First_Name" size="20"></td>
  </tr>
  <tr>
    <td width="50%" align=right valign=top><b>Email Address:</b></td>
    <td width="50%" align=left valign=top><input type="text" name="Email_Address"
 size="20"></td>
  </tr>
</table>
</form>

Retain prefilled user information

One of the most annoying parts about filling out an online form is experiencing an error, and then seeing that all of the information you previously input has vanished.

Asking a user to completely reenter his or her information is a touchy subject. The best course of action is to make sure your programming team carries the user's information from step-to-step automatically.

Give a big thank you

Last but not least, you should provide each user with a confirmation or thank you page upon the completion of each form. This page will offer users a sense of accomplishment and make them feel that you realize their time is important.

By working within these guidelines, you should be able to design Web forms that provide you and your users with enough value to make it worth everyone's while.

Jim Kukral has spent the last seven years working in the trenches of Web design, development, and usability for Fortune 500 clients as well as mom-and-pop companies.

Editor's Picks