How to select a parent checkbox either separately or with children?

Question

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.

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:

• Checkboxes that allow you to select parent and children as distinct entities
• Checkboxes – how to select parent only?

Answer 1

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:

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).

Answer 2

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.

.

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

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.