4

I've read a lot that for a frequent-use app it's better to use click-activated (as opposed to hover-activated) drop-down menus. In my case, a drop-down menu is a good solution as it's not used for navigation.

My question is, if my drop-down menu is activated on click, and I want to allow multiple selections, how should the menu be closed?

The options I considered:

  1. On selection - doesn't work in my case as I need the menu to persist to allow for multiple selections
  2. On mouse out - but wouldn't that be inconsistent if it's activated on click and deactivated on "the other end of hover action"?
  3. On mouse out with time delay
  4. On clicking on the menu again - seems consistent, but might be considered a bit arduous; it's like having an "OK" button to "submit and close" which I'd like to avoid
  5. Clicking outside of the menu - always seemed odd to me to force a user to look for some white space on the page to click on in order to avoid other (potentially clickable) content

Perhaps there are more/better options?

  • How frequent is multi-selection? If it's rare enough, it could be invoked with a special command (like a long press) and have its own behavior. In those cases you could add a "finish selection" menu item. – Stephane Dec 14 '15 at 17:26
  • Would you consider using a modal window instead? Then the user can keep it open as long as necessary and the close action is explicit. – Ken Mohnkern Dec 14 '15 at 17:33
  • I would opt for both, 4 and 5. – Trilarion Dec 14 '15 at 20:50
  • How about 3 and 4? If the delay is around 1 second, options 5 becomes almost redundant. – artooras Dec 16 '15 at 9:13
1

You could possibly do this: Stick out a little floating button, adjacent to the last tile selected. See a quick wireframe attached. This serves two purposes:

1) Assuming user just selects one option - the option makes sense even then and does not look odd.

2) In case of multiple selections, the proximity of the sticking out button allows a quick way of closing the dropdown, than the user having to reach out for it.

Ideally, menu should also close when clicked on itself to maintain consistency of typical user behaviors/expectations.

enter image description here

  • Instead of Done you could also just have some arrow up icon when then folds the menu again. – Trilarion Dec 14 '15 at 20:49
  • Are there any implementations of this live? – artooras Dec 15 '15 at 9:10
  • Not any that I have come across. But should not be difficult to implement, if one were to. – Amit Jain Dec 15 '15 at 10:57
  • I see slight issues with this approach. Looking at your middle image, option 3 has been selected. But if option 2 has a submenu (likely in my case), would that submenu overlay the done label? Or would the done label be on top? Kinda weird in both cases. – artooras Dec 15 '15 at 11:35
  • @artooras I was not aware that there are submenus. However, one option that comes to mind is to align the done label's top left to tile's bottom right. In that case, submenu could work fine. – Amit Jain Dec 17 '15 at 18:44
1

You want to know how to make a drop-down menu that allows multiple selections?

Well the proper answer is that you probably shouldn't.

A drop-down menu shows the selected item when closed, and if multiple items can be selected, then this pattern is broken.

Use checkboxes instead. If necessary, put them in a modal window as Ken Mohnkern suggested in the comments, but make sure to at least indicate how many items have been selected when the modal is closed, and ideally indicate which ones.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • "A drop-down menu shows the selected item when closed" - this isn't necessarily always true. When drop-down menus are used in navigation, the selection can be shown elsewhere, like in a breadcrumb trail. Isn't that so? – artooras Dec 15 '15 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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