Shopping cart in a drop-down - great pattern or fancy obstacle for shoppers?

Question

I'm interested in facts considering performance of Shopping cart placed in a drop-down.

Take a look here to see an example: http://uxporn.uxpin.com/shopping-cart/shopping-cart-popover-from-bell-ui-design-pattern/

We used to have this kind of shopping cart at UXPin and our tests proved it controversial to say the least (mind that we had only two products - notepads for Web and Mobile design).

Can this kind of shopping cart be really efficient? If yes - in what situations?

Answer 1

The key aspect that I find missing in your shopping cart design is that at first glance I am unable to find out how many items are there in the shopping cart (unless I hover over it). You need to keep your user informed about how items are in the shopping cart so that users are aware of what they have added to the cart without having to use the dropdown.

Amazon does this well by providing the numbers of items number as shown below:

However on hovering over the dropdown Amazon shows the item thus informing the user of what he has added to the cart and the number

Also this article on ecommercez.net strongly recommends ensuring that users be informed of that cart content at all times and not have to find out only after they go to a checkout page. To quote the article :

14. Make sure shoppers can easily see the items in their cart or wishlist and that they appear above the fold rather than another page. We have already discussed why you need to separate wishlist contents from cart contents and we briefly brushed on keeping cart contents accessible, but we haven’t discussed sites that keep cart contents on their own pages. Some eCommerce sites only display the content of a shoppers’ cart on a separate page altogether rather than on the sidebar or up towards the top right are of the header section. In my opinion, it is wrong to keep cart contents on page that has to be navigated to each time a shopper wants to see whats in their cart and what the total purchase amount is. It is still OK to have a page that they can navigate to if they choose to, but the idea is to make the checkout and buying process simple and easy.

If you keep cart content somewhere in the sidebar or near the top right of your pages, you are taking away extra steps in the checkout process and make it easier for shoppers to move throughout the site and keep track of items and order totals the whole time. It is not a good idea to just add the cart contents anywhere, it should be displayed above the fold on each page rather than making the shopper scroll down to view it. By keeping cart and wishlist contents above the fold and displaying it on every page rather than a separate page that shoppers have to navigate to, you are effectively making your site more usable. It can help to increase conversions, increase sales, raises order amounts and even helps shoppers get through the checkout process more efficiently.

Some articles to look at

eCommerce & Shopping Cart Usability: 21 Best Practices

Shopping Carts Gallery: Examples and Good Practices