User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question

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.

share|improve this answer
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

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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