What is an intuitive HTML interface for selecting items from a list into multiple subsets?

Question

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).

Answer 1

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

Answer 2

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!

Answer 3

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:

(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):

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.