Hierarchical Set

Examples: Context:  There are many things to show the user, and they are interrelated in a hierarchy (or can be made to appear that way).  This could be in a High-density Information Display, or a Map of Navigable Spaces, or as the organizing principle for a Stack of Working Surfaces.

Problem:  How should the information be organized?


Solution:  Show the data in a tree-like structure.  Keep all the nodes at a given depth from the root in the same line, plane, or arc, to emphasize their parallelism. Allow non-leaf nodes to be opened and closed, to give the user control over how much of the hierarchy is visible at any one time. Depending on expected usage, try to balance the demands of having a dense, fully-visible structure with the ability to look at the details of individual nodes; if necessary, use panning and zooming, and other patterns like Short Description and Optional Detail On Demand.

Resulting Context:  You get a form of Optional Detail On Demand for free if you let users open and close parent nodes -- if someone wants to see the children of a given node, they can, or they can ignore it.  Pointer Shows Affordance is a way to indicate that a node can be opened or closed.   Remembered State gives you a way to set up the node states according to how the user arranged them last time.

Notes:  The Windows Explorer has brought the columnar "outline view" into common usage in desktop GUIs, and every self-respecting toolkit has one; they're great for fitting a hierarchy into a narrow space, but if you don't have that space restriction, try to use something more visually interesting, like an actual 2D drawn tree. These are much better at showing and manipulating large hierarchies than outlines are, because you don't have to stack everything together in one column, then scroll forever to get a big picture. (Doing them right is a non-trivial programming problem, unfortunately.)

Some designers have come up with pretty amazing ways of viewing very large hierarchies. Circular "fisheye" viewers, 3D rotating cylinders... [find references for these, in CHI proceedings somewhere]

Beware of using trees if the relationships among the data represent a directed graph instead, such as with multiple inheritance in a class diagram. It can be done, but it's not kind to the user -- they then see one thing in several places in the hierarchy, which may be very confusing. If it's truly a graph, draw the graph and don't oversimplify it. (The term "graph" here refers to its mathematical meaning, in which a set of vertices is arbitrarily interconnected via edges.)

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

Copyright (c) 1999 by Jenifer Tidwell.  All rights reserved.