Checkout optimization is what seals the deal in an eCommerce experience. A clunky or confusing process has the ability to turn a successful sale into an abandoned cart. Cue photo of sad lonely shopping cart.
Increasing the speed of field input makes the process move faster, appear easier and gives shoppers less time to consider abandoning their transaction.
The Baymard Institute documented an average of 67.91% of online shoppers abandon their shopping cart. Their findings were extensive, reviewing over 500 checkout steps and benchmarking the top 100 grossing eCommerce sites. I will be referring to some of their statistics throughout this article.
Keep in mind that every market varies and it’s important to know your audience. A/B testing is encouraged to ensure you have your checkout process optimized for your target shoppers.
Below I have outlined some visual direction on the design of your checkout as well as best practices that decrease frustration when completing an order.
Part I: Design Tips
1. Display a Process Indicator
Have you ever taken a call from someone who wants to do a “quick” survey? Ok, so maybe I’m the only sucker who ever says yes. Suddenly 15 minutes has passed and I’m growing frustrated wondering how many questions are left. I’ve already come this far… but I’m ready to hang up.
When customers are completing online checkout forms they want to know where they are, what’s left and how much longer until they’re done. Displaying how many steps are involved will give them a clear picture of the whole process and alleviate any anxiousness or doubt. A progress bar gives your shoppers a sense of control and creates satisfaction as they virtually check things off their list.
The example below from Everlane keeps the process indicator along the top. They’ve made it obvious what has been completed and what’s left by the use of numbers, colours, and transparencies. Try not to drag out the number of steps. Many sites use only a 3-4 steps including Shipping, Payment, Review and Place Order.
2. Use Visual Cues
Here are some ways you can assist your shoppers in completing necessary fields quickly and efficiently.
3. Don’t Forget Mobile
The online checkout process can be very cumbersome. Using a mobile phone or tablet only adds more obstacles. If your site is responsive you need to keep mobile in mind while designing for desktop. Here are some ideas on how to design for a mobile checkout:
4. Include an Order Summary
Displaying an order summary throughout the checkout process reassures users they’re purchasing the products they intended.
Here is an example from Kate Spade:
Part II: General Best Practice
5. Easy to Navigate Customer Support
A user feeling unsure about return policies is a good enough reason to abandon their purchase. There are three important support elements that should be prominently available:
1. Shipping and return policies
2. Toll free number
3. Online chat feature
We all know that customer service is at the crux of retail success. Providing customers with live support brings the brick and mortar feeling to eCommerce. If a shopper has a quick question they don’t want to wait several days for a reply. And you don’t want that either! Having the personal interaction builds trust and allows your users to feel as though you are there to assist them, just like an in-store experience.
Apple does a great job of accommodating potential questions and concerns throughout the checkout. They have a simple text link “Need help? Just ask.”, which is not distracting but positioned in a way that it’s noticeable. They also have a “Chat Now” link along the bottom of each step in the process. Lastly they have a “Questions” section at the bottom that outlines common concerns around delivery and payment.
6. Allow Guest Check-out
Collecting customer data can be crucial to commerce success online and in-store. However, is it more important than converting a sale? Many users will abandon their purchase if guest checkout isn’t an option. “Ugh I don’t have time to make an account… I just want to buy this”, “Why do they need this information?”, “I’m not going to buy this if they’re going to send me emails all the time!”. People don’t always feel comfortable sharing their personal information, especially if you are a new online business without a validated reputation.
According to the Baymard Institutes checkout usability database, 24% of users would abandon their cart due to compulsory registration. That is an astronomical number!!! Keep in mind that if you provide a quality experience and superior products the user will likely register for their next purchase.
If you feel that registration is important to your business then a suggestion would be to give your customers a small reward for doing so. For example, offering free shipping for those who register or auto-completing forms. This way you can offer guest checkout while encouraging them to create an account in a way where they see the benefits.
Below is an example from Chapters. They specify the benefit to joining in dollars saved, while still offering a guest checkout.
7. Newsletter Should be an Option
A staggering 81% of eCommerce sites presume their customers want a newsletter subscription. This only feeds people’s presumptions that creating an account = receiving countless annoying emails. Many sites will automatically check the newsletter box while others won’t even give an opt-out. This makes users feel as though you don’t value their privacy and are are taking advantage of the data they provided (which they assumed was strictly for purchasing purposes). Just like hidden fees, it gives a sense of being scammed.
The example below is from Amazon. By registering a new account there is zero indication that users are automatically being signed up for a newsletter.
Unfortunately, many people consider newsletters spam which is a misconception created by the inability to easily opt-out. So let’s stop the madness shall we?
8. Only Ask Relevant Questions
Keep everything as quick and simple as possible. Do not use the checkout as an avenue for collecting customer data. The goal should be to complete a transaction as quickly and easily as possible. Simply put, the fewer questions you ask, the more people will fill out, the less likely they are to get frustrated with the process.
According to Baymard, 50% of eCommerce sites ask for the same information more than once. This just drags out the process and adds friction to the experience. Users shouldn’t have to fill out their address for both shipping and billing when it’s often the same. The example below from Warby Parker shows that once you fill out your shipping address you can simply click “use as billing” for the next section. This cuts your checkout input almost in half.
Only 10% of the top 100 grossing eCommerce sites auto-detect state and city based on zip codes. Although this is still an emerging functionality, it seems like an obvious one to improving the speed of input. Joe Fresh has already implemented address fields that update as you type:
9. Establish Trust and Security
eCommerce is growing quickly, but many people still have lingering reservations about their security in a virtual world. In the end it comes down to trusting that their purchase will be billed properly and products will be delivered as promised. There’s always a lot of controversy surrounding data leaks which can rock customer’s confidence… especially new online shoppers.
There are a few ways you can help your shoppers overcome these hesitations and complete an order with confidence. Having clear points of contact lets shoppers know that if something were to go wrong there are real people they can get in touch with (see #5 on customer support). Simply using the header “Secure Checkout” or graphics which say “100% Secure Shopping” will help put their minds at ease. Have links available in the footer outlining any return policies and include logos for payment methods (Visa, MasterCard, PayPal). This example from Indigo shows the wording and badges they place along the top to enforce trust and security.
10. Be Transparent With Fees
Display the complete payment summary from the get-go. Hidden delivery costs are a big reason a shopper would abandon their purchase. Adding extra charges at the end just seems scammy and breaks any trust you may have built. It can be extremely frustrating going through the cumbersome task of filling out all the fields to be disappointed with a price raise. It could suddenly be over budget or become the same price as buying in-store. It really makes the customer re-consider before pushing that final confirmation button.
One trend is calculating the shipping fees on the cart page before entering the checkout process. Snugglebugz uses this method:
Another direction that helps is including an order summary (outlined in #4) that auto-updates as you fill out your information.