Small Groups of Related Things

Context: There are many items or actions to show the user, some of which are more closely related to each other than other things. This context is extremely common, occurring in many of the high-level patterns in this language, including (but not limited to) High-density Information Display, Status Display, Control Panel, and Form.

Problem: How should the items or actions be organized?

Forces:

Large, undifferentiated masses of things can be intimidating and difficult to figure out, especially to someone seeing them for the first time.
The brain is very good at discerning groups and nested groups of things, and at getting a "big picture" from the grouping structure.
The items cannot or should not be shown on separate working surfaces; for instance, because they are part of one coherent task.
People naturally assume semantic coherence where there is visual coherence.

Solution: Group the closely-related things together, nesting them in a hierarchy of groups if needed. Keep the number of things in any one group to around ten or fewer, even if the things are other groups. Use repetition and symmetry to keep the groups from becoming visually chaotic (and don't overuse boxes, even the nice etched ones in some GUI toolkits; white space often works just as well). Make sure that the grouping is not arbitrary, but is based on the meaning of what is being shown -- as pointed out in the Forces, a user will naturally try to derive some kind of semantic meaning from the groupings, even if it's wrong.

Resulting Context: To make a visual grouping of things look good, it's tempting to shortchange their individual usability. Try not to make too many sacrifices here. For instance, a common mistake made by Form designers is to make a text box too short for the expected input, simply to make it visually fit in with the Small Group of Related Things (e.g. other text boxes) that it belongs to. Also, there's no need to be dogmatic about this pattern -- expert users of a WYSIWYG Editor, for instance, may prefer that their Toolbox just show all the available tools as densely packed as possible, to save space.

Sometimes a large group of homogeneous items work together to form a single conceptual entity. This is true about many High-density Information Displays -- data points on a scatter chart, for instance, or a column of numbers representing a single variable. This pattern shouldn't apply to them. See Edward Tufte's book Envisioning Information, in particular the chapter on "Small Multiples," for an excellent set of counterexamples: these large sets of items are meant to show small changes between individual items that share most characteristics, to make those changes stand out. The impact comes from seeing all those similar items next to each other. In many cases, that impact would be completely lost if you broke up those sets of items into small groups!

Notes: This is a very basic way of managing complexity, and is almost more of a principle than a pattern. The "ten or fewer" comes from Miller's number (7+-2), which represents, among other things, the upper limit of someone's ability to "instantly" scan a set of items. Beyond that, the time it takes to read through the items grows linearly.

Comments to: jtidwell@alum.mit.edu
Last modified May 17, 1999