View shopping cart as dropdown or access via link

Question

I work as a developer and I run many e-commerce websites. One thing I've noticed is that the shopping cart doesn't have the same behavior in different websites (whether it's mine or not). The main topic I'd like to discuss is the way we see what's in the shopping cart.

1. When we click/hover the cart button, display a dropdown showing what are the products we have and usually 2 buttons. "Go to cart" and "Checkout".

2. Show a side bar menu, similar to the menu. It's also similar to the dropdown option, because we stay on the same page but we can see our cart. This option however, show more products, since it goes from the top to the bottom of the page.

3. Direct link. When hovering the button, nothing happens, and when we click the button we go to the shopping cart page.

I don't know why these options are commonly used and what are the benefits of each. I imagine the 3º option is trying to make the user finish the purchase as soon as possible. Option 1 and 2 is more likely to buy more items, but less likely to finish the purchase.

The only problem I've noticed with option 1 is the consistency across devices. It's not optimal to show the dropdown on mobile.

But is it really bad to have a dropdown on desktop and link access on mobile? Is there anything I'm missing here?

Answer 1

There's a fourth option:

Shopping cart Modal Window

• It's an optimal solution for both desktop and mobile
• By having an independent scroll bar allows to view the total amount of items in the purchase keeping the same window height
• It doesn't leave the current purchase page
• Allows to include all the possible actions of a shopping cart in the window itself: add item, delete item, finish the purchase, ...

Example with demo at hmtlstream.com

Answer 2

I believe that each type of presentation has its pros and cons and suitability depending on the platform used and the type of goods on sale on the e-commerce website.

For big ticket items, e.g. more expensive items and items where users need to look at detailed specifications, such as computers, furniture, and etc., a full page check out screen (types 3 and 4) would be more suitable as it allows users to confirm and verify the selection before making the purchase.

On the other hand, if the items are relatively cheap and easy to buy, such as clothes, groceries, small items, types 1 and 2 are more suitable. And type 2 is better for websites where the bulk of users have the habit of buying many items in one session.

Fundamentally, the choice of shopping cart design has to tie in with the product type on the website and user habits to provide a complete and joyful experience for the users.