4

Given the hypothetical structure:

enter image description here

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?

  • This approach reminds me of a treemap. It would require lots of learning, and not sure it would be worth it. See below my suggestion for a simpler alternative approach. – Dvir Adler Apr 3 at 17:29
5

enter image description here

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.

  • The strength of where this answer is going is this: the layout of the tree attempts to separate disparate categories. e.g. ford/honda are on the 'outside' as with Harley/Aprilia.... instead of on the inside. Spatially separating different signs is a good thing. – New Alexandria Sep 12 '13 at 12:40
  • The top-down layout is definitely better, I just haven't seen this type of design on the web or in desktop applications, so I wondered if it will be intuitive to use. I guess nowadays there are usually lots of categories or more complex hierarchies, so it is unlikely that this can be used in many places. I will try to implement this and see how it goes. – Michael Lai Sep 12 '13 at 22:19
  • @MichaelLai do keep us update with your implementation. I would like to know how it goes. Thanks! – SimonTeo Sep 13 '13 at 3:55
1

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

0

I would simply use a hierarchical checkbox structure like this:

enter image description here
(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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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