Happy customers through an improved checkout

You would think that the checkout form would be simple. However often users abandon their purchase, because the checkout form fails to deliver.

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.

example of positive feedback

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.

Checkout form that includes an example of how a name should be formatted

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.

Example of error messages placed next to the problem

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.

An example of a login form that has remember me checked 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).

The registration form at the end of the checkout process 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?

A checkout form that requires users to enter a credit card number without spaces or dashes.

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.

Cartoon highlighting how hard CAPTCHA is.

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.

Example of a checkout form where the user is being asked for unneccessary information and is being opted in to unsolicited email.

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?

Obama fundraising website

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:

Example from ebuyer.com that requires the users to read both text and button

Example of a site where the button describes the next action without the help of explanitory 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:

The copy reads: if you have any additional information or special instructions that you want us to pass over to our courier please enter them in the text box below (maximum 30 characters) and click the Add Instructions button. This must be done before selecting your shipping address. Please be aware that neither Ebuyer nor our delivery partners can accept responsibility for any loss or damage when the special instructions provided have been followed.

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.

Verified by Visa example form

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.

Looking for more ecommerce posts? Try my post on Calls to Actions.

  • http://www.brynsbin.zxq.net/index.php Kevin

    I totally agree with your paragraph about having users remember usernames. I get so annoyed when e-commerce sites ask for a username. There is really no point to it. I go on e-commerce sites to buy things not socialize. Usernames should only be for sites where there is heavy interaction with other users. All e-commerce sites should stick to just e-mail.

  • http://www.studiokarlescritt.co.uk karl escritt

    Great post Paul, as someone who designs sites for many high street retailers this is really close to home. I will be double checking many of these points on my next e-com site.

  • http://www.iheartusers.com Carrie Trieglaff

    I really enjoyed this blog post – great advice. I have added several of your points to my checkout best practices checklist! Thanks for taking the time to write it and include all of the juicy examples.

  • http://www.xmediasolution.com Website design chennai

    Great posting .i got very usefull information e-comm site..very usefull posting.continue ur service mr.paul

  • http://www.robwinters.co.uk Rob Winters

    Handy check list that. And great timing as we are kicking of the build of one of these today.

    Especially like the point about “forcing users to register upfront or waiting until the end of process” It reminds me of Jared Spools’ “The $300 Million Button“. Very good.

  • http://www.webcode.uk.com Bernard Kearney

    Great post! User experience on E-commerce sites is becoming more and more central to their success. Does anyone know of any other links to interesting user centered trends on E-commerce site articles?

  • http://www.contentformula.com Daniel Keegan

    Great list to refer back to – bookmarked!

    About the “instructions for courier” field, if we’re not going to explain that there’s a character limit to the user, there should be a figure indicating how many characters they have left to use in the field.

  • http://www.thebrisbaneline.com Web design portfolio

    some great and common sense advice in approaches to design and functionality!

  • HC

    The only point you make Paul, which I’m not sure is always true, is whether it is always worthwhile making sure the process works without javascript.

    There is a higher cost in ensuring the site works acceptibly with & without javascript and surely it’s really a decision for any business whether or not that’s worthwhile.

    There are, afterall, lots of bricks & mortar businesses that don’t commit resources to capturing that last 5% of their potential customers.

    • Mark Gibaud

      I’m also unconvinced about chasing the last 5% of non-javascript users. With ever-finite resources I’d rather put those behind making a better experience for the 95%!

  • http://www.jasonneel.com Jason

    Nice post, Paul. This reminds me a lot of what Luke W. had to say in his book about web form design.

    Is it weird that enjoy designing forms?

  • Manasi

    Nice one, Paul. I especially liked the feature of ‘show password’. But I hope it doesnt affect the security of the passport.

  • Garison

    I disagree with the paragraph about usernames. My email address is 24 characters long. My standard username is 9. Guess which I’d rather type in? The article mentiond about about the “$300 million button” points out that many people have multiple email addresses, and it’s a pain in the patootie for them to remember which one was used. While many people might have separate addresses for different ecommerce sites, I think most people will use the same username for all accounts. What’s best, then, is to take the email address the shopper entered, and generate a unique username from that (via JavaScript). The shopper can change it if he or she wants. Accepting both the username and email as a login satisfies all customers.

  • Charles

    GREAT POST!! It amazes me how little attention even big companies give their checkout process. For instance, I recently did my free annual check of credit reports. After viewing my report on Equifax, I decided to spring for the $8 for my credit score. After filling in all the info, including my CC details, I clicked submit. Poof–all I got was a completely unrelated page about downloading a PDF to fill our for a free credit report. After hunting the site for phone numbers, and two long phone calls I was told I didn’t have a credit score. All I ever got from over a week of emails was a polite, send us a copy of your CC statement, and we’ll see about refunding your money. Not once did they even acknowledge any problem with their website or system. Charging someone’s card when you have no product to sell is plain wrong. Not fixing that kind of problem is plain stupid.

  • Anonymous

    Great post, I will improve the forms on my websites using your ideas, thanks

    Amy @ Cowboy Millionaire Review

  • http://www.easy-video-suite-review.com/ Easy Video Suite

    You’re right, checkout and registration forms should be improved, especially the ones from american website since some of them ask you information that you cannot have if you live abroad (eg. Social security number or drop downs with just american states and no option for choosing another country, etc)

Headscape

Boagworld