Beautiful-checkout-UX

5 beautiful basics of checkout UX

Good usability is the balance between your user’s needs and business’s objectives. It’s easier to get alignment between these things in some industries than others, but nowhere should it be easier than in the world of ecommerce.

By and large, people will shop online because they have a need, or a desire, for a product. They might not know which exactly it is yet, but overall they want to buy. Retailers want to sell.

Although it’s often dangerous to oversimplify, it would be foolish to unnecessarily complicate online shopping. As with brick and mortar shops, the idea is to reduce the barriers to purchase by making products easily visible, clearly labeled, and preferably not following customers around the store asking them if they need help every 5 seconds. Then of course, comes the queue and the checkout.

Generally, shopping sites have made it easier and easier over the years to find what you’re looking for, and technology has eliminated the queue by promoting a concept of self-service. The checkout however, is the transaction-heavy part of the experience where almost all the information exchange occurs, and unlike purchasing in an analogue shop, more information is required to make it all work.

The fact that it should be simple doesn’t negate the fact that a lot of online retailers still struggle with making the checkout as user friendly as it could be.

As such, I’ve put together a list of 5 “beautiful basics” of checkout UX that should help to align user needs and business goals, resulting in increased revenue and happier shoppers.

 

1. Offer guest checkout

This one should be a no-brainer, but many online retailers still don’t offer the option. Making a user sign up for an account for what might be a one-time purchase is like a cashier in a brick-and-mortar store asking for your ZIP code in order to purchase a broom. It’s unusually invasive and some people bristle at it.

BeauCheck1

People have cottoned on to the fact these details are all about marketing opportunities. You shouldn’t have to provide personal details in order to purchase something simple. In fact, 25.65% of online shoppers in an Econsultancy survey suggested that being forced to register before purchase would make them abandon their purchase:

BeauCheck2

Marketers will be quick to say “but if we don’t know who they are, how will we target them?” but this is one of the best examples of the business goal taking precedence over the user need.

As a business, would you rather have a small number of increasingly disgruntled users you can incessantly email? Or a larger group of users that found it easy to use your site, don’t feel hounded and may well return of their own accord?

If someone doesn’t want to sign up for an account, or your newsletter, forcing them to do it does not make for happy customers.

There’s an easy solution to this problem as well.

BeauCheck3

By offering a simple option towards the end of the checkout process to create an account (usually denoted by an explanation and optional password creation fields) you provide users with several potential reasons to register:

  1. It’s still optional at this point, therefore the user doesn’t feel pressured
  2. It doesn’t seem as invasive because details have already been provided under a necessary and familiar pretext
  3. It would be quick and easy at this point. “This experience has been good so far, maybe I will return at some point…”

 

2. Offer a defined, linear process

It’s expected that you have to enter some details during checkout. You want the item, so you have to pay, and you definitely want it delivered to the right address. These things usually happen in a common order as well.

This is logical, as it allows you to enter relevant data that goes into checking subsequent steps (such as billing address before payment details, where your card’s registered address is checked against the billing address).

Interface elements such as the step tracker or progress bar let a user know exactly how many steps they will expect to fill in, and gives an impression of roughly how long it should take.

BeauCheck4

If during your checkout process, you add steps suddenly, or take users off the linear path, this can be surprising. In short, unexpected turns in the journey are frustrating and raise barriers to completing checkout.

 

3. Optimize data entry for speed and accuracy

One of the key usability considerations of forms is how hard you make the user work to enter their data. Accuracy is important, but if it puts the onus on the user to ensure everything is correct, it increases the amount of time they have to spend and therefore the amount of frustration they experience.

If every individual element of a form is as easy as possible to fill in, it makes the whole form experience go even more smoothly.

At PCA Predict, our bread and butter is address lookup and validation. Address entry usually requires several fields and forces the user to remember all the information. It may seem like a shameless plug, but it’s what we do and we know the results well.

We knew that by making it into one simple field whereby the majority of the information could be looked up and the correct format entered, we could reduce the effort and time required to complete this traditionally onerous part of most forms.

BeauCheck6

It’s not just our Capture+ product that does this however, there are many different types of data that users have to remember and enter that could be made easier bit by bit for a much more pleasant form experience.

 

4. Don’t make users enter data twice

This point follows naturally in a way from point 2, but is distinct in the sense that whilst business and IT departments understand the need for different systems to be present in the checkout process, users see their relationship with a retailer as a one-to-one relationship. In short, they couldn’t care less if you have to pass data between different systems.

They give information to you once and assume it will be used appropriately in processing their order. Let’s take our earlier example of taking the billing address before payment details, where your card’s registered address is checked against the billing address.

Some retailers implementing multiple systems to manage the checkout do in fact require the user to enter the address their payment card is registered to again on the payment details step of checkout, despite the fact the user has already entered a billing address. Semantically, this is the same thing, so this is both unnecessary and irritating.

 

5. Never assume your work is done

Most importantly, as with any UX consideration, context is key.

Let’s say your checkout is performing well. You should never assume you have the perfect solution, even if it performs incredibly well in lab testing and in the real world. Just be happy that you’ve got it performing for now.

The digital landscape shifts with incredible frequency and magnitude. What works one day may not work the next. Also, there’s always room for improvement.

This is a bit of a cop-out, because it could apply easily to any website, but testing with users early and often will keep you aware of changes in customer behavior, technology and what your competitors might be doing.

  • Test
  • Improve
  • Test again
  • Repeat

It’s easy to get caught up in the design aspect of UX Design, when the users are easily the more critical component. Keep empathy at the forefront of your toolkit, Involve users regularly and you will do great things.

 


  • Hazel Bolton

    Nice list Larry. The checkout is the bit shoppers want to get over and done with so any tips on making that process less of a barrier are great.

    These days mobile compatibility is pretty important for checkouts. I’ve seen a few ecommerce sites that look okay on mobile until I get to the checkout and then it gets really difficult to see the whole page and fill out the form. I think anything that reduces the amount of info I have to type is fantastic e.g. postcode lookup, Paypal login or camera scanning to add a payment card

    • Sarah Jones

      Yeah, I love the card scanning option too Hazel

      • http://www.nycmixing.com/ Ravi Jay // @nycmixing

        I completely agree, adding options like Apple Pay, PayPal and now Amazon definitely saves time. Its frustrating when you get to the checkout, only to have to look up you credit card information, or have the hassle to go back and register and then find your cart has been emptied.

        Anonymous Checkout, I’m skeptical about this option in that how do you track your order progress? Seems like you have to give over your information to be used for marketing campaigns, as a trade off for tracking your packages.

        #nycmixing