Of all the places you’re losing customers, the checkout turns out to be a culprit in every survey. Abandoned carts have inspired an entire generation of white-papers and blogposts.
Nothing irks customers more than a bad checkout experience. At the first sign of trouble (or even in the lack of one) potential buyers drop the cart and just close the window. This is not so good because the checkout is the last step of the purchase and this is as highly-interested-in-buying as visitors can get. If you’re losing sales at this point, your checkout experience needs some serious thought.
Best eCommerce Checkout Designs for Success
The mantras of crafting a great checkout experience are extremely simple. If I was to summarize that in four words, it would be “do not be eBay.” Simple, right?
Simple, however, isn’t easy so we’ll break down a beautiful checkout experience into the elements and explore each of these. We’re focusing on the design and interface elements here. For the rest of this write-up, I’m going to be the guy who wants to buy from your shop and is ready to take my card out to purchase!
#1. Make the cart accessible from anywhere
No matter which part of your shop I am on, I want to access the cart quickly so that I can check out whenever I wish to. For this purpose, make the cart accessible from anywhere. It’s called “persistent cart positioning” and you are right; I made that up right now. The key is to have a persistent cart on your website.
Most themes are built to feature a cart on top of the page and it’s fixed even if you scroll down. That’s a very simple way to position a persistent cart.
Helbak has a simple icon on top of the page that remains static/fixed. Easy, quick access to the cart whenever and wherever I want.
Eastworksleather is another shop that has a cart and a very prominent one at that. Some (like me) would prefer something smaller but the idea is clear.
#2. Never make me sign in / sign up!
KISSmetrics reports that this is one of the major causes of failed checkouts. A lot of people just quit when they are faced with a checkout step where they either have to sign in or sign up.
It’s okay to ask for my email address because that’s how you’re going to update me about the order but I don’t have to sign up or sign in to purchase from your shop. It doesn’t make any sense to me – as a buyer – to “create an account” even though “this will make my checkouts faster next time”. If you’re forcing me to sign in or signup, forget next time. Forget this time too.
However, it is perfectly fine to suggest that I can sign up for an account or sign in if I already have one. But keep that on low priority. Design (or use a theme) in such a way that the sign-in/up elements are not more prominent than a simple email field.
Every Shopify website has a simple checkout where all you need to enter is your email and your shipping address. Minimals, which runs on Big Cartel, has a beautiful, simple, no-sign-up checkout form.
And so does Jimmychoo.
#3. Don’t ask me to type a lot
One good way to ensure a successful checkout is to make it quick. Five different address lines and three different street lines are not part of my shipping address. Also, phone numbers and fax machines are the 90s already.
Checkout is a way of getting the most basic data required to ship. This means email, shipping/billing address, and payment. Anything more is turning your checkout into a survey and you know how people react to online surveys.
One of the best checkouts with minimal info asked comes from Herschelsupply‘s shop.
#4. Indicate progress
Although most buyers now know the order of a checkout process (checkout cart, add shipping info, select payment, pay, receive confirmation of order), it helps in visually showing how close the buyer is to complete the checkout.
Most websites use a very minimal checkout progress indicator (the breadcrumbs). This is fine if the breadcrumb text size is large enough / prominent on the page.
Skinny Ties makes use of a sidebar to show how many steps you’ve completed and how many remain. Not just this, but it also shows the data that you’ve entered on it. Pretty simple but a clean way to help you cross-check/verify data yourself.
#5. Show me clear error messages
The next best thing to clear instructions when filling out the online form at your shop’s checkout is clear error messages. If I did not enter a value correctly, the only way I’ll know it is when you point it out to me.
If I’ve entered an extra “.” in my email, or if I’ve entered an extra digit on my zip, or if I’ve skipped a mandatory field – I need to know all of these correctly.
The most ideal way to do show errors is to print them right next to the field/box where the error has been made. A user-experience hack that helps is to make sure the error fields are highlighted from the first error (top) so that I can sequentially correct the mistakes from top to bottom and then press checkout in a flow.
Here’s an example from Good wares, which uses the Shopify checkout.
Here’s one that almost gets it right but then, fails. Wootten shows you the errors but the error message does not fade away (or disappear) when I start typing in the form again.
#6. Keep the checkout clean!
An easy rule to remember: do not shove promotions, other products, Adsense ads (or other ads) in my face when I’m on your checkout page. Checkout pages are supposed to be one of the last legs of the sales funnel where there ought to be nothing else. A single-focus on completing the checkout should be a part of the theme/design.
Many websites, however, use the checkout to promote a related product – and the results are wildly successful. The keyword here is “related.”
Island Creek Oysters casually recommends a few items based on your purchase and links them up so it’s easy to shop for them.
It is also cool if you throw in a discount if I purchased something related. This increases the chance of the associated purchase, rising the sale value.
The trick lies in crafting design and copy that is suggestive and not promotional. A friendly suggestion is good, a forced promotion is not.
#7. Make it easy to add a coupon
Some websites derive an evil pleasure in burying the coupon box beneath several layers of text and fields. I don’t know why but having a prominent coupon field (not a link which I have to click to open a text field) is great.
The reason is simple: if I have a coupon with me, the first thing I’m going to do at the checkout is to see if the coupon works and if yes, how much I save!
By having a prominent coupon box, you’re helping me and as a buyer, this impacts me subconsciously.
Skinny Tie is a perfect example.
#8. Show me how many items my cart has
This has become an industry standard. Although not exactly “important” by way of function, it helps me to know how many items I’ve ordered. This gives me the quick ability to head to my cart and modify the items if necessary.
A lot many websites do this in different ways.
A twist to this is showing a semi-obtrusive popup whenever I add an item to the cart.
Jimmychoo drops down a box to show an item has been added to your cart and to show you what your cart has presently.
Herschelsupply takes it a little further. A cart-box – with the details of the product you just added – slides in and then fades out.
All of this boils down to…
- Make the checkout page responsive!
- Make the cart and checkout page accessible from anywhere on your shop
- Never force me to sign in or sign up. Asking for my email only is good.
- Don’t make me fill out a lot of fields. It’s a checkout, not a survey.
- Show me a progress indicator. It helps to know that I’m just 2 – 3 steps from placing my order.
- If I made an error, tell me and – even better – point the exact field out to me.
- Keep the checkout clean and ad-free. I don’t want to be distracted by in-your-face promotions.
- I got a coupon to use! Keep the coupon field very prominent!
- Show me how many items I have in my cart at all times.
Now check your checkout/cart and tweak it so it’s one of the best carts out there.