Abstract
We present a novel tree browser that builds on the
conventional layout consisting a node link tree diagrams along a
single preferred direction. It adds the dynamic
rescalinge of branches of the tree to best fit
the available screen space, optimized camera movement, and the use of
preview icons summarizing the topology of the branches that cannot be
expanded. In addition,
it includes integrated search and filter functions. Thise
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
evaluation tasks. Very brief
results are appropriate hereshowed benefits for navigation to already
previously visited nodes and estimation of overall tree topology. .
Introduction
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) weare
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 while
preserving the classic tree representation. Such a browser might encourage the adoption of visualization by a
wider range of users (e.g. families using browsing genealogy
trees or biology students browsing taxonomies) or by more traditional work
environments (organization charts for managers or personal office staff).
We
present SpaceTree, a novel approach interface that
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. It also uses , and the
use of preview icons to summarize the topology of the branches for whichwhen
there isn’t enough space to shown
them in fullbe expanded. Thise
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 features on the speed time to perform of
performance navigationion tasks tasks to
new and
and already
visited itemsnodes, 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 Drawing every nodes makes very poor use of
the available drawing space, and would would fills
up a screen before reaching 100 nodes.
Figure 2: SpaceTree allows large trees to be
explored dynamically. Branches that do not fit on the screen are summarized by a triangular
preview. When users
select a node to change the focus of the
layout, the
number of levels opened is maximized. uses
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 were opened at once as users clicked on “Sawing
ManagerDrilling
Manager” (the colored node in the middle.)
Related work
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] , iInformation sSlices
[Andrews, 1998]) have) have been successful at visualizing trees
that have attributes values at the node level.
In particular, treemaps isare
seeing a rapid expansion of their use for monitoring, from stock market
applications (e. g. www.s 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 Treemap usersare
also known
to require training because of theeir unfamiliar
layout.
Node -link
diagrams,
on the other hand, have long been the plague of information
visualization designers because 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 often need
multiple screens to be completely displayed, and or require
scrolling as since 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
those trees (e.g.
www.nakisa.com for organizational chart).
Optimized layout techniques can produce more compact
displays by slightly shifting branches or nodes (e.g. Graphviz [North, online, YEAR]),
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, 1990]
and found to be more effective over then scrolling. Kumar et al. successfully combined the
overview and detail technique with dynamic queries to facilitate the searching
and pruning of large trees [Kumar et al., 1995]. The technique allowsed ranges of depth -dependant -attributes
values to be specified to prune the all tree
dynamically.
Another approach is to use 3D node -link diagrams. Cone Trees [Robertson et. al., Mackinlay,
& Card, (1991)] allow users to rotate the a 3D
representation of the tree to reveal its hidden parts. Info-TV [Chignell et. al.,, 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 the screen
space is to break loose from the traditional up-down or left-right orientation
and use circular layouts [Bertin, YEAR83]. The best known technique is the Hyperbolic
tree browser [Lamping
et al., 1995] - now available as StarTree from
Inxight (www.inxight.com)
- 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
distractingg
disorienting. Labels are hard to browse because they are never not aligned
and sometimes overlap. In addition, the unconventional layout may not match the expectations of users
(e. g. it is not appropriate to present
the organizational chart of a conventional business.)
Cheops [Beaudouin et al.,
1996] overlaps
branches of the tree to provide a very compact overview of large trees. Labeling is an issue and interpreting the diagram requires
training.
Constrained
by limited screen space, WebBrain (www.webbrain.com) chooses to prune the tree
to only show only 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 xxxHightower et. al., 1998], which
automatically scales down a tree of visited pages as users navigate the web. The use of Multiscaling
fisheye
effects to
display branches at varying scales in the same display was also explored is
illustrated in several applications (xxx Noik[Noik, 93],
Don Hopkins[Hopkins, 89].?)
Expand and contract interfaces as exemplified by Microsoft
Explorer allow the browsing of trees as well.
Similarly, WebTOC [Nation et al.,, 1997] 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 an icon. Here we describe an
initial design using a preview icon in the shape of an isosceles rectangle. The shading of the triangle representingis proportional to the the total number of nodes in the subtree (inten. The sity),
depth (height of the triangle represents the depth of the subtree) and the base is proportional to
the average width (base width of the
trianglei.e.
number of items divided by the depth).
The preview
icons can be chosen
to be relative to
the root (for ease of comparison between levels) or to the parent (for ease of local
comparison). 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. Figure 6
illustrates how SpaceTree maximizes the number of lower levels to be opened.
Several
layout options allow adjustments of the spacing between nodes, alignment, icon
options etc. The choice of overall
orientation of the tree layout, allows designers -or
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 depends on
the tree topology and
the aspect ratios of the labels and the windowappears to
be tied to the tree topology and the distribution of label size.
Search and filter
SpaceTree
also includes integrated support for search and filterThose
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 matching nodes.
We also implemented dynamic
queries [Shneiderman, 1994] 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 supports rudimentary dynamic queries with
only one attribute, but the principle applies to any number of attributes such
as income of employees,
year in the company, or language spoken, etc. for our organizational chart
example).
Figure
3: Top level overview. The triangular preview icons summarize the branches that
cannot be opened. When room is available, two
or more levels might be opened at once. Darker icons correspond to branches with
more nodes. Taller icons
(in this top-down
layout) icons correspond to deeper branches,
and large
wider icons correspond to branches
with a larger averagehigher 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 (i.e. click on a node – shown darker), more detail is revealed.
the tree
is animated to its new position. The Options can set preview icons can be configured
to be colored and scaled of siblings
to be relative to the root (for ease of comparison
between levels) or to their common ancestor (for ease of local comparison).
Figure 5: The tree is animated to its
new layout in tree separate
steps: trim, translate
and expand (trim and translate
is only done when needed).
As new branches are opened,
the tree is re-centered – but only if needed to avoid scrolling.
Figure
6: Upon
each refocusing, At any time the
maximum number of levels that fit areis is opened (here 3 levels could fit so
they weare
opened at once when user selected “sawing drilling manager”).
Figure 7:
The same
tree shown
in as Figure 6 has been rotated in to a different
orientation, then a
search for
“scientist” was performed and the, showing in red the location of search
results is shown in
red.
(here a search for “scientist”
).(not visible in a black and white prints
Figure. 8:
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, 1992] 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 supports rudimentary
dynamic queries with only one attribute, but the
principle applies to any number of attributes such as e.g. income of employees, year in
the company, or language spoken, etc.
for our organizational chart example) .
SpaceTree
was developed in Java using TinyJazz, a new toolkit that is an an optimized
subset of Jazz [Bederson et. al., 2000 xxx], and the tree layout is inspired from [Walker 1990] and [Furnas, 81].
Reviewing early versions and emerging design guidelines
The SpaceTree was designed with continuous feedback from our
sponsors who had a particular need for hierarchy browsing at the time of the
project. This included , 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” ).)
Our
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 through ofu the tree (Figure 9 andto 101) 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 112XX shows an example of multiple alternative representations
previews of
a tree branches..
Maximize the number of levels opened at any time
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
6.
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.
Maintain landmarks
As the tree is trimmed,
expanded or translated it is crucial to maintain landmarks to help users remain
oriented [Jul & Furnas, 1998]. 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).
Figure 9: Early prototype:
overview of the continuously scaled tree.
Figure 9: Early prototype:
overview of the continuously scaled tree.
Figure 10: : Figure 11
u the tree but only made one new level
readable at -a -time, and poorly used the screen space.e. RELABEL INTO A SINGLE FIGURE 10 WITH LEFT AND RIGHT SIDES
|
|
|
|
Figure 12: (a) (b) (c)
Figure 11: C the current
solution: semantic zooming on multiple representations of the tree. . On the left a fully
expanded branch, in the center a Ppreviews can showconsist of a miniature ing individual
nodesof
the branch (a) when the number of nodes is small , andor an on the
right, abstract representation of the branch like the triangles of Figure 3 previews
that
could scale up to larger numbers.
(b) and (c) are of nodes. Those 2 examples
of abstracts previews are possible alternativealternatives to the plain triangle
shown
in the figure 3-6. They provideand a moprovide morere details onled
preview
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
& Furnas, 1998] (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).
Take advantage of overviews and dynamic filtering
Search and dynamic queryies 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.
Use “data-aware” zooming controls
Another of our the early mistakes lessons we learned was the need to provide data-aware controls.
was toOur initial browser permitpermitted 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 Figure 123). 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.
Figure 123: Early
prototype: a blue rectangularle cursor
matching the window aspect ratio gave a preview of the area to be enlarged if
users clicked, but
didn’t necessarily
match a branch of the tree..
This matches our understanding of why the simple link following web
interface is so successful:. pP 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.
Controlled experiment
We
conducted an experiment comparing 3 tree-browsing interfaces: Microsoft Explorer the
SpaceTree (Figure 13T), an Hyperbolic tree browser[1] (Figure 14H), and SpaceTree MS
Explorer (Figure
15E).
Our goal was not to pit the interfaces against each other (as they
are clearly at different stages of refinement and of different familiarity to users) but to understand
what feature
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.
different familiarity to
users) but more to
understand what 
Figure 13: 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 14: The
hyperbolic viewer 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 15: The SpaceTree opened to “mammals” and
showing nodes seven levels down the tree.
feature
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, and each
session lasted a maximum of 40 minutes.
Subjects each received $10 for their participation. T, 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 told that
they could continuously drag nodes, and SpaceTree
users were explained the meaning of the triangle icons was
explained to SpaceTree users (misunderstanding were first recorded, and
then clarified).
We used a tree of more than 7,000
nodes from the CHI’97
BrowseOff of 1994 [Mullet, 97[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
questions (e.g. read
the path up the tree, find this branch 3 nodes with more than 10 direct
descendants, and which of the three branches of measurements this node contain more
nodes were used.). 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 terminology of the questions
was explained in the initial training.
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
session.
The
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, the presence of errorss (only
relevant for 2 questions), and subjective ratings on a 9-point Likert-type scale.
s.
Results
For each speed and preference dependant variable we performed a one-way ANOVA followed by a post hoc Bonferroni analysis. The
confidence interval is set at 95% for all ANOVA and post-hoc analysis.
For conciseness our hypotheses are
described for
each type of task,
followed by a
brief summary of the results. We report mean times in
seconds in the following order: (E) for Explorer, (H) for Hyperbolic and (S)
for SpaceTree.
A)
First-time node finding
For finding nodes that had
never been seen before, we hypothesized that SpaceTree and Hyperbolic would
be similar in
term of speed and
faster than Explorer because they both provide access to more than one level at
a time, which enables 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. An 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 two of the 3 node finding tasks showed significant differences, Explorer being faster than Hyperbolic in the 1st task where learning may have
been a factor (in seconds: E=10.5, H=13.2, S=11.1), and SpaceTree being faster
than explorer in the third task (E=11.3, H=5.6, S=4.7). Observations confirmed that most users took advantage of the
ability of Hyperbolic and SpaceTree to show multiple levels of the tree by
clicking down often more than one level at a time. The faster users did continuously drag nodes to reveal details with Hyperbolic, while with SpaceTree they still had to select and animate
the tree in steps
when going deep in the tree. Explorer users showed their experience by avoiding using the
small 
icon and clicked on the labels to expand the
hierarchy in the folder view.
Figure 14: 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 15: The hyperbolic viewer[2] 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 15: The SpaceTree opened to “mammals” and showing nodes
seven levels down the tree.
Results STILL NEED THE
F() NUMBERS
ALSO
INCLUDE % DIFFERENCE AT LEAST FOR SIG. RESULTS, BUT EVEN FOR OTHERS.
For each type of task, our hypotheses are detailed described, 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 access
to more than one level at a time which enables 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 hHyperbolic 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 small icon al + and clicked on the labels to expand the hierarchy in the
folder view.
B) Rreturning 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 onf
the location of the focus point. , see Figure 16 showsing 2 examples of different locations for
kangaroo).
Figure b16: 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 is more consistent.stant
We
predicted that Explorer would be the ffaster than both
TreeBrowser and Hyperbolic when the start and end point werewould 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
open branches.
Results: One of the
return tasks did not lead to any significant differences. The other moreOne of the two tasks (the longer complex task one involving a return
trip between 2 known locations) showed large significant differences.
SpaceTree was significantly faster than Hyperbolic, and , and Explorer
was significantly faster than the two other interfaces (E=6.5, H=22.7, S=15),. Explorer was favorably helped by the close
proximity of theability to keep several branches two
expanded branches in the Explorer window that had not been randomly
expanded before opened. The other very short returning task did not show
any significant differences. Explorer lost its advantage
because other
open branches now separated the target nodes.
Figure 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 is more consistent.
For topology questionstasks:
C)
for path tasks ( Llisting 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 (E=11.4, H=9.3; S=6.8).. No significant difference were found between
Hyperbolic and the other two interfaces. Two users made errors
with Explorer (alignment problems) and one1 user made an
error with Hyperbolic (skipped a level). Several Two users commented
that they liked the clear highlight of SpaceTree to navigate up the treealong the path, in thise path task and as well as during the other
tasks.
D) Llocal topology task (example
task: find 3 nodes whothat 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 would be able to
estimate the number of children by looking at the number of rods radiating from
a node, and navigate through the leaf nodess
by continuously fanning the tree at a varying depth level.
Results: Hyperbolic was significantly faster than the SpaceTree, but not significantly
faster than Explorer (E=61.4, H=46.8, S=98.3). Hyperbolic users interpreted
correctly the fans
of lines, and
Explorer users mostly
chance. This
task showed that SpaceTree
users had not
understood the width coding of the
triangles (or didn’t trust their
understanding). Users could be seen intuitively following wider and darker triangles, but would give up after following 2 or 3 level down, even though the answer was often one click away because large fans were usually at leaf level. A wide base triangle only suggests that “somewhere” down the tree
there are large fans. Obviously better coding is needed. The
experiment was run
with the icon size being relative to the parent, making it more usable for local comparisons, but also more
confusing as its meaning appeared to change with the depth in the tree. Icons relative to the root would probably be more easily understood.
OOPS
I FORGOT THIS ONE
HYPERBOLIC
DID BETTER but not sure it was significant.
E) Topology
summary overview task (example example: task: comparison
of
overall sizeWhich
of the 3 branches of
“measurementssub trees” contains a larger number of nodes). We hypothesized
that SpaceTree would lead to fewer errors in the estimation of size because of
the icon representation of the branches.
W[Note: we had first measured the
time to complete the task, but pilot test users spentd 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).
Results: When performing tasks
comparing the total number of nodes in branches, Uusers made significantly
less fewer12 errors with Explorer (out of 18), 10 with Hyperbolic and only
2 with errors
with SpaceTreSpaceTreee than with
both Explorer and Hyperbolic. Explorer users mostly made wild
guesses or used “properties”. Hyperbolic users made significantly less fewer errors
than Explorer users . TheyHyperbolic users were
able to review thethe tree quickly but still made many errors, often deciding for
a branch that was less than half the size of the correct answer (150 nodes versus 300). SpaceTree users seemed to have made errors when the small differences in the shading of the icons were confounded by size differences. .
F) User preferences
Our hypotheses were that users would find the Hyperbolic
Browser more “cool” than Explorer and Space Tree, but
would prefer to use the SpaceTree.
Results:
Users significantly found Explorer less “cool” than the other interfaces, and no significant difference
were found between SpaceTree and Hyperbolic (mean ratings on the 9 point scale with 9 being “very cool” were E=3.9. H=7.7, S=6.6.), with no
significant difference were found between SpaceTree and Explorer. There were no significant differences
between interfaces in term of future use preference (E=5.9, H=5.1; S=6.2 with 9 being “much prefer to use”)..
Summary of results
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 terms 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 3-attribute-coding of
the triangle that(it always had
to be explainedclarified). Users could guessed that the iconit
was
relatedrepresented
the branch below and was linked to the number of nodes in
the branch, but often misinterpreted the width of the triangle to be
proportional to the number of direct descendants. 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 confusingon to users as their its 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 that asked
users to find nodes with more than ten
descendants. Users could be seenm 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.
This miscomprehension of the meaning of the icons had a
particularly strong effect on the task that asked users to find nodes with more
than ten descendants. Future research will focus on the design of a simpler preview for novice users, as well as a set of options for expert users who should be able to adapt the icon to their tasks.
Many
comments were given by users comparing the interfaces. One user said: “bb
Conclusions
SpaceTree illustrates that interactive visualization of node link
diagrams can still be improved. It was found more attractive than Explorer, and performed relatively fairly well for both navigation and
topology tasks, but even though 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. An example of this iswould be an potential
example is a organization chart used by a personal staff. SpaceTree preview icons are unique in is helping
users estimate the he toypology of the tree, and we will
continue improving their design.
For more
informationmore
information and
demonstrations see:
www.cs.umd.edu/hcil/spacetree
b
Acknowledgements
We appreciate the feedback and suggestions to
improve our browserSpaceTree
from Cheryl Lukehart
and Don Schiro from Chevron-Texaco and from Jean-Daniel Fekete and Ben
Shneiderman from HCIL. n. Partial support for this research
was provided by Chevron-Texaco and DARPA.
References
[1] Andrews,
K., Heidegger, H.
(1998) , Information Slices: Visualising and
exploring large hierarchies using cascading, semicircular disks. Proc of
IEEE Infovis’98 late
breaking Hot Topics , IEEE, 9-11xx-xx.
ftp://ftp.iicm.edu/pub/papers/ivis98.pdf
[2]
Beaudoin, L. , Parent, M-A, Vroomen, L. (1996) Cheops: a compact
explorer for complex hierarchies, Symposium on Volume Visualization - Proc. of the conference on Visualization '96, 87-92 + color p. 471, ACM, New York
[3] Beard,
D. V., Walker II, J. Q. (1990 ).
Navigational Techniques to Improve the Display of Large Two-Dimensional Spaces.
Behavior & Information Technology. 9 (6), 451-466.
[4] Bederson, B., Shneiderman, B., Wattenberg, M. (2002). Ordered and Quantum Treemaps: Making Effective Use of 2D Space to Display Hierarchies, To appear in ACM Transactions on Computer Graphics.
[5] Bederson, B.
B., Meyer, J., & Good, L. (2000). Jazz: An Extensible Zoomable User
Interface Graphics Toolkit in Java. UIST 2000, ACM Symposium on User
Interface Software and Technology, CHI Letters, 2(2), 171-180.
[6] Bertin, J. (1983) Semiology
of Graphics, Diagrams, Networks, Maps, University of Wisconsin
Press, Madison, WI.
[1] Card,
S. K., MacKinlay, J. D., Shneiderman, B., (1999) Readings in Information
Visualization: Using Vision to Think, Morgan Kaufmann Publishers., 1998.
[7]
[1] Chignell,
M, Poblete F., Zuberec, S. (1993) 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
[1]
[8]
[9]
G. W. Furnas (1981) The FISHEYE view: a new look at
structured files, 1981 Bell Lab. Tech. Report, reproduced in Readings in Information Visualization: Using Vision to Think,
S. K. Card, J. D. Mackinlay, and B. Shneiderman, Eds. San Francisco: Morgan
Kaufmann Publishers, Inc., 1998, 312-330.
[10]
Hopkins, D. (1989), The Shape of PSIBER Space:
PostScript Interactive Bug Eradication Routines.. Proc. 1989 Usenix Graphics
Conference, Monterey California.
www.catalog.com/hopkins/psiber/psiber.html
[11]
Hightower, R. R., Ring, L., Helfman, J., Bederson,
B. B., & Hollan, J. D. (1998). Graphical Multiscale Web Histories: A Study
of PadPrints. In Proceedings of ACM Conference on
Hypertext (Hypertext 98) ACM Press, 58-65.
[12] Johnson, B. and
Shneiderman, B. (1991) Tree-maps:
A space-filling approach to the visualization of hierarchical information structures,
Proc. IEEE Visualization’ 91 (1991), 284
– 291, IEEE, Piscataway, NJ.
[13] Jul, S.,
& Furnas, G. W. (1998). Critical Zones in Desert Fog: Aids to Multiscale
Navigation. In Proceedings of User Interface and Software Technology (UIST
98) ACM Press, 97-106.
[14] Kumar ,
H.P., Plaisant, C., Shneiderman, B. (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
1997).
[15] Lamping, J., Rao,
R., Pirolli; P. (1995) , A
focus+context technique based on hyperbolic geometry for visualizing large
hierarchies Conference proceedings on Human factors in computing systems,
1995, Pages 401- – 408
[16]
Mullet,
K., Fry, C., Schiano, D. (1997) On your marks, get set, browse! (the great CHI’97
Browse Off), Panel description in ACM CHI’97 extended abstracts,
ACM, New York, 113-114
[17] Nation, D.A., Plaisant, C., Marchionini, G.,
Komlodi, A. (1997) Visualizing
websites using a hierarchical table of contents browser: WebTOC, Proc.eedings of 3rd
Conference on Human Factors and the Web, 1997, Denver, COolorado, June
12., 1997.
[18] Ellson, J., Gansner, E., Koutsofios, E., Mocenigo, J., North,
S. et
al, Woodhull, G., . Graphviz, open source graph drawing
software
[19] Noik; E. (1993) , Exploring
large hyperdocuments: fisheye views of nested networks,
Proceedings of the fifth ACM conference on Hypertext, 199 3, Pages 192- –205XXX.
[1] Shneiderman,
B. (1994). Dynamic queries for visual information seeking. IEEE
Software, 11, (6),
70-77.
[1] 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.
[20]
[21]
Shneiderman,
B. (1994). Dynamic queries for visual information seeking. IEEE Software,
11, (6), 70-77.
[1][21] Walker II., J. Q. (1990) A node-positioning
algorithm for general trees. Softw. Pract. Exp., 20(7): 685-705, 21
PadPrints
Jul desert
fog ref
BROWSE OFF
Bertin book