Website Usability

Published date: May 03, 2007

Checklist for Usability Forms

Achieving user-friendliness for HTML forms

Adriana Iordan, Web Marketing Manager, Avangate B.V.
Website Usability, Published date: May 03, 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.

© 2007 Avangate B.V. page 1

www.avangate.com
 Website Usability
Published date: May 03, 2007

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.

© 2007 Avangate B.V. page 2

www.avangate.com
 Website Usability
Published date: May 03, 2007

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.

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.

© 2007 Avangate B.V. page 3

www.avangate.com
 Website Usability
Published date: May 03, 2007

¾ 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.

Conclusions

It is not absolutely necessary to write your user license agreements using terms of unfathomable
complexity. Common language can be used to create these documents that will protect your
work and investment. Nevertheless, have a specialist oversee the process of writing the EULA,
namely a lawyer that is specialized in such matters.

Terms and conditions could be subject to interpretations, and it is only a trained person who can
give you advice on how to properly write such a contract. Make sure you understand the laws
under which the EULA is created so that you cover all the legal aspects pertaining to you and
your intellectual property. And above all, respect your prospective customers, be they large
corporations or just some minor domestic users.

***

Sign up now for the Avangate Digest Newsletter to keep in touch with the latest trends in the software industry, to find
out what the top software people say and recommend, and to get access to resources about shareware industry
tools and techniques.

E-mail this to a friend

© 2007 Avangate B.V. page 4

www.avangate.com
 Website Usability
Published date: May 03, 2007

***

Copyright © 2007 www.avangate.com all rights reserved.

This article was written by a Web Marketing Manager at Avangate B.V. The author has in depth
knowledge of internet marketing services and website analysis applied to the software industry and e-
commerce development.
This article may be reproduced in a website, e-zine, CD-ROM, book, magazine, etc. so long as the above
information is included in full, including the link back to this website. Please e-mail at
articles@avangate.com, before using the article.

***
About Avangate B.V.
Avangate B.V. provides solutions for electronic software distribution and reseller management, assisting
software companies worldwide in successfully selling their products online and at the same time efficiently
managing a distribution network.
The company’s offer includes an eCommerce platform incorporating an easy to use and secure online
payment system plus software marketing services and additional marketing and sales tools such as an
affiliate network, automated cross selling options, software promotion management, real time reporting,
24/7 shopper support, and the myAvangate reseller management program specifically designed for
software sales.
More information can be found on the corporate website, at www.avangate.com

Avangate B.V.
Van Heuven Goedhartlaan 937, 1181 LD Amstelveen, The Netherlands
Tel: +31 208908080 Fax: +31 202031309
Email: info@avangate.com Web: www.avangate.com

.member of GECAD Group, delivering innovative IT solutions Worldwide since 1992

© 2007 Avangate B.V. page 5

www.avangate.com