What is the best way to condense this filter screen when you have a filter control on multiple fields?

Question

I have a bunch of multi select list boxes vertically one after the other and listed as part of a filter web page. So when this are on top of each other it looks like this ( the below pic shows 3 of them but i actually have 12 on my real page):

I am trying to come up with a better way to show this screen to avoid having to scroll down (as i have 12 different multi select list boxes on the page). I was thinking maybe to use vertical tabs like this.

Any suggestions for a better way to display this and feedback on my vertical tabs idea?

To be clear, I have NO issue with the multi select control by itself, the issue is that having 12 of them on a screen takes up a lot of space so wanted to see if there way a better way to lay out the page.

Answer 1

You can reuse the same multiselect list box for all 12 categories. For example, in the mockup below you can choose one category in the scrollable left section and in the right section the multiselect list box is updated with the corresponding entries.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Consider using a control like this instead:

More details

You can select items (in your case filters) by clicking on them in the list, filter the list by typing, you can have multiple groups (in your case filter types) in one list, or separate to one control per group. You can remove items by clicking on their 'x'.

Example of selection with single group:

Example of selection when not focused:

Answer 3

I think asking questions like the following might help you:

• What is the intended purpose?
• What type of user will interact with this interface?
• Is this a one time configuration? Otherwise, how many times shall this be changed in a day, for instance?

If it is a one time configuration, for instance, I would do it as a Wizard, having the user to select the items for each category one at a time (be sure, though, to present the progress somehow). If it is something that must be changed regularly, having an indexed presentation (like the tabs yourself suggested) might be a better idea.

Also, what does prevent you from having ALL strings (I mean, from all left-sided lists) in a single list? If the user needs to select the values that apply, they can be filtered by the edit-box above, and the values are well understood from their textual meaning, perhaps there is no need to spread them apart. :)

Answer 4

You could try this UI, which suppose different interaction.

The advantages are:

1. Task oriented. Each time user works with single parameter. So other controls create visual noise and occupy useful space, limiting current task interaction.
2. Direct multi-selection, which is more user-friendly comparing to lists transitions.
3. Supports eye, in contrast to previous design, where eye tends to look at non-selected items fist. This could bring some user errors (slips).
   
4. Allows more space, which allows to display more items without scroll.

Answer 5

For a more condensed filter view, I'd consider some "Refine dataset" interaction pattern.

---

Examples

Filter view to the left (although I'd consider moving the checkbox to the left of the labels):

Detached filter view:

Another filter view to the left, with more flexible user input:

Another example is the Elastic Lists demo page, but that might take up to much space in your layout. However, I recommend viewing it anyway as it provides some nice guidance on how to update the filter view. There's also a great A List Apart article that covers this area as well.