Did you know?
69% of all e-commerce visitors abandon their shopping cart.
Firstly some users just use their shopping cart as a way to store the products they want to research or find out more about later – they’re just collecting information. Unfortunately, you can’t avoid this.
However, the vast majority of users will abandon their shopping carts or baskets due to a difficult checkout process that isn’t linear, asks for too much personal information and is difficult to complete on mobile devices.
In this short post, we’ll give you 9 tips you can action on your checkout that we guarantee will increase your conversion rate and reduce checkout abandon rates on your ecommerce website.
1. Stop confusing people when they enter their name
Our first tip is nine times out of ten the very first step in any checkout process – the “first name” and “last name” fields.
You’d think entering these details would be pretty straight-forward for users, but you’d be surprised to know it’s not. And the reason why?
Eye tracking studies (where users eye movements are tracked by special equipment as they view web pages) show that when completing a series of form fields, we don’t look ahead, we just concentrate on the form field we’re working on at that moment in time.
So when you have a field that says “First name” followed by “Last name” people will often enter their full name in that first field and then move onto the “Last name” field, realise they shouldn’t have entered their full name in that first field and then have to copy and paste their surname into the correct field.
It sounds odd, but testing shows that when people are confronted with a “First Name” field they tend to think of their name being their full name, e.g. “Joe Bloggs” and not “Joe”.
All this takes extra time, is frustrating, is a real pain on mobile and causes friction in your checkout process. So how do you fix it? Combine “first name” and “last name” into one field called “full name”.
2. Don’t ask people to add their title
Asking for the user’s title (e.g. Mr, Mrs, Ms) adds another step that adds friction to your checkout, so leave it out unless you really need it.
Asking for seemingly unnecessary information frustrates users so don’t do it. If you absolutely must, then research from The Baymard Institute shows users will be more forgiving if you explain why you require this information.
3. Avoid confusion by hiding “Address Line 2”
Another roadblock in your checkout process happens when your customer reaches the address fields, which on most e-commerce checkouts typically get broken up into two fields; “Address Line 1” and “Address Line 2”
Research has shown that forcing people to think about how their address should be split into two sections causes confusion, especially if the address they are entering is a work address that perhaps they aren’t as familiar with.
The fix for this is to simply show the “Address Line 1” field, but hide the field for “Address Line 2”. Instead have it as a text link with a ‘plus’ icon, so that the user can click to show that field only if they need it.
4. Auto-detect “city” or “region” when the user finishes typing their postcode
After the address has been entered your user has to move on to selecting their “city” or “region”. These free typing text fields can be prone to errors, so the best way of eliminating these is to integrate a third-party service like Getziptastic so that when a user enters their postcode, the city or region fields are auto-filled.
If you do integrate functionality like this though, you must ensure that you let the user manually adjust the output, just in case the wrong region gets displayed.
5. Don’t duplicate shipping fields and always make sure “Billing Address” comes before “Shipping Address”
If the user specifies that their shipping address is the same as their billing address, don’t then display all the same form fields for shipping again as it adds confusion and clutter.
This causes friction even more so if there is a typo upon submission of the form, as the user has to scan back through all the info they’ve typed out to find the error.
The best way to implement this is to simply have a checkbox for the user to select if they want to use the same address for their shipping.
You’ll also need to ensure that billing address details come first in the checkout process too as logically this makes more sense.
6. Don’t ask users to create an account early in the process
Asking your user to create an account early on in the checkout process causes friction and makes it much less likely for the user to complete their order. Essentially it’s an inconvenience to have to do this.
Obviously, you want users to create accounts so you can market to them and turn them into repeat customers, so the best way of getting them to sign up is to ask them to create an account after they’ve entered their shipping address details.
Keep this simple by just showing a checkbox, which when clicked displays a field for them to enter a password.
7. On the fly validation for card numbers
Card input fields are the most error-prone fields in the whole checkout process.
What frustrates users is when they enter their card details, no errors are shown, they continue completing the checkout form and only when they submit the form to pay, do errors come back.
You can easily avoid this by having your developer use a third-party service that utilises “Luhn Validation” to check if the user has entered a valid card number before they submit the checkout form.
Our bonus tip here is to also force the formatting on the card form field so it automatically adds spaces after every 4 digits.
Added bonus tip: one simple design technique you can implement to increase your user’s perceived security of sensitive information, is to highlight the card details section of your checkout process by boxing it in, or adding a border around it. This technique makes it seem visually more robust than the other info on the page.
8. Optimise for mobile keyboard
Checking out on mobile is usually a slightly longer process and moving through fields and using the keyboard to type means you need to think more to be accurate.
To make buying on mobile as pain-free for your customers you must utilise the mobile keyboard for relevant fields; phone number, card number, etc, as it helps make inputting information much quicker. The large buttons also mean the potential for errors is reduced massively.
9. Eliminate layout quirks
Any kind of inconsistency in the way your checkout looks and displays will affect perceived trust.
Your users probably lack technical knowledge, so whilst your checkout will still work perfectly if there are quirks in the way it looks you’ve blown any kind of trust you’ve previously built.
Here’s an example of this is placeholder text not disappearing when the user starts typing their postcode.
This won’t affect the successful submission of the form, BUT when you’re just about to part with your money to purchase something, it places doubt in your mind about the security of the site in question.
To prevent these kinds of layout quirks you (or your e-commerce web design agency) need to be regularly testing your checkout in a variety of web browsers (IE, Firefox, Safari, Chrome) and also on Android and Apple Tablets and Mobile phones.
Have questions about implementing any of this information?
Your checkout process can make or break your e-commerce website. Implementing the adjustments we mention above will improve your conversion rate and mean fewer people abandon your checkout process.
If you’d like to discuss how you can implement these fixes or any other element of your e-commerce site, then feel free to give us a call on 01747 852298, or use the contact form on our site to start a conversation via email.
We’d be happy to help and offer up some suggestions for how you can better optimise your e-commerce checkout process.
Sources & further reading
- Baymard Institute – Perceived Security of Payment Form
- Baymard Institute – Checkout Experience: Don’t Require Seemingly Unnecessary Information
Would you like to be notified each time we post new digital media?