Shopping cart interaction: how should the user check out?

Question

On our webshop we have a shopping cart icon in the menu bar, that on hover over shows the user what they have in ther cart. Observations in user testing showed that we had a confusing interaction with that hover over. So I'm investigation how to streamline these interactions. So this is the situation:

We have a CTA button at the bottom of the hover over that brings the users to the checkout funnel. And we have the ability to go to checkout by clicking the trolley icon.

We observed that people we confused and start clicking the number to go to check out (that doesn't work) or landed in checkout by accidentally clicking the trolley icon.

Now what would be the best way forward? Make the entire hover over clickable (outlined in green)? Or remove those links and have only the buy button to send people into the checkout funnel?

Answer 1

The shopping cart and checkout are closely related UX, but should be kept as distinct actions.

The typical user workflow is:

1. User adds items to cart as they shop
2. User reviews their cart to make sure the order is correct
3. User checks out and pays

Your UI should reflect this. Working off of your current markup, a simple fix would be as follows:

1. Click the Cart button to view the cart in a drop-down (or a new page)
2. Click the Checkout button to complete the purchase

^{download bmml source – Wireframes created with Balsamiq Mockups}

This type of UI is very common among online shopping.

Answer 2

If i hit the shopping cart and/or the number (usually shopping cart + number are one element) i expect to get to the detailed shopping cart view, i don't expect to get to checkout.

Just separate it and the confusion will be gone, your offering a quick way to checkout (just rename it from "buy" to "checkout") with your current approach, you don't need to overdo it by separating the number from the icon, because thats what makes people confused.