Forms are a key part of any e-commerce site, they are a necessary part of the process to complete a purchase, make a booking, or to register for an email newsletter.
Good form design is therefore vitally important, as this can make the difference between a completed sale and a customer abandoning through frustration. Good forms mean less hassle for customers, which means more sales for websites.
The good news is that there’s a lot that businesses can do to improve forms and remove any unnecessary barriers.
Are visitors motivated to complete forms?
First of all, customers have to be motivated to put in the time and effort required to complete forms.
For example, if customers are asked to complete a follow up survey from a retailer, but it’s hard to complete and takes them ten minutes, then not many will bother doing it. If, however, the form is easy to fill in and the task doesn’t take too long, they are more likely to respond.
In short, the desire to reach the end goal and complete a purchase shouldn’t be outweighed by the amount of effort required.
Here are some tips to improve form completion rates, and to remove the aspects of form-filling that can deter people.
1. Keep forms as short as you can
Long forms can deter users. We see the highest abandonment rates on finance and travel websites where longer forms, such as insurance applications, are a necessity.
Stats from Baymard show that 27% of users have abandoned checkout forms because the process was too long or complicated. It also finds that the average checkout has twice the necessary number of form fields.
Some forms have to be long by necessity, but they shouldn’t be any longer than they need to be.
For example, many forms ask the question ‘how did you hear about us?’, this information may seem useful to the marketing team, but it isn’t necessary for people to complete the form and just adds another step. Besides, analytics and other data should help answer this question.
Forms sometimes ask for a customer’s date of birth, which also isn’t necessary (in most cases) to complete transactions. Think about whether the information you’re asking for is really needed.
Encouraging visitors to sign up for newsletters and special offers is a great idea. Not every visitor will make a purchase, but encouraging more people to submit their email address can drive sales in the longer term.
Here, there is a balance to be struck between encouraging more sign ups, and finding out information that will make emails more relevant. For example, M&S asks for details such as gender and date of birth, as well as the products people are interested in.
Adding more form fields will improve the information received, but does increase the chance that people will abandon forms before they complete them.
2. Split forms into manageable chunks
It’s sometimes about perception. Forms can seem like hard work depending on their look and feel, and how they are structured.
If a form has lots of fields to complete, and these are presented on one long page, it isn’t an appealing prospect.
However, by breaking forms up into sections, they seem to be easier to complete. For example, confused.com splits its car insurance application into four sections. It’s a long form, but it doesn’t look too hard to complete.
3. Visual appeal
Dull text input boxes can make forms seem harder to complete, and make forms less enjoyable to complete.
Introducing some visual appeal, as VW does here with its test drive form, not only helps users choose the right model, but makes for a better experience.
4. Forms should work for mobile users
Retail conversion rates on mobile devices are lower than on laptops and PCs. The average desktop conversion rate is around 4.14%, compare to just 1.55% for mobile.
The lower rate for mobile has a lot to do with the relative difficulty of completing checkout forms and entering payment details on a smaller screen.
Forms should be designed for mobile users, and be made as easy to complete as possible. For example, making entry fields big enough and leaving space between them makes it easier for shoppers to select the right field and avoid mistakes.
5. Use smartphone features to make forms easier
Mobile forms can be improved by using smartphone features to make data entry easier for shoppers.
When completing certain form fields, defaulting to the appropriate smartphone keyboard helps users. For example, showing a numeric keyboard for entering payment card details speeds up the process.
Additional features, such as using the phone’s camera to scan credit cards can remove a couple of steps from the checkout process.
6. Use in-line validation
In-line validation is a way to check inputs into forms as users complete each field. This is used instead of waiting for customers to complete and submit a section before any errors are highlighted.
The benefit is that any input errors are highlighted as they are made, meaning the location of the error is clear, and customers have the chance to quickly rectify any issues.
In this example from the Twitter sign up form, ticks are used to confirm that a field has been completed correctly, while errors are highlighted next to the relevant field.
7. Make error messaging clear
People will make errors as they complete forms, so it’s important to make it easy for them to correct any errors and move on through the form.
Error messages should be:
- Polite. Don’t talk to users like they’re idiots, even if they have made an obvious mistake.
- Helpful. Messages should make clear the steps users need to take to fix errors.
- Clear. People should be able to see where the error occurred and which form field they need to deal with.
8. Use shortcuts where you can
Any shortcuts that can be used can be helpful in reducing the workload for shoppers.
An obvious example is allowing customers to use the delivery address they entered as their billing address, if applicable.
Others include shortcuts to address entry. Many sites now search based on the postcode entered to save customers from typing out their full address, but there are other shortcuts.
Other sites use software which suggests addresses as people type them, again saving time for users.
9. Add a progress bar
Progress bars tell people where they are in the process and how many stages are left to complete the form.
It can act as a reassurance that they are almost finished and reduces the risk of people abandoning forms.
10. Include clear calls to action within forms
It should be easy for users to move from step to step within checkout forms, and clear calls to action help here.
They should stand out from the page and leave customers in no doubt about what they need to do to move to the next stage.
11. Provide reassurance
Customers sometimes have doubts about things like payment security, and this is more likely if they’re buying from a site they haven’t used before or a brand they don’t know.
Showing trustmarks and messaging about the security of payment within checkout forms can provide the reassurance some customers need to complete a transaction.
12. Provide clear contact details on forms
People will sometimes become stuck while completing forms, or may have last minute concerns about their purchase.
While well designed forms will minimise problems like this, providing a contact number gives customers the option to get some help or advice and may ensure that potential sales aren’t lost.
13. Explain form fields
While many form fields may be self-explanatory, others may be less clear, and it makes sense to ensure that customers are aware of what is required.
Some well-placed copy can help here, explaining what information customers need to enter, and the format it should be added.
For example, password rules can be explained so that customers enter them in the required format.
Likewise, parts of forms which sometimes trip customers up can be made easier with some text to explain what’s required.
14. Remove distractions around forms
Ideally, customers should be able to concentrate on completing forms, without being distracted from the task. To help this, websites often remove features like navigation menus around forms, stripping back pages of any unnecessary features while people complete forms.
This is often referred to as enclosing the checkout, but the principles can apply to many different form types.
It can work well for the following reasons:
- Unnecessary distractions are no longer visible. With links and other features no longer visible, the shopper focuses on completing the form.
- Any information shoppers do need is more easily visible. This includes links to help pages, delivery information and contact numbers.
- It reduces the chance that people will click links which take them away from the checkout.
- It nudges customers in the direction of purchase.
Here’s an example from Crate & Barrel. The main website navigation has been removed, leaving the page stripped down to the basic checkout form.
15. Test and analyze forms
No form is perfect, so it’s important to monitor performance to spot areas where customers may be dropping out of forms, or where certain fields may be causing problems.
Sites can use analytics packages for this, as ‘goal flow’ stats these can show the percentage of visitors dropping out at certain stages. Unusual patterns can highlight possible areas of improvement.
User tests and feedback can more directly identify problems. For example, customer comments might tell you that a particular form field is confusing and may be deterring people from competing forms.
Even if customers are motivated to complete forms, poor design and usability can cause them to abandon purchases and sign ups.
The key to increasing form completion rates, and therefore sign ups and conversions, is to provide the best possible user experience.
Sites should look to remove obvious sources of friction, and find the right balance between gathering key information and making forms too lengthy.