We present a novel tree browser that builds on the
layout consisting a node link diagram along a
single preferred direction. It adds the dynamic
rescal e of branches of the tree to best fit
the available screen space, and the use of
preview icons summarizing the topology of the branches that cannot be
expanded. Th e
paper reflects on the evolution of the design and highlights the principles
that emerged from it. A controlled experiment compared SpaceTree to two
other interfaces and compared the speed of performance of 18 users
performing navigation tasks to new and already visited items, and topology
The browsing of hierarchies and trees has
already been investigated extensively
[Card et al. 1998].
Designers have demonstrated that many alternatives to the traditional
node link representation (Figure 1) were
possible, but this classic representation of trees remains the most familiar
mapping for users and still is universally used to draw simple trees. Our goal was to take another look at this
well-known tree representation and see how visualization advances in zoomable
user interfaces and improved animation principles could lead to a better
interactive tree browser preserving the classic tree representation. Such a browser might encourage the adoption of visualization by a
wider range of users (e.g. families using genealogy
trees or biology students browsing taxonomies) or by more traditional work
environments (organization charts for managers or personal office staff).
present SpaceTree, a novel
combines the conventional layout of trees with a zooming environment that
dynamically lays -out
branches of the tree to best fit the available screen space , and the
use of preview icons to summarize the topology of the branches for which
there isn’t enough space to be expanded. Th e
paper reflects on the evolution of the design and highlights the principles
that emerged from it. A controlled
experiment compares SpaceTree to two other interfaces and analyzes the impact
of interface speed of
performance navigat ion tasks to
visited items, and topology evaluation tasks.
Figure 1: The “traditional”
node link representation of a tree
as drawn by
users. It has a favored
direction (here top down). It makes very poor use of
the available drawing space, and would fill
up a screen before reaching 100 nodes.
Figure 2: SpaceTree
animation to limit disorientation, preserves relative
positioning of nodes as users navigate the tree, and maximizes
the number of levels opened . In this organization chart example the
3 lower levels of the hierarchy opened as users clicked on “ Sawing
Two large categories of solutions have been proposed to
display and manipulate trees: space-filling techniques and node link
techniques. Space filling techniques
(treemaps [Bederson et al. 02]
[Andrews, 98] ) have been successful at visualizing trees
that have attributes values at the node level.
In particular, treemaps is
seeing a rapid expansion of their use for monitoring, from stock market
applications (e. g. www. Smartmoney.com), to inventory
or network management, to production monitoring. Space filling techniques shine when users care mostly about leaf
nodes and their attributes (e.g. outlier stocks) but do not need to focus on
the topology of the tree, or the topology of the tree is trivial (e.g. 2 or 3
fixed levels). They are
to require training because of th eir unfamiliar
on the other hand have long been the plague of information
visualization designers as they
typically make very inefficient use of screen space,
leaving the root side of the tree completely empty – usually the top or left of
the screen -
and overcrowding the opposite side. Even trees of a hundred nodes need
multiple screens to be completely displayed, and require
scrolling as only
part of the diagram is visible at a given time. Specialized tools such as xxx for organizational
chart) can help users manage the multiple pages needed to display
Optimized layout techniques can produce more compact displays by slightly shifting branches or nodes (e.g. Graphviz [North]), but those techniques only partially alleviate the problem and are often not appropriate for interactive applications.
The coupling of overview + detail views with pan and zoom
was proposed early by Beard & Walker [Beard 90]
and found to be more effective
over scrolling. Kumar et al. successfully combined the
overview and detail technique with dynamic queries to facilitate the searching
and pruning of large trees [Kumar 95]. The technique allow ed ranges of depth -dependant -attribute s
values to be specified to prune the all tree
Another approach is to use 3D node
-link diagrams. Cone Trees [Robertson , Mackinlay,
& Card (1991 )] allow users to rotate the 3D
representation of the tree to reveal its hidden parts. Info-TV [Chignell , Zubrec,
& Poblete (1993 )] allows nodes and labels to be
removed from sub trees (leaving the links) to show a more compact view of
branches. 3D representations are
attractive but only marginally improve the screen space problem while
increasing the complexity of the interaction.
A clever way to make better use of
space is to break loose from the traditional up-down or left-right orientation
and use circular layouts [Bertin]. The best known technique is the Hyperbolic
tree browser [Lamping 95] - now available as StarTree from
- which uses hyperbolic geometry to place nodes around the root and provides
smooth and continuous animation of the tree as users click or drag nodes to
readjust the focus point of the layout.
The animation is striking but the constant redrawing of the tree can be
disorienting. Labels are hard to browse because they are never aligned
and sometime overlap. In addition
by limited screen space, WebBrain (www.webbrain.com) chooses to prune the tree
only show a
very local view of children and parent of the current selection – and some
crosslinks. The nodes have to be reoriented at each selection.
The benefits of pure
zooming are illustrated by PadPrints [
Bederson xxx], which
automatically scales down a tree of visited pages as users navigate the web. Multiscaling
illustrated in several applications (xxx Noik ,
Don Hopkins ?)
Expand and contract interfaces as exemplified by Microsoft
Explorer allow the browsing of trees as well.
Similarly, WebTOC [Nation 97] shows how information about size or
type could be added to the expandable list of nodes.
?? Other tree animation ?
Description of the interface
SpaceTree is our attempt to make the best possible use of
the traditional node link tree representation for interactive visualization.
Figures 3 to 6 show a series
of screen captures of the main display area, showing the progressive opening of
branches as users refine their focus of interest. Branches that cannot be fully
opened because of lack of space are previewed with
a triangular icon representing the total number of nodes (inten sity),
depth (height of the triangle ) and average width ( base of the
Figure 6 illustrates how
SpaceTree maximizes the number of lower levels to be opened.
Users can navigate the tree by clicking on nodes to open branches, or by using the arrow keys to navigate among siblings, ancestors and descendants.
layout options allow adjustments of the spacing between nodes, alignment, icon
options etc. The choice of overall
orientation of the tree layout, allows designers
users - to match the layout to the natural
orientation of the data. For example organizational charts are often oriented
top down (suggesting power), while the evolution of species is more likely to
be show left to right (suggesting time) or bottom up (suggesting
progress). Figures 7 and 8 show
examples of a left to right orientation.
The choice of the most space efficient orientation appears to
be tied to the tree topology and the distribution of label size.
additional features complement the browsing strength of SpaceTree. As users type a string the
location of results is highlighted on the tree. Then users can navigate the tree, or click on the “prune” button
to see a filtered view of the tree showing only the paths to the result nodes.
3: Top level overview. The triangular preview icons summarize the branches that
cannot be opened. Darker icons correspond to branches with
more nodes. Taller
icons correspond to deeper branches,
icon to branches
with a larger average
branching factor. When room is available on a larger
window , two or more levels might be opened .
Figure 4: As users change the focus of the layout,
is animated to its new position . Options can set preview icons of siblings
to be relative to the root (for ease of comparison
between levels) or to their common ancestor (for ease of local comparison).
As new branches are opened,
the tree is re-centered – but only if needed to avoid scrolling.
At any time the
maximum number of levels is opened (here 3 levels could fit so
opened at once when user selected “ sawing manager”).
tree in a different
orientation , showing in red the location of search
(here a search for “scientist” ).
A click on the “Prune” button displays a filtered view of the tree,
revealing only the branches that lead to scientists, opened as space permits. We also implemented dynamic queries [Shneiderman 92] to
illustrate how dynamic queries allow the rapid pruning of the tree when
attributes are available at the node level.
As users manipulate a slider to limit the value of an attribute, leaves
or branches of the tree are dynamically grayed out to show the effect of the
query. (Note that the current version has rudimentary
dynamic queries with only one attribute but the
principle applies to any number of attributes e.g. income of employees, year in
the company or language spoken, etc.
for our organizational chart example) .
was developed in Java using TinyJazz,
subset of Jazz [Bederson xxx]
Reviewing early versions and emerging design
The SpaceTree was designed with continuous feedback from our
sponsors who had a particular need for hierarchy browsing at the time of the
, via monthly
discussions and exchange of prototypes. Through progressive refinement (about
10 versions were discussed) we learned lessons that we summarize here as
guidelines for designers.
Semantic zooming is preferred over
geometric scaling (i.e. “Make it readable or don’t bother showing the nodes”
first designs attempted to use fixed progressive scaling down of the nodes –
providing a nice overview of the tree (Figure 9) and continuous geometrical
zooming to allow users to progressively reveal details of lower levels of the
tree. The result was
what we thought to be a smooth fly thr u the tree (Figure 9 to 1 1) but was
rejected bluntly by our users who rightly noted that only one level of the tree
was even readable at a time (lower levels were “visible” but never
readable). Readability and a good use
of the screen space had not been optimized enough. The conclusion was that instead of continuous scaling, a step
approach was needed: nodes should be
either readable or not, and once they are not readable they could be
seen as individuals or aggregated in an abstract representation. This was made possible by the semantic
zooming afforded by Jazz. All scaling
is therefore calculated on the fly. Figure XX shows an example of multiple representations
a tree branch .
Feedback from users made it clear that they resented having
to open the tree “one level at a time” when there was room to open more levels
at once. This is illustrated in Figure
Decompose the tree animation
We experimented with several animations of the layout to reflect the change of focus and found that we received our most positive feedback with a decomposed animation following 3 main steps: trim, translate, and grow. When users select a new focus, SpaceTree evaluates how many levels of the new branch can be opened to fit in the window, then 1) trims the tree of the branches that would overlap the new branch to be opened; 2) centers the trimmed tree so that the new branch will fit on the window, 3) grows the branch out of the new focus point.
Figure 9: Early prototype:
overview of the continuously scaled tree.
: Figure 11 Early prototype: geometric zoom allowed users to fly thr
u the tree but only made one new level
readable at -a -tim e.
Figure 1 2 : t he current
solution: semantic zooming on multiple representations of the tree . On the left a fully
expanded branch, in the center a preview show ing individual
nodes , and on the
right , previews
could scale up to larger numbers of nodes. Those 2 examples
of abstracts previews are possible alternative to the plain triangle
in the f igure 3- 6. They provide a mo re detai led
of the distribution of nodes in the next level branches. Maintain
landmarks As the tree is trimmed, expanded or translated it
is crucial to maintain landmarks to help users remain oriented (Jul: Desert fog). The
obvious candidates for landmarks are the focus points users
selected, i.e. the current focus and the path up the tree, which usually
matches the history of focus points as users traverse the tree. The ancestor path of the current focus is
highlighted in blue. The node under the cursor is gold, and its ancestor
path is shown in gold up until it meets the blue one. When users click on a node their
eyes are already on the gold node, which remains gold as the tree is animated
to a new layout, and then turns blue to reflect the new focus. The constant relative
position of siblings and the overall shape of upper tree help maintain the
larger context up the tree (Webbrain.com illustrates how changing the
reorientation of siblings can be disorienting).
Search and dynamic quer
ies techniques are not new, but
SpaceTree offers a good demonstration of their application. One option we debated is whether to
dynamically trim the tree of the nodes that would “fall off” with the query, or
just gray them out and give “on demand pruning” after the query. We chose the later option that avoids
constant and wild animation of the tree.
our early mistakes was to permit free zooming
by clicking anywhere in the data space (on node or outside of nodes). This was
the default control of Jazz but was only usable by expert zooming users, others
being rapidly lost in the fog of empty information space. A second version gave
users a preview of the area of the screen that would come to full view once
they clicked ( Figure 1 3). This helped users to avoid empty areas, but
users complained that the area rarely matched the topology of the tree. Therefore, the best results were attained by
only allowing users to zoom by clicking on nodes.
prototype: a blue rectang le cursor
matching the window aspect ratio gave a preview of the area to be enlarged if
users clicked .
This matches our understanding of why the web
interface is so successful
as people can readily click on a link
to see more related information, while more
complex interactions are difficult for users and typically require learning.
conducted an experiment comparing 3 tree-browsing interfaces:
SpaceTree( T), a n Hyperbolic tree browser( H), and MS
Explorer ( E).
Our goal was not to pit interfaces against each other (as they
are clearly at different stages of refinement and of different familiarity to
users) but more to
seemed to help users perform certain tasks. We used a 3x7 (3 interfaces by 7
tasks) repeated measure within subject design. To control learning effects the order
of presentation of the interfaces and the task sets were counterbalanced.
Eighteen subjects participated, each
session lasted a maximum of 40 minutes.
Subjects each received $10 for their participation
, and to
provide the motivation to perform the tasks quickly and accurately, an
additional $5 was given to the fastest user within each interface (with no errors).
We chose to use computer science students that could be assumed to have a
homogeneous level of comfort with computers and tree structures. Subjects were given a maximum of 2 minutes
of training with each interface. In
order to see what problems users would encounter without any training, the
experimenter gave no initial demonstration, but after about 30 seconds of
self-exploration the experimenter made sure that users had
discovered everything properly. Hyperbolic users were explained that
they could continuously drag nodes, and SpaceTree
users were explained the meaning of the triangle icons (misunderstanding were first recorded
We use a tree of more than 7000
nodes from the CHI
of 1994 [xxx]. The three task sets used different branches
of the tree and were carefully chosen to be equivalent in terms of number of
levels traversed and semantic complexity of the data explored. Three types of tasks were used. Node searches (e.g. find kangaroo, find
planaria), search of previously visited nodes (return to kangaroo) and typology
the path up the tree, find 3 nodes with more than 10 direct
descendants, and which of three branches of measurements contain more
nodes .) To avoid measuring
users’ knowledge about the nodes they were asked to find (e.g. kangaroos) we
provided hints to users (e.g. kangaroos are mammals and marsupials) without
giving them the entire path to follow (e.g. we didn’t give out the well known
steps such as animals). Those hints
were also kept similar in the three sets of tasks.
The size of the window was the same for each interface
(1024x768 pixels for the usable display area).
The focus of the tree layout was initialized at the top of the tree at
the beginning of tasks but was not reset between tasks to match a normal work
entire explorer hierarchy was re-contracted in between users. After the short
training, users were asked to conduct 7 tasks with each interface, after which
they filled a questionnaire and gave open-ended feedback about the 3
interfaces. The dependant variables
were the time to complete each task, error
relevant for 2 questions), and subjective rating s.
Figure 1 4 : Microsoft Explorer, a classic expand and contract
interface. The same window size was used for all interfaces (1024x768 pixels of display area –
excluding menus and control panels) Figure 1 5 : The hyperbolic viewe r  spreads the branches around the
root making 2 or 3 levels of the tree visible. Users can click or drag a node
to dynamically and continuously update the
layout of the tree and quickly explore deeper levels of the tree. Figure 1 5 : The SpaceTree opened to “mammals” and showing nodes
seven levels down the tree. For each type of task our hypotheses are detailed , followed by the results. A one-way ANOVA and post hoc Bonferroni analysis with 95%
confidence interval were performed for each dependant variable.
A) For first-time node finding tasks We hypothesized that SpaceTree
and Hyperbolic would be similar, and faster than Explorer because they both can provide more than one level at a time down the tree and allow users to select categories further down the tree. Explorer uses smaller fonts and the size of the targets is
smaller than the 2 other interfaces, but the distances to travel are also
smaller and users are extremely familiar with the interface. A limited advantage might be seen for the
SpaceTree because of the
alignment of the labels, allowing faster scanning of the items, but this
advantage may not compensate for the advantage of the fast continuous update of
the tree layout in Hyperbolic, which allows rapid exploration of neighborhoods. Results: Only one of the node finding tasks (search of never
before visited nodes) showed a significant difference, Hyperbolic being faster
than Explorer. Observations confirmed
that most users took advantage of the ability of h yperbolic and SpaceTree to show multiple levels of the tree by
clicking down often more than one level at a time. On the other hand users
showed their long experience with Explorer by quickly reading compact lists and
selecting nodes in Explorer. They usually avoided using the smal l + a nd clicked on the labels to expand the hierarchy in the
returning to previously visited nodes tasks
We had predicted that the SpaceTree would be faster than the
hyperbolic tree because the layout remains more consistent, allowing users to
remember where the nodes they had already clicked on were going to appear
(while in the hyperbolic browser a
node could appear anywhere, depending o f
the location of the focus point , see Figure 16 show ing 2 examples of different location for
Figure b 16: with
Hyperbolic the layout changes between visits. Kangaroo was on the right of
screen (a), now on the left (b). With SpaceTree the relative location of nodes remain more con stant
predicted that Explorer would
the faster than both
TreeBrowser and Hyperbolic when the start and end point would be next to each other because
Explorer allows multiple branches to remain open therefore making it very easy
to go back and forth between 2 neighboring branches. On the other hand, if the start and end point are separated by
many other branches that remained opened (resulting from other tasks),
scrolling will be required and finding the beginning and end points will be much
more difficult and frustrating, overweighing the advantage of seeing multiple
One of the
return tasks did not lead to any significant differences. The other more complex task involving a return
trip between 2 known locations showed large differences.
SpaceTree was significantly faster than Hyperbolic , and Explorer
was significantly faster than the two other interfaces , close
proximity of the two
expanded branches in the Explorer window that had not been randomly
for path tasks ( listing all the ancestors of a node ) . We had predicted that
the SpaceTree would perform better than both Explorer and Hyperbolic as all
ancestors are clearly visible and highlighted.
Hyperbolic gives more screen real estate to the local lower levels
therefore often hiding the ancestors, while Explorer keeps the path visible but
the small offset makes it hard to separate siblings from parents.
Results: SpaceTree was significantly faster than Explorer
. No significant difference were found between
Hyperbolic and the other two interfaces. Two users made errors
with Explorer (alignment problems) and 1 user made an
error with Hyperbolic (skipped a level). Several users commented
that they liked the clear highlight of SpaceTree to navigate up the tree, in th e path task and the other
local topology task example
task: find 3 nodes who have more than 10 direct descendants):
We predicted that Hyperbolic would be faster that the
SpaceTree, which would be itself faster than Explorer. With Hyperbolic users
will be able to
estimate the number of children by looking at the number of rods radiating from
a node, and navigate through the s
by continuously fanning the tree at a varying depth level.
I FORGOT THIS ONE HYPERBOLIC
DID BETTER but not sure it was significant.
summary example task: comparison
of sub trees). [Note: we had first measure the
time to complete the task, but pilot test users spen d so much time with Explorer and Hyperbolic
trying to open every branch of the tree – without great success - that we gave a time limit and
compared error rates ).
When performing tasks
comparing the total number of nodes in branches users made significantly
with SpaceTre e than with
both Explorer and Hyperbolic. Explorer users mostly made wild
guesses or used “properties”. Hyperbolic users made significantly less errors
than Explorer users . They were
able to review the .
F) User preferences
Our hypotheses were that users would find the Hyperbolic
Browser more “cool” than Explorer and Space
, with n o
significant difference were found between SpaceTree and Explorer. There were no significant differences
between interfaces in term of future use preference .
Our hypotheses were only partly supported, but the careful
observation of users during the experiment
(timing had to be done with
a time watch) was very
helpful to understand differences in user behavior.
There were wide differences between subjects in term of
speed, leading to only a limited number of statistically significant
results. There were also wide
differences in preferences, confirming the general need for providing interface
options to users.
During training we observed that users did not guess the
rich coding of
the triangle (it always had
to be explained ). Users guess ed that it
related Note that the experiment was
run with the icon size being relative to the common ancestor, making it more
usable for local comparisons, but also more confusi on to users as their meaning
seemed to vary with the depth in the tree.
Icons relative to the root could probably more easily understood and
compared. This miscomprehension of the
meaning of the icons seemed to have a strong effect on the task asking users to find nodes with more than ten
descendants. Users could be see m following larger and dark
triangles, and then giving up as they reached the lower levels while the answer
was one click away. Clearly more
research is needed to understand what preview is more effective for novice and
expert users, and possibly for different types of common tasks.
comments were given by users comparing the interfaces. One user said: “bb
SpaceTree illustrates that
fairly well for both navigation and
topology tasks, but no extreme performance
differences were found between the interfaces. SpaceTree’s consistent layout
allowed users to quickly return to nodes they had visited before, making it
more appropriate for trees that are used regularly. A potential
example is a organization chart used by a personal staff. SpaceTree preview icons are unique is helping
users estimate the he t ypology of the tree, and we will
continue improving their design.
demonstrations see: b
We appreciate the feedback and suggestions to
from Jean-Daniel Fekete and Ben
Shneiderma n. Partial support for this research
was provided by Chevron-Texaco and DARPA
K., Heidegger, H.
, Information Slices: Visualising and
exploring large hierarchies using cascading, semicircular disks. Proc of
IEEE Infovis’98 , IEEE xx-xx.
D. V., Walker II, J. Q.(1990
 Bederson, B., Shneiderman, B., Wattenberg, M. Ordered and Quantum Treemaps: Making Effective Use of 2D Space to Display Hierarchies, To appear in ACM Transactions on Computer Graphics.
S. K., MacKinlay, J. D., Shneiderman, B., Readings in Information
Visualization: Using Vision to Think, Morgan Kaufmann Publishers , 1998.
M, Poblete F., Zuberec, S. Exploration in the Design Space of
Three-Dimensional Hierarchies Proceedings of the Human Factors
and Ergonomics Society 37th Annual Meeting
1993 v.1 p.333-337
 Johnson, B. and
Shneiderman, B. Tree-maps:
A space-filling approach to the visualization of hierarchical information structures,
Proc. IEEE Visualization’ 91 (1991)
March 1995) Browsing hierarchical data with multi-level
dynamic queries and pruning International
Journal of Human-Computer Studies, Volume 46, No. 1, 103-124 (January
 Lamping, J., Rao,
R., Pirolli; P.
focus+context technique based on hyperbolic geometry for visualizing large
hierarchies Conference proceedings on Human factors in computing systems,
1995, Pages 401 – 408
 Nation, D.A., Plaisant, C., Marchionini, G.,
Komlodi, A. Visualizing
websites using a hierarchical table of contents browser: WebTOC, Proc
eedings of 3rd
Conference on Human Factors and the Web, Denver, C olorado, June
12 , 1997.
al . http://www.research.att.com/sw/tools/graphviz/
 Noik; E.
large hyperdocuments: fisheye views of nested networks,
Proceedings of the fifth ACM conference on Hypertext, 199 3, Pages –  Shneiderman,
B. (1994). Dynamic queries for visual information seeking. IEEE
Software , 11, (6),
70-77.  Robertson,
G. G. Mackinlay, J. D. Card, S. K. Cone Trees: animated 3D visualizations of
hierarchical information, Proc. Human factors in computing systems
conference, March 1991, 189 – 194.
 PadPrints Jul desert
BROWSE OFF Bertin book
 We attempted to use the
downloadable version from inxight.com but could not transform the test data
into the required format. Instead we used an older prototype, and asked three
colleagues to compare the 2 versions.
The old version was found similar to the current version in term of the
features used in the experiment (e.g. we didn’t use color, attribute values,
graphics or database access in the test tree).
Obviously the current commercial version has many more features that
make it a useful product
but that we were not comparing here.  We
attempted to use the downloadable version from inxight.com but could not
transform the test data into the required format. Instead we used an older
prototype, and asked three colleagues to compare the 2 versions. The old version was found similar to the
current version in term of the features used in the experiment (e.g. we didn’t
use color, attribute values, graphics or database access in the test tree). Obviously the current commercial version has
many more features that make it a
useful product but that we were not comparing here.