Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
[TIP] Creating Usable Forms
Princeton
Join Date: Nov 2001
Posts: 6,903

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.

Vineland, NJ
by Princeton Princeton is offline 05 Mar 2006

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:
  1. DATES should be clearly defined as 00/00/0000 or 00-00-0000
  2. TELPHONE NUMBERS should clearly state that input is required in the following format ... xxx-xxx-xxxx
  3. WEB URL - Does the system require the "http", "www", or the full "http://www"? Will it accept "https"?
  4. 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'!
  1. Errors should appear on same page of form.
  2. Errors should be clearly defined. (ie. "Password only consists of 0-9; a-z; 10) characters long"
  3. Errors should be clearly visible. (ie. Bold red color, error icon)
  4. 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:
  1. increase turnovers.
  2. increase sales.
  3. keep visitors happy.

Any typos/grammer mistakes please private message me .. thank you.

Last edited by Princeton; 06 Mar 2006 at 14:54..
Views: 10433
Reply With Quote
Comments
  #2  
Old 06 Mar 2006, 02:16
rossco_2005's Avatar
rossco_2005 rossco_2005 is offline
 
Join Date: Apr 2005
This is some good info, I've read through your tips and realize some things I could improve with a couple of the hacks on my forum. Thanks
__________________
Reply With Quote
Reply

Similar Article
Article Author Type Replies Last Post
Add-On Releases Forms Pack *** Forms Hack add-on Deepdog009 vBulletin 3.6 Template Modifications 2 27 Jul 2007 01:52
Forms Pack + (4) *** Forms Hack add-on Deepdog009 vBulletin 3.5 Template Modifications 1 09 May 2007 00:12



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


New To Site? Need Help?

All times are GMT. The time now is 12:04.

Layout Options | Width: Wide Color: