Question

Consider you have a set of objects X (e.g., A, B, C, D) that you wish to divide into non-empty subsets that cover all of X. Mathematically, a partition of the set.

So, at first you might treat them as all different, {{A}, {B}, {C}, {D}}. Alternatively, you could separate them into vowels and consonants, i.e. {{A}, {B,C,D}}. Or, arbitrarily, {{A,D}, {B,C}}.

Is there a standard user interface widget/concept/paradigm/pattern that supports this? Having two list boxes with Add ->, Add All ->, <- Remove, and <– Remove All to switch between them (i.e. a list builder) works for only 2 subsets, but doesn’t work for an arbitrary k number of subsets.

Answer 1

The standard UI for grouping items into sets is a list of radio buttons. Terrible ASCII approximation:

A B C
o x o - Item One
o x o - Item Two
o o x - Item Three

This only works well for a small number of sets, but can be used with a large number of items. Most people will find this easy to understand and fast to scan. It’s an example of what Tufte calls a small multiple. It may be tedious if someone needs to move large numbers of items from one set to another. I bet that could be reduced by allowing radio button presses on selections. You’d definitely need an undo feature if you did that though.

A frequently used variant of this uses option menus instead of the radio button groups.

It can be as visually sophisticated as you want–most UI toolkits support custom images for the radio button states. This could be an even better use of the small multiple concept, or it could degenerate into angry fruit salad.

I would hesitate to use a design that moves the items. Drag and drop of selections is tedious, you’ll run into trouble with Fitt’s law for more than just a few sets, and you’ll lose the benefit of organizing the list independently of grouping.