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.

Combo box is relatively easy to pick items from, but is less usable when it comes to see what you have already selected. Any recommendation on how to display results of the combo box selection? The goal is that it is easy for the user to see what has been selected at a glance without scrolling and also easy to make changes to the selection. (added later) Just found a good read about related topic about advantages and disadvantages of different multiple selection approaches http://www.ryancramer.com/journal/entries/select_multiple/

A couple of options I have so far:

enter image description here

I am not a huge fan of the option below, because it takes multiple clicks to select things and there are more controls which creates more cognitive load.

enter image description here

I could also consider have "view only" and "editable" modes but that would mean more coding so I am looking for some other ways.

share|improve this question
add comment

4 Answers

up vote 14 down vote accepted

While there are a few different ways to do what your asking; I prefer the "free tag" input method (not sure if there is a better name for this component). Basically users are allowed to enter in terms/tags/values into an makeshift input. Suggested/autocompleted terms terms/tags appear to the user as they type. As terms are completed/selected they appear in there own mini containers that also allow for single click removal.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Working example plugin can be found here: TextExt. Hope this helps!

share|improve this answer
1  
Working example also on this forum when you tag your questions! –  sscirrus Jun 1 '12 at 1:39
3  
I really think this is the best option for this type of scenario, only thing is it gets less and less readable as the number of options selected increases. On a side note, another similar control would be Chosen: harvesthq.github.com/chosen –  GotDibbs Jun 1 '12 at 3:16
    
@GotDibbs: yes, when the number of selected items increases it gets less workable, but that is true for the alternatives (ie putting the selected items first in the drop-down list) as well. –  Marjan Venema Jun 1 '12 at 7:39
add comment

The Chosen javascript plugin may be exactly what you're after. It compiles all previous selections in a nice stack while letting you continue to make selections.

Chosen screenshot

share|improve this answer
add comment

Your first option is fine, except I'd list the selected items horizontally under the combo. This doesn't mess up your layout as much as the vertical list.

The solutions that put the selected items within the visible row do not scale beyond two or three very short items, not to mention long ones. They also don't let you easily remove your items, because you can't really to the X button thing. You need a click on the box to expand the box, so you won't be dividing it into several regions where clicking on some expands the box and clicking on others removes the item. The X thing works well outside the box itself.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

BTW, just to observe terminology - a combo box isn't one where you can select a combination of items, it's any dropdown in which you can also type. I'm not sure what the proper name of a checkbox dropdown is.

share|improve this answer
add comment

I upvoted @JeggH's answer.

Though when the list of available items is not too long, this as another approach:

enter image description here

share|improve this answer
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.