Tuesday, December 4, 2007

Build better Web forms with these eight user interface tips

Overview: Web forms are an excellent way to gather and exchange information with your Web site's users, especially when that exchange is part of an e-commerce transaction. However, a Web form that users don't complete is a waste of everyone's time. These eight interface-enhancing tips, originally published in TechRepublic's Design and Usability Tactics newsletter, will help you gain maximum value from your Web forms and the users they serve.

1: Determine 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.

2: Provide 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.
Before even building a Web form, you should determine what you hope to accomplish with the form and then decide what incentive you'll provide to users in order to entice them to complete the 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).

3: 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.

4: 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.

5: 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.)

6: Use 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.
For example:


7: Retain pre-filled-in 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.

8: 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.



AddThis Feed Button

No comments: