Design patterns for hierarchical multiple selection

Question

Given the hypothetical structure:

Representing a group of items that can be classified as type A or B, and each subtype can be classified as type C or D, and within D can be classified type E or F.

Where the user can choose to display All items, All items of type A or type B, any combination of C-F from A + any combination of C-F from B

This will be used as a filter where there are mutually exclusive states (e.g. you can't select ALL and A at the same time, or select A and A/C at the same time) and also non-mutually exclusive states (e.g. you can select A/C and B/C). I want to implement this as a 'toggle map' where if the user selects ALL then every square will be selected (or unselected depending on the existing state). This then also allows users to select different combinations to analyze different subsets of data.

Is this type of user interaction too complex? Is there an alternate design pattern that allowing users to make multiple selections from a hierarchical structure while still able to show the relationship between each of the categories?

Answer 1

As shown here:

1. All selected
2. Car selected
3. Honda selected

In my opinion, I do not think it's too complicated for the user if they can see the selection highlighted when the mouse over (assuming it's not a touch based device).

Also, I noticed it's much easier for me to view the hierarchical multiple selection if it's top down approach.

Answer 2

I think there's already a relatively simple, straight-forward and commonly know pattern that could solve this challenge. It's simply a classic tree structure with checkboxes. Selecting a checkbox of a category will automatically select all its children. For example, you can select the category "Car", and have all types and models selected under it.

To select all, simply add a button saying "select all", and complement it with a button of "clear selection"

borrowing from travel websites, you can have next to each entry a shortcut link saying "only". clicking it would select just this item, and unselect the rest. (the link would appear only on hover, of course, to reduce visual noise).

Answer 3

I would simply use a hierarchical checkbox structure like this:

(Image taken and modified from here

It allows you to show the relationship between parent/child elements, checking/unchecking the parents or "all" will select or deselect all childeren. You can programatically enforce mutual exclusion by disbaling "Client B" if "Client A" is selected, while keeping the same UI as a non-mutually exclusive version. You could even add collapses at each parent to make it more compact.

Checkboxes have been around forever and are easily understood and I would wager most people have even user a hierarchical checkbox pattern like the above, so it would be more intuitive than creating a new design pattern.