Web Design: The Basics of a Good Shopping Cart
At the heart of an e-commerce website is the shopping cart — the user’s collection of set-aside store items that he or she wants to purchase. Often a shopping cart is either a small area generally found up in the header of the website that keeps a running tally (often called a Quick View cart) or a dedicated page where users can see and review their items before proceeding with checkout.
In order to maximize sales, it’s best to stick with conventional user interface conventions.
Quick View shopping cart design
A small link up in the header of your website (the upper right is the convention) that says “shopping cart” is not enough. It’s best to at least show the number of items in the cart. A visual treatment such as including a small bag design or icon will help users find the cart, the means to purchase their items, and see how many items they’ve already set aside. When a user clicks a Quick View cart, typically a small window opens and displays a summary of the items (hence the name “quick view”). The user can either click outside the window to close it and continue shopping, or click the Checkout button to proceed with the purchase. Often, the Quick View window has additional helpful elements such as a customer service link, a phone number, and icons for the types of payment accepted. One more nice touch is to provide the user with a look at the total amount in response to rolling the mouse pointer over the Quick View cart in the header.
Shopping cart page design
When a user is ready to check out and clicks the link in the Quick View cart, the next page that appears is the dedicated shopping-cart page. This page shows a summary of all the elements presently in the cart. The best practice is to show a visual representation of all those items (the images should be clickable and take the user back to their respective detail pages) — and to give the user the option to edit the quantity or remove an item. Another useful element to include is a shipping calculator next to the subtotal. Shipping is often a huge barrier for users because they are surprised at how much it costs; it’s best to give an estimate early on in the process. A lot of retailers offer incentives on shipping to help coax shoppers through this barrier.
Also, if you are offering a promotion, the shopping cart page is a great place to allow users to see how much of a discount they are eligible for. Offer a promotion entry field next to the subtotal, along with the shipping calculator, so users can get a sense of the actual costs they’ll have to pay.
Offering different payment options is another good tactic to help funnel users through the checkout process. A lot of companies allow you to pay with PayPal in addition to credit card. The goal is to give a user as much total cost information upfront and show payment flexibility so they feel comfortable proceeding on to checkout.
Once you click the Checkout button to proceed with your purchase, many e-commerce companies provide two paths: You can either proceed as a guest or sign in and proceed as a registered. The idea of signing in before proceeding is that the website can pre-populate the information fields (name, address, and such) with the data it has on file for you, making checkout a faster process.
What you want to avoid at all costs is forcing users to register before proceeding with checkout. That’s a sure way to lose customers. Always provide a guest checkout option. During checkout, you end up capturing most of the data you need to register these users anyway, so if registration is your goal, you can give people the option to add a password at the end of checkout, and voilá, you have a new registered user.