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?

Improve this question
4
  • 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
    Commented Dec 14, 2015 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
    Commented Dec 14, 2015 at 17:33
  • I would opt for both, 4 and 5.
    – NoDataDumpNoContribution
    Commented Dec 14, 2015 at 20:50
  • How about 3 and 4? If the delay is around 1 second, options 5 becomes almost redundant.
    – artooras
    Commented Dec 16, 2015 at 9:13

2 Answers 2

Reset to default
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

Improve this answer
5
  • Instead of Done you could also just have some arrow up icon when then folds the menu again.
    – NoDataDumpNoContribution
    Commented Dec 14, 2015 at 20:49
  • Are there any implementations of this live?
    – artooras
    Commented Dec 15, 2015 at 9:10
  • Not any that I have come across. But should not be difficult to implement, if one were to.
    – Amit Jain
    Commented Dec 15, 2015 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
    Commented Dec 15, 2015 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
    Commented Dec 17, 2015 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

Improve this answer
1
  • "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
    Commented Dec 15, 2015 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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