SpaceTree: Design EvolutionSupporting Exploration  of ain Large  Node Link -Tree,
Design Evolution and Empirical Evaluation Browser

Catherine Plaisant, Jesse Grosjean, Benjamin B. Bederson

Human-Computer Interaction Laboratory
University of Maryland
College Park MD 20782
{plaisant, grosjean, bederson}@cs.umd.edu
(301) 405-2768
www.cs.umd.edu/hcil/spacetree

 


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 nodeshown 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
Early prototype: geometric zoom allowed users to fly throughu 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 treescontains 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
, http://www.research.att.com/sw/tools/graphviz/

[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

 

 

 

 

 

 

 

 



[1] 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 makemake it a useful product but that we were not comparing here.

[2] 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.