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.

First of all, I apologize for my Englsih and will try to be as clear as possible!

I'm currently having a problem with a Dropdown Check List.

I have, on the left of the search results, a Dropdown Check List which manages the different categories (38) displayed. When selected, a category appears in plain text in a field. When the user selects all 38 categories, they appear in plain text but in line and separated with a comma which makes it unclear and very hard to read.

I do not wish to cut the plain text list in the field because the categories are home-made and users are not necessarily familiar with them.

It's also way easier for me to see what has been checked or unchecked in a search. With a short list, the user has to click to display the plain list and know what was checked.

I tried with Harvest's multiple select chosen but the result is the same (too long).

Do you have any solutions?

share|improve this question
1  
Could you please add a wireframe or screenshot to make it clear? –  Roland Pokornyik Feb 16 '12 at 12:21
    
I think the question is that do you really need a Dropdown checklist? –  Roland Pokornyik Feb 16 '12 at 12:24
    
sorry roland i coudl not upload an image because i am too "young" in this chat;-) No i don't really need a dropdown check-list. i think, i need something to display elements in a left search menu. the tool must manage a huge list. –  alexia Feb 16 '12 at 14:50
    
If the content is important and requires multiple selection, why not use a regular list? (that does not collapse into one row) –  Danny Varod Feb 16 '12 at 16:55
add comment

3 Answers

First of all, your English is really not that bad.

enter image description here

It sounds like Harvest's free selector library may be to your benefit. http://harvesthq.github.com/chosen/

These work much like Facebook's name tagging when composing a message. While it's difficult to say from your description, it sounds like you have two interfaces where only one is needed.

Either that, or a feature like that of the previous link would basically integrate those two interactive elements into a single element.

This may also solve your dilemma because each item in the text box is trivially a comma separated element, but can still be treated like an object. The plugin also updates the dropdown list removing items that have already been selected.

Update

My team has moved to Select2, it's a well-maintained fork of Chosen with more features.

http://ivaynberg.github.io/select2/

share|improve this answer
add comment

Maybe this solution could work for you: (I have seen this structure for Tagging, but could work also for you). Even a search/filter field could be added to the left side panel.

enter image description here

share|improve this answer
add comment

I'm assuming that the use-cases for selection are clustered at the edges, meaning that almost all selections will either be a few categories selected or all categories selected except a few. If this is true, then I would approach the problem like this:

  • customize the text shown to the user when the dropdown is not dropped down.
  • if only a few are selected, show the selected categories, e,g. "Category 1, Category 2"
  • if all are selected, don't list each category. Instead, show text indicating all are selected, e.g. "(all)"
  • if almost all are selected, except a few, then show text indicating which ones are not selected, e.g. "(all) except Category, Category 2"
  • if there are lots of categories selected, but not so many that almost all are selected, then show the first few categories and then a "summary" item, e.g. "Category 1, Category 2, Category 3, and 18 more".
  • make sure there's a tooltip so users who hover over the dropdown checklistbox will see the full list.
share|improve this answer
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.