Assigning to multiple groups

Question

While there are plenty of "assign to blah" topics here, I'm not sure that I've seen this exact case. Apologies in advance if this is repeated.

Building out a new website, with quite a lot of configuration. Unlikely that this will need to be pushed to mobile, although any reactive-savvy thinking would be welcomed.

So, I've got a variation on the "add item to a group" pattern. The application presents multiple objects, grouped into containers (these are actually physical objects). Objects can never be in more than one container. Each container can contain up to 255 objects.

There is a need to manage groups of objects together, even if the members of the group are found in different containers. An object can be placed in up to 8 groups.

I figured a List Builder would be a good starting point -

However, a couple of things occurred to me -

• We can't actually remove the object from the list once assigned to a group, since it might be needed for another group. Not sure that would feel good to the user. Perhaps grey it out when the 8 group limit is reached?

• How the heck do I see what groups an object is in? Could be lots of clicking in order to find it and then remove it.

So I thought this might be a good alternative -

Perhaps more intuitive? In addition, the user can see that they've got the right object with the presentation of some metadata.

• This might not work so well if the group names get long.

• Certainly can't see how this would work well on a mobile, if that's ever a requirement.

However, while this feels OK to me, I'd really love feedback from the Hive mind - what have I missed?

Cheers

Andy

Answer 1

I think the reason the listboxes solution doesn't work is because its actions imply the objects are being moved from containers to groups (or vice versa) which isn't the case. Eg., when you assign an object from container1 to group2, it doesn't actually get removed from the container.

If I understand correctly, the items in each container can be managed independently, one container at a time - the containers don't affect each other.

If this is so, I would opt for tagging the items in each container separately, similar to your second solution. It's clear, intuitive and gets the job done. You can add auto-complete for the label names to make it fun to use. Check out this JQuery project that lets you manage the list with only the keyboard.

BTW, the 'X' button that removes each label doesn't have to appear all the time, it can appear only when mouse is hovering over the label.

As for your concerns, look at gmail labels: when the text is too long, it gets auto-ellipsis (with full text on mouse hover). And on mobile, clicking the labels opens a modal window where you can edit the labels in a list with checkboxes - pretty straight forward.

Alternatively you may want to consider this drag & drop solution, suggested on StackExchange.

Answer 2

For a similar task I have recently used a Facebook like autocomplete (e.g. jQuery Tokeninput). It's easy to implement and very light from UI point of view, but user should be familiar with whole scope of groups and it need a bit of typing.