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.