Designing the Perfect Checkout: The Mystery of Cart Abandonment
It’s been a long time since the first online checkout experience was introduced to users. Since then, design and technology have evolved at lightning speed. It’s never been easier to buy anything — from anywhere — at any time.
The online shopper also continues to evolve. The last decade has seen online sales more than double, with the frequency of purchases per user also on the rise, particularly with the younger demographic.
So if more people are doing it, why does the rate of cart abandonment continue to plague ecommerce? The last 10 years has seen the percentage of users abandoning their purchase actually rise from around 60% to 68.8%. That’s an estimated $4.9 trillion worth of merchandise left on the digital shelf, and all signs suggest this number is only going up. Does the process of checking out still confuse users, or are there other forces at play?
What Causes Cart Abandonment
A large number of abandonments are caused by having too much friction between the customer and the buy button. A recent statistic from Baymard Institute estimates that the average large-sized ecommerce site can gain a 35.26% increase in conversion rate by optimizing the checkout process. The shoppers who are ‘willing to check out, but can’t’ can be given the ways and means to complete their purchase through good user-centered design and best-practices.
On the other hand, it is a fair assumption that a large portion of cart abandonments are simply a natural consequence of how customers browse ecommerce sites. More people today are window shopping, researching, and comparing prices to get the best deal. The same Baymard report attributed 58% of the reason for cart abandonment to users that were “not ready to buy.” It would be easy to write these off as unavoidable abandonments, but through analysis of this shopping behaviour we can put the features in place to turn customer engagement into conversion.
A Progressive Solution
The list of Progressive Web Apps (PWAs) launched into the market will continue to grow this year, and along with it, a renewed understanding of best practices within the checkout process.
PWA checkouts will combine an app-like user experience with modern browser technologies and the latest in user behaviour research.
Let’s take a closer look at 5 common usability issues that are causing cart abandonment today:
1. Surprise! Here’s what it actually costs.
Surprising the customer with shipping costs and other fees late in the checkout process is one of the biggest reasons a user will choose not to buy. Such revelation can be avoided by introducing a shipping calculator to the shopping cart. Our testing suggests that geolocation is a feature more shoppers are expecting their device to take advantage of. With this enabled, the mobile user should not have to perform a single action to see accurate shipping and tax totals.
2. Trust must be earned.
According to Baymard’s report on checkout usability, 20% of US online shoppers have abandoned an order due to security concerns. This can be addressed by introducing security icons or logos, adding some reassurance to your copy (“Check out securely”), or by offering the option to use industry-recognized payment providers, such as Paypal and ApplePay.
3. Every second counts.
Site performance will also play a big part in the fight against cart abandonment — 40% of shoppers say they would abandon a site that takes more than 3 seconds to load.
Mobify’s Progressive Mobile rapidly transitions across pages, and displays content placeholders while the page is loading. The instant display of cached content is critical to delivering the perception of high performance.
https://www.youtube.com/watch?v=GFJ4qltt_8I
Video: Progressive Web Apps in action for merlinspotions.com (Mobify’s platform demo) (LTE connection)
4. Don’t stop me now!
The need to keep the customer moving forward without interruption is as important as speed — 22% of shoppers experience errors or crashes during the checkout process. Focusing on form usability can reduce the things that break up a shopper’s flow, forcing them to think. Inline validation, credit card detection (based on card number), and displaying the right keyboard at the right time are just a few techniques that can help remove frustration, reduce errors, and speed up the form filling process.
https://www.youtube.com/watch?v=yJGtug0I5Io
Video: Merlin’s Potions (Mobify’s platform demo) — Card type and CVV helper image detection based on card number
5. If your name’s not down, you’re not coming in.
I do enjoy referencing this video from Google when explaining how forced account creation translates in the real world.
Customer: “Right, I’d like to pay.”
Retailer: “Who are you?”
Customer: “Errr, why do you need to know that?”
Retailer: “Tell me who you are or you can’t pay”
This wouldn’t be okay in the physical stores, so it’s amazing to see it still happening online. Forcing the user to create an account causes 23% of shoppers to leave the checkout immediately. Seems like an easy fix — offer the user a chance to check out as a guest. But is this enough? Again, thinking about the real world can help here, as described in this quote by usability expert Lee Duddell:
Customer: “Right, I’d like to pay, but can’t remember if I have an account.”
Retailer: “You need to login or create an account or you can guest checkout (we’re modern).”
Customer: “Great, I’ll guest checkout.”
Retailer: “No you can’t, you’ve got an account.”
Customer: “FFS, don’t you want my money?”
– Lee Duddell, Founder, WhatUsersDo
During our own user testing session, we discovered this to be a common scenario. Other than ecommerce giants such as Amazon, customers rarely shop on the same site more than once or twice a year. When asked to sign in to their account, they simply do not remember if they have an account or not, let alone what their password is. Because of this, we found that the vast majority prefer using guest checkout. And if they did have an account, they would expect the merchant to tell them, not the other way around.
Mobify’s Progressive Checkout offers guest checkout by default, and with this, a feature that detects the email of an existing customer as soon as they type it in, inviting the customer to log in if they choose without breaking the flow. App-like features such as continuous login then come into play to give mobile users the persistent, personalized experience they expect.
Turning Abandonment Into Future Engagement
Improving usability takes care of the first 35% of abandoned purchases, but what can we do about the other subset of shoppers who simply aren’t willing to buy? Do we write these off as unavoidable abandonments? There is no way to stop a shopper from leaving, but abandonment can lead to future engagement if the right features are positioned to the shopper at the right time.
Here are a few reasons why a shopper may choose to leave:
It costs too much, plain and simple.
As a designer or marketer, this may seem like an insurmountable object. If the cost of the order is too high, what can a product designer do to influence the customer? The answer lies in giving the retailer all the available means to present a cheaper price to the customer.
54% of shoppers say they would purchase products left in their carts if offered again at a discounted price. This may come in the form of push notifications, sent out to customers even after they have left the site, or the ability to present a coupon code for them to reduce their order total. Progressive Mobile also takes advantage of Mobify’s Connection Center. Marketers can present smart content to a group of shoppers based on their location or time of day — a great opportunity to promote free shipping to the users who live close enough to qualify.
I want it now.
Sixteen percent of users in the Baymard study said they had abandoned a checkout because delivery was too slow. As well as communicating express delivery options to the shopper as early as possible, in-store pickup should be built into the core functionality of any online store that offers it. For some shoppers, this is a much more convenient option. Not only does it save on shipping fees, it removes the need to input an address — an often tedious and time consuming task.
Geolocation could also be used to pinpoint the nearest store with the item in stock. Then offer that customer opening hours, distance, and directions, without removing them from the checkout process. A fully integrated, omnichannel shopping experience is what users want now, and what they will come to expect in the future.
I’ll buy it later when I’m back at home on my desktop.
Digital consumers own an average of 3.64 connected devices, and it’s not uncommon for all of these to feature in the lifecycle of a single purchase. To the user, this journey to purchase is a seamless, unified experience — from the email they read on their tablet that told them about the product, to the website they viewed it on, and the mobile app they used to purchase it. A successful checkout bridges the technical gaps that exist between these channels.
I haven’t made my decision yet.
User research suggests that more and more users see the shopping cart as a tool for “favoriting” items, rather than compiling a purchase order. Our own user testing showed that shoppers would use the cart in this way over a “wishlist” — the feature most commonly used in ecommerce to satisfy this use case.
This behavioral trend can be catered to by allowing users to move items between a “buy now” and a “saved for later” list, ensuring items left in the cart are available when they return. Stored session data on Chrome, and account creation prompts for other browsers, ensures these items are not lost when returning on different devices.
Rethinking the Measurement of Success
The insights gathered into this ‘window shopping’ behaviour show our evolution into smarter, multi-channel shoppers. It does indeed suggest that cart abandonment is a natural step in today’s purchasing process, not the plague of ecommerce as it has previously been known. In this light, we must therefore reassess the way in which we measure success.
Optimizing your checkout will certainly help to reduce cart abandonment. However, you should ensure your metrics are set up to track abandonment between the shopping cart and the confirmation screen, rather than simply tracking items left in the cart.
As we’ve shown, customer engagement is not limited to a single session on a single device. A user may use a website multiple times to compare, share, and review items before purchasing in-store. Our analytics need to evolve to track this shopper’s journey across all channels. Only then can we know the true reasons behind cart abandonment and where the friction to purchase lies.
Giving today’s customer what they want means delivering a multi-channel shopping experience, without fear of cart abandonment rates. The trick is not to prevent them leaving, it’s encouraging them to come back, again and again. The success of PWA checkouts will be measured against a new statistic — engagement.
Originally published at www.mobify.com on February 7, 2017.
