Search the Web Search SiteProNews

Originally published in SiteProNews, July 11, 2007

HTML forms are one way a user can send data to Web sites. They are essential in almost every interaction one can have with a site, such as:

• Queries on search engines
• Providing information (tags, comments, personal data, logins/registering, etc)
• Finding/purchasing certain objects from e-catalogs

In most cases, forms usability will improve the usability of the entire site. The primary goal of form usability is making sure that the intended users are able to interact properly with the Web site while having a positive and convenient experience.

Tips for Achieving An Accessible HTML Form

1. Helping users understand the form will save them time and ensure that they provide correct input. On the other hand, instructions should be as concise as possible. Always take into account potential users and that your forms address to both new and experienced visitors.

2. All forms should always contain this essential information:

• Title - what the form is for
• Contact details to provide help with filling in the form
• Send or Submit button at the end, optionally Cancel button

3. Avoid using forms with a large number of fields to be completed.

4. Never ask for duplicate information (when the form has more than one page, this is a common mistake).

5. It helps to run a use-of-information audit a while after the release of the form to see if the information collected was actually ever used. If it wasn't, it shouldn't be collected any more.

6. Split your forms - long forms are confusing.

• If your form is too long, try dividing it into several pages, each fulfilling a different task (ex.: one for product details, one for personal data and one for payment and delivery details).
• Each page is individually validated, so it is easier to signal and fix mistakes.
• Ask questions in a logical order. This way, necessary data can be taken automatically from previous pages.
• If an e-form requires navigation through several pages, it should be easy to return to a previous step. This helps in case the user made a mistake or just changed his mind and shouldn't have to start again, but just go back and modify the input.
• Conservation of filled data is very important. When going back to fix a problem, the user should find his form as filled in before. For example, there's no reason why one should have to re-accept the terms of agreement because of a wrong area code.

7. Forms that look neat are easier to fill in. This requires:

• Examination of the layout of the form, including:
  • Text
  • Localization and accessibility
  • Have consistency in capitalization and punctuation marks. (Avoid ALL UPPER CASE sentences. Try to use sentence case or Title Case.)
• Boxes should be aligned, both horizontally and vertically, along with the labels.
• Try to structure your form within one single column, it is easier to read. In the case of two columns, users often just fail to notice the right-hand column. Two columns are recommended only in the case of a big amount of data being constantly referred to.
• Always use a polite tone and run a spell checker and a grammar checker on your forms.

8. Take into account the three possible validation levels:

• Strict - user will not be allowed to proceed until entering proper information
• Soft - user can proceed, but receives a warning that the data is either missing or incorrect
• None - any input is accepted without warning.

Make your choice in correlation with how important is receiving valid data for your database. Usually, Strict and None levels are mixed in the same e-form.

9. Make sure that mandatory fields are clearly marked.

• You may:
  • Use an asterisk and the word "required" in parentheses following the field (optionally, the reason why it is required).
  • Color the input area differently (don't use red - it is usually reserved for error messages and might confuse the user).
  • Divide the form in two - mandatory and optional parts.
  • Use bold or italic text to signal required fields.
• Either way you choose, always provide a legend (easy to find and understand) with the symbol's meaning.
• Don't put in too many mandatory fields without explanation, this will lose customer's trust ("Why do they need my home number too?").

10. Return relevant error messages.

Replace cryptic messages with straightforward error messages that are easier to understand. Error messages should tell users what went wrong and offer a possible solution. This can be easily handled now with CSS.

11. Be especially careful with input fields and drop-down menus.

• All input fields should be clearly labeled. This won't bother experienced users, but it will be helpful for rookies. Users expect input field labels to be just above the input box, to the left.
• Try to replace all drop-down list boxes with text fields. Drop-downs are harder to use when providing a larger number of options. Try to use them only for important data or to position them below more important input fields.
• Give the user room to type - at least 20 characters for first and last name fields, minimum 50 characters wide by 10 lines tall for text fields.
• Provide default answers where possible, letting your customer over-ride your choices of answer

12. Have your form tested out by real users before releasing it.

Ask some real target-users to fill in your form. Analyze feedback, adapt to their needs. On top of all the tips above stands the rule of common sense: do your users understand what you ask from them? You can judge the accessibility of your html form by how many filled in forms contain mistaken information. Also find out more about how can you gain website accessibility.

Should we consider usability of forms?

Nobody likes filling in forms, but they are always the only means to a purpose, what stands between you and getting what you need (may that be logging into your e-mail, ordering a software product or just searching for some information). Even though users know forms are necessary, they still just won't enjoy filling them in.

A simple lesson of economics goes like this. We are given two manufacturers, who both make the same alarm clock, with the exact same functions. One of them adds the possibility to choose the alarm sound. His clocks will be more successful. With a small price, he obtains a greater profit.

The Internet provides endless possibilities. In most cases the user can abandon your form and try a different Web site. What can make the difference between your company and the competitors? Might be your to-the-point, easier to use html forms.

Copyright © 2007 Jayde Online, Inc. All Rights Reserved.

SiteProNews is a registered service mark of Jayde Online, Inc.