3

Is there any reason we should include a confirmation button on our multi-select comboboxes? What are best practices for the design of these controls?

Mouse Functionality:

  • Clicking outside of the modal (clicking the glass) will exit the modal... (keeps selections)
  • Clicking the search icon opens/closes the modal... (keeps selections)

Keyboard Functionality:

  • Tabbing closes the modal... (keeps selections)
  • The escape key closes the modal... (keeps selections)
  • Enter selects/deselects items

Without Confirmation Button:

enter image description here

With Confirmation Button:

enter image description here

3 Answers 3

3

This is mainly necessary for batch processing where you are trying to reduce the number of web-service calls you make to the back-end. Otherwise, a service call is made every time you check/uncheck an option. Carrying out batch processing obviously reduces the time required to fetch results because it cuts down on multiple results refresh and loading times. However, this is only advantageous if the number of selections is high (above three at least). If the average number of selections is usually one or two, this will worsen the experience due to the extra confirmation click.

1

It depends on the nature of what the values entail. If it is a filter it's not needed--clicking outside should auto filter.

However, if you are multiselecting a configuration, then you may need to add them to a bucket to engage a functionality--in which case an affirmation button will be required.

0

It's not necessary if it's not a destructive act that would immediately modify an entities properties.

What's your use case and the context? Are you editing an object where you're selecting attributes to modify, or is this a filter mechanism?

Editing entities: multiselect as part of a larger form

If you're editing properties as part of a larger form, chances are there's a final Save button, where users will first review the changes for any properties or settings modified.

These comboboxes are often part of a form, not the point of submittal itself.

Multiselect when used as filters

If you're using these as filters, often with data visualizations, you'll see the chart redraw. This is just a view setting that can be reverted at any point. It's a non destructive action.

In this example from Google Flights, the filters update the results. It's a long list, and while there's a x, there's no need to submit for results:

enter image description here

Large selection lists: indicating selection status

If you have cases where you have long lists with many of the items out of view, you can subtly indicate in the header how many items are currently selected:

enter image description here You also might consider reducing the tiger striping or test if you need it at all. I have not personally come across tiger striping in menus (that's just my experience, but maybe use a much more subtle tone if need be).

Your Answer

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

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