Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Why do you think something is wrong with this UI artifact? It's a pretty standard method of doing things. –  Charles Boyung Feb 25 '11 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 :) –  rcampistron Feb 25 '11 at 14:03
    
Can the user select multiple options from each dropdown or just one? –  Charles Boyung Feb 25 '11 at 21:44
    
Yes, they can select multiple options, as long as the sub category is a child of the parent category already selected. –  rcampistron Feb 28 '11 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 Oct 6 '11 at 6:07
add comment

7 Answers 7

up vote 1 down vote accepted

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.

share|improve this 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? –  rcampistron Feb 28 '11 at 9:08
    
I mean something like the top example here or like this tree here, but inside a dropdown. –  Vitaly Mijiritsky Feb 28 '11 at 9:43
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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

share|improve this answer
    
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 Oct 6 '11 at 6:07
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
    
I think it's needed to show the multiple selection. –  Vitaly Mijiritsky Feb 27 '11 at 5:28
add comment

Your Answer

 
discard

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.