The Ecommerce Guide To Checkout Optimization - Chapter2
The Ecommerce Guide to
Checkout Optimization
2The cart
After looking at the painful truth about cart abandonment and the reasons why people don’t complete checkout, let’s turn our attention back to the first step in the checkout process, the cart. Customers indicate their purchase intent by clicking on the “Add to cart” button.
When a customer clicks on “Buy Now” or “Add to Cart”, the system can operate in one of two ways: it can either move the customer to the cart page, which is the traditional solution, or keep them on the same page and indicate that the desired product has been added to the cart.
Keeping a visitor on the same page while indicating an item has been added to their cart typically occurs in two ways. The first is that the cart content, with the new product, appears in a pop-up window. The second is that some eye-catching effect, such as a “flash” along with a short message, indicates that the product has been added to the cart.
On Dress-for-Less.com pushing the “Add to cart” button displays a small window indicating the product has been added to the cart. The shopper can then choose to either check the cart content or continue shopping. The window also shows common payment methods using small logos, this effectively communicates the methods available and builds trust to encourage checkout.
There are two situations when it is better to keep your customer on the same page and indicate that something has been added to their cart. The first is when your product range includes many low-priced items and the number of items per purchase is high. In this case, it may be inconvenient for the visitor to always move to the cart and then back to the product list. Consider a grocery store where you have to shop for dozens of low-priced items at the same time, imagine if you have to go to checkout every time and then return to the aisle you were shopping in. While it may not be as frustrating online, it’s annoyance that many shoppers will not put up with.
The second situation is if you list complementary offers or accessories for a product with a separate “Add to Cart” button for each. Now let’s consider a fast food restaurant where you have to go to the back of the line after ordering your hamburger so that you can order fries. You’d be less likely to order fries and you might not go to that restaurant at all, it certainly wouldn’t be fast food! When you list products with accessories you want to make it easy for your customers to add more to their cart and increase the transaction value.
You can quickly and easily add a product to the cart from this complementary list. The system clearly indicates that one complementary product was added to the cart and suggests another.
Choosing whether to keep your customers on product pages or to direct them to the cart after clicking “Add to Cart” is the first decision to make when optimizing your checkout process.
2.1. Mini-cart
The cart should be accessible from practically every part of the site, although in certain cases you may not want it on the home page and checkout page. One approach other than showing a link to the cart is to summarize the contents of the cart in a small area on every page by using a “mini-cart”.
A mini-cart can show varying information about the cart. Sometimes it shows no additional information and simply acts as a navigation element. Other times, it acts as a fully functioning cart listing all products in the cart with pictures and prices. The latter is not always necessary as space may be wasted, resulting in an unpleasant website design, and distracting your visitors.
The mini-cart on the Dress-for-less.com site is quite traditional and ideal. It takes up little space, is understandable, and indicates the most important information: the number of products in the cart and their value.
The Barnes & Noble mini-cart lets the shopper know how much more they need to put in their cart to get free shipping, which is a great way to increase the average transaction value.
The mini-cart at Disney.com only indicates the number of products. Clicking it displays detailed information about the product.
American Eagle Outfitter’s mini-cart is unusual. A panel appears at the bottom of the screen when something is added to the cart and it scrolls up when viewing the detailed cart. The advantage of this method is its visibility on every part of the site, because it is located at the bottom of the browser. It’s not clear how effective this approach is, but it is an interesting variation.
Many sites include a mini-cart in the header. Some ecommerce sites use a large main image that fills the entire frame when you land on their site. This could be the latest product or a “brand statement”, an image that expresses the tone and style of the brand. Seeing a mini-cart in the header on a homepage that uses a large main image like this can also provide a cue to visitors that they’ve arrived at online store with products available for sale, not simply an information or advertising site.
The mini-cart provides a way to display the cart in a summary format on nearly every page of your site. By using it effectively, you can provide a way for your customers to access the cart without taking up too much space. A mini-cart is also a reminder to your visitors to complete the checkout process. When they’ve added something to their cart and then return to shopping and there is no indication of the cart, it’s much easier for them to abandon the sale, they won’t feel that they’ve left anything behind.
2.2. Cart layout
The most important part of the cart is the table that lists the products and summarizes their prices. Other elements included in the cart may have three functions:
- To finish the purchase process
- To increase the transaction value by providing incentives to continue shopping
- To build trust by providing the customer with information
If you want to place more emphasis on an element, you can change the relative size and position of the content and prices.
There are two typical layouts for a cart page. The one-column layout lists all the products, their prices, and at the bottom lists the total with a button to complete the checkout process. Any checkout optimized for mobile will appear as a one-column layout when viewed on a smartphone. The two-column layout shows the products in a list in the first column and the second column contains the total and the button to complete the checkout process.
Links to “Continue Shopping” or “View Accessories” are elements in the cart that will increase the transaction value. Typically these are found next to the “Complete Checkout” button in the case of “Continue Shopping” and below or next to the item in the case of “View Accessories”.
When it comes to building trust, the cart page should include at least: one link for support; one badge that shows warranty information or verifies the site is secure; and, a list of payment options using payment provider logos, ie – Visa, Mastercard, or PayPal logos. These elements ensure that your visitors are confident to take the next step and purchase the item.
The cart on Crutchfield is nearly perfect: it nicely summarizes the cart content and makes each product identifiable, all while building the visitor’s trust in the services and company through the different elements on the page. They use free shipping, a shipping calculator, live professional support, a lifetime customer support warranty, PayPal, a Norton secured badge, and a “Secure Checkout” on the checkout button to achieve this. The cart also offers a simple method to increase the transaction value. Clicking the “Add Accessories” link lets the customer select the desired accessories from a pop-up window, removing the necessity of a “continue shopping” button.
2.3. Cart contents
The contents of the cart should be simple and clear. The cart must display the right amount of information for a visitor to know which product they’ve chosen and to quickly confirm their choice.
Using small photos in the cart will help identify your products quickly and provide a nice presentation. In addition to the name of the product you can also include a short description as needed to provide additional information for a visitor to confirm they’ve chosen the right product after adding it to their cart.
The costs and quantities of each item must be shown. It should be easy to see how much each item costs, how many of each was added to the cart, sub-totals, and the total.
Cart contents must be editable: items can be deleted and their quantities changed. Typically this is with a quantity box that can be edited. Some carts also include ‘+’ and ‘-‘ buttons next to the quantity to easily add or subtract an item.
Once changes have been made to the contents of the cart, there is typically an “Update Cart” or “Update Quantities” button.
It’s easy to see why cart contents are displayed in a table layout, it makes it easy to align product names, information, pricing, and totals so they can be easily reviewed before checkout.
2.4. Proceed to checkout
One of the goals of the cart is to persuade the visitor to proceed to checkout. Typically there is a “Checkout” button on the cart page, which, like the “Add to Cart” button on a product page, is usually the most emphasized element on the page. When you also use a “Continue Shopping” button, change the style or color, so it’s clearly differentiated from the “Checkout” button.
TheBestbuy.com cart is a typical example of a store trying to push its customers to the checkout process: there is a table at the top, which indicates the products in the cart, and the “Checkout” button appears twice. The bottom part of the cart page is full of information about shipping and payment and there is no button to continue shopping.
The typical location for the “Checkout” button is the bottom right of the screen, or directly beneath the total. Depending on the design of your site it may be in a slightly different arrangement. However, you always want the “Checkout” button close to the total, because the next logical step after reviewing the total is to checkout.
2.5. Inspire additional purchases
How much visitors should be persuaded to continue shopping depends greatly on the product range: in certain cases, the greatest possible purchase value is of critical importance to us, such as when we sell low-priced products like puzzles or costume jewelry. Whereas with high-priced items like television sets or furniture, the transaction price of a single product is high enough and many visitors are unlikely to be purchasing more than one item.
Although the popularity of the “Continue shopping” button is waning, it is one of the more common tools used to encourage a visitor to add more items to their cart. The button generally takes the visitor back to the last page they viewed, the top-level category page, or the homepage.
Redirecting back to the product page or a category page makes sense for stores that sell a lot of similar, low-priced products that must be purchased in large quantities in order to reach an acceptable overall cart value. Of course this is an instance where the “mini-cart” is helpful and can eliminate the need for the “Continue Shopping” button.
Another method to increase transaction value that keeps customers moving through checkout is to recommending other products they may be interested in. These can be similar products to what has been added to the cart, compatible accessories, or products purchased by other shoppers who had that same item in their cart.
You can also encourage increasing transaction value by offering a discount or free shipping once a certain cart value is reached. If a particular cart value is necessary to receive free shipping or further discount, it should be clearly stated to persuade your customer to reach this value.
The cart at Barnes & Noble continues with the principle applied to its mini-cart by placing the “Continue shopping” button in an easy to see and accessible position. Note also the “transaction value increasing” message which clearly shows how much is needed to reach the free shipping threshold.
Disney.com indicates at the bottom of the cart items that “people who viewed these items bought”, in an attempt to recommend additional, relevant products and increase the transaction value.
Here, you can see the transaction increasing popup from Crutchfield that lists accessories directly from the cart page. The only problem is that the tabs indicating the different accessories are hard to see.
Omaha Steaks provides another nice example of increasing purchase value by highlighting sale items and special discounts.
