Best way to give user two controls (expand and select) on a single object

Question

We're working on an organizational tree visualization, for each node (circle) in the tree the user has two options - expand the node to see its children OR select the node

In general, the primary (most frequent) action is to expand/navigate the tree - users will often do at least 2-3 tree branch expansions before they choose to select a specific node.

I'm struggling with the best way to present these two distinct controls to the user, here are a few options:

• A) single click to expand, double click to select -> very easy and usable once you know the application but user testing has shown that it's not very discoverable (which makes sense because double click is a very rare web interaction). Also we require multi-select functionality which is not very intuitive with a double-click control.
• B) click on circle to select, expansion is a separate control beside each bubble.
• C) click on circle to expand, selection is a separate control beside each bubble.
• D) something else?

Option B states mockup:
* It's hard to communicate this from just a static mockup, but when we tested option B with users we found that people always moved the cursor to the bubble first, and only then moved it over to the expand icon. Because expansion (tree navigation) was the primary workflow this turned out to be fairly frustrating and slowed down the navigation speed (this occurred even with bigger 'expand' icons)

Option C states mockup: The selection control appears on mouse hover over the circle and becomes sticky if selected. * With this design, even after users understood the selection/expansion interaction, we had users repeatedly make errors by clicking on the bubble (which expanded the children) when they actually wanted to select the bubble - in other words the 'checkbox' to select, while intuitive, didn't seem to be a natural control.

Multi-selection We also have future functionality planned to allow multiple selections, so I'm keeping this in mind as well with the design, here is the multi-selection mockup with option C:

I also included below a full state flow for option C to clearly demonstrate the visual states:

Currently I'm split between option B and C - each one seems to have pros/cons as I outlined above. I was hoping to get some feedback and see if anyone has any other suggestions.

Answer 1

A few things to add for consideration to what has already been said in the other options.

I do think option B is the strongest of the options though I would suggest the following differences:

1. Combine in option A into your solution (in reverse from what you described). Meaning double click to expand/collapse (if clicking the circle instead of the + -). Though double click is still discoverable in web apps for many users, it does emulate what their desktop apps, such as outlook where clicking on the folder name selects it and double clicking expands and selects it. The important thing here is users often bring their mental model in, and when expectations arn't meant, stop following that model. So if they do not have these doubleclick options, that they may just try out of habit, they will stop doubleclicking as a way to perform actions. If they are there they will continue to use them more and more, even if they arn't actively deciding, I do double click (as the primary means) to accomplish my goal. This can cause issues where an action, like open, is most efficiently done through double clicking, rather than selecting, then finding a button that says open. One thing to consider with your user testing results is that, it does give you the indication that it may not be outright obvious, but that may be for the reason that it is the opposite of most peoples mental model (Single click select, double to expand) and point out that it should not be the only way to accomplish that action (hence option B)

2. Put the + on the left side where it follow the users mental model more closely. I think if you tested B you would find that users may be initially confused but be able to work through it without additional help from you. However I would venture to guess that putting it on the left side, as with most interfaces, would follow their mental model and help them accomplish the goal quicker and with less confusion.

On a side note, some things to consider:

Looking at the interface I would ask have you thought about scale-ability of the solution. The weighted circles based on number of objects in them is a nice touch of data visualization, but what is your plan when a large customer uses your product and they have 1000s at the same level and some with only 2. Also, this seems to only support 2 levels well, what about those customers with very complex or flat organizations?

I would ask, ultimately is the data visualization important to me to get my job done, you are already giving me a physical count. If the goal is to allow me to select things, this data visualization may lead to the problem of quite a bit of scrolling.

Lastly with your multiselect implementation, if you are not using checkboxes and having the user click directly on the objects (which I personally prefer (not that that matters :-))) make sure you support it just as they are used, meaning shift or ctrl + click (though the shift mentality may need to be altered slightly to select a range in your interface where you can select in multiple trees)

This allows someone to simply say, Well how would you select multiple files in explorer? Which will either lead them to using shift or ctrl or dragging and expecting it to select like it does on their desktop (which may also be a good solution for you to add considering the interface)

Hopefully at least one tidbit of this was useful...

Answer 2

I agree with Ben entirely. Option B is your best option by far. Why? Well, let me put the question another way - why try to retrain users who are already used to things working in a certain way and having a certain look?

Anyone who is familiar with any Windows OS, even a casual user like myself, knows what the expand icon does. It's extremely familiar. If you are having problems with the click-target of the icon being too small, and that is a valid concern, just make the click target area and/or the icon itself larger.

Clicking items to select them is another extremely common and ubiquitous user interaction. In this case, I would expect single click and double-click to perform the same action, since they are actions so easily confused.

In general, when thinking through design problems like these, don't try to invent the wheel. Use standard affordances and interaction models whenever you can.