8

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

Vitaly Mijiritsky
  • 31,167
  • 12
  • 84
  • 146
  • 1
    What are you looking for if the Gmail labels menu is a good example? – Lode Apr 02 '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 03 '11 at 05:35

9 Answers9

12

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.

Matt Ball
  • 107
  • 4
Phil
  • 8,084
  • 3
  • 31
  • 60
  • 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 04 '11 at 13:48
2

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

Denzo
  • 1,448
  • 1
  • 9
  • 12
1

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.

ThatSteveGuy
  • 1,109
  • 8
  • 5
1

StackOverflow has a post with two links to examples: https://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.

Community
  • 1
Chris Kluis
  • 1,076
  • 8
  • 16
  • 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 06 '11 at 15:39
1

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

Glen Lipka
  • 11,752
  • 1
  • 34
  • 51
  • 1
    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 06 '11 at 05:46
  • Cool! Can you tell me how the search works? Does it filter or jump to the first result? – Vitaly Mijiritsky Apr 06 '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 06 '11 at 16:21
1

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!

Rahul
  • 23,822
  • 10
  • 76
  • 168
0

Maybe interesting

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

Community
  • 1
Henrik Ekblom
  • 4,188
  • 22
  • 24
0

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.

Charles Boyung
  • 8,281
  • 2
  • 33
  • 39
0

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.

Jawa
  • 1,791
  • 1
  • 15
  • 18