I'm facing some difficulties with a multi-select. I'd like the user to link a documentation to one or more categories. The catch is that there are some sub-categories and they only appear if the user has previously linked his documentation to the sub-category's parent category. I proposed checkboxes first, but the feedback was not very good, so i used the jquery asm-select. But I feel that something is still wrong, and i can't understand where the problem lies.

Here are the steps to use the multi-select:

  1. In the form, the user choose a category.
  2. A closable label appears containing the previous selection, then the user can select a sub-category to link the documentation with.
  3. And so on for the other levels of categories.

Here is a mock-up:

Multi-select mock up

So what do you think? How can i improve this ? Is there another ui design pattern that is more suitable to solve my problem?

  • Why do you think something is wrong with this UI artifact? It's a pretty standard method of doing things. Commented Feb 25, 2011 at 13:54
  • My boss told me that it needed to be improved (how? why? she didn't tell) and our users are not computer savvy at all. Also i wondered if it was the best solution. I tend also to be very negative about what i am doing lately, then every time i do something, i'm thinking that i'm doing it wrong :) Commented Feb 25, 2011 at 14:03
  • Can the user select multiple options from each dropdown or just one? Commented Feb 25, 2011 at 21:44
  • Yes, they can select multiple options, as long as the sub category is a child of the parent category already selected. Commented Feb 28, 2011 at 9:04
  • Is it possible to select a category without selecting a child sub-category? I've got a use case where that's come up, and it's bugging me.
    – Erics
    Commented Oct 6, 2011 at 6:07

7 Answers 7


I tend to agree with your boss :) Maybe the real app has a different feel to it, but from the looks of the mockup it doesn't seem to be very elegant.

What happens when I change a category after selecting a sub-category, does it reset my sub-category? And if I select a number of categories, does the sub-category dropdown contain subcategories of all the categories I've selected?

Also, it takes a lot of work to select several categories at once, since the dropdown closes on click and you need to open it again after each added item, and to scan it again to find the next item you need.

It sounds like a dropdown/popup tree with checkboxes is your answer.

  • Yes, the sub-category is reseted, and yes, it contains subcategories from all the parent categories selected. I already proposed the dropdown/popup checkboxes, but the feedback was not very good. Maybe i can give it again a try again with an improved design. Can you show me some good examples? Commented Feb 28, 2011 at 9:08
  • I mean something like the top example here or like this tree here, but inside a dropdown. Commented Feb 28, 2011 at 9:43

If space is not an issue, you could make a list showing the category/subcategory hierarchy, each with a check box. Note the subcategories should always be enabled: you can then select a subcat, implying assigning the parent categories as well.

If place is a concern, this list could be a pop-up/fly-out/...

[ ] Cat 1
    [ ] Cat 1.1
    [ ] Cat 1.2
[x] Cat 2
    [ ] Cat 2.1
    [x] Cat 2.2

Of course, if you don't expect your users to assign multiple categories and/or sub-categories, this might be a little frightening/overkill.

Alternatively, use a tag-like system with auto-completion, and use a path-like convention for categories and sub-categories.

Categories: [user-manual, self-study/intro, ...   ]

Validation is more complex in this case, but often typing in stuff is so much faster than looking for thinks and clicking them. But I'm a keyboard guy myself, so I might be a little biased :-)


Is this a UI question, or data architecture question? If it is a UI question, and you are tied to the Category/Sub-Category/Sub-Category architecture, the only suggestion I have is to use a tree UI, for which I believe there is a jQuery plug-in - check out www.jstree.com.

If it's an architecture question.... In recent times, I've really been inclined to lean away from the Category/Sub-Category architecture and more towards a "Tagging" structure - as is done on this and all other StackExchange websites. It allows for a lot more flexibility. Look at iTunes. That's one of the things I hate most about it - I'm tired of tiers. I want to type in a word and get everything with that tag. That's what I love about the StackExchange sites.


I've dealt with a system where there were both hierarchical categories and regular tags. We ended up providing an interface that had a type-ahead feature for the tags, that would include the "leaf nodes" of the category tree. In essence, if you had:

 Cat 1
   Cat 1.1
 Cat 2
   Cat 2.1
   Cat 2.2

Then the type-ahead would suggest the "Cat 1.1", "Cat 2.1", and "Cat 2.2" options. Once the hierarchical tag was applied, it was easy to back-fill the hierarchy. This worked very well for the application because the analysts knew the hierarchical categories like the back of their hands--along with the four letter shortcut codes that mapped to them.

As long as the type-ahead is reasonably smart about it, it offers probably the quickest way to get your category hierarchy applied.


This is, as stated before, a standard way of doing selections that are different depending on the previous selection and is a good way of solving the problem. Just one small thought - I don't think you need labels to put the selected value in, just keep the selection in each drop down list to keep the GUI clean and simple. And another thing, you can add som visual feedback that the sub drop down lists changes when a drop down list higher up changes (loading bar or similar).


We needed a similar UI element for a three-nested-levels multiple selection widget: a tree of checkboxes is the best compromise, especially as you can make a progressive enhanced widget that works even without javascript (unlike the three dropdowns from your example).

It takes more screen space, but users can directly see an overview and access to the selectable options instead of having to go thru two dropdowns before being able to see what options they can pick, for example:

Example of tree of checkboxes

  • That's a nice visual design too. Would clicking on the [•] checkboxes select all child categories? How would this work if there's a requirement that intermediary categories exist as selectable items, as well as containers?
    – Erics
    Commented Oct 6, 2011 at 6:07

I don't understand the need for the labels, when the drop-down will presumably show the selection. Dropping the labels will simplify things.

  • I think it's needed to show the multiple selection. Commented Feb 27, 2011 at 5:28

Your Answer

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

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