Shopping Cart Design Best Practices
At the heart of your e-commerce website is the shopping cart. This is the user’s collection of items that they wish to purchase. A shopping cart often takes two forms: a small area generally found up in the header of the
website that keeps a running tally (often called a “quick cart”, like the example in above), and a dedicated checkout page, such as the one shown in above, where users can see and review their items before proceeding to payment.
We find this two-pronged approach is best for usability, because users visually see the contents of their shopping cart and can keep a tally as they browse. In order to minimize confusion, it’s best to stick with conventional interface protocol.
“Quick cart” design
For a quick cart design, a good practice is to include a small “cart” link-up in the header of your web page (usually the upper right corner), with a shopping cart icon. As you can see in above the Vans.com example, this link also shows the number of items currently in the cart.
Upon rolling over or clicking the quick-cart link, a small pop-up window appears (made possible through the use of JavaScript, AJAX, and CSS) with a short summary (hence the name “quick-cart”) of items bagged. The user can either close this pop-up to continue shopping, or click a duplicated “checkout” button contained within the quick- cart, to proceed to the dedicated checkout page.
Shopping cart page design
The shopping cart, or checkout page, is a dedicated page showing a summary of items the user has collected. A best practice is to show, with visual representation (the image should link back to the relevant item page), the item(s) selected, and the facility to edit quantity and remove item. Another useful detail to include is a shipping calculator next to the sub-total. Shipping costs are often a significant barrier because users are surprised how much they could escalate as items are added. It’s good service to give users an indication before they begin shopping (you might also consider at the same time offering incentives on shipping costs for multiple items purchased in one cart).
Provide different payment options
Offering different payment options is another good way to encourage users to become paying customers and complete the checkout process. It goes without saying that you should offer as many secure payment options as possible to facilitate all your visitors.
Measuring results
Once users successfully complete their purchasethey should see (and be able to print off) a receipt/payment confirmation immediately. This page generally shows a recap of their order, the price, the date, and includes an order number for reference. It’s also good practice to email a receipt to the users, so they can readily locate it in future.
If you are using Google Analytics, you will have the facility to track the receipt page as well as all the preceding pages in the checkout process. The tracking enables you to measure how many users start on the checkout page vis-à-vis the number who end up on the receipt page, and by looking at the numbers you can see what percentage of users actually complete a purchase. This is known as your “conversion” rate. The tracking will also show on which page/at what stage users drop out of the shopping experience - there may be design issues on those pages that cause users to leave.
Have you provided users with enough confidence that your site is secure?
Have you removed distracting adsand optimized navigation?
The analytics data can help you continue to evolve and improve your eCommerce website design for optimal results.
Go back to - Introduction on eCommerce - Part 1
No comments:
Post a Comment