1

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:

current state

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:

options menu

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?

2 Answers 2

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.

enter image description here

1
  • Good point. I believe using whole images for showing the different colors is a crucial part of the UX but that could stay nonetheless. I’m mostly coding for mobile devices so I’m probably prejudiced w/ dragging and stuff, ha. Thanks a lot for your response. I’ll take that into consideration and see what other people suggest :) Aug 12, 2017 at 15:19
1

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:

mockup

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)
7
  • Thanks for your answer, @Jonathan. I totally agree with all the points you’ve mentioned under Reasons not to use hover, which is obviously why I posted the question. Regarding the furniture: it’s only one base product that can be combined with all the "add-ons", which is why it’s integrated but at the very top (disregarding the urn). [comment too long, see next] Aug 13, 2017 at 17:13
  • By wreaths, do you mean the background image? I see why you’re saying the image should go, but the whole point of the image is to have the users get a sense of the size of the products and also see them “in action”. (Previously, the image was a lot bolder and we decided to make it less bold to fix exactly what you’ve criticized. Now, regarding “when a user clicks ... on the right.” - how would the user dismiss the product from the configuration then? Inside the options menu? Aug 13, 2017 at 17:15
  • Yes, I mean the background image. It was unclear to me (and likely to other users) that the wreaths are meant to indicate size. Better to list the dimensions of the products. Re: only one image: if there's only one base, it should be shown by default, and things should be "added on" to that base. Re: "when a user clicks... on the right.", you could include a "reset to default" link above the options (see updated picture). Also, you may want to consider setting a default option.
    – Jonathan
    Aug 13, 2017 at 17:49
  • Well dimensions are listed in the products' description on the main website. The point is that we're trying to create a sense for what the product will look like in reality. It is a furniture system meant for the memorial ceremony, hence the wreaths. The users we're targeting will get that. Aug 13, 2017 at 17:52
  • How about dismissing the product from the scene? How'd you go about that? Aug 13, 2017 at 17:53

Your Answer

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

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