4

What is a good UX design for letting a user select a complex set of nodes from a 2-level, dynamic, moderate-size tree? (I say a 2-level tree, but to be more accurate, the implied root could be considered a third, hidden level; the root is not to be represented to the user.) All leaves of a branch may be selected distinctly from the branch itself (because branch selection implies future inclusion of added leaves, whereas selecting all current leaves does not).

Is there a good existing design to this problem?

Detail

The tree will have at least one branch node, and all branch nodes will have at least one leaf node. Both the original tree and the selection are dynamic. That is, the membership of the tree can change in the future (branches and leaves can be added and removed), and so can the user's selection (if the user revisits the app).

The resulting selection will be composed of a set of branch and leaf nodes. If a branch is selected, then implicitly all its leaves (now and in the future) are effectively selected as well (and that should somehow be made clear to the user). Therefore if a branch is selected, it is redundant to select any of its leaves (indeed this could be prevented in the UX design). However, it is valid to select all leaves in a branch rather than the branch (and leave the branch unselected), because in the future the membership of the branch's leaves could change -- if additional leaves are later added to the branch but the selection has not changed, such leaves will not be implied selected unless and until the user explicitly does so in a future selection.

The scale is moderate. Roughly 10 branches max, 50 leaves per branch max. Small enough to load everything at once (no lazy loading or infinite scroll). Large enough that scrolling may be required, and searching is helpful but not critical. The resulting selection is likely relatively small, because generally leaves won't be individually selected if more than 5 or so leaves (in those cases the branch would generally be selected instead). Most likely the selection could be represented with 25 or fewer nodes.

Examples of Original Tree

The structure being selected from could be represented like this:

branch1
 ∟ leaf1-1
branch2
 ∟ leaf2-1
 ∟ leaf2-2
branch3
 ∟ leaf3-1
...

And the minimal structure is:

branch1
 ∟ leaf1-1

Design Possibilities

I am thinking of a 2-column view showing the unselected (first/source column) and selected (second/destination column), but that's not set in stone.

Also thinking a drag-and-drop or add/remove interaction (or both) to move members from one set to the other. Pre-move multi-select of the nodes (e.g. Ctrl+click several nodes then add or remove them) can be considered as well but is not strictly required.

Searching/filtering the nodes can be considered, but that feature is of secondary importance for this design.

Challenges

One challenge of the design is whether and how to depict a branch that has some but not all of its leaves selected. If a 2-column design (see Design Possibilities above) is used, should the branch be depicted in both columns, and if so should there be any visual indication that it is partly selected?

Another challenge of the design is now to depict the leaves of a branch where the branch itself is selected but its leaves aren't explicitly selected. Should the leaves appear as if they have been explicitly selected or not, or should they appear in some third state that indicates their selection is implicit?

Another challenge is, if a branch is added to the selection, (how) can one of its leaves be removed from the selection? Must the user remove the branch first, or is there a way to remove a leaf from a selected branch? If the latter, is the branch removed from the selection but its remaining leaves added to the selection?

A final challenge is, whether to represent the final selection in the same way as the original tree. It might be easier to visualize the final selection in a more compact representation.

An excellent UX design solution to this problem would address the above challenges in a way that is clear and intuitive.

Different Questions

This question addresses selecting a single path (one node per branch): Designing a control to select elements from a tree?

This question is very similar but does not address the critical distinction between selecting all leaves of a branch vs. selecting the branch (which are distinct selections in my question): For large hierarchies - checkbox tree or 'guided tree construction'

This question is similar but not as detailed and is more tied to large scale rather than basic usability: Alternative UI patterns for a large, shallow tree

1 Answer 1

2

I'm not shure if a tree is the right pattern here. For the user it is only groups with Elements. My answer is not about the visual presentation it is more about the behaviour.

You will need a design which states clear if a item or group (leave or branch) is selected or not. A checkbox seems OK to me. A checkbox is even able to show the partly selected state of a group.

See the example: Branch 1 = partly selected (some leaves, could also be all) Branch 2 = nothing selected Branch 3 = branch is selected (note the inactiv checkboxes of the leave)

enter image description here

Now to the behaviour:

If the user selects a branch, all leaves should be selected, by showing the checkboxes in inactive state it should be clear, that this means "all leaves ar selected an it is not possible to deselect one" enter image description here

If the user klicks on the branch to unselect it, the branch should go to state "partly selected" and select all the leaves. So the User can unselect any leave as desired.: enter image description here

A klick on the "partly selected" branche will unselect the branche and all leaves. Now the user is able to either select the whole branch again or the desired leaves. enter image description here

What should happen if the user changes the group of a leave. This depends on the current state of the moved leave and the state of the group of the target:

  • Source: leave is checked / target: group is either unchecked or partly checked -> leave should be checked at targetgroup.
  • Source: leave is checked / target: group is checked -> leave is checkt but displayed with inactive checkbox
  • Source: leave is unchecked / target: group is either unchecked or partly checked -> leave should be unchecked
  • Source: leave is unchecked / target: group is checked -> leave should be checked with inactive checkbox
1
  • The indication and behavior around partially selected branch indicator with all leaves selected is what sold me in particular. Agreed that multiple visualizations could work and that getting the behavior right is the crux of this problem. My question was perhaps overly lengthy, and I agree that details about visually how selections are transitioned from unselected to selected is less important, although your basic visuals are already quite satisfactory. Your state representations and overall behaviors address all the "challenges" I listed.
    – Will
    Jun 15, 2018 at 19:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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