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 looking for websites with good examples of a dropdown with checkboxes. I know that the gmail labels menu is one, but I'd like to see some more. General best practices are also very welcome.

Is there a good way to show the selected values on the outside? Is SHIFT ever used for continuous selection within the dropdown? Are there any other ways to provide continuous selection?

The gmail dropdown has a curious feature - when you click on the checkbox itself, it becomes selected, and the menu stays open, so as to allow the selection of additional values. But when you click on the label, and not on the checkbox itself, the checkbox becomes selected and the menu collapses. I find it mostly confusing. Pros and cons? Why not always leave it open and collapse it on loss of focus and on click on the dropdown itself?

EDIT I'll rephrase the question. The one good example of a dropdown with checkboxes that comes to mind is the Gmail labels menu. Do you know of any others that you like (in web apps?)

share|improve this question

closed as not constructive by JonW Aug 19 '12 at 9:57

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

1  
What are you looking for if the Gmail labels menu is a good example? –  Lode Apr 2 '11 at 20:41
    
@Lode I'm looking for more examples :). Maybe different approaches, maybe more complicated relationships between the items - e.g. the possibility of selecting "all". –  Vitaly Mijiritsky Apr 3 '11 at 5:35

9 Answers 9

up vote 8 down vote accepted
+50

Here's an example on a live website: http://www.omegawatches.com/watchfinder (e.g. "features" dropdown)

I'm not sure how well this works, we could never test it unfortunately.

share|improve this answer
    
I like the 'Cancel' and 'Done' features. I think they give the user extra control and also add predictability to how the control is going to work when I select an option. –  ArchieVersace Apr 4 '11 at 13:48
    
That's a very nice example, thanks! –  Vitaly Mijiritsky Apr 6 '11 at 15:40

This has become a common request in many web application. To specify multiple values from a predefined list. In my opinion multi-select dropdown is not the best solution. Although it is compact it does not visually represent the values selected.

In my opinion Google docs search bar provides a very neat solution. However, I do admit that it is targeted at rather advanced users.

Here's an example with "check all" and "uncheck all".

enter image description here

share|improve this answer
    
Thanks @Denzo! Is that a website that everyone can see? –  Vitaly Mijiritsky Apr 6 '11 at 15:31
    
It is from www.teamer.net which requires a registration. It is free though. –  Denzo Apr 7 '11 at 0:25

I don't have any examples to link you to, but the HTML default implementation is that a simple click de-selects everything except for the item you just clicked on, a CTRL+Click selects (or de-selects) an item without de-selecting previously chosen items, and SHIFT+Click is used for choosing a range, selecting everything from the nearest selected item to the item you just clicked on. All that to say yes, SHIFT+Click and CTRL+Click are sometimes used in multi-select implementations.

share|improve this answer

StackOverflow has a post with two links to examples: http://stackoverflow.com/questions/4918995/combobox-with-checklist-c

Personally I think they are not that great for usage. A good use case for multi-select or combo boxes with lists would appear to be huge ecommerce store filtering, but ebay and amazon don't appear to use any such method.

If you absolutely must have one - what about representing it a different way like this: http://odyniec.net/projects/selectlist/examples.html

For an extreme example - click on tags - http://www.codeproject.com/info/search.aspx

While that's clearly a case of a developer without a designer - the concept does allow for mass filtering very quickly.

share|improve this answer
    
Thanks! The tags example is actually very powerful. As to the examples at odyniec.net - they require you to open the dropdown and search for your items again after every selection, which is something I'm trying to avoid. –  Vitaly Mijiritsky Apr 6 '11 at 15:39

I use the following control in an email performance report. There is a filter tool for people, but this allows the user to trim the list of emails included in the report. The tree matches their tree in another section of the app, where they make emails.

It isn't the end-all-be-all, but users find it fairly obvious in usage.

Checkbox Tree in Menu

share|improve this answer
    
Uh, horizontal scrolling in a dropdown and cancel button on the wrong side. I guess users understand it, but it doesn't look very usable or elegant to me. –  Phil Apr 6 '11 at 5:46
    
Cool! Can you tell me how the search works? Does it filter or jump to the first result? –  Vitaly Mijiritsky Apr 6 '11 at 15:41
    
Vitaly, It does a dynamic (as you type) filter of the tree. It uses a built-in function of the Sencha ExtJS tree control. Phil, Windows often puts the cancel on the right. I know the debate about it, but it's not universally better one way or the other. –  Glen Lipka Apr 6 '11 at 16:21

Years ago we built vacanceselect.nl, a Dutch car travel website.

In the big search widget immediately visible upon loading the page, click on "bestemming en accommodatie", which will open up an accordeon panel containing multiple checkboxes. These function similarly to your proposed multi-dropdown-checkbox in the sense that they're initially hidden until made visible by user interaction and they can be checked on and off at will. An important feature of the entire search widget is that the number of results dynamically updates as you click around the widget (this was not as fun to build as it was to invent).

Instant feedback on this thing is important. Without it you'd have to keep going back and forth, opening and closing the panel to turn things on and off. Instead, you can open each panel, tweak accordingly until the number of results looks like something you want, and then move on. We've heard from the client that users of the site are very happy with how it works and conversion is great (we never got a chance to do studies ourselves).

Hope that helps!

share|improve this answer

Maybe interesting

check out my answer (at the bottom) of the link. Can maybe guide you into some custom control design.

share|improve this answer

In general, it really isn't a good idea to do a multi-select dropdown. Multi-select is pretty confusing to users as it is, and adding in the added confusion of having it function in a dropdown can only make matters worse.

share|improve this answer
    
Charles, I don't think that a properly done multi-select is confusing - i.e. one that has checkboxes. The tricky bit is combining it with the dropdown. I think that the Gmail folk did a good job overall. –  Vitaly Mijiritsky Feb 28 '11 at 19:14
    
@Vitaly - Using checkboxes is not a multi-select - it is checkboxes. Multi-select has a very specific meaning. –  Charles Boyung Feb 28 '11 at 20:43
    
Ok, maybe I didn't phrase it in the best way. I updated the question, thanks. –  Vitaly Mijiritsky Feb 28 '11 at 21:03

One ready-made component for jQuery I've used is Dropdown-check-list.

It basically transforms a regular <select> element into a dropdown box with either checkboxes or radio buttons. The component has versatile configuration options to create various behavours, so one can choose whether to close after each select, how to display selections, shift usage, etc.

The project also has a live demo page where you can try out some example settings.

share|improve this answer
    
Thanks @Jawa! But I'm looking more for examples in the context of a "real" website, and not so much for stand-alone components. –  Vitaly Mijiritsky Mar 27 '11 at 21:16

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