multiselect1

When it comes to forms, there are loads of situations where our applications would like the user to be presented with a list of options and allow them to choose not only one, but multiple choices. Achieving that is simple, lets just use a checkbox list!

image

That’s works great, with 3 choices that is, what if we have a list of like…50 choices?

Ouch, that…might not work out. Even referring to books and sites on UI Patterns didn’t get me the best solution to deal with this scenario, so its back to the drawing table for me.

It wasn’t easy to decide on the best approach, so I’ll step through some of the solutions that I’ve thought of to deal with this problem and cap things up with a conclusion at the very end.

Solution 1: CheckBox List

image

Here’s where the problem comes, imagine having a list of 50 choices in your checkbox list…notice that despite even having the checkboxes are resized to be smaller and not even showing the full number of 50 choices, it’s already a pretty huge list.

Not ideal at all.

Pros:

  • Time to implement – Lowest

Cons:

  • Information Overload
  • Difficulty in keeping track of selected choices
  • Space taken up by control on form (Can be potentially big if its a huge list)

 

Solution 2: CheckBox List in Scrollable Container

image

Having the checkbox list placed within a scrollable container. Base the decision on the height of your scrollable container based on the amount of choices the list would have (or potentially have, i.e.: database driven choices).

Pros:

  • Time to implement – Low
  • Less information overload
  • Space taken up by control on form – Low

Cons:

  • Difficulty in keeping track of selected choices (As you can only see a limited amount of choices at each time)

 

Solution 3: List Builder

image

On comes the magical list builder control, which basically comprises of two lists, allowing the user to move choices to and fro between the choices and selected list. The idea here is that a choice will not be present in both lists, they will just be moved between the choices list and selected list.

Pros:

  • Time to implement – Medium
  • Better ease in keeping track of selected choices
  • Less information overload

Cons:

  • Space taken up by control on form – Medium
  • Dealing with huge list of choices can be improved

 

Solution 4: Advanced List Builder

image

At the moment the best approach would definitely be the List Builder, the idea here is to further improve it to provide more robust functionalities to deal with our problem of 50 choices here.

First thing added here is a search box, only against the choices list as it is more likely that the user would like to have a means to filter the list of choices through searching. The expectation here is the list of choices will be filtered each time the user changes (input/remove) the text in the search box.

Next thing added here is the “Select All” and “Deselect All” buttons, allowing the user to quickly select or deselect choices.

Obviously you can go “OCD” mode and have a search filter even against the selected list, that will depend on the situation you’re in I guess. We can also have checkboxes against each choice in both the choices list and selected list, but I found that to be much too complex.

Pros:

  • Better ease in keeping track of selected choices
  • Less information overload
  • Swift filtering of choices through searching in choice list

Cons:

  • Time to implement – High
  • Space taken up by control on form – High

 

Solution 5: List with Choices in Modal Window

image

Thinking out of the box, another way to perform multi selection is to have the user select them from a modal window. Introducing the List with your list of choices in a Modal Window. The basic idea here is you click the “Add Choice” link to bring up a modal window, select your choices and hit ok, then see them populated in your form.

Pros:

  • Better ease in keeping track of selected choices
  • Less information overload

Cons:

  • Time to implement – Higher (Maybe?)
  • Not great in dealing with a huge list
  • Space taken up by control on form (Can be potentially big if its a huge list)

 

Solution 6: List with Advanced List Builder in Modal Window (aka ‘The Beast’)

image

So what if we want to take it one step further, making the ultimate lean, mean, multi-selection beast. It can be achieved by combining both the concepts from Solution 4 and Solution 5, which might provide the best of both worlds…to a certain extent.

The idea is to show a list of selected choices with a “Add Choice” link, which will bring up a modal window, allow you to use the advanced list builder to select your choices (searching, select all, etc), then hit ok and see them populated in the list on your form. Since the list can potentially be huge, it’ll also be contained within a scrollable container.

Pros:

  • Better ease in keeping track of selected choices
  • Less information overload
  • Swift filtering of choices through searching in choice list
  • Pretty good in dealing with huge lists
  • Space taken up by control on form – Little

Cons:

  • Time to implement – Highest (Potentially?)

 

Conclusion

So the million dollar question, which is the best solution? The answer here would be…none, it all depends on your application’s context and of course…deadlines, here are some potential solutions based on the scenario you’re in, do note that they’re purely my opinion and take it with a pinch of salt:

Solution Ideal number of Choices Space to be taken up by control Time to implement
CheckBox List 1-7 Varies (Based on Number of Choices) Lowest
CheckBox List with Scrollable Container 7-15 Low Low
List Builder 7-15 Medium Medium
Advanced List Builder 7-Unlimited High High
List Choices with Modal Window 1-10 Varies (Based on Number of Choices) High
List with Advanced List Builder in Modal Window
(aka ‘The Beast’)
7-Unlimited Low Highest

I guess the best thing here to do is to mix and match, add a checkbox beside the field, add a search box for a list for filtering purposes, use modal windows (anyone that uses a popup should be shot), and so on. That will most likely help you in finding the best solution, or at least in getting closer to the best solution.

I hope this post would have helped you in dealing with the epic multi-select dilemma. You’re more than welcome to share in the comments below on how you’ve dealt with this dilemma!