4

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 -

ol' faithful List Builder

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 -

Multiple Groups

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

  • About the intuitive aspect, I can barely understand what is happening in your second example, even after skimming the description. Maybe it's because of the usage of the very abstract terms of objects and containers, but mostly because the number of interdependent controls (five) the user has to manipulate at the same time. Even your first illustration has this drawback, and I can easily see myself adding object 2 to group 1 and only then notice that I wanted to add object 2 to group 6 instead. – Arseni Mourzenko Jun 1 '15 at 8:37
  • 3
    It's really hard to provide concrete solutions to abstract problems. It would help if you gave examples of objects, containers and groups. – Izhaki Jun 1 '15 at 12:51
  • how many groups could exist? – Alejandro Veltri Jun 2 '15 at 12:04
  • object 1 can belong to more than 1 container or are objects unique? – Alejandro Veltri Jun 2 '15 at 13:23
  • Would you elaborate the relationship between containers and groups. I want to understand why you need two different grouping systems, and what functionality is achieved by that. – Harshal Jun 3 '15 at 6:19
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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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