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.

Was it helpful?

Solution

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.

OTHER TIPS

I don't know of specific UI widgets that do exactly what you are asking but here are a few UI paradigms that might be useful (depending on what you need to do with the subsets after they are defined):

  • Color coded list box (allows user or program to highlight items with different colors depending on which subset they belong to.Being able to group items by color and displying a legend are useful in this model).
  • Tree control (displays groups as children of nodes in a tree. Generally this would be a tree with only two levels - the top one being the partition, the next being the items in the partition. The ability to drag items between partitions (nodes) and being able to rename the top level partition can be useful in this model.)
  • Hierarchical grid (similar to a tree control but shows additional columns of information to describe details of the items being displayed)
  • Multi-column draggable lists (a set of multiple columns into which you can drag items. Each column represents one subset in the partition).

Sounds like a job for drag & drop.

Once source, multiple possible destinations. Perhaps an 'add subset' button to allow for easy creation of new subsets.

The same could also be acheived by 'highlights' on a single list. Ctrl-Click select, click a color button.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top