16

What alternatives and examples are there for selecting a bunch of items from a long list of items instead of a dual list?

This question has some nice enhancements on the traditional dual list, but I'm looking for other things to consider.

Best way to select a subset of items in a long list

Improve this question

6 Answers 6

Reset to default
11

Consider using a multi-select with tokens design. The filter-as-you-type feature is a nicety but not essential. These work well when the common use case is selecting either one or just a few, but the usability falls down quickly if you need to select many as the user has to re-invoke the menu for each item.

Multi-select with tokens, via harvesthq.github.com/chosen

You've previously seen the tokenised multi-input method in your email clients. multi-select-tokens in email

If the common case is to select multiple, you can consider a checkbox menu. The difference here is that the drop-down is persistent across clicks (plus visually communicates the multi-select nature), and thus the user can click-click-click to quickly select multiple items. For our web-app we are looking at enhancing this design by adding the tokens functionality.

checkbox menu, via realestate.com.au

Improve this answer
1
  • Another slight variation is used by Google Analytics for metrics in custom reports. Here the elements added still appear side-by-side, but are not constrained by a surrounding box. A similar approach is also used to list selected triggers in Google Tag Manager. support.google.com/analytics/answer/1151300?rd=1
    – MXMLLN
    Jul 19, 2016 at 14:20
3

Any alternative would depend on the data, and the expected use cases. The visual representation is not as important as assisting the user in finding the correct values. You should take advantage of any opportunities to reduce the number of options and guide the user to their preferred values. Consider filtering, grouping and remembering previous selections.

Improve this answer
1
  • The filtering is probably the easiest that will have the greatest effect. Convention these days accepts a 'Google Suggest' style filtered list (where simply typing letters reduces the item count). Your users already know how to use something like this. +1 again for "finding the correct values" - relevance! Try to sort the list initially with things that make the items at the top most relevant. I've got more to say but it's just reiterating this great answer.
    – cottsak
    Oct 28, 2010 at 7:05
2

I've noticed this alternative used by Windows 7 for selecting columns for Windows Explorer.

enter image description here

Improve this answer
4
  • Are the checked items always displayed at the top of the list ?
    – David
    Apr 7, 2011 at 6:44
  • No, not in the example that I provided from Windows, in that case ordering also reflects column ordering in Windows Explorer. Good question though.
    – jpierson
    Apr 10, 2011 at 2:46
  • ok, then I think one of the drawbacks with this interface is you can't quickly see all the ckecked items.
    – David
    Apr 11, 2011 at 7:06
  • @David - True, so the cases where it makes sense is where the selected values are already apparent usually on the parent form that launches such a dialog. Such is the case with Windows Explorer where you only have to look at the visible columns to know what is already selected. So I would say it's a trade off between having a more slim dialog with a single list and having the ability to easily see which values are selected and in some cases one way makes more sense than the other.
    – jpierson
    Apr 12, 2011 at 1:42
2

Check out these examples as well:

http://ivaynberg.github.com/select2/

... from a jquery plugin called "Select 2" that will give you programmatic access, tagging support and tokenization for select boxes, input fields, dropdowns and more. You should be able to build a good solution for your challenge with this.

Cool plugin.

Improve this answer
0

You can use a checkbox list with a checkbox option "Select all" on the top. With this checkbox you can select and deselect all options very fast (checkbox reflects at the same time the selection status of the list... all, any or none). If the number of checkbox items is very high, you can show the selected items (in a normal list) on the right side of the checkbox list. In additional you should add a filter over the checkbox list.

Improve this answer
0

If you lack space and the probability of added items is low (2-3), you can make a repetitive add action. With the proper taxonomy users get that very fast.

Improve this answer

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.