Dropdown cart menu vs on click

Question

Although not a designer I'm trying to make our site as user friendly as I can. In so doing I have heavily customized it.

Currently I have a "problem" with the cart and the user-menu.

The "problem" is that since the two buttons are so close together when a user is logged-in (only then the menu has a dropdown) and has a product in his cart, the cart dropdown menu overlaps with the usermenu dropdown when the user is moving his mouse between the two elements.

So currently I am pondering if I should:

1. Remove the cart dropdown menu and make the user click to go to his cart (to the checkout page)
2. Move the cart dropdown to the right so it does not overlap with the usermenu
3. Leave it as it is.

This is a mockup as I image it.

Version 1 has no dropdown and with a tooltip informs the user that it can click to go to the checkout.

Pros: User when clicking goes to cart/checkout. This goes into the logic of "less clicks to go where you want"

Cons: May confuse users

Version 2: Has a slide-in sidebar with the cart

Pros: User has full info about the cart and what to do next

Cons: User has to click on X to close the sidebar if he want to continue to browse, or click on "checkout" to go to the cart.

Any feedback would be greatly appreciated.

Answer 1

You can't rely on hovers unless you want to exclude all tablet users. Also there are more and more laptops with touch screens and with touch there are no hovers. It's best to design a solution keeping that in mind.

Also, users don't count their clicks. It's fine if they have to do a few extra clicks, the main thing is that it should be clear what they should click on.

I'm sure you'll come up with something nice. To make sure it works, test it. That doesn't have to be complicated, you can do an initial test with some colleagues, see if they can figure it out without explaining it to them.

Answer 2

I recommend going with the second approach or taking the user to the shopping cart page. Tooltips/ drop-downs might not be a good idea when a user has added multiple items to their shopping cart. A side flyout/ page gives more real estate space for displaying their cart contents. Also agreed with Martyn about tablet users. Here are two examples of platforms with very heavy usage showing effective use of side flyout panel and full page experience.

1. Instacart uses a side flyout panel approach:
   The flyout panel can be dismissed by clicking anywhere outside the flyout or the close button. The user can also proceed to the checkout from the flyout.

2. Amazon uses a full page approach:
   

Hope this helps!

Answer 3

Leaving it as it is will not solve your problem. Also, I think if you remove the drop down the user might get confused how to go to the checkout page. I believe you always present the user a proper checkout option. Otherwise you might lose customers.

So placing it at the right should solve your problem.

Answer 4

There are a few different ways to deal with this problem:

1. Swap the User and the Cart. This way the User icon is on the far right.
2. Remove the dropdown. This may be disconcerting to some users but I personally am not a fan of cart summary as a dropdown.
3. If possible, add a bubble handle. That way the edges of the dropdown move further down and do not cover the the user icon.
4. Go with the last image that you posted. That seems fine, except have the icons at the far right corner. Only move them when the right cart panel opens up

Answer 5

You can try to have a hybrid of both, so have a button from the mockup no 1 and upon clicking it, have the right side show up from mockup no 2. This way, the user can have the best of both the worlds.

And when the user clicks on "Proceed to checkout" in mockup 2, then it should take the user to the new page.

This is more clean design and would let the user get a quick overview.

Hope this helps!

Answer 6

You can consider doing -

a. Increase the distance between the two icons.

b. Introduce a mouseover state for icons or a notch on top of the dropdown to clearly depict the association of drop-down with the icon.

c. Move the drop-down below so that it starts at the point so that the other icon is easily accessible with the drop-down open. Make sure the drop-down does not close when users move to the modal window. You want to ensure that customers can easily access both the options and none of the dropdowns does not close while accessing it.

Goodluck.

Answer 7

First of all, avoid the tooltip. The text is long and hard to read, and by now most users understand the Cart icon and don't need an additional prompt. Plus, if you want your site to be mobile compatible, hover events won't work. It's easier to design for desktop and mobile at once, by avoiding putting important information into hover events.

My suggestion is to leave the icon where it is in the top left. You could make both the User and Cart icons slightly larger and set slightly further apart, this might help.

I would then change the behaviour so that the dropdown only appears upon click. Your first example image seems good - I presume the red button reads "Proceed to Checkout"? You should also add some control to close this dropdown menu, perhaps an X in the corner, but make sure this is obviously visually separate form the cart items so that it is not mistaken for a Delete Item icon. I think the red "X" you currently have for deleting an item could be replaced with a bin/trash icon. An "X" is commonly interpreted as "Cancel" whilst a trash can means "Delete/Remove". I know this isn't directly related to your question but thought it was worth mentioning.

You could also go down the route of your V2 image when a user clicks the Cart icon. Your Version 2 is nearly there, but there needs to be more of a visual link between the Cart icon and the side menu. Having a slight arrow making it seem like a callout, and positioning the icon further to the left, closer to the border of the Cart menu, would definitely help.

Maybe something along these lines: (?)

Of course, it's all subjective, but I hope this at least gives you some pointers to consider :)