10 Ways to Improve Your eCommerce Checkout

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.

0.SadCart

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.

1.ProgressBar

2. Use Visual Cues

Here are some ways you can assist your shoppers in completing necessary fields quickly and efficiently.

  • Make the field size and length reflect the content. For example, your street address should have a longer field width than a postal code. If you need users to input their phone numbers in a certain format, then give them the fields to reflect that. Crate & Barrel do a nice job of separating the phone number fields so it’s obvious how they want it inputted.

    2.VisualCues-Fields

  • Use asterisks for mandatory fields so users know what they’re allowed to skip.
  • Take advantage of accordions, drop downs and radio buttons. They help organize information in a function that users are familiar with. If there is a long list of options a drop down will make better use of your space.
  • Indicate when things are missing and most importantly, where they are missing. Ideally this happens as information is completed. Alternatively, if a user hits a submit button, and are unable to proceed it should be obvious what they have missed within the form. Below you can see how Apple handles this with the use of colour (fields turning yellow) and a small pop-up:

    2.VisualCues-WhereMissing

  • Some sites highlight the field users are typing in to ensure they don’t get lost if they look away or leave the computer for a moment. Indochino for example:

    2.VisualCues-Highlight

  • 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:

  • Reduce the input fields to the bare essentials. It’s already a tough process so don’t start asking for their home phone, work phone, and cell phone.
  • Remove any content that would distract from completing the purchase. This includes social media icons, store locators… even your shopping category links.
  • Leverage mobile UI elements. Snugglebugz pulls in iPhone toggles which are easy and familiar to users.

    3.Mobile-UI

  • Design for mobile gestures and thumb (not mouse) clicking. Make your fields at least 40px high so they are easy to select. Use swiping when it makes sense. Consider using large +/- buttons as opposed to quantity drop downs like Snugglebugz below:

    3.Mobile-Buttons

  • 4. Include an Order Summary

    Displaying an order summary throughout the checkout process reassures users they’re purchasing the products they intended.

  • Show a picture: the visual reminder of what they are paying for creates excitement.
  • Show attributes: listing the size, colour, and price validates that they have ordered exactly what they are looking for. It also answers any questions they may have concerning the price and eliminates fees coming as a surprise.
  • Auto update prices: show a subtotal, shipping fees, taxes, gift cards or discounts deducted, and the order total. Having this information auto-populate as users complete information ensures there are no hidden fees popping up at the bottom of the checkout process.
  • Here is an example from Kate Spade:

    4.OrderSummary-KateSpade


    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.

    5.Support-Apple

    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.

    6.GuestCheckout-Chapters

    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.

    7.Newsletter-Amazon

    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.

    8.SameAsBilling-Warby

    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:

    8.AutoInput-JoeFresh

    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.

    9.SecureCheckout-Indigo

    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:

    10.Fees-Snuggle

    Another direction that helps is including an order summary (outlined in #4) that auto-updates as you fill out your information.