Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
This may help. ux.stackexchange.com/questions/1944/… –  Chris N. Feb 6 '13 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! –  Sam Pierce Lolla Feb 11 '13 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'. –  Roddy of the Frozen Peas Feb 11 '13 at 5:02

6 Answers 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

share|improve this answer

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

share|improve this answer
    
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. –  Jayfang Feb 3 at 14:49

The proposal of the project manager is quite good.

Except the absurd capital letter in “Selected Locations”.

share|improve this answer
    
I have no idea what you mean by 'absurd capital letter.' –  Roddy of the Frozen Peas Feb 11 '13 at 20:54
    
@Roddy — The too big L in the common noun “Locations”. –  Nicolas Barbulesco Feb 12 '13 at 21:37

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

enter image description here

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
    
No they're all unique and unrelated, unlike the example I posted above. There's no parent-child hierarchy. –  Roddy of the Frozen Peas Feb 3 at 15:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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