Better solution for displaying a menu than hovering

Question

Background Info

I created a web application which allows the user to configure a furniture system. (Base body in different colors plus extensions in different colors, etc.)
Currently, it looks like this:

As mentioned, the different products come in different colors, for which I implemented an options menu from which you can pick the color of your choice:

The menu appears when the user hovers over the product they'd like to adjust.

Now, you can test this yourself by checking out the beta version of this web app on our website. Beware, though: it's still a bit buggy.

In our iOS version of the app (which is not on Apple's App Store yet) you can tap on the product of your choice to bring up the menu, and you drag the item to the left to dismiss it.
In the web, however, you click on the item to dismiss it, and hover over it to show the options menu to pick the colors.

Problem

My issues with how it works right now are:

1. it's not very intuitive, the user will probably click on it to change the color which will remove the item, rather than showing the menu – I have actually experienced this myself wanting to click it rather than hovering, even though I programmed it, ha; also, beta testers reported the same issue
2. it doesn't work with touch devices, since the user can't hover over the items

Approaches

#1

• clicking the item to show the options menu would probably yield the best UX
• that'd mean, I'd have to change the way I dismiss the item back to the product picker on the left
• maybe an x icon or something in the options menu to dismiss to item would be a solution
  • that could be irritating, though, because the user would have to understand that there's two x's: one for dismissing the options menu, and one for dismissing the whole item whatsoever

#2

• leaving the options menu open the whole time
• then, how would I change the options menu for another product to change its color?

Question

Which events should I use for showing the options menu and dismissing the product?

Answer 1

Consider this:

1. Keep all interaction within your left menu.
2. No need to show the entire image for colors / textures, use swatches
3. The the user add, remove and change colors all within our menu.

Eventually, when you want to expand product selection, like the candles, etc, you can add tabs in the left menu for "Podium | Decoration | etc"

This the user just keeps their mouse within the left menu, choose what they like and see the response to their selections in the right. No need for them to drag their mouse all the way to the right and back.

Answer 2

I'd recommend simplifying the rest of your interface, and making the actions more discoverable. Click vs hover isn't your primary issue.

Off the top of my head:

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

• Separate base items and add-ons. The base item is what is added on to and should be listed separately. In the above mockup, I assume you'll have more than one thing to choose from.
• Remove the wreaths, they have no function and are distracting. Because both the wreaths and the unselected objects on the left hand side are grey, it is not clear what the important objects are (a violation of Figure/Ground). Removing the wreaths will free up a lot of space that you can use to improve the UX.
• Change your mouse pointer so that it is only a hand when you're hovering something that you can click on. Right now, it's always a hand, making it look like you can click on everything.
• Add better labels. They should be larger and descriptive.

In response to your original question, I'd use click for everything in your interface.

Reasons for not using hover in this context:

• it is not intuitive to hover over a non-navigation element to get a menu
• it is not discoverable
• it is counter-intuitive; people expect to click things to interact with them
• hovering forces information upon users they might not want (hovering over the main piece while examining their furniture/the site)