• Good forms help you win business.
• Optimising them will help you win even more.
• Keep things simple, avoid introducing obstacles, and only ask for essential information.
• Get your form tested before making it live on your website.

Love them or hate them, website forms allow users to do lots of useful things, from contacting a company, registering for a service, or paying for a product.

Because of this, they are integral to most website experiences, and therefore, they are a key area for optimisation that you should be looking at. If you don’t, it’s likely that you will be throwing money away.

Badly designed forms with poor interaction will guarantee that your users will jump ship before they’ve done what you want them to do. So, what fundamental things can you do to prevent this from happening?

Here are some practical tips for Form Optimisation

1. Inform

One of the easiest things you can do is tell the user what the form is about. Be clear about your messaging, and tell the user how they’re going to benefit from handing over their details to you.

Including positive social proof messaging on a form helps with convincing your users that they’re in for a good thing and it will encourage them to commit to the form filling process.

Information about privacy should always be included; it’s a big deal these days and assuring your users that you’re not going to distribute their details to everyone in your contacts list makes it more likely that they’ll entrust their information with you (unless they ask you to share it).

Building trust with your users is very important, so don’t give them any nasty surprises. For example, if they’re signing up to download a document that they must pay for tell them before they commit to filling out the form. Introducing a cost later on in the process will only alienate your users and the seat of distrust will be filled rapidly.

2. Simplify

Unless you are creating a form to satisfy “formaphiles” (if indeed they exist), one of the very best tactics is to ask only for the information you really need.

If you have optional fields on your forms then that is exactly what they are, optional. You’ve already decided that as a business case. Having optional fields in your checkout or lead generation form is a little bit like asking someone to run a marathon, but instead of just completing a 26-mile run you also expect them to traverse some monkey bars and swim through a crocodile pit along the way.

Remove the optional fields and you reduce the number of hurdles a user has to navigate to fill out your form, and you will increase your conversions.

Now think about the fields that remain—are they really necessary in the context of the service or product you’re offering? I have to admit to banging my head when I see a fax number as a required field when I’m ordering something online; in this day and age that is like explaining to my five-year-old what a cassette tape is.

Now you’ve culled the fields on your checkout or lead generation form, look at the ones that remain. How can you make it easier for a user to complete them? There are a number of techniques that can do this from smart defaults to autofilling—and when implemented well they will reduce the effort your user has to put in.

3. Use a single column

The layout of your form is really important. Use a single column layout and avoid multi-column layouts. Why? Because multicolumn forms can confuse users and it is very possible that they will interpret fields and their relation to each other incorrectly.

Multicolumn forms can become an issue especially when it comes to responsive layouts and how they look on different devices. What might be a single column on a phone can easily transform into multiple columns on tablets and desktops, and this can cause problems for your users by restricting how well they navigate the form.

4. Labelling

There have been several studies on how form inputs should be labelled to decrease the cognitive load (the total amount of mental effort needed) on the user. In general, they show that the nearer the label is to the input, the quicker users can move from reading the label and filling out the input. There are two firm favourite design patterns for form labelling:

• The label is placed to the left of the input and right-aligned.
• The label above the input and left-aligned.

Both of these design patterns enable users to capture both the label and the input in one go, rather than having to look at each element individually.

This may seem like a small design detail, but using label placement and label language correctly will greatly increase a user’s performance when filling out your forms.

In it for the long haul

Some forms need to be long because of the nature of the information you want to gather (submitting your CV online, for example).

So, if you need to use a long form, always “chunk” your related information together and give the user a clue as to where they are in the process and how far they have to go.

You can do this by adding a progress indicator to long forms—this acts a bit like the motorway services on a long trip, it allows the user to reach a series of mini-goals before getting to the destination.

A progress indicator should:

• Indicate the number of steps (be careful here, three to five steps are usually enough for anyone)
• Show the direction of movement (usually left to right, or top to bottom)
• Highlight the current step
• Show what steps are completed
• Allow the user to interact with it to navigate back to previous steps if they need to update something.

To err is human…

Form error messaging is the key mechanism for letting your users know something has gone wrong. As such, any errors presented to your users should follow these key principles:

• Indicate where the issue is
• Make sure the error message appears close to the problem
• Ensure the error message tells the user what the problem is, and tell them how to fix it
• Don’t blame the user! Error messaging should be written in a friendly, but none patronising way
• Prevent errors before they happen. Do this by providing useful tooltips next to the fields (especially important for example if a password needs to a certain number of characters) and using inline validation messages that appear next to the fields.

Challenge accepted (or, more likely, not)

In one day alone, I had to participate in five separate “captcha” tests before I could use a service or submit a form. Designed to determine if a user is human or not these tests have gained popularity over the years, but at what cost?

A/B testing has shown that removing captcha and replacing it with an alternative such as the “honey pot” technique have in some instances resulted in uplifts of 30 per cent or more. Indeed, studies have shown visual captchas can take 9.8 seconds to complete and audio captchas can take up to 28.4 seconds, the latter having a 50% dropout rate.

When users might at best give your site two seconds of their time before they decide to leave or stay—asking them to complete a form and then spend even more of their valuable time on convincing your captcha test that they are human is a big ask, especially when there are other ways to accomplish the same thing.

Submit? But, we’ve only just met!

Think about it. How many buttons have you had to click that say “submit”? It may be trivial, but if you have just subjected a user to a tedious form-filling experience, asking them to submit to anything is a bit of an insult.

Instead, use words on your buttons that encourage the user to click on them, which also explains, in part, what will happen next. This will provide a much better experience for them.

You also need to ensure your button looks like it will do the job it’s supposed to do (affordance). Simple considerations such as “does it look like you can click it”, “is it big enough to notice”, “is it close enough to the form to which it relates” are often easy to implement, but regularly overlooked.

Test it on people. Test it on different browsers. Then on different devices. Then test it again

Optimising a checkout or lead generation form is no mean feat, and the last thing you want is to put a form live and get a sudden plummet in your conversions because something isn’t right.

Luckily there are several steps you can take to prevent this:

• Test your form on the people you think are going to use it. Be clever and watch how they interact, even if you are just stood over their shoulder. If you want an even more detailed idea of what is going on, usability lab testing is one of the best ways to do this.
• Test your form on different browsers and different devices. Your devices and your desktop computer are not your users. By looking at your site web analytics you can gather an accurate picture of how your users are accessing your site, and from there you can create a list of what devices, browsers, and resolutions your form needs to work on.
• Testing is infinite. Once your form is live don’t forget about it. Keep checking your web analytics and reviewing the form’s performance. If something looks like it could be improved figure out how and make the necessary adjustments. Running an A/B test against your original form and your new version will help steer you in the right direction.

‍