Category: UX advice / Ecommerce guides
In my book, Designing Ecommerce Websites, I break down the ecommerce shopping funnel and provide tips for each stage. One step in the funnel that I left out was the shopping basket or cart. This is because it doesn’t need to feature in every ecommerce website (for example holiday booking sites don’t require one), and some of the advice is also relevant for the checkout itself.
However the basket is obviously an important page for many ecommerce sites where users order multiple items. It often determines whether or not users will progress to the all-important checkout—not giving the user what they need here can cause them to abandon their purchase.
So here I’ve put together my guide to what should live on this page and UX design advice for how these elements should function. This is based on my years of experience working in the world of ecommerce, but it mostly comes from watching many user tests of real people struggling through sites that don’t quite work.
This guide splits into primary information that should be the focus of the page, and secondary information that should feature but not distract from the primary stuff. It’s not too complicated to get right, so make sure you’re not missing these key things.
It’s illustrated in a simple wireframe form, based on mobile dimensions, to show how the content could be arranged in relation to each other.
Probably the most important thing to show on a shopping basket page is the contents of the basket itself. Many people use a basket like a wishlist and add lots of things before going through the list to remove those they don’t want. They might also want to check if they remembered to put everything they wanted in there.
Items on a basket page are much like a set of search results and should behave similarly, allowing the user to click through to the product details page. Likewise there are elements that should be displayed for each item:
One more thing that should accompany the list of items in the basket is a control to set the quantity of each item. This is something the user may have missed or forgotten about on the product page.
Plus and minus buttons make it quick to allow the user to edit quantity and save any typing—though you may want a text field if people order in bulk from your site.
One option that should be available is reducing the order to zero in order to delete the item from their basket. This saves having an extra delete button. In all cases any changes in quantity should happen dynamically so the user can quickly see how it alters the total.
The other task of primary importance on a shopping basket is to find out how much the whole order is going to cost, and a big part of this is the shipping cost, which can be critical for users to decide if they are willing to convert. If it is too high in relation to their order total then it won’t seem worth it.
As a result a shipping cost (or at least an indication) is important. This can be a simple widget that allows the user to choose their delivery country and then see the basic price for shipping. This should happen dynamically and not require the user to reload the page. Once the user has entered this you can also pre-populate this field on the delivery details step.
If there are multiple shipping options then just default to the cheapest at this stage, otherwise you risk making this too complicated for the basket page. For helpful transparency you can show how long the order will take to arrive.
If you offer free shipping, which can be a good conversion driver, then make it clear that the order qualifies for this, and if not then state how much more the user needs to spend.
Of course the basket page needs to clearly show the total price for the whole order, inclusive of shipping costs.
It should also display any discounts as a line item. These could be discounts for buying a certain quantity or type of items, or re-stating individual item discounts. Users want to be certain they are getting any reductions that have been promised to them.
As throughout the ecommerce funnel, there should be an obvious button leading the user to the next step (in this case the checkout flow). It should stand apart from any other buttons on the page as the most important action.
In terms of position, it makes most sense to sit close to the order total, as this is the one thing almost all users will look at on this page. Putting it at the top of the page can be unexpected as it’s rare to find the main CTA here on ecommerce websites.
The basket is a good place to allow users to enter any promo codes, as it helps them get an accurate price, and won’t leave them guessing as to whether they can use their code in the checkout.
This can afford to be a subtle link that expands to show a field, as users with a code will search for it but it won’t distract those that don’t have a code.
This page should advertise the methods that a user can pay with. Users who have unpopular credit/debit cards (i.e. not Visa or MasterCard) will want to know if they’ll be able to pay before getting to the end of the checkout flow.
If you accept PayPal and other wallets then you should also state this—but avoid confusing the route to checkout with a separate ‘checkout with PayPal’ button. This can make people uncertain as to which is the ‘correct’ way to pay.
If you have a customer service phone number this should be stated on the page. Ideally it should live in the header of your site so users can get help at any stage but if not then here is a good place to feature it. A link to a ‘live chat’ function is equally useful, and now preferred by some users.
If the user isn’t ready to checkout just yet then it’s a good idea to allow them an option other than purchasing now. Some sites request the user to give their email and create a password so they have an account but this is still off-putting to a lot of users (another password to remember…).
I prefer the option of allow the user to email a permanent link to the basket to themselves (or someone else) that they can return to later. This is truly useful and doesn’t demand extra information from the user.
If you want advice on landing pages, search, product pages and more, there are another 54 ecommerce UX design tips and tricks in my Amazon best-selling book, Designing Ecommerce Websites.
Main photo by Alessio MumboJumbo on Unsplash.
Designing Ecommerce Websites is the Amazon-bestselling book that will tell you how to upgrade the user experience of your online store. Built on 10+ years of experience, it tells you what works in practice, not just in theory.
– rated 4.5 on Amazon US and UK
