{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Shopping basket/cart links and icons need to catch the attention of shoppers, and should help them to find the link to review the contents and make a purchase.

There are a number of ways of displaying the basket link, from a simple text link to permanent basket icon showing the contents and total value. I've been looking at a few examples from a selection of UK etailers...

Some retailers, such as Next, TopShop and ASOS, have opted for text links, which also shows the number of items in the basket, and on Next, the total amount to pay.

These links are all in the top right of the screen, and this is the case with all of the examples here. Online shoppers have become accustomed to this convention, and it makes little sense to move the link elsewhere.

These three links tend to blend into the background, especially in the TopShop example. It could be argued that these links, which are important calls to action after all, should be made clearer and more visually appealing.

Next:

Next basket link

ASOS:

ASOS link

TopShop:

In the examples below from Amazon, Comet and Argos the basket link has been enhanced by the basket icon, which offers more of a visual cue for shoppers.

Amazon's basket link is relatively subtle, and blends into the blue background, but at least the basket icon catches the eye. The same applies to Comet and Argos, and all three could be clearer.

Amazon:

Amazon basket link

Argos:

Comet:

In the example below from Play.com, by devoting more space to the basket link, using the icon and adding a highly visible checkout link, it has been made a lot clearer.

Play.com:

Play.com basket icon

Indicating the number of items in the shopping basket and the total value of goods is useful for shoppers as they go along, as well as being a helpful reminder for returning visitors.

Tesco, HMV, M&S and B&Q all provide information on the products which have been added to the basket, B&Q does this via a drop-down display from the basket link, while the other three have the contents permanently on display at the right hand side of the page.

Tesco's basket link on the top right isn't so clear, but the contents are summarised below, with a call to action that stands out. M&S goes further by offering visual reminders of the contents, while shoppers can edit the contents without going to the full basket page.

Tesco:

Marks & Spencer

B&Q

HMV

Having looked at several well known retailers' sites, most seem to use similar links to those shown above, but there are other ways of showing the basket link and its contents.

US retailer Crate & Barrel provides one such example. It links to the checkout at the top right of the page, but also has a Flash bar which remains pinned to the foot of each page as you navigate through the site, though it can be minimised to allow you to see more of the page. 

This gives shoppers information of the number of items in the basket, and the total cost, and also provides a useful visual reminder of the products waiting to be purchased:

Crate & Barrel:

Other ideas include encouraging customers to spend more to qualify for free delivery by including this information in the basket summary, which is something Borders does for example.

Also, if users need to add a certain number of items before they can place on order, as on wine retailers' sites for example, then a reminder next to the shopping cart link is a good idea.

It's about making it as easy as possible for customers to buy from your site, so whether you choose to providing a summary of the contents or not, basket links should stand out clearly and shoppers shouldn't have to work too hard to find them.

Graham Charlton

Published 10 September, 2009 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (7)

Comment
No-profile-pic
Save or Cancel
Chris Rourke

Chris Rourke, Managing Director at User VisionSmall Business Multi-user

Hi Graham - very nice summary of some best practice for baskets when in the shopping area.  

The Placement (top right convention)  is critical and the call to action to lead them to the next stage.  One other critical thing is the feedback and I have seen some work well is having some dynamic confirmation that something has been added to the basket, such as the basket dropping down to show whats in it for 5 seconds then retracting (think US Gap site does that), or a brightening & fade like the yellow fade in Basecamp / 37 signals apps.  Serves well to tell the user its been put in there, without the user having to really look closely at it. Bit more complicated coding of course but effective.

Thanks for the summary - I may refer to a couple of these in my next econsultancy usability course if you don't mind. 

Chris

almost 7 years ago

Avatar-blank-50x50

Michelle Carvill

Hi there

I'm on a project at the moment where we've been reviewing best practice for shopping carts - and what works best.

I have to say that as an ASOS shopper - I think the tactic they use - the simple text at the top is not that great.  I've missed and continue to miss this (yes, even as a repeat purchaser) because it's just not clear enough.  However, the HMV model works very well  - this is a similar model to the one my client has adopted.  We've pushed this on one site www.companysearchesmadesiimple.com and it works very well.  So for their new site we are using a similar tactic.  The play.com - the 2 items - well what are they?  I think from a usability perspective - it's better to spell out what exactly the user has got in their basket.  Also - I note that on all baskets there never seems to be a simple - remove link.  This is all left for the summary - I'd be interested in any findings which have tested including a remove link in a basket at - rather than on a summary basket page.  I know I have inserted 2 or 3 of the same items - when a system is working slowly and I'm not sure whether the 'add to basket' link has worked.  THen I end up with 3 items and it would be useful to simply click remove, remove to get rid of the excess ones - rather than panic and hit a 'proceed to checkout button' - with the fear that I may be buying 3 of the same thing... this has meant I've hit back and often dropped out of the purchasing mode.  So any research or views on this - greatly appreciated.  

almost 7 years ago

Avatar-blank-50x50

Peter

@Michelle a few good sources you might want to keep an eye on is http://www.ecommercegallery.com and http://cartcraze.com/ they list e-commerce sites from around the globe. A great resource for finding out how other people have solved problems with usability / design / functionality.

The first website that comes to mind using the basket function you are talking about is http://www.abelandcole.co.uk/shop you can add, edit and remove on every page.

almost 7 years ago

Avatar-blank-50x50

Greg Power

Forgive this shameless plug, but here goes!

In response to Chris Rourke, we've adhered to almost exactly what you are saying.

If you check out http://www.labelzone.co.uk and drag & drop a product image to the basket (I'm still unsure on this method, so would love any feedback), we use a dynamic popup to inform the buyer their item has been added.

Then in terms of displaying basket contents, each product thumbnail along with its title is displayed prominently, with the subtotal also clearly displayed.

Lastly, I've never understood why so many e-tailers (or perhaps designers) insist on displaying the accepted payment methods near the site footer, surely something so crucial needs to be above the fold? Particularly if your competitors are unable to offer something like Paypal or Google Checkout.

almost 7 years ago

Avatar-blank-50x50

shopping baskets

Totally with ten years foreign enterprise production management experience and six years worldwide marketing background, HIGHBRIGHT ENTERPRISE LIMITED was created in year 2004 and located in Zhangjiagang, Jiangsu, China. We mainly manufacture innovative shopping trolley(carts) and shopping baskets which are mainly used in the retail industry .For more info visit us at  http://www.highbright.cn/

over 6 years ago

Avatar-blank-50x50

fleerrall

Hello people... i am relatively new to the internet community and i really hope i am not asking lame questions ...
I want to learn how to get freebies... I heard some people enter some details and receive like a free trip, or one of those laptops... so if someone could help me please, I would really appriciate it deerly.
Thanks.

about 5 years ago

Avatar-blank-50x50

Cornish

Is it all right for a safety seat to be in the front seat of a truck?

almost 4 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.