[TIP] Creating Usable Forms

Joe Velez began developing for the web in 1998. He is an avid vBulletin user and volunteers his services as a vbulletin.org administrator. He currently spends his time maintaining and developing allnurses.com.

Visiting sites on a daily basis, we are confronted with online applications (also known as "forms"). We see them everywhere and have become immune to the errors that they produce or lack of. To create a usable form, we must start thinking like the end-user (the visitor filling out the form).

SOMETHING TO THINK ABOUT

Don't you hate it when data is accepted without proper checks?

Don't you hate it when an error message comes up on a different page?

Don't you hate it when you are instructed to "Go Back" to fill a required field?

Don't you hate it when you have to guess what is a "required" field?

Do I have your attention? Good. Now, let me explain in detail before you start barking at me. :nervous:

Don't you hate it when a form is accepted without proper checks?

How sure are you that the information you entered is accurate? Did the system provide you with enough information to fill the form correctly? Did it do the proper checks to ensure that your data is in the correct format?

A form's input should be clearly defined. Some examples would be:

DATES should be clearly defined as 00/00/0000 or 00-00-0000

TELPHONE NUMBERS should clearly state that input is required in the following format ... xxx-xxx-xxxx

WEB URL - Does the system require the "http", "www", or the full "http://www"? Will it accept "https"?

Any text input should clearly state minimum and maximum number of characters if one exists.

A form's input should be checked while inputting data or upon "Submit". Validation can be done via client-side scripting (Javascript) or server-side (PHP, AJAX, etc).

All submitted information should be displayed to the end-user on the following page prior to acceptance; at the very least the information should be emailed to them. This will provide the end-user an opportunity to fix any errors if they exist.

Don't you hate it when an error message comes up on a different page?

Aaaarrrggghh!

I hate it when this happens. You submit the form and you are notified that an error exists. What's worst is that you may have to guess where the error is located OR you may have to redo the form in its entirety. Yep, this is the part where I usually pull my hair or go to another site.

Don't you hate it when you are instructed to "Go Back" to fill a required field?

What's so bad about this? This is one additional step that could have been avoided. Just think of how much time you could have saved if you knew firsthand what was 'required'!