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 blog posts.
Nothing irks customers more than a lousy checkout experience. Potential buyers drop the cart and close the window at the first sign of trouble (or even in the lack of one). 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 in, I want to access the cart to check out whenever I wish quickly. 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. So that’s a straightforward way to position a persistent cart.
Helbak has a simple icon on top of the page that remains static/fixed. Thus, 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. Many people just quit when 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.” So 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 sign up for an account or sign in if I already have one. But keep that on low priority. Design (or use a theme) so that the sign-in/up elements are not more prominent than a simple email field.
Every Shopify website has a simple checkout where you need to enter your email and shipping address. Minimals, which runs on Big Cartel, has a beautiful, simple, no-sign-up checkout form.
And so does Jimmychoo.
#3. Please don’t ask me to type a lot
One good way to ensure a successful checkout is to make it quick. For example, five different address lines and three different street lines are not part of my shipping address. Also, phone numbers and fax machines are in 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 turns 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 know the order of a checkout process (checkout cart, add shipping info, select payment, pay, receive confirmation of order), it visually shows 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. A pretty clean but straightforward 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 skipped a mandatory field – I need to know all of them correctly.
The ideal way to 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) to 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 sales funnel’s last legs, where there ought to be nothing else. So a single focus on completing the checkout should be a part of the theme/design.
However, many websites 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 purchase something related. This increases the chance of the associated purchase, raising the sale value.
The trick lies in crafting design and copy that is suggestive and not promotional. A friendly suggestion is good. 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. For example, having a prominent coupon field (not a link that I have to click to open a text field).
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!
Having a prominent coupon box, you’re helping me, and as a buyer, this impacts me subconsciously.
Skinny Tie is a perfect example.
#8. Could you 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 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 added to your cart and 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 in your shop.
- Never force me to sign in or sign up. Asking for my email only is good.
- Could you not make me fill out a lot of fields? It’s a checkout, not a survey.
- Could you 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!
- I was hoping you could 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.
This is a guest post from Chandru, an eCommerce researcher, and writer for Around.io – a powerful social media automation tool for your shop. Try it free for 14 days.
