How to show multiple values (possibly many) without taking too much space? Readonly combobox?

Question

I have a one-to-many relationship, say a Monkey can have lots of Bananas.

The selection part is done by opening a popup and showing Bananas with a filter, add/remove buttons, etc.

My issue is how to display this selection back to the user. There can be a lot of Bananas (between 1 and 300 tops), and I don't want to take all the space to display them all.

I'd like to use as much space as one or two rows.

My thoughts:

1. List the items in a combobox

The displayed value would show the number of selected Bananas. When you click on it, you would be able to see the whole list BUT not change the selection (I'd put an edit button next to it for that purpose).

My issue with this is that I've always used comboboxes to select things, never to display things.

2. Homemade "drawer widget".

Same idea as above, but wouldn't look like a combobox so hopefully would not confuse users when they see they can't interact with it.

3. Displaying some generated icons for each Banana (like Gravatar).

Doesn't suit my case well because we don't use this at the moment so the user wouldn't be able to recognize the icons.

4. Use some Banana Groups.

My Bananas are already classified, so I thought I could use this to show Groups instead of Bananas. For instance I could display all the Group names followed by the number/percentage of Bananas selected within this group. That would take less space and may help the user in making sure its selection is complete.

Answer 1

When showing multiple items a vertical list is usually the way to go. The hardware world is built for vertical scrolling (mouse wheel, touchscreen, etc.)

A pattern I like to use in your situation is to show as many items that will fit followed by a clear "show more" link. The benefit to this approach is that if most people only ever have 1-3 items then all information can cleanly be displayed and users don't need to know about the 300 item case.

As soon as there are 4 or more items I will add the first 2 items followed by a link to "show more" that communicates the list is longer and after clicking the link all the items would be displayed followed by a "show fewer" link since every action needs an equal but opposite reaction.