Receiving user input via forms is a fundamental part of many web applications (and indeed desktop based systems too) so it is vitally important that they are as user friendly as possible. In this post I’ll present some short paragraphs for improving form usability.
Use HTML tables to layout your forms
Don’t mind what the standards web guru says about using CSS instead of HTML tables. The reality of the situation is that HTML tables are the most suitable method to layout your forms in a user friendly manner (without a serious amount of work anyhow). The most common layout is the standard two column approach. This approach sees the labels for the various input elements in the left column and then the input elements themselves in the right column.
Display error messages on the form itself
Unless space absolutely prohibits it you should display any error messages associated with user input on the actual form page itself as opposed to using a popup Javascript alert box. The problem with alert boxes is that a user must click them away to continue filling in the form. When the error alert box is gone from view so too is the useful error messages which it contained, this means that the user must now work from memory when trying to fix input errors. The ideal situation is not only to have error messages on the form itself but to have the individual errors appear next to the associated input elements.
Use a progress indicator for forms spanning multiple pages
Including some kind of progress indicator on your form improves the user experience as users like to know where they are in any form filling process, this is particularly true if an activity requires multiple forms to get all the data it needs. An example of this could be booking an airline ticket or making a hotel reservation which typically require three or four screens to complete. Implementing a progress indicator for your form could be easy as altering your form navigation button text from something like ‘Next’ or ‘Proceed’ to ‘Go to Step 2 (of 4)’ or ‘Proceed to Step 2 (of 4)’. Alternatively you could create a dedicated header or sidebar table to illustrate progress in a more defined manner.
Micellanous
Micellanous items include using the tabindex property to define the correct logical ordering of textboxes, dropdowns etc. so the user can quickly pass the focus to the next input element, setting the default focus of a form to the element a user would normally expect to fill in first, defining access keys for keyboard access to fields. Additionally remember to go easy on CAPTCHA elements designed to stop spam bots as you will find they often stop legitimate users too.
Obviously the above information is not an in depth look at form usability, however the web has a tonne of information about this very important topic. One favourite article of mine which covers the topic of form layout (dealt with briefly above) is called Web Application Form Design and is written by Luke Wroblewski. Incidentally Luke is expected to release his web form design dedicated book in early 2008. As far as I’m aware this will be the only publication on the market dealing specifically with web form design and usability. Based on the quality of the information on his site I have to admit I’m really looking forward to it.