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. |
|
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. |
|