0

I am designing a multiselect pattern (using on some fine js) with tight and narrow display in mind. The selectable items are displayed with facet counts. The number of items may range from a few, to thousands. I want the control to be simple and usable, while making optimal use of screen space. The basic pattern is described in the mockup. My questions are:

  • In panel 1, is it helpful to show a shaded region above as the destination of selected items?
  • Having the selected list above the selectable list, is that clear?
  • What other simple visual cues can help to clarify which area is selectable and which is selected?
  • Do you foresee any specific problems / solutions as the number of items gets large?

Follow-up comments:

  • the use case here is that the items in the list might not be known by the user, so having a visible list of choices is helpful for making the selection.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

ted.strauss
  • 681
  • 5
  • 14
  • An option suggested in a similar question on this site, is to add a selection above the list to show all entries or only the selected ones. Was only a short while back, so if you browse through the questions on this site, you should find it quickly enough. – Marjan Venema Feb 10 '13 at 18:59

3 Answers3

2

On the one hand it's definitely helpful to show the selected items grouped together in a 2nd list, OTOH it will be problematic as that list grows and vertical space starts to run out. One possible solution: when the selected list grows to 1/3 the size of the unselected list it stops growing is size and becomes scrollable. You can see how this adds complexity to the whole thing, and is unconventional (which in itself should raise some flags).

The conventional solution, given limited phone-like space, is to simply use one list that contains both the selected and unselected items. Click something to selected it and it changes appearance to show that it is selected, click it again to unselected it. Of course the shortcoming here is that the selected set is not discernable at a glance, one must scroll and remember to discern the selected set.

So you have decide if the extra complexity of a 2 list solution is worth the capability of showing the selected set gathered in one place.

obelia
  • 11,514
  • 23
  • 39
1

The primary issue I see is the user has to scan down the list and also scan back up to see if a specific item is already selected or not. Another challenge is that if the number of items selected is a lot the vertical height of the panel is going to be really long and it might not scale well with your design. Also another challenge is that since its a multiselect list, I have to scroll down to find something which is a lot of user effort.

I recommend using something like the Chosen plugin which would accomplish what you are trying to do with a more user friendly approach.

enter image description here

Mervin
  • 43,967
  • 8
  • 104
  • 188
0

I think that regardless of the shadow it's important to show the user some association between the two boxes as in the 'some fine js' examples, it could be a border that group them or something that visually conectes them.

That being said the position wheter is top right or bottom doesn't matter, but I would chose right or bottom over top

There's the problem that the list will grow your design would have to be prepared to grow or maybe u could do some fixed heights with scrolldown on the boxes

I also like the 'Chosen plugin' aproach, users are getting used to it because is used in a lot of nowadays applications

Fernando Lee
  • 91
  • 2