Points to consider when designing an interactive response form.
Forms Ergonomics
The 'elegance' in any form or data input screen is its transparency to the user.
Not surprisingly, HTML forms are often a make or break item for a Website.
Your goal is a properly completed form. The end-users goal is to do and think as little as possible.
If your form does some of the 'thinking' and 'doing' for the visitor, you increase the chance of a successful submittal.
If you have access to your website's statistics, take a look at how many times a form is viewed versus how many times it is actually completed.
You spend a lot of time, effort and money to get visitors to your site, don't lose them because of an overly intimidating response form.
Error Trapping, Automating, Wiring and Idiot-proofing
- Fields should flow in a logical manner, and be of the proper type.
- Help should be available
, but the elegant form is designed and worded to make its use unnecessary. - Would an Acrobat or Flash form provide a better experience?
- Be certain to disable the Submit Button when the form is submitted. This prevents double clicks, duplicate entries, orders, etc.
- Be certain to identify and trap all required fields to prevent incomplete submittals.
- Error messages should be polite, clear, and to-the-point.
- After a visitor throws an error on a field the focus of the form should return to that field after the error messages.
- Pay attention to the "Tab Order" of your fields. Make certain that the TAB key takes you through them in a logical manner.
- Use Radio Buttons, Check Boxes Menus and Drop-down Lists where possible. This is especially important when information will be stored in a database and a consistent data format is required.
- Validate entered E-Mail addresses to be certain that they meet the proper format.
- Trap the nasties! If you don't want HTML in your forms results strip it out before making use of the form data. The same goes for scripts which are a popular way to launch "SQL Injection" attacks against forms based databases.
- Never make the visitor enter anything twice. If you will need something later, stash it in a SESSION variable and get it when you need it.
- Include a checkbox to indicate if Shipping and Billing addresses are the same (or similar situations) and when it is checked, get the field data from the already entered fields and use it to populate the others.
- Don't ask for both a State and a Zip Code, ask only for ZIP Code. Use one of the free/cheap ZIP lookup Web services to add the State later.
- The Internet is International. Don't make it impossible for those from other countries and cultures to reach you or complete your form. [ rude! ]
- Break long or complex forms into easily completed chunks.
- Make opt-in/opt-out offers (Mail Lists, etc.) crystal clear and prominent. You may get a lower positive response, but the ones you do get will be better qualified.
- Very long forms, surveys, quizzes, etc., should give the visitor the option to save their answers and come back later to finish. If they choose this option, it should trigger an automatic E-Mail reminder to finish the form.
- Never underestimate the ability of the end-user to screw up, and occasionally to do so on purpose.
Examples of some Common Forms Issues
Telephone Numbers
Check for Non-Numeric Characters.
If you solicit contacts internationally, make certain that the number format fits the International format.
Unnecessary Restrictions 1
The problem here is that the name on the Credit Card might be J Paul Getty or F. Lee Bailey! If flexibility might be required, plan for it and deal with its consequences in the design phase. |
Unnecessary Restrictions 2
|
This places needless limitations on the visitor. It's very easy to strip spaces, ampersands and hyphens (or any other character) from a string before it is sent. The same applies to phone numbers and postal codes.. Hyphens and parentheses are easily stripped from entries to make certain they are saved in a consistent format. This is especially important if the information will be saved in a database. |
Double Click Prevention
Customer Note: Click Only One Time to Prevent Double Charges
It's happened to most of us -- double clicking a Submit button and ending up with multiple submittals of the same order, charge, email or form results.
A couple of simple lines of Javascript can disable the button the first time it is clicked to prevent this from happening.
See how it works by clicking the "Make Payment" button Above.
Date Selection Fields
|
Help the visitor with easy to use Date Selectors. Opening a Calendar Date Picker in a cumbersome new browser window is not necessarily better than drop-downs or free-form text entry date fields. Many browsers will block a new pop-up window, and opening additional windows is very time consuming.
A Dynamic HTML Calendar Picker Popup, however, is much better. Date Selection Calendars provide a consistent and controllable date format. This is especially important when working with databases and spreadsheets. If you hover over the Calendar Icon |
|||||||||||||||||
