Is my conditional multi-select efficient and user friendly ? How can I improve it?

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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:

Answer 7

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