12 useful tips for web form optimisation

Let's face it, forms are a real pain to fill in, so it's important to get them right, and minimise any friction when visitors are signing up for emails, or completing contact and checkout forms. 

Designing forms with the user in mind, and testing to find our where the pain points are for users can make a massive difference to the user experience. 

Here are 12 quick tips on web form optimisation...

Use in-line validation

If users have made an error when completing a form, don't make them wait until they click the submit button on the page. 

In the below example from Autoglass, the form shows a green tick or a red cross as customers are entering details, as well as explaining the nature of the error:

This enables customers to quickly rectify any problems and reassures them that they have completed the form correctly. 

Label fields clearly 

The format in which users are expected to enter information should be made clear. For example, the length of passwords and requirements for numbers. 

Here, ASOS explains the expected password format, which should minimise the number of errors. 

Use side by side field captions

Some websites (inclduing GrahamandGreene below) put labels on top on fields, but this makes the form longer. Instead, consider placing the field caption horizontally next to the blank field.

Additionally, to minimise any confusion on the visitors' part, you can also include the name of the fields within the field box, as in the example below. However, there are possible drawbacks to this approach. 

Include product information

Adding a basket summary next to the form provides a quick reminder of items and cost shiould the customer need it, and avoids one reason for them to exit the checkout. 

Make error messages easy to understand

Don't just use generic error messages, address the user's problem directly. Here, VW's form doesn't really explain what mistake I've made with the postcode: 

A better example comes from Peugeot: 

Use cookies to remember customer passwords 

People have too many passwords to remember as it is, so make it easy for returning customers by remembering their details. 

This saves time filling in forms again, and avoids painful password reset processes. 

Anticipate and deal with common errors

Even if forms are clear and labels explain what is required, customers will still make errors. 

Some are common, and can be anticipated, such as using the letter 'o' instead of a zero, or 'i' instead of the nunber one. 

Here, entering the letter  'i' instead of the nunber one causes an error on Apple.com: 

The same error on Play.com doesn't produce a warning message. Instead, the site just carries on with the checkout:

Don't clear existing fields after user errors

There should be a special circle in Hell for sites that do this. Thankfully, it's becoming rarer, but I still encounter this now and then. 

You know I mean: you submit the form and are then notified that some compulsory fields are missing. Instead of just allowing you to correct the fields in question, it clears information you have entered or selections you have already made.

There are few things that are more frustrating. 

Keep forms short 

Long web forms are intimidating and will deter many potential customers and some will simply abandon rather than take the time to fill them in. 

For some websites, long forms are unavoidable, so the key is to break them up into manageable chunks and make them user friendly. 

Confused.com's car insurance quote process is a good example of this: 

Make forms fun

Though there is an argument for standardisation, making your form stand out from the norm can make it more fun for users.

Here's an example from svn2ftp:

Similarly, Jarad Johnson's contact form as postcard idea is genius:

Use the right format for each field 

This is about making things as easy as possible for users, For example, ASOS has a drop-down for gender here: 

Since there are only two possible options, using radio buttons ot tick boxes would mean less work for shoppers. 

In the same checkout process, ASOS uses radio buttons for delivery options. Not only does this require less 'work' for users, but it also allows for quick comparison of the delivery options available. 

Give users some feedback after submission

Reassure customers that their details haven't just vanished into the ether by acknowledging their form submission. 

Better still, and something that Jaguar doesn't do here, is to provide details of what happens next, and how soon customers can expect a follow up.