Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

enter image description here

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.

share|improve this question
add comment

5 Answers

up vote 1 down vote accepted

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
thanks . .this is similar to my idea of putting these all in tabs.. i was thinking it would look something like you have mocked up above –  leora Nov 5 '13 at 0:29
add comment

Consider using a control like this instead:

enter image description here
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:

enter image description here

Example of selection when not focused:

enter image description here

share|improve this answer
    
hmm . . .this is definitely an interesting control and would significantly reduce vertical space. I do think the control i have in the question is a little "simpler" and more explicit to the novice user so I am a little concerned about people understanding. The other gap i see is its harder to do "Select All" and "Remove all" . . I was originally thinking that I wasn't going to change the control but rather look for a way to lay them out better but this is definitely an option. The final issue i just realized is that it doesn't support IE 7 :( –  leora Oct 27 '13 at 11:44
    
a. You can add select all/remove all buttons. b. You are aware of the fact that the latest version of IE is 10, right? (and HTML5 support requires IE9+) –  Danny Varod Oct 27 '13 at 12:01
    
Even selection of five items is a little annoying ). Still it's a good solution if only couple of items should be selected. –  Alexey Kolchenko Oct 27 '13 at 12:02
    
Also depends on user type, advanced users with keyboards can multi-select using Ctrl+Click in the control the OP used. Basic users and users with touch screens add one by one, thus for them, this control doesn't provide any limitations. –  Danny Varod Oct 27 '13 at 12:06
add comment

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

share|improve this answer
    
the issue is NOT with the individual multi select boxes . . its more that there are 12 SEPARATE multiselect boxes for each field that you can filter on .. hopefully thats clear . . –  leora Oct 27 '13 at 2:23
    
also, to answer your question, this field selection is defining a filter so they would do this more than once depending on the filter they are looking for –  leora Oct 27 '13 at 12:01
1  
Hi again. Right, it is clearer now, tks. :) In that case, I do agree with the answer given by @Danny Varod. The JQuery Select2 control looks much more intuitive and provides the same functionality you want with less space. It is in fact what I mentioned about you having all values in the same list, and furthermore it looks a lot like interfaces common people are already used to (i.e. Facebook sharing). Adding many items to the filter will be anoying eitherway, but why don't you give it a try? Present prototypes with the 12-in-a-scrollabe-page and Danny's one, and ask users for feedback. –  Luiz Vieira Oct 27 '13 at 13:41
add comment

You could try this UI, which suppose different interaction.

enter image description here

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).
    enter image description here
  4. Allows more space, which allows to display more items without scroll.
share|improve this answer
    
I don't necessarily have an issue with my multi select control itself (i feel like its intuitive). The issue is that i have so many different fields so i have 12 different multi select items I updated my question to be a bit more explicit –  leora Oct 27 '13 at 11:37
    
If most the users are the same as you or you are the only user of the system, you way is good. Anyway, my solution requires much less space, so it could be a better option. Also designing (not only) UI, you could think broader, not just limiting yourself with single control and trying to get better mix of them. –  Alexey Kolchenko Oct 27 '13 at 11:58
    
Maybe i am just misunderstanding the control that you are displaying. Are you saying, you only show up the details when you click on that particular field (so hide details on other controls)? Is this a real control that you are aware of (or just mocking some idea up). Do you have any examples that i could look at to better understand your suggestion but i do like the idea of hiding all of the noise until a person says they want to filter on a specific field –  leora Oct 27 '13 at 12:10
    
@leora You are right, the control visible only while editing. Otherwise you see just row with values for each parameter, as at the top of my image. The control is mockup only, but it's not hard task to implement it, watch the rough prototype. –  Alexey Kolchenko Oct 27 '13 at 12:54
add comment

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

Refine Dataset


Examples

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

Detached filter view: Refine dataset example 2

Another filter view to the left, with more flexible user input: Refine dataset example 3

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.

share|improve this answer
    
If you implement something like this, please test it on desktop mode with mobile phone and/or a tablet to see if you can click on the correct rows. –  Danny Varod Oct 27 '13 at 16:11
    
Well, yeah, it depends on the context of use for sure. I interpreted the question as just being for desktop applications but for tablets / phones then I'd ensure to do what Danny mentioned as well. –  Andreas Johansson Oct 27 '13 at 17:06
    
Or, even better, provide a responsive design to it as well... :) –  Andreas Johansson Oct 27 '13 at 17:18
    
If only everyone implemented responsive designs and did it properly... –  Danny Varod Oct 27 '13 at 19:53
    
Agreed! That would be nice. :) –  Andreas Johansson Oct 27 '13 at 20:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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