News Flash: The shopping basket is integral to your ecommerce site.
Ok, not exactly a breaking story, but when customers select their chosen products, they need to know those selections are being tracked, keeping a running total, and that there is a place to review what they’ve chosen before moving on to pay. Econsultancy offer some good examples of the way ecommerce sites dynamically update a customer’s basket when they’ve added a product but, as you’d expect, there’s a lot more to it.
When it comes to user experience, I shy way from the term “best practice” as without testing it’s difficult to know exactly what is best for your users. UXMovement, however, offer some pointers I think are worth considering when designing buttons and test plans:
- The more real your buttons look, the more users will know to click it
- The key to making your buttons easy to spot is to use high contrast colours
- Use an icon that describes the action
Now, about that last point: Icons. For example, the arrow to show a user a click will take them to the next step; the padlock to show a user the page is secure; or the humble shopping basket / bag. The latter is widely recognised online as the icon of choice when showing customers where their chosen products are being kept as they continue to browse. When shopping online, the less users have to think about HOW to order something, the more they can think about WHAT to order.
The Text Link
Maybe you don’t need an icon at all? Arguably, with many users now understanding that the top right hand corner is usually where you’d find the basket, the simple text links certainly have their place in good UX. In some instances, the products on sale don’t warrant a stylised “View Basket” and a simple running total with a link will suffice. ASOS use text:
When a customer adds an item to their basket, though, the basket extends below that text and users can’t help but notice it:
After a few seconds, the box disappears and the text link updates to show the basket total:
It could be that text is adequate enough so long as it’s coupled with the basket preview? You’ll only find out if that’s right for your site if you test it, of course.
The Standard Trolley
A super-simplified version of the supermarket trolley icon is used by Amazon. These guys are constantly testing and updating to ensure they’re giving their users what they want as far as the online shopping experience goes:
When an item is added to the basket, users are taken to a new page, confirming their addition, and the trolley is updated with the number of items in it. There’s no running total, though:
The Shopping Basket
High street fashion brand, River Island, has adopted a monochrome design incorporating a shopping bag in the top right. There’s no title or text to tell users “this is your basket and therefore this is where your items will be added” but using the big, bold running total next to the icon is explanation enough:
The call to action on the product pages here (ADD TO BAG) makes reference to the bag icon (which makes sense as when a user clicks the button with BAG written on it, their BAG will be updated). When a product’s added, the bag updates and a little graphic appears confirming the action:
New Look use a similar process, however their bag – like Amazon’s – shows the number of items, rather than the amount the customer is spending:
The Branded Shopping Bag
I personally love this practice! More and more trusted retailers with an established name on the high street have adopted this method of extending their branding and bringing that in -store experience to their online one.
The White Company, my CRO Site of The Week back in Jan 2013, use a branded shopping bag icon to show their users where the basket is. With a luxury brand such as this, the packaging of their products is as much a part of the pleasure of buying as the customer service and helps emphasise the quality of the product:
Although I’d question the presence of the SHOPPING BAG text, users only have to glance to the top corner to see their running total and the number of items in their bag. What’s more is that with a simple click they’re taken to either the basket or straight through to checkout.
Other great examples of the branded bag come from Schuh:
This icon could maybe stand to be a little bigger and therefore clearer. However, their brown bags and acid green logo are perhaps distinctive enough get away with this teeny version.
And Topman:
When you add an item to your bag here, the logo disappears and is replaced with the number of items in your bag and the BAG IS EMPTY text becomes the running total.
Taking That Branded Shopping Bag One Step Further
A company’s logo is a vital part of their brand identity. Obviously, some logos are more famous than others:
In some cases, however, part of the experience of that brand becomes as famous as the name or logo itself. Bloomingdale’s Brown Bag is a great example of this. Their packaging is so famous, that you can actually buy it.
Bloomies have, perhaps unsurprisingly, incorporated the brown bag into their online shopping experience:
But they’ve taken it even further… You don’t just add an item to your bag here, oh no, you add it to your Brown Bag:
Not every retail company with an online presence is in such an established position that the addition of their logo on a shopping bag icon will enhance the user experience. After all, mega-established brands (like Amazon) haven’t adopted this practice at all! However, an easy-to-spot link to a customer’s basket, perhaps with a basket total and a button to the checkout will all help in making the purchase process as quick and as simple for the customer as possible.
To find the “best” icon for your bag/basket/cart/bucket your best bet is to test it. But, consider the type of product you are selling and what therefore your users might expect. Like, if you’re selling tools, will you be wrapping up that claw hammer in pretty tissue paper and placing it inside a paper bag? Probably not – so maybe a hand basket will suffice. However, if you’re selling shoes or clothing, a shopping bag might hark back to the traditional in-store experience more than a trolley… although, I guess it would depend on where you shop…
