Sunday 17 October 2010

Web forms - make it easy

In my years as a web developer I've spent an awful lot time building web forms.

The biggest thing I've learnt from this is User Interaction - UI.

The problem I've found is size. Working within the public sector - Police, every department seems to want to know everything and wants to know it depth.

So they come to me for a web form. The quest for instant knowledge and information inevitably means the form will be massive, be five pages long and take 15 minutes to fill out. STOP!

Online forms that are oversized just won't get filled in. People want to do things quick and snappy. Not go through a myriad of 'open' text boxes. Incidentally open text boxes being one of the biggest problems.

A lot of online banking is quick and easy these days. This is because it's easy for the user to do. You log in, move some money around (maybe), look at a few other things and then you're done. You may say that's different because that's a service and not a form. The thing is though is the service is made up of lots of little forms and there's the key - lots of little ones.

Appreciated public sector organisations need to know a lot of detail but it's how they go about getting the user to give them that information.

From my experience I've come up with these tips:


Overall size

Consider the overall 'screen size' of the form. Ideally the form wants to be contained on one screen - as in you can see the whole of the form on the screen of a standard desktop monitor. (Obviously laptops, netbooks, mobiles etc will vary greatly but you have to have a common base somewhere.) If the form is getting bigger than this you might want to ask - do we really need to know all we're asking. This also leads onto questions to do with bureaucracy and forms - scope for another article.

If you do have to go down the more than one page route then I would recommend paging the form. Split the form up into sizeable chunks that break and continue at natural points. Also let the user know, at the start how many pages there are to go through. Then as they go through each page let them know their progress by way of a breadcrumb at the top of the form. Just an idea.


Text

No text in the form other than the labelling of fields. Add somewhere else but not in the entrance. I don't want to have to read through everything then fill out the form. This information should be optional to read. Forms should be intuitive enough so the user knows what they're filling in just by looking at it, the title and the environment it's in. Explanations for fields for example should neatly sit under links within the form - not explanations actually in the form.


Open text boxes

Loose as many of these as possible. They are a nightmare for the user. This is one of the most off putting aspects of a large form. You're giving the user simply far too much to do.

Look at giving the user the answer you want in dropdown menus, radio buttons and check boxes. This is far smarter and dramatically reduces the size of the form.

There maybe some 'word smithing' needed here as to how to ask the question.


Error handling

A good form normally has some validation for what's being entered. This is normally for either/or security reasons and we want to for example know that the email address entered at least looks like an email address.

The user however shouldn't need to know any of this. If the user enters data into a field incorrectly they should be politely told they are wrong. Not given pop up alert boxes, error codes and statements of how wrong they are in bold red. Something quick, simple and not in your face should suffice.




That's about all I can think for now. I'm by far no means an authority and am open to comment and suggestion on these points.

Final note

There are many online forms that I've made that don't comply with what I've said above. Some of these are older forms and sometimes you can't help it. Sometimes you're simply told that's how it has to be. However I would always argue (now - didn't a while ago) that the information we're getting our public to give us is very precious. We don't want to make it difficult or put them off.

1 comment:

  1. Form design can be a tricky business, there are some excellent resources out there such as Luke Wroblewski's book, Web Form Design or UX based websites such as Useit.com boxesandarrows.com or ixda.org. Alternatively you could always find yourself an Information Architect or Interaction Designer to do the design work for you. However they will need some some domain knowledge help to be able to do the best job.

    ReplyDelete