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?
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.
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.
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.
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:
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.
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:
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:
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.
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.
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: