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.

We have a web form and one of the fields is a multi -elect list. Our options are:

  1. List of checkboxes
  2. Listview (select box but allowing multi select)

Both seem to be a bit ugly and unweildy when the list contains more than 100 items.

Is there any other UI solution that's better for such a case?

share|improve this question

8 Answers 8

up vote 17 down vote accepted

One alternative that I've seen in a number of places is to have two adjacent lists, one with available items and one with selected items.

Here's an example from OpenFaces.org that I found with a quick google search:

enter image description here

share|improve this answer
2  
I never cared for this type of UI too much mainly because it takes up so much real estate to implement. It does have it's advantages though in that it clearly shows two concise lists of what is selected and what is not as well as allowing a pretty simple albeit crude way of reordering selected items. Nevertheless it's an important method for multi-selection that shouldn't be left out when comparing the different methods out there. –  jpierson Feb 9 '11 at 6:04
3  
+1; the advantage of this solution is that you can add a filter for the left list, so the user can reduce the 100+ items, while the right list still shows all items that have been selected already. –  ammoQ Feb 9 '11 at 7:57
1  
Also note that this pattern seems to have many names (ex. List Builder, Accumulator, Dual Lists,...) –  jpierson Apr 1 '11 at 22:13

Another solution is the facebook like "multi select bar". (I don't know what the exact name for it is.)

You can find an example here. Basically it is like a text input field but the selected items turn into "tags". Just try it out on the page I have linked to.

share|improve this answer
3  
There's a jQuery plugin that calls this UI 'Tokeninput'. That said, Chosen FTW! –  Ryan Long Jan 30 '13 at 1:29

Depends on the ui and the space layout you have. Depends also on the number of items in your list and the average number of items user has to select. One interesting solution is a dropdown list + checkboxes dropdown checkbox

http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html

The more items are present the less a dropdown will suit (having the user to scroll inside a dropdown is not so good.) And here you need to figure out how to organize/structure your list.

share|improve this answer

Looks like I'm way late to this one, but I've had a similar issue at my company.

Inevitably you needed to break this into two separate requirements (search, select) then bring it back together into a UI.

If the search is simple, then something simpler with an autocomplete should do the trick (e.g. http://quasipartikel.at/multiselect/ gets the idea).

share|improve this answer
    
Personal experience is always helpful to add! –  Ben Brocka Nov 16 '11 at 17:14

The checkbox is the more easy idiom to understand.

You will need "check all" and "check none" button and, if the user have to check a lot of adjacent items, a "check selected items" button (only enabled when more than 1 item is selected)

share|improve this answer
1  
I agree - for short lists. When the lists are long (the OP has lists > 100 items) then a check-list-box makes it difficult for the user to see what's been selected. –  Bevan Feb 8 '11 at 22:49

I've seen this as an option as well. It's a checkbox list where the checked items are moved/reloacted. A hybrid solution between the two.

[ ] item 1
[ ] item 2
[ ] item 3
[ ] item 4
[ ] item n

After selecting one:

[ ] item 1                X item 2
[ ] item 3
[ ] item 4
[ ] item n

The selected items could be moved the right (perhaps using a fixed div so that it stays visible as one scrolls down the list of options) or it could migrate to the top of the list.

share|improve this answer
2  
I think this would only really work effectively if the items animated into position onto the right hand side to clearly communicate what was going on. –  ICR Feb 9 '11 at 9:09
    
This is really the same thing as what Bevan posted, just with a slightly different mechanism for the actual selection/deselection. –  Charles Boyung Feb 9 '11 at 13:59
    
Hence the 'hybrid' comment. –  DA01 Feb 9 '11 at 14:30

Whether you go with option 1 or 2 from your list really has to do with whether you want the selection to be persistent for any reason as well as other factors. Below I'll list a few things you may want to take into consideration when choosing which methodology to follow.

Drag-n-Drop

If you want to allow drag-n-drop reordering of items, using checkboxes may make it simpler for a user not to lose selection state in the processes. If you are not allowing drag-n-drop reordering or don't care if selection state is lost during the processes if it is allowed then using multi-selection via the Ctrl key may be an option.

Long Term Persistence

If the selection being made is to be saved for later and recalled again during a subsequent session or run of the application then consider using a checkbox or the double listbox paradigm because showing highlighted items is generally reserved for transient selection state.

Multi-Selection as Advanced Feature

If multi-selection is expected to be a rare necessity to your users then perhaps burdening the users with check boxes is not the best option since they are not likely to use them the majority of the time. In these cases it may be better to show the checkboxes by entering into a special multi-select mode or to just stick with the Ctrl key method of advanced multi selection. In the edge case where a user needs very fine grain control over selection and ordering and screen real-estate isn't much of a concern then using the method that Bevan proposed in his answer with two separate lists is a decent option as well.

Note that Windows Explorer generally follows the Ctrl key method for advanced multi-selection of files/folders but it can be configured to use checkboxes to represent selection. I've tried it once and switched back and have found most people are not even aware of that feature.

share|improve this answer
    
I think multi-selection with the Ctrl key is an invisible option for many users, particularly non-power-users. They wouldn't even think to try it, and there's usually no affordance on the page to indicate it's possible. –  AlexC Aug 18 '11 at 8:53
    
I agree, and I think that's why most user interfaces allow for muddling about doing things one-at-a-time but then allow multi-selection as an advanced feature for those power users who care to learn advanced features. But in the case where multi-select is a necessity for all users then using check-boxes is probably the most reasonable solution. –  jpierson Aug 18 '11 at 22:19

I'm a little late to this party, but I thought I'd add a solution I've been using a lot recently: a single text input with a dynamic text prediction function (think Google's main search form).

As the user chooses "results" in the drop-down, a list can populate below the input, preferably with a clear option of how to remove each selection. For examples of this functionality, think of sites which ask for tagged content like WordPress or Delicious.

This solution requires that you and the user are somewhat simpatico on the contents of the larger list, but I find it saves a lot of angst and page real-estate.

share|improve this answer

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.