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. www.avangate.com

page 1

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. www.avangate.com

page 2

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. www.avangate.com

page 3

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. www.avangate.com

page 4

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 ecommerce 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 Web: www.avangate.com Email: info@avangate.com

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

© 2007 Avangate B.V. www.avangate.com

page 5