What is the best UI for multi-selecting from a list?
We have a web form and one of the fields is a multi-select list. Our options are:
- List of checkboxes
- Listview (select box but allowing multi-select)
Both seem to be a bit ugly and unwieldy when the list contains more than 100 items.
Is there any other UI solution that's better for such a case?
There is another option: a list where each element is a label and bound to hidden checkbox. Clicking the label trips the checkbox and the label gets a "selected" style. With this arrangement you avoid the ugliness of the checkboxes and the unstability of the multiselect dropbox.
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:
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.
+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.
Also note that this pattern seems to have many names (ex. List Builder, Accumulator, Dual Lists,...)
Programmers fancy this arrangement because it is featured in database column selection artifacts and the like, but IMO normal people don't know it.
This seems like almost the only way to support certain complex scenarios (e.g. filtering list 1 without losing selection; or reordering list 2 without switching screens), but it's pretty clunky--I'd avoid it when it isn't needed.
This version is one I've seen a lot and both liked and hated. The version mentioned in @seanevanking 's answer is a bit less clunky and seems quite functional: http://quasipartikel.at/multiselect/
It's interesting to consider that a simple (boring) list of checkboxes requires just a single click to select an item. Whereas the above UI, while more fancy, requires a minimum of two clicks - so is less efficient in that sense.
It depends on how many things are available to select - if you have a short list of things, a simple list of checkboxes is ideal. However, the OP was looking for solutions that work well with >100 items.
Another solution is the facebook-like "multi select bar". (I don't know the exact name)
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.
There's a jQuery plugin that calls this UI 'Tokeninput'. That said, Chosen FTW!
Chosen looks really, really nice for what it does. I'm also looking for something that scales nicely beyond single values; i.e. to selecting multiple rows that each have multiple columns.
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
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.
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.
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).
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)
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.
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.
This is really the same thing as what Bevan posted, just with a slightly different mechanism for the actual selection/deselection.
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.
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.
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.
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.
I'm very late to the party. But I'd like to offer my own solution.
That is: using a popup window (aka overlay, modal) to display the checkboxes and let the user select multiple values.
The popup window is opened when a user clicks on an edit link on the main form.
If there's a large number of checkboxes to select from, then displaying them can take up a very large screen real estate, so a popup window can be styled without clutter to help focus the user's attention. When he's done, he can close the window.
Of course multiple steps could also make sense. But my solution is for a single submit form.
What do you think of this method? Is it a pattern already being used?