My Multi Select UI Sucks. Help me make it better

January 7, 2007 11:21 AM

WebDesignFilter: I have a multi-select box with hundreds of elements in it. I need a better UI for it.

This is a multiselect box for a report generating page. Users need to keep the multi-select aspect of it, but it also needs to be much easier to use. On the same page there are many other form inputs to customize this report, so the solution cannot take up too much space.

The skills/tech available to me is lots of javascript knowledge and ajax, and server side programming.

A similar problem I had recently was a dropdown, which I replaced with an ajax powered incremental search. The problem is that doing that doesn't allow for multi-select features. Something similar might work though, if you can just point me in the right direction for making this less of a PITA to use.

posted by cschneid to Computers & Internet (11 answers total)

Well, use an incremental search, and have an 'add' button so that you can take the current result and put it in a list below the search, and have 'remove' buttons next to each added selection? Sorry if that's a little unclear.
posted by tmcw at 11:24 AM on January 7, 2007

You can use a scrolling box and have the users press ctrl for selecting multiple items.

Like the "select location" item on monster job search, for instance.
posted by claudiadias at 11:32 AM on January 7, 2007

Response by poster: Yeah, that was the initial idea I came up with, but it's too big, since it scales in size in relation to the number of requested items, so when they want 10 or 20, it starts failing the size requirements
posted by cschneid at 11:34 AM on January 7, 2007

When I read tmcw's suggestion, I pictured something that wouldn't take up any more space at all; instead, it would be a textbox that would, on click, show something like:

[blinking text box]
---------------------------------
Option A [add]
Option B [add]
Option C [add]
544 more options...
-----Selected Items-----
Option foo [remove]
Option bar [remove]
---------------------------------

everything below the long lines would only display on focus of the textfield. typing text into the box would narrow the selectable options that match the search. the mouse would be used to select the addition or removal of elements. the biggest problem with this is that it's not very discoverable, and might be hard to figure out the first time.
posted by mikeyk at 11:45 AM on January 7, 2007

What immediately springs to mind is a drag-and-drop operation. It's a logical and sexy way of maintaining a persistent state between selections. Should be relatively straightforward with JS/ AJAX, too.
posted by milquetoast at 11:50 AM on January 7, 2007

Simple: replace the multiple-select with a list of checkboxes in a div that has its height and border set and "overflow: auto" so it will show a scroll bar. Like this.
posted by nicwolff at 12:36 PM on January 7, 2007

I have used this solution in the past.
posted by Nothing at 1:38 PM on January 7, 2007

Have two multi select boxes and a pair of buttons between them.

The first box contains the full list of options. The second box is empty. A user can select items from the first box, press the ">" button, and the selections are moved to the second box. The "<" button moves selections from the second box back to the first. (It's important that the selections are moved, not just copied.)

This way, the user can see the values they pick as they're picked, and there's no threat of holding down the wrong modifier key ruining previous selections. On form submit, the set of values in the second select box are all autoselected (by javascript) and processed by the back end.

Livejournal, among other sites, uses this setup for managing large lists.
posted by ardgedee at 1:53 PM on January 7, 2007

ardgedee's got it. -- you can also add >> and << buttons to move all the options at once.
posted by empath at 3:21 PM on January 7, 2007

If I was your user, I would take tmcw/mikeyk's interface over all the others, by a long shot. (It'd be even better if I had the option of cursor-keying up and down the narrowed-down list, and adding an item to my selection by hitting enter, but then I'm a keyboard guy.)

In order of importance, I'd rank your interface problems like this:

1. Do I stick with ctrl-clicking for multiple selections? (Answer: no, it is the interface of the devil.)
2. How can make it easier for people to navigate this list of hundreds of items?
3. How do I make it easy for people to select/remove items?

Everyone else seems to be focusing on 3, and skipping over the fact that you've got hundreds of items in this interface, which in my mind makes 2 far more important. Fix 2, and your solution for 3 will just be the icing on the cake.
posted by chrismear at 4:57 PM on January 7, 2007

I just thought I'd say I agree with tmcw for this solution, as well, but I'm not sure how that would affect page loads and I'm a huge fan of quick load times.

I generally hate it when people populate a page with a zillion options for no good reason. AJAX type-ahead would be fun here but I have no idea whether that is compatible with your options (e.g., if the user doesn't know what the choices are.)

As a side note, Kudos to nicwolff for that div overflow trick. Learn something new every day.
posted by jlstitt at 9:47 AM on January 8, 2007