Companies spend tremendous amounts of money and effort to get users on their checkout pages and drive revenue. At the same time, the checkout process can make or break the shopping experience. That makes it vital and at the same time turns it into a minefield. So what should we do to stay on the safe side? And most importantly what are the checkout process best practices?
In this article, we will try to answer 5 vital questions in front of every business owner who wants to sell online and provide you with enough information to create the amazing checkout user experience that your customers deserve.
The checkout process starts when a customer presses a button such as Buy Now or another CTA. It ends with either a sale or a cart abandonment. Even a small flaw on the payment page can make the user question their decision to buy. So a great checkout UX will focus on the user’s needs and will and will help them effortlessly buy what they want.
Question #1: How important is the checkout UX design?
Question #2: What Is The Best Checkout UX Process Right Now?
Question #3: What is the biggest falloff point in your checkout
Question #4: One Page, Multiple Page or One-Click Checkout?
Question #5: What are the specifics of a Mobile Checkout?
We all know that the checkout UX is important, but let's back it up with data. Here are just some metrics that can show the significance of a smooth checkout experience:
74% of people are likely to switch brands if they find the purchasing process too difficult. Most of them decide not to buy during the checkout phase.
Another study shows that 68% of users abandon their purchase after having added items to the cart. So, if the process is confusing, or if it takes too long, most customers will just buy from another, more accessible place.
The most disturbing fact is that while 58% of sites have good checkout experiences, most of them still have visible and preventable UX issues.
So, to increase sales and customer satisfaction, we should create the best checkout UX possible. But what does that mean today?
It’s no coincidence that most of the leading companies have similar checkout processes. They are simple, intuitive and well-designed. Most of them give options for guest checkout.
The checkout is not a place for drastic innovations. Users have their online shopping habits, and they want to buy, not to learn again how to buy. If something is new, odd, or confusing, chances are they will go elsewhere. Speaking of that, many people buy from Amazon, not because the site has the best checkout experience, but because people are so accustomed to it, that they know it by heart. So customers can checkout quickly and easily.
There are some proven standards that designers can follow and some conventional steps that are a part of any checkout flow.
When we shop online, we know unconsciously, we should add the items we like to the basket (it can be a bag or a cart, but the idea is the same).
Then we look up and search for the button at the top right corner. What button is that?
Primary information, such as important buttons are at the top right corner for a reason. Designers follow the logic of the famous Z-pattern, which is a subject of various studies. It is an eye movement pattern that forms the letter Z. The bottom line is that people spot easy information in the top right and top left corner and that’s why designers put the buttons there. When creating the checkout UX we should also consider the principles of visual hierarchy, which can help us position the primary and secondary information on the page.
Finally, we review the order, enter our details and payment information and confirm it. So this is a regular checkout flow. Now let’s talk about making it better.
Make it simple to pay - The checkout process should be simple. Don’t waste people’s time and don’t require additional details that you don’t need. Visitors on your websites are there to buy, not to register. So, give them the option for a Guest Checkout. If you need them to register, integrate the process in the checkout. Also, try to avoid so-called dark patterns that mislead the customers.
Make it intuitive - Buttons are in certain places on the page for a reason. A lot of studies show that the human eye spots the top left and top right corner of the page first, so that’s something that we can use. Even if a person visits your website for the first time, they should be able to buy frictionlessly.
Make it step by step - The proverb ‘Not all who wander are lost’ does not apply for web design. People should know what’s the next step of the process and the checkout flow should be smooth and crystal clear.
Tailor it to specific user needs - The checkout UX should be compliant with the needs of your specific audience. An ecommerce checkout page and a B2B enterprise checkout page will look different. Make sure to research the checkout flow best practices for the specific case.
Make it trustworthy - You don’t need to display your security badges and certificates, but you should certainly use verified payment methods. Providing additional payment options and information regarding shipping, delivery and returns is a plus, too.
Provide alternative payment methods - Payment getaways are major simplifications of the checkout process. If the customers prefer to pay via PayPal, they should have that option.
Crutchfield has a 3-step checkout process. Even though it’s pretty standard, it’s considered by some to be one of the best out there. (Their mobile checkout experience is great as well!)
Payment page UX
Amazon has a multi-step checkout process. They give clear product and delivery information, which is important for most customers. Amazon also provides on-site order confirmation and an option to view the order history in your account. Does Amazon have the best eCommerce checkout design? Hardly, but they've done a lot of other things brilliantly.
However, their checkout UX is not the best one and they seem to use some dark patterns.
In fact, some studies show that from the UX perspective the Checkout process is one of the worst-performing sections on the Amazon website.
One of my least favorite checkouts in the past was the Ryanair’s. It was so hard for me as a client to find the next steps and I remember spending tons of time to buy a ticket. However, their checkout UX is slightly better now. Yes, you still have to scroll down to find the Continue buttons, and there are some annoying pop-ups from time to time…
But now you have a price breakdown at the end, some pop-ups that actually help you proceed further and some alternative payment options. Thank you, Ryanair.
There are some common falloff points, but the best approach is to test what are the concrete issues on your website. You can do that by user testing, or you can even conduct a design sprint to identify and solve the problem.
These are some common reasons for cart abandonment during checkout.
You should have in mind that some of those are not entirely in your control - for example, people may decide to abandon their cart to compare prices. However, you should try to create the best checkout process possible. Speaking of that, not only the card abandonment but other factors, such as do people add more items to their carts, are relevant issues that need attention especially for ecommerce.
So, before creating the design, we should consider at least two main things. First, the strengths of mobile phones and tablets and their limitations. Second, people's needs and the way they use their mobile devices to buy.
“The smaller the screen, the bigger the challenge.” Bambora
Having all that in mind, there are some general tips about the mobile checkout process. It should be even easier than the desktop one. Nobody likes to fill numerous requested fields on their phones while traveling to work in the morning. Also, you should try to minimize the number of steps that a customer needs to take, for the same reason. On their phones, the customers should have the option to make quick changes to their orders, which includes a clear Remove button.
The Nielsen Norman Group gives a great example of how a customer buys from another place using mobile because it’s too hard for her to find the Remove button. People want to buy from you, they shouldn't be put into a position to search for buttons and hesitate.
Apple gives us an example of a well-designed mobile checkout process. Their mobile-first design and great navigation turn the process into a real pleasure.
Today you can also use Amazon Pay, Apple Pay, Google Pay, or similar services which turns out to be the quickest and easiest way to order an item online with just a few clicks.
The type of checkout that you choose depends on your business, preferences, audience and other factors.
Thoughts on One Page Checkout
From a client's perspective, one-page checkout seems compact, but at the same time, it mat be a bit overwhelming to have all the information displayed on one page. However, making a change is easier when you don’t have to go to a previous page to do it.
From a designer's perspective, it is almost impossible to provide all necessary information on one page, without filling it with too much text - and that rarely looks good. Another downfall is that the loading speed can be increased.
Thoughts on Multiple Page Checkout
From a client's perspective, a step by step multi-page checkout feels more reliable. Clients need a clear and easy to follow checkout flow.
That’s the challenge for the design team - to guide customers and create a seamless experience.
Thoughts on One-Click Checkout
This type of checkout enables you to purchase items online with a single touch. It was first presented by Amazon a few years ago. The idea is that your data (such as billing and payment information) is already saved in your account which makes the process quicker.
However, you can’t checkout as a guest and good luck with reviewing your order! That’s something design teams should work on in the future.
Placing an order, reviewing it and confirming it should be easy as pie. Create the checkout flow with care for your customers and their time. They will appreciate it.