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'!
Errors should appear on same page of form.
Errors should be clearly defined. (ie. "Password only consists of 0-9; a-z; 10) characters long"
Errors should be clearly visible. (ie. Bold red color, error icon)
The best form of validating data is a combination of server-side and JavaScript (alert). NOTE: Server-side validation should always be done.
Don't you hate it when you have to guess what is a "required" field?
Not long ago, I was at a site that gave me a "required field" error. Nothing wrong with that but, what "required" field did I miss? There was no mention of a "required field"!
Nevertheless, I did what everyone does when they are presented with a form error. I went back and filled every input box.
Aaaarrrggghh!
Now I'm getting an "address field is to long" error. There are two address fields and I have no clue as to which one is formatted wrong!
A simple asterisk *, color, or icon could have saved me the aggravation. It also would have increased the sales on that site if I was able to finish the application process.
In short...
it takes a little bit more effort to create a "usable" form; but, it's worth the time.
A usable form will:
increase turnovers.
increase sales.
keep visitors happy.
Any typos/grammer mistakes please private message me .. thank you.
03-04-2006, 10:00 PM
03-06-2006, 12:16 AM
Thanks
