Those of us who use the web on a daily basis come across all types of different web-based forms as we sign up, buy stuff or ask for advice. Many of these forms are fairly easy to understand and do not provide much of a challenge to the person designing them. But what happens when we need to start looking at longer forms, like a claims process for a home insurance? This article covers some of the most important visual challenges when designing long and complex web forms.

Pop-ups?

It is quite common to place a form inside a popup. By default I believe that popups are evil and should be used as sparingly as possible. There are those who would argue that the advantage with a popup is that we can remove distraction (navigation etc), which makes using the form easier. My opinion is that a good UC Designer should be able to design a form in such a way that the possible distraction elements around it do not interfere. This way we can stay away from the popup and thus enable users to bookmark our form for later use

Keep track of progress

How many pages does this form consist of? How much more do I have to fill in? When we work with paper-based form it is easy to quickly flip through the pages but with web forms we are often restricted to moving forwards page by page as we fill them in. It is common practice nowadays to give the user an indication of where they are in the form and how much more they need to fill in.

The most common visual clue in this context is the 'breadcrumb trail'. The trail shows the pages you've visited to get to where you are now. In a web form we can use this to divide the form into sections and help the user to keep track of where he is and what's coming next.

This is the breadcrumb trail that Amazon.co.uk uses for their checkout process.

On occasion I've been working on a form that for one reason or another cannot allow the user to backtrack once he's passed a certain stage. In these cases it is still useful to have a modified version of the breadcrumb trail that clearly shows the sections to come but does not encourage backwards browsing.

Make it easy

Is there information that has to be read before filling in the form? I've chosen to divide information into two types. The Important and The Helpful. Important info concerns deadlines and criteria for a successful processing of the form. The Helpful gives hints on how to use the form and should be used as little as possible since we're trying to design self-explanatory forms, remember. Any other information, like welcome messages, should be removed or kept to an absolute minimum since they will interfere with the more important info.

Amazon.co.uk make several mistakes in their forms. Here is an example of Helpful text in the wrong place. Why not explain what the button does right next ot it?

Are the questions easy to understand? Is it clear how you should answer them? Revise your copy and look at how you can make the questions as easy and as short as possible. Consider using helpful hints where you think a question might be hard to answer or understand. Make sure that it is clear which question goes with which answer.

Also remember to try and make the answer field big enough for the answer but don't make it too big since it might create uncertainty. Have I really understood this question properly?

Split your form up into sections

Whether you're working with a short form or a long form it makes sense to divide it into topics like Your Details and Your Company Details etc. It is also a good idea to graphically divide the different topics so that it is clear what type of questions you are answering at the moment.

MediaTemple.net have very clear and easy to use forms. Helpful hints are available if you mouse over the question marks. The form is also clearly labeled.

When working with really long forms split them across several pages and make sure that each page is labelled so that it is easy for the user to keep track of his process as he moves between the pages.

Transactions

For transactional forms Caroline Jarett says it really well in her report 'Designing Usable Forms'(PDF):

"Order forms are intrinsic to the purchase of the product, and therefore will be filled in. If the person confronted with the form wants the product sufficiently, somehow he will complete the form. The power rests with the organization offering the product."

Obviously this is not to be interpreted as an excuse to not put any work into these forms. The same design principles as above apply to these types of forms as well.