12

I have a scenario where my 'create user' dialog has a very long list of options, of which the user needs to select many. The project manager has suggested a 'dual list' approach: a long (scrolled) list of checkboxes for the user to choose from, followed by a list of all currently selected options. The second list would 'auto update' as the user proceeded to click them in the first list.

As suggested by the PM, it would look something like this:

enter image description here

(Somewhat functional "demo" of the above mockup here. The actual mock ups of the application itself are just about equally plain and ugly.)

The problem is that while the screenshot in this example only has fifteen or so options, of which only a few are selected, the real world application could have hundreds of options, and the user might have to select fifty or more. The user will always have to click fifty times, say, but what would be the best way to do this from a user experience perspective?

The project manager also suggested a 'select all' option, and keeping the lists in alphabetical order and 'synced' (checkbox select/deselect automatically updates the selected list.) The major concern for the PM from the user's perspective is that once they've selected all the options, they need some way of 'checking' to make sure they've gotten them all. The PM is of the opinion that scrolling through a hundreds-of-options-long list of check boxes will be tedious for a user to do, and that it will be easy to miss options that way.

Key points:

  • A list of (possibly) hundreds of options
  • User will probably be selecting many, but not all, options
  • User will need to check their selections on this screen before committing their changes

This is going to be a fatiguing tasks no matter how it's implemented. I'm just looking for a way as to not frustrate the user with a clunky or ugly interface, and/or to streamline the process as much as possible.

This is very closely related to this question: Alternatives to a dual list for selecting a bunch of items from a long list? and Best way to select a subset of items in a long list?. Those questions focus on the general case, whereas I'm considering the 'whole lotta clicking' case.

3
  • This may help. ux.stackexchange.com/questions/1944/…
    – Chris N.
    Feb 6, 2013 at 0:36
  • 2
    If you go with HTML checkboxes, be sure to use <label> tags and set the "for" attribute correctly. This'll increase the size of the click target, and users who have to click 100 times will appreciate it! Feb 11, 2013 at 4:00
  • 1
    @SamPierceLolla - Unfortunately the application isn't HTML; I just do my mocks in HTML+JS. But yes, the entire label + checkbox construct should be 'clickable'. Feb 11, 2013 at 5:02

6 Answers 6

9

You could also use a list builder. (Take a look at "Designing Interfaces" by Jenifer Tidwell ad the UX Guidelines from Microsoft).

Someone created a live demo too...
You can add filters, search and groups to the list on the left, and thus make is easier to "select all" items from a certain group or search result...

enter image description here

2
  • 2
    Good solution if it is a convention the user is aware of. However for less IT savvy users I have seen this UI on Windows test quite poorly. A better rendering may help.
    – Jason A.
    Feb 3, 2014 at 14:49
  • 1
    Also such lists should have the standard Shift + Click and Ctrl + Click and even Ctrl + A should work to allow easier selecting from the 100s of options that the OP will potentially have. I've seen UIs have to be re-designed because the users were getting RSI.
    – icc97
    Jan 7, 2016 at 1:27
7

Not sure if this really fits your use case, but the chosen library implements a cool multi-select dropdown widget.

enter image description here

6

KeyRemap4Macbook does this quite well.

They have literally hundreds of options to select, so what they have done is have a checkbox that allows you to "show enabled only". This is very simple, space efficient, and effective.

enter image description here

3

Grouping options together by some principle with ability to select/unselect whole groups will make this task much easier:

grouping of checkboxes

You may also differentiate selected vs unselected options with help of colours.

0

Is your items classifiable? Then you could create a list of parents and a list of children. List of parents also can have checkbox to select all child items.

1
  • No they're all unique and unrelated, unlike the example I posted above. There's no parent-child hierarchy. Feb 3, 2014 at 15:22
-5

The proposal of the project manager is quite good.

Except the absurd capital letter in “Selected Locations”.

2
  • I have no idea what you mean by 'absurd capital letter.' Feb 11, 2013 at 20:54
  • @Roddy — The too big L in the common noun “Locations”. Feb 12, 2013 at 21:37

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.