Over the last few years, online retailers have started to pay close attention to shopping cart abandonment. As a result, articles and studies and surveys have cropped up offering suggestions on additions and alterations that, according to authors, must be made to each and every online shopping cart.
If one were to take every single piece of advice to heart, however, they’d end up with a jumbled mess of a website, filled to the brim with confusing field forms and clunky load times. Today, we’re going to take a step back from the innumerable suggestions and look at the essentials. We’ll show you how to reduce shopping cart abandonment by keeping your cart from overflowing with features.
After a customer has gone through your catalog and placed the items they’d like to purchase in their shopping cart, it’s your job to move them through to the checkout process as swiftly and easily as possible. One way to do this is by making your primary call-to-action (CTA) stand out from the rest of the page. On the cart, the “Proceed to Checkout” button should be large, clearly labeled, prominently placed, and properly colored. Consider your website’s color palette and choose a lesser-used, vibrant option for the CTA. The button should be far enough away from competing design elements to make it draw the eye immediately.
According to studies done by the Baymard Institute, meeting user expectations is often a better strategy than getting creative. Take a look at some of the online retail giants and take a few notes on where on the page they place a CTA. By putting your button in the same quadrant (typically the bottom-right corner above the fold), users are more likely to click.
The shopping cart is where users make sure they have all of their products in order before they move on to purchasing. Streamlining this process will help reduce cart abandonment by ushering consumers quickly onto the final stages of the conversion funnel. Firstly, be sure to use product thumbnail images for all items in the cart. These images serve as an immediately visual reaffirmation for the customer–a quick glance at the cart will show them exactly what they’re about to purchase. 86% of the top 100 online retailers make use of product thumbnails in the shopping cart for one simple reason: they work.
Additionally, allow for customers to change product options directly from the cart, from quantity to size and color. If possible, swap thumbnail images dynamically to reflect changes in product options. These changes should update automatically without the use of an “apply” button.
Clunky navigation is one of the most frustrating shortcomings of retail websites. By optimizing wayfinding and simplifying cart structure, you can reduce cart abandonment and keep customers on course. A few navigational elements to consider are:
The back button. The back button is one of the most used navigational tools for any Internet user and, strangely enough, it seems to cause the most problems for retail websites. Be sure that all changes made to items in the cart are saved immediately to prevent forcing the user to make the same changes twice.
Clear wayfinding. Provide links that allow the shopper to continue shopping or proceed to checkout. While directing a user to checkout should be the foremost goal and most visible option, do not try and force people into the sale by obscuring the way back into the store.
Accommodate mobile. To reduce cart abandonment among mobile browsers, make sure any active elements are easily navigable on smartphones. Keep in mind the difficulties that come with touchscreens and “on-hover” elements and the limited screen real estate caused by phone resolutions.
Welcome back. Visitors to your site are more likely to make a purchase on each visit after the first. To make sure you’re ready for these consumers, automatically save their cart contents and details and have them ready for their return.
Progress bar. For many, the cart is considered the very first stage of the checkout process. Making a consumer comfortable is important–a progress bar running across the top of the page (with the shopping cart as step 1) will let a customer know exactly what’s ahead and how much is left between them and the sale.
A final–and arguably most important–consideration to make is keeping cart load times low. After all, a user can’t access the checkout without first loading the shopping cart. According to a study by Akamai, users begin to abandon sites when loading takes longer than two seconds. Keep this in mind as you lay out your shopping cart design and constantly evaluate what’s truly necessary to include in a cart template. The following tips are a good place to start to minimize load times and reduce cart abandonment:
For product thumbnail images, do not use full-sized images scaled down via code. These images will load just as slowly as the full, high-resolution version. Create a smaller image instead.
If you don’t already, start using image compression services such as TinyPNG.com to keep your file sizes low.
Use sprite sheets to display shared elements. If the same images are used across multiple pages, condense multiple image files into a sprite screen to quickly load buttons and badges. It’s much faster to load a single, medium-sized image than it is to call dozens of tiny ones.
Optimizing the usability of your shopping cart is a critical step in improving the user experience and reducing cart abandonment. While having a feature-rich site is often important, understanding where the line between cluttered and intuitive lies is an essential piece of site design. Neil Hunter, CPO of Netflix, described his company philosophy in three words, “simple trumps complete.” When it comes to shopping carts, this is a great motto to follow. To learn more about what you can do to reduce cart abandonment outside of site design, contact the team here at UpSellit.
Written by Joe Rosenthal