Better Web Forms

Have a Plan

The first step to a better Web form is to understand thoroughly what the form’s purpose is. A good plan and solid goals are a must when designing a form. The form should be discussed in detail by all concerned parties. The developer should sit down and gather details with those who are going to be handling the form as well as potential users of the form if possible.

Some good information to identify:

• What is the basic function of the form.
• Who will be using the form.
• What information is absolutely necessary to gain from the form and what information is optional.
• What are the back end or business processes behind the form.
• Potential areas for confusion.

Be realistic in these discussions, ask tough questions. There are cases where putting a form up on the Web might be making a process more complicated, thus making the form a waste of time and a scenario for failure. Once you have a good plan and a good idea of what this form will be, it will be time to flesh the form out.

Make some cuts

A short form is a good form. The shorter and more simple you can keep it, the more likely a user is to fill it out properly. If possible cut fields from the form, and whatever you do, don’t duplicate fields. The key here is to make sure the form is only collecting information that will be used. If you don’t need an address, don’t ask for one and never ask for something twice.

Try to break the form up into manageable pieces. This can be done a number of ways. You can break a large form with multiple functions into several forms, or a large single-purpose form into multiple pages. At the least, if you have a one page form, group fields into related sections.

Be Clear

Do whatever you can to help the person filling out your form. Mark required fields clearly and if possible validate those fields for the correct format, etc. When in doubt, explain what you are looking for. If you have a section where you want to collect information about a person’s job — say that explicitly so that you get a job related phone number for example.

For potentially confusing parts of the form, have help. It’s ok to have some explanation, as long as it’s brief and will help the user complete the form, as well as cut down on errors and improperly filled out forms.

Speaking of errors, make sure an explain in detail what has gone wrong when a form doesn’t validate or for any reason encounters an error. Contingency design is very important in forms, and too often done poorly. Many times a user is left hanging if proper error messages aren’t displayed. If you are looking for a phone number in a specific format, for example, and your validate kicks an error that doesn’t explain what that format is, you are going to have one confused user.

One more thing on errors. Never, and I mean never, clear valid fields when making a user go back and fix an improperly filled out field. In addition, it’s good to make sure these “bad” fields are easy to locate and fix. Remember to explain them if there could be confusion.

Lastly, a clearly worded confirmation message is a must. This lets the user know the form has been accepted and they are done. This should be made a high priority in any form process and is often overlooked.

The Details

Below is a list of some general things that can be done to make a form more usable. These should be taken with a grain of salt, they will be helpful in general, but not a submitted for good planning and goals for a form. As always, make sure to test, test, test for best results.

• Have the form focus on the first field. This gives the user a place to start.
• In general, don’t have more than on field on one horizontal line unless they are related, like City, State and Zip.
• Don’t provide the user with a “clear” or “reset” button. These can be accidentally clicked and are often confused with the “submit” button.
• Have a consistent format for required fields. If you use an asterisk on one form field, us that on every required field on all forms on your site.
• For text boxes, vary the length of the box to suit the information being gathered. This will give the user a visual cue as to what you are looking for. A short “State” box for example.