I've got a list of items some of which will go into an undetermined number of subsets. An item can be in at most one subset. An item might not end up in a subset.

It's easy if there is always at most 1 subset. It makes it more difficult since there could be more (up to the number of items in the list). Can anyone point me to a good example?

Edit: To put it simpler, the user will be presented with a long list of items. The user will want to group some of them together into distinct groups. Each item in the list may or may not be grouped. If an item does get placed into a group, it can't be placed in a different group. (Or said another way, an item in the list can only be in zero or one groups).

  • Are the subsets predefined, or can users add new ones?
    – Nick
    Aug 14, 2011 at 9:23
  • @Dave Could you be more concrete? Your question is so abstract it's hard to help you. Many UI structures might be a solution to your problem but without knowing what specific problem you're trying to solve, you'll just get abstract answers like Vitaly's.
    – Rahul
    Aug 14, 2011 at 11:07
  • Have you seen Google+ circles interface (putting your contacts into circles)? Something like that would be great!
    – Ali
    Aug 14, 2011 at 11:14
  • @nick - The user can add new ones.
    – Dave
    Aug 14, 2011 at 22:00

3 Answers 3


The most common example of what you're describing is a file system.

  • Or more generally a tree structure
    – Ben Brocka
    Nov 18, 2011 at 20:34

It sounds like you're describing when I separate my laundry into piles. I have a heap of clothes that want putting into whites, blacks and colours. To do that, I have 3 piles and I take an item at a time and add it to a pile.

That thought process is somewhat tricky to represent on a webpage, but I believe Google Plus does it quite well. You effectively have two halves of a screen. One half contains the list of items not currently part of a group. They should be possible to select multiple of and unselect ones one at a time (the "reselect" option Google+ offers is a lifesaving bonus feature!). You then can drag them to the other half of your screen towards the groups and on top of the group you want to put them in. There should be sufficient feedback on hover so you are confident the task will be performed ok.

The works ok in circumstances where there are few enough groups that they can be displayed in a portion of a screen. E.g. Circles in Google+ for most people.

With this approach, your user is aware of which items have still not been assigned to a group. So that side of things should work well.

All in all, Google+ is a great example. But its a hard UI to pull off excellently. Good luck!


Use a drag-and-drop interface to allow items to be sorted into distinct lists

With the jQuery UI Sortable plugin, use one unordered list per subset and link all subsets, as shown in this demo:

enter image description here

(I've added the headers to the mockup above, but otherwise the code is exactly the same as the jQuery UI demo.)

This is a 'poor man's' version of the Google+ Circles interface, but it's somewhat easier to implement and users are likely to be more familiar with it (until more users have experienced Google+, at least). There are a few approaches for the implementation:

  1. Put all items in subset 1 to begin with, then prompt the user to 'drag and drop the items into the correct groups.'
  2. Randomly sort items into multiple subsets, then include the same instruction.
  3. Place all items above the subsets in an 'unsorted' group, and prompt the user to sort them (what Google+ does with the Circles interface):

enter image description here

In each case, be sure to colour the drop targets to make them very obvious (possibly including 'drop here' text when the subset is empty), and consider omitting the drag-and-drop widget altogether if the visitor's using a touch screen.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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