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:

enter image description here

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?

  • what are they buying? are they likely to have more than one thing in their basket?
    – colmcq
    Sep 22, 2017 at 13:04
  • We sell around 50 000 different products in our shop, so the chances are high that a customer has more then one item in the cart. But i'm going to check this with our data wizard.
    – MichielVXL
    Sep 22, 2017 at 13:32
  • check your stats. If you have a % of users with one of purchase they'll need a 'buy now' option colmcqux.wordpress.com/2016/01/29/…
    – colmcq
    Sep 22, 2017 at 13:44

2 Answers 2


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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.