Checklist for Usability Forms

Please note: this article is over 15 years old. Information may be out of date.

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
Web Design

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.

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.

Get free access to the largest backlink database

Rate This Article

How would you rate the quality of this content?
Currently rated: 3 out of 5 stars. 2 users have rated this article. Select your rating:
  • 3 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5

About The Author

This article was written by Adriana Iordan, Web Marketing Manager at Avangate B.V.

Related Articles

Creative Maintenance Designs

50+ Creative Maintenance Page Designs From Real Websites

In addition to our website maintenance page tutorial, we've decided to publish our collection of the most creative and original maintenance page designs from across the web. We believe that this is the largest collection ever assembled.
Web Design

10 Website Design Tools You Won't Believe Are Free

Here is a list I have compiled of the top 10 best free website tools I have found on the Internet. In my opinion these tools are essential for anyone starting out in the web business and wants a head start.

10 Free Resources to Get Icons for a Design Project

Icons make your site aesthetically more interesting and can be used as a name, face, picture, edifice or even as a person. It represents a sign or likeness that stands for an object by signifying or representing its main purpose or objective.

10 key principles of Web 2.0 design

Undeniably, Web 2.0 is an honored progress in the arena of web design. I am feeling massive excitement to introduce you people with this modernism of website design. Web 2.0 templates have comfort of numerous designing facilities like as innermost layout, effortlessness, content versatility, intelligibility as well as appealing color contrasts.

6 Web Design Tips to Grab Attention

As every good website design specialist knows, a well designed web page is able to draw the focus of readers to the content, news and events that the client you are designing the page for specifies. Of the many methods that can be used to accomplish this, often the easiest and simplest method is to simply modify the size of headline font.
WordPress made easy