85

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 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?

Improve this question
2
  • 3
    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.
    – Juan Lanus
    Commented Oct 7, 2015 at 17:27
  • See also (Not a duplicate) "Does the average user understand the standard HTML multiple select box?" ux.stackexchange.com/questions/6122/…
    – Sybille Peters
    Commented Oct 29, 2022 at 6:01

10 Answers 10

Reset to default
57

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

Improve this answer
11
  • 17
    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
    Commented Feb 9, 2011 at 6:04
  • 18
    +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
    Commented Feb 9, 2011 at 7:57
  • 8
    Also note that this pattern seems to have many names (ex. List Builder, Accumulator, Dual Lists,...)
    – jpierson
    Commented Apr 1, 2011 at 22:13
  • Programmers fancy this arrangement because it is featured in database column selection artifacts and the like, but IMO normal people don't know it.
    – Juan Lanus
    Commented Oct 7, 2015 at 17:30
  • 2
    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: quasipartikel.at/multiselect
    – Jon Coombs
    Commented Feb 6, 2016 at 0:29
56

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

You can find an example here of a jQuery plugin called chosen. 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.

Improve this answer
4
  • 6
    There's a jQuery plugin that calls this UI 'Tokeninput'. That said, Chosen FTW!
    – Ryan Long
    Commented Jan 30, 2013 at 1:29
  • Yaay for Chosen!
    – FloatingRock
    Commented Aug 19, 2014 at 17:56
  • 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.
    – Jon Coombs
    Commented Feb 6, 2016 at 0:31
  • 1
    Not suitable for all scenarios, but very nice.
    – Manachi
    Commented May 12, 2016 at 7:53
9

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.

Improve this answer
6

Depending on the number of options, you could go with a graphical drop-down list option like the following. Tapping/clicking toggles whether that item is selected.

This doesn't work very well with very long lists, though.

enter image description here

Improve this answer
6

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

Improve this answer
1
  • Personal experience is always helpful to add!
    – Zelda
    Commented Nov 16, 2011 at 17:14
6

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.

Improve this answer
5

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)

Improve this answer
1
  • 4
    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
    Commented Feb 8, 2011 at 22:49
4

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.

Improve this answer
3
  • 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
    Commented Feb 9, 2011 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
    Commented Feb 9, 2011 at 13:59
  • Hence the 'hybrid' comment.
    – DA01
    Commented Feb 9, 2011 at 14:30
2

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.

Improve this answer
2
  • 2
    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
    Commented Aug 18, 2011 at 8:53
  • 2
    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
    Commented Aug 18, 2011 at 22:19
2

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

When he's done selecting the values, he can click a DONE button, which has a click event, a javascript method which gathers the checked values and updates some hidden field on the main form and/or some display field (eg readonly text area, or a span or a div element) on the main form. And when the user clicks on the main submit button, the hidden field or display field is sent to the server for persistence.

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?

Improve this answer

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