Happy customers through an improved checkout « Boagworld
How hard can it be? All you need to do is collect their name, address and credit card information. That is all it takes to complete a purchase. Surely that is pretty straightforward.
In fact there are many ways you can make or break a checkout form, which is why I have compiled this list of common issues to consider.
I suggest you look at your own checkout and ask the following questions…
Do we provide positive feedback?
Most ecommerce sites are all too keen to tell you when you have done something wrong. However, users also sometimes need encouragement that they are doing the right thing. A visual indication that a field has been completed correctly goes a long way.
A visual indication that a field has been completed correctly goes a long way.
Do we provide examples of how a field should be completed?
If there is any doubt about how a field should be formatted (for example date formatting) it is worth providing an example for clarity.
Are we validating form fields as users enter information?
Instead of only validating a form when it is submitted to the server, also validate on the client side. This creates a more seamless user experience and avoids data potentially being lost when submission goes wrong.
Do we place error messages next to the problem that needs correcting?
Too many website only list their error messages above the form leaving the user to identify where the problem lies. Instead place the messages beside the form field that is causing the problem.
Place error messages beside the fields causing problems.
Have error messages been written with the user in mind?
Often the error messages on checkout forms are written by developers. Sometimes they are written more with debugging in mind than helping users overcome problems. What makes sense to a developer does not necessarily make sense to a user. Always ensure error messages are reviewed by somebody with UX and copywriting skills.
Finally, remember that although it is not bad to add some humour and personality to your error messages, they should also help the user overcome their problem. Examples like that below maybe amusing but are not very helpful!
Are we saving the user’s progress and handling timeouts gracefully?
There is nothing more annoying than searching for your credit card only to return to checkout and find your session has expired.
Actually I tell a lie, there is something more annoying. That is when you make a mistake checking out and not only does it returns a validation error but also wipes the form you had carefully filled in.
Data can be lost for all kinds of reasons from timeouts to connectivity problem. Save user data often, so they do not need to re-enter it if anything goes wrong.
Have we set good defaults?
Picking good defaults for fields can save users a lot of time when completing forms. For example the vast majority of users want you to remain logged into a site and so have the ‘remember me’ option selected by default.
The Huffduffer login has the remember me option ticked by default.
Are we allowing people to see their password when entering it?
Another nice feature of HuffDuffer is the ‘show password’ checkbox. This overcomes a common usability problem while maintaining security.
Users often mistype passwords without realising it because the password field is blanked out for security reasons. By allowing users to reveal their passwords when in private, Huffduffer substantially reduces user error.
Are we pre-populating as many fields as possible?
The only thing users hate more than filling in forms, is doing so twice. Despite this a surprising number of websites ask users to do exactly that.
For example some websites require users to fill in both delivery and billing address even when identical, or enter their name again when the site already knows it.
Even if you cannot be certain what a field should contain, pre-populate it with your best guess. The user can always overtype your guess if required.
Are we forcing users to register upfront or waiting until the end of process?
As is pointed out in an excellent article on econsultancy.com, most users do not like to register.
When buying, users are focused on purchasing and believe that registering will slow that process down. In fact the only additional piece of information required is a password.
Although registration provides benefits for both parties, users will often abandon the checkout process if forced to register.
A better approach is to offer them the option to register by creating a password at the end of the checkout process rather than the beginning. The sale has been made and the user is now mentally ready to consider the benefits of registering (like order tracking).
Users are asked to register after ordering on the Speedo website.
Does the checkout work with Javascript disabled?
I am appalled at just how many websites do not work with Javascript disabled. This is not some moral comment about the accessibility issues surrounding Javascript. Instead it is a financial argument.
As many as 1 in 20 users have javascript disabled for numerous reasons and no self respecting retail outlet would turn away 1 in 20 people from its store.
This is an area that causes a lot of confusion so let me be clear: I am not saying ecommerce sites cannot use Javascript. I am just saying that it needs to work when javascript is turned off.
I have already mentioned a number of techniques that require Javascript to work. However, the site should still work if these extras are not available.
I am not talking about building two versions of the site. I am talking about building the site without Javascript and then layering some additional javascript on top to create a better user experience for those that have it.
Is the validation on fields forgiving enough to understand different formats?
One of the most common problems I see on ecommerce sites is the frustration caused by forms not accepting user entry because it is formatted incorrectly. This typically includes:
- Dates
- Credit card numbers
- Passwords
The most frustrating part is that the user has entered the correct information, just not in a format which is accepted by the system.
Take for example credit card numbers. Do you enter them with spaces, without spaces or maybe even with dashes? Why should the user have to worry about this? It is a simple matter for the website to reformat the data later. This should not be the users problem?
Too many websites force users to format data in a specific way
Is the user suffering because of technical constraints?
The problem of data entry formatting is part of a wider issue where developers make users responsible for problems that they should not have to deal with.
For example, why should users have to fill in CAPTCHA fields because the website has a problem with SPAM? It’s not the users fault.
Why should SPAM and other website problems become the users concern?
Image source, Geek and Poke
Ask yourself if there are places on your website where the user experience has been compromised for the sake of an easy life for the developer.
Does the browser back button work?
For many users the browser back button is an invaluable tool that they rely on for navigation. However too often in the checkout processes, hitting the back button either entirely loses the users progress or returns strange errors that cause confusion and uncertainty.
Are we being greedy in the personal data we ask for?
It is understandable that those running ecommerce sites want to collect information on users, discover how they found the website and get permission to correspond with them in the future. However, users see these as barriers to making a purchase.
Even when these fields are marked as optional, users have to mentally process them and decide whether they should be completed. At the very least they have to check that they are not being opted-in to junk mail as in the example below.
Keep these kinds of marketing questions until after the product has been ordered. You are less likely to alienate the user and will gain a better quality of response because the user has not been tricked into completing the fields.
Are we rewarding users who go the extra mile?
When a user does go the extra mile and signup for a newsletter or tell you how they found the website, make sure you reward them for their time. Instead of using their email address to spam them why not email them a gift certificate or some other form of thank you.
During the US election, those who donated to the Obama received a free T-Shirt. This is not only a great gesture, it is also an excellent advertising strategy. Why couldn’t you do the same for your customers who are willing to signup for your newsletter?
If you donated $30 or more to the Barack Obama election campaign you got a free t-shirt
Are all of our buttons descriptive?
Users often do not read explanatory text, instead relying on links and buttons to decide what action to take next. However, when those buttons do not make sense out of context they can prove confusing.
Take the two examples below. If you were scanning those pages quickly and didn’t read the copy which is clearer:
ebuyer.com requires the user to read both text and button to make a choice.
On this site we ensured that buttons clearly explained what would happen without the need for supporting text.
Could our instructional text be clearer and more concise?
Many websites suffer from verbal diarrhoea during their checkout process. There is a belief that by using more words the message is clearer. However, in reality they just put people off from reading the text.
Take for example the amount of copy associated with this field in a checkout form:
In reality all that is required is:
- A heading entitled ‘Do you have any instructions for the delivery driver?’
- A field for instructions that has a character limit to prevent a user entering too much.
- A link to your terms and conditions
- A submit button.
There is no need for the current amount of text.
Do we require users to remember a username as well as a password?
Why does any site (let alone an ecommerce site) ask a user for a username? Surely you are just giving the user another piece of information to remember in addition to their password. This just doubles the chances of them failing to login.
A better way is to use their email address as their unique identifier. Its easy to remember, is guaranteed to be unique and is already a required piece of information on almost all ecommerce sites.
How do we handle bank card validation?
Sooner or later even the best designed ecommerce site has to hand control to the bank for credit card processing. Unfortunately there is little chance to control the user experience once this happens. From the paypal website to VISA card validation, these sudden changes in user experience can make customers nervous.
Bank validation forms can be a confusing additional step in the checkout process.
It is important to clearly communicate what is happening and minimise the impact to the user. Too often users are simply dumbed onto these pages with no indication as to whether the order has been completed or why they are there.
Conclusions
The reason I have written this checklist is because in the rush to deploy it is easy to forget these nuances of design. However it is these details that make the checkout process pain free and trustworthy.
We often concentrate too much on functionality and not enough on user experience.
I am not suggesting that failing to implement any one of the points will drive a user away. However, combined they have a significant impact on how somebody perceives the reliability and ease of use of your website.
Sometimes it just needs another set of eyes to look over your checkout and pick up on these problems.
So what did I miss? What things would you add to my checkout checklist? Post your ideas in the comments below.
Are you concerned about your checkout process? I would love the opportunity to review it and help fix any problems found. Email me and I’ll take a look.Looking for more ecommerce posts? Try my post on Calls to Actions.
Related Posts:
What did you think about this post?
About this entry
You’re currently reading “
- Published:
- 14:53
- by nathski
0 Comments (Post a Comment)