what is the best UI for multi select from a list

Question

we have a web form and one of the fields is a multi select list. Our options are:

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

both seem to be a big ugly when the list is > 100 items.

is there any other ui solution that people use for this ?

Answer 1

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:

Answer 2

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.

Answer 3

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

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.

Answer 4

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)

Answer 5

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).

Answer 6

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.

Answer 7

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.

Answer 8

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.