Your website may have one or more forms – a contact form, a registration page, a checkout process, but no matter what type of form you have, there are some features that should be absolutely essential. They may sound obvious, but it is simply incredible how many forms I see on a day to day basis that ignore at least one, if not many of the below features.
Treat the following as a checklist.
- Clear, unambiguous labels
- Inline Validation
- Mobile Friendly
- A clear path to completion
Go and fill in the form on your website right now. Seriously, go on. I’ll wait. Go on, go.
You back? Have fun? Thought not, but I hope it was illuminating.
This list is not exhaustive. There are dozens of ways you can make your form better, but these are absolute essentials:
Like queues, traffic jams and breads, forms are better shorter. Why?
Forms are how customers, both current and potential, talk to companies online. As we often say, forms are never an end in themselves. They are a gateway, or obstacle, to some other goal. E.g. To get access to your site, to buy something from you, or to get in touch and ask a question.
For every single field that you have on your form, a visitor has to view it, consider what it is asking them to do, consider whether they can enter that information easily, gather the required information (if they cannot bring it to mind immediately), enter it in the correct format, check that information and then move on. Sometimes this process is very short and can be done within a matter a milliseconds, but at other times it can take longer. Entering credit card details, for most people, is a process that takes several minutes.
The more times a visitor has to go through this mental process, the longer it will take them to reach their goal. And the longer it takes, the less likely visitors are to complete the form. For you, a business, this is unfortunate and sad. Why? Because somebody has tried to reach out to your business, and you lousy form has stopped them.
Making the form as short as possible reduces the friction that a user experiences. Less friction = more conversions.
An example to illustrate this.
Compare Twitter’s sign up process:
With the following:
Which do you think a visitor is more likely to complete? Which represents a bigger barrier to a user’s ultimate goal?
To be fair to this last form, it is for a different type of website (one where date of birth is an essential piece of information, as is heightened security questions), but it serves to show that a longer form is more intimidating, and more of a barrier to completions.
One company cut their contact form from 11 fields to 4, and saw a 160% increase in the number of forms submitted and a 120% rise in conversion. The quality of leads from the submitted form also stayed the same, despite having ‘less’ information from each submission.
For your forms, make them as short as possible. Do a self audit of the form and take a brutally clinical view on what information you absolutely need from users for them to be able to start a journey with your brand.
Clear, unambiguous labels
Labels tell users what information is required of them in a particular place in your form.
Most of the time, it will be clear to users what information you are asking for. But often, labels slip through the net. You will not have filled out the form on your website for a long time. Even if you have filled it out recently, you will be so used to reading it, knowing what information you expect to see in each field, that it is unlikely that you will notice any ambiguity in your labels.
But you may be surprised if you were to ask colleagues, friends, family to complete the same form. Often labels are not as clear as you might think.
Squash has become a recent and regular hobby of mine. Take the form to book a court:
Now, my house has a number. Does that mean I can leave this field blank? It has an asterisk next to it, which implies I have to complete it. What should I do? Put a number probably…
What is a locality? And how does it differ from Town and Region? For us Brits, usually Region is asked as County, which I would understand as a question, but I literally have no clue what locality means, and yet again it’s a required question. I stuck my town in there again, and it accepted it, but it took me a while to think about.
If the information you require in a form field is complicated, then an explanatory note might be necessary to guide your form filler outer. Labels have to be clear, and if you need to help visitors out when asking for unfamiliar information, or if data has to be entered in a certain way (passwords are a good example).
One of the key factors in driving potential customers or users away from your site is the ability to enter a form right first time. Labels that are clear in what they are asking will help, but there will always be human error.
Help your users out! If you were sitting behind someone as they filled out your form, you would undoubtedly jump in when you saw them entering information that was wrong (unless you are super shy, or a bit mean). ‘Hey, Billy, you have to enter your card details without any spaces. Your password has to be a combination of letters and numbers. No I wasn’t writing them down on my notebook… I am not annoying! Why would you say that to me? Put that stapler down…’ might be how that went.
But you would help. Inline validation is that help.
Most forms have some type of help, but look at the following:
This error message only came after I had tried to submit the form. It appeared at the top of the page, away from the fields where I had made those mistakes. I had to scroll down to the form, and then back up again to remind myself of the mistakes I had made.
Compare the above with Gmail’s sign up:
As you tab away from each field, Google immediately lets you know if the field has not been completely correctly.
According to this article in A List Apart, users were faster, more successful, less error-prone, and more satisfied when they used a form that had inline validation. There was a 22% increase in success rates, a 22% decrease in errors made and a 42% decrease in completion times.
That article also advises that the best kind on inline validation is done after a user indicated that they were finished with that field, by clicking or moving to the next one. Other alternatives (while the user is filling out the form, and even before they start typing, were considered less successful).
If you would like options in terms of scripting your inline validation, head to this Dzine article, which gives you no less that 18 possible ways to do it.
This is the biggest requirement of all on this list and will take more of an input of effort and resources on behalf of your team, but it is absolutely paramount to the future success of your business. Hopefully I do not need to tell you how much browsing on mobile devices goes on.
If you an ecommerce business, this is absolutely crucial. If you need some figures, here are some from the US market, courtesy of emarketer:
– 15% of all online retail sales in 2013 will take place on mobile devices
– By 2017, the percentage will reach 25%
– Mobile sales will reach $39 billion in 2013
– By 2017, sales will reach $108 billion.
Even for non-e-commerce businesses, mobile browsing is increasingly prevalent, and if the forms on your website do not work, you will lose out on visitors getting in touch or registering on your website.
But as for tips, rather than regurgitate someone’s far better writing, I will simply point to some fantastic pointers from Luke Wroblewski.
A clear path to completion
A clear layout for your online forms is essential.
Take this one, courtesy of the always enjoyable BadForms:
Looking at this, I have no idea what order I would fill out this form – left to right by rows? Column By Column? And what about the radio buttons?
Grouping content can be a good way to organize a form. It allows users to easily understand what is required by each section and gives an idea about how information is related.
Vertically arranged fields are a good way to make it absolutely clear to users what order and path they take to complete the form. To use the example of Gmail again:
A lovely single column (although the First Name and Last Name are side by side) that provides a clear path to that Next Step button.
Talking of buttons; they also play a role in the clear path to completion. I wrote a blog giving an example about how it can make a difference, so check it out.
And that’s that. Again, this list is not complete or exhaustive by any means, but if you can get the above right, you will be in a much better position thanthe majority of forms out there. Do go forth and better thyselves and your forms.
Additional resources for good form design:
Formulate – What Makes a good form
A List Apart – Sensible Forms: A Usability Checklist
IT Donut – How to create usable forms