The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Tree-Table


From Outlook Express's news reader

What:

Put hierarchical data in columns, like a table, but use an indented outline structure in the first column to illustrate the tree structure.

Use when:

The UI displays multivariate information, so a table works well to show the data (or allow them to be sorted, as in a Sortable Table). But the items are primarily organized as a hierarchy, so you also want a tree to display them most of the time. Your user are relatively sophisticated with respect to GUI usage; this is not an easy pattern for naive computer users to understand (and the same can be said about most hierarchical views, including Cascading Lists.

Why:

Combining the two data-viewing approaches into one view gives you the best of both worlds, at the cost of some visual and programming complexity. You can show the hierarchy of items, plus a matrix of additional data or item attributes, in one unified structure.

How:

The examples show what you need to do: put the tree (really an outline) in the first column, and the item attributes in the subsequent columns. The rows -- one item per row -- are usually selectable. Naturally, you can combine this pattern with Sortable Table to produce a more browsable, interactive structure. Sorting on the columns disrupts tree ordering, so you'll need to provide an extra button or some other affordance to re-sort the table into the order the tree requires.

This technique seems to have found a home in email clients and news readers, where threads of discussion form treelike structures.

Examples:


From Firefox

The Firefox browser uses a distinctive-looking tree table in one of its dialog boxes. The separators -- horizontal lines -- help visually group the items in different categories, which isn't a bad idea at all.