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

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:

Tags: