In my web-based reporting case, users should be able to select one or more items from an organization hierarchy to show on a report. They should be able to select both whole branches with all subnodes included (for a detailed report), or just separate upper level nodes (for a summary report). Sometimes users would still finetune the selection by unselecting some of the selected child nodes.

The users are familiar with their own organization hierarchy, so it seems reasonable to show it as a tree - it's also shown as tree in many other places in the software. The depth of the hierarchy is not limited and can differ from one branch to other. Hierarchies can be big, so selecting or unselecting all child nodes one-by-one is quite a job.

I'm struggling to create a UI that allows selecting both single nodes and whole branches with a reasonable amount of clicks, and is even remotely easy to understand. The best way so far that we've come up with is a checkbox tree that would work like this:

  • The first click on any node selects only that node, marking it indeterminate. All subnodes remain unchecked - or whatever state they were at the moment. Report shows that level's data only.
  • Second click on the same node selects all the child nodes too, and makes the node look checked. Report will show both summary data and detailed sub units' data.
  • Third click would unselect both the node and all of it's children (or should it keep the child selections that were set before checking the parent?)

...and cycling this again. In the picture below, the unit 1a is selected with all of the child units, 1b without child units (summary only) and 2a with some of the children selected.

enter image description here

Maybe the biggest problem here is that the indeterminate state is used to indicate several things:

  • "some of my children are selected" (2a, and actually also 1 and 2)
  • "I'm selected but my children are not" (1b)
  • the combination: "I'm selected, and some of my children are, too" (not present in the picture)

If we leave the parents of the selected units (1, 2 and 2a) with no check mark at all, it would not follow the usual convention, and the user wouldn't find the current selections from a collapsed tree. If we show 1b with a normal check mark, the difference of 1a and 1b will not show if they're collapsed. I find this latter a better option, because it makes clear which nodes are actually checked. Probably we should expand the branch when the parent is clicked, so that the user would see whether the child nodes are selected or not. We can still emphasize the selections by setting a background color for the selected units.

I would highly appreciate any suggestions on how to make this work, or ideas of some completely different kind of UI.

I found two questions with the same problem, but with no real answer:

Try a hover button option to select/deselect all children at each node level.

If you have a multi level tree, you can have a 'quick select' (I have here a + children label, but other text might work better) option, allowing the user to go level by level.

Only if you select the '+ children' button would the child nodes be selected. That way you can select the parent separately if you want.

Here's a quick prototype:

enter image description here

This way you can hop through different levels, so it scales along with your tree and nesting.

Having second and third clicks with complex or nonstandard interactions with a known control may confuse users.

Instead, using the interaction above, perhaps if all children are selected the '+ children' changes to '- children' (or some better label I can't think of at the moment).

  • I like this idea, it looks simple, modern and still you can do a lot with it! However I'm wondering the indeterminate status - here seems to be the same problem of multiple meanings that I described in the original post. – Riikka Heikniemi Jul 4 '17 at 20:21
  • Can we recognize whether the node is selected or just some child of it? Now 1a is selected, but the marking changes to indeterminate when a child of it (1a.2) is unselected. What if rest of the children were also unselected - would 1a still stay indeterminate? Or change to full check mark? Or get unselected? In a usual case where we're just interested of the leaf nodes, the parent would change to unselected when all kids are unselected. Here however, the parent should remain selected for the report regardless of changes in the child selections. – Riikka Heikniemi Jul 4 '17 at 20:21
  • According to my understanding, the standard meaning of an indeterminate checkbox in a tree is that some but not all of its ancestors are selected. So if the user had first selected 1a instead of 1, 1 would have been marked as indeterminate, although it's not selected for the report. So it would look same as when it was selected. – Riikka Heikniemi Jul 4 '17 at 20:21
  • It would be good to a) see which nodes actually are selected, and b) find the selected nodes/branches even when they are somewhere deeper in the tree. At the moment I prefer showing full check marks (plus a background color) on all selected nodes, and only use indeterminate status for those non-selected nodes that have selections below them. I see this is not completely standard, but somehow we need to make the difference between selected and non-selected nodes that have some of their children selected. – Riikka Heikniemi Jul 4 '17 at 20:22
  • Ah yes...do you think it's possible to have a small text label or badge to the right of the parent node? It could have a (2 of 5 selected) next to it in light text. That way you could have a non selected parent, but with an indicator that children beneath it are selected. (Hope I understood this!). That way if the tree is collapsed, you'd still have an indicator that items not visible are selected. – Mike M Jul 4 '17 at 21:07

Need to create a difference between individual select vs group select

I like what Mike has suggested. I have a similar suggestion in one of the two options below:

Option 1: Show the option of "Select All Child" & "Deselect All Child"(This one only if there is a child selected). Following is a sample prototype for the same.

Select All Child and Deselect All Child .

This will show the option of select all to the user at all times and hence will be very easy to understand how the UI works

Option 2: Show each child group in a new column as per the prototype below

Show each child group in a new column

This would even save long vertical scrolls incase of many child groups. Only downside to this design is that user wont be able to see all the child at once. User will have to click on a parent to see the child group inside it.

If you are using angular 5. You can use the following npm module. It is highly configurable and easy to use. https://www.npmjs.com/package/dynamic-custom-checkbox

  • 1
    This is a UI question, not an implementation issue. – Mayo Jul 23 at 14:15

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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