1. Introduction

1.1 Purpose

A typical web browsing scenarion consists of a user loading a page, examining its contents and links, and then traversing a link to move closer to the target information. With the advancement in computer storage, the size of web sites has been growing. It has become difficult for users to maintain an idea of the contents and structure of a web site by following hypertext links on individual web pages. Providing an overview to a web site can help users in three ways:

  1. Making decisions about whether a web site may be interesting or useful without spending a great deal of time browsing the deep structure of a site.
  2. Finding the next link that is most likely to bring them to their target from the overview.
  3. Using attribute information available in the overview to obtain summary or comparison conclusions about the contents.

WebTOC (Web Table of Contents) is a tool which automatically creates a hierarchical structure of the contents of a web site and presents it in the format of a table of contents. Having the TOC allows the user to visually scan for and then directly move to areas of the web site which the target information is likely to be found. WebTOC also shows the size and data types (e.g. text, images, sound, or other) of contents on the site.

Our study concentrates on WebTOC's usability on functions 2 and 3 (from above) of an overview. In addition to comparing WebTOC to Netscape, we compare it to a basic textual table of contents interface.* Both of these interfaces show links on the corresponding web page. The difference is that WebTOC uses color coding to show the number of items under a link and the distribution of data under different data formats. The generic textual table of contents (hereafter referred to as Textual TOC) is simply WebTOC with the value bars removed. This study compares WebTOC, Textual TOC, and ordinary Netscape on various navigational and comparison tasks. The ordinary Netscape version shows the web pages in the Netscape window without the table of contents frame. We examine both task completion times and subjective satisfaction.

* WebTOC follows link or directory names to build the tree hierarchy of the site.



1.2 Background

We separate our background investigation into three sections. The first section shows some studies on effects of link structure and overview structures on hypertext navigation. The second section surveys the representations of hierarchical structures being employed in various applications. The third section describes the use of value attribute representations.

1.2.1 Hypertext Navigation

It is difficult for users to navigate large document spaces, since they often experience a disorientation problem[7] . Hypertext readers must remember their location in the network, make decisions about where to go next, and keep track of pages previously visited [25] . McKnight, Dillon, and Richardson [15] provided evidence of disorientation problems in a hypertext search task. One of the ways to improve hypertext design is to provide structural cues, e.g. overviews, to the reader. Providing a structured overview of the hypertext contents facilitates user orientation [22,24]. By providing an overview, users can see where they are, what other information is available and use this information in making decisions (e.g. which link to follow next, where the relevant information is located).

Mohageg [18] showed that a hierarchical linking structure allowed a faster search than either a linear or network organization. The independent variables were 4 linking structures (hierarchical, network, combination of network and hierarchical, and linear), the minimum number of required links to answer a particular question, and task type (classified as tasks more suitable for hierarchical or network). The tasks were 18 information retrieval tasks from a database. Out of their 4 dependent variables, task completion times is to our interest. In one of their two experiments, they found Linking structure, F(3,60) = 4.59, p <0.01 and required links F(2,120) = 152.25, p<0.01, yielded significant effects. There was no significant time difference between the hierarchical and combination configuration, but these two structures yielded significantly shorter times than the network and linear configuration. Another interesting result is the interaction between link structure and required links, F(6,120) = 3.11, p < 0.01). Network and linear structure required significantly higher times than hierarchical or combination configuration as the number of links increased. Although this study was not catered to hypertext overview, the results can be used to assess the various formats an overview can be presented. Mukherjea [19] quoted Parunak [20], " The insight for hypermedia is that a hyperbase structured as a set of distinguishable hierarchies will offer navigational and other cognitive benefits that an equally complex system of undifferentiated links does not, even if the union of all the hierarchies is not itself hierarchical."

The above paragraph showed studies favoring a hierarchical structure for hypertext contents. Several studies on hypertext overview structures have also favored a hierarchical to an alphabetical index on navigation tasks. In a study by Dee-Lucas and Lark in [5,6], results show that selections were faster in the hierarchical index than in the alphabetic index. The experiment examined the effects of having overview structures for hypertext contents with both general and specific learning goals. The subjects were college-level Physics students. The subjects with a general learning goal were told to study the text in preparation for a test on its contents. Subjects with specific goals were told to prepare with the goal of summarizing the main points in the text. Regardless of the learning goals, users found the hierarchical overviews easier to use. The amount of time spent selecting units from the overviews was used as a measure. Mean selection time spent on the overviews during the task showed that readers spent longer on the list (mean, 5.49 secs.) than on the hierarchical (mean, 4.18 secs.) overview (F(1,28)). There was no significant difference in the number of titles subjects could recall from both overview structures. However, the subjects using hierarchical overviews recalled the location of the titles better than the ones using list overviews(mean .21 vs. .11). Related to this issue, Happ and Stanner[11] found that subjects can recall the organization of the titles in the hierarchical index better. Another study by Simpson and McKnight[23] also concluded that subjects using the hierarchical index had more efficient navigation patterns.


1.2.2. Hierarchical Representations

The studies below describe the use of various representations of hierarchical structures as overviews of contents used in various types of applications, including Web applications. We categorized the representations into 2D vs. non-2D based on their display.

2D Representations

Directly connected to WebTOC is the use of table of contents (TOC) representation and its variants. TOCs are most widely used in paper text as an overview and navigation aid. Expandable/contractable tables of contents or outlines have been used for directory structures (e.g. Microsoft Explorer) and early Hypertext systems based on hierarchical structures (e.g. Superbook [8]). Chimera [4] showed that tables of contents that allow the user to expand and contract levels of the hierarchy decrease browsing time compared to a stable, fully-expanded version.

Flat 2D layouts of tree structures are often used to visualize file directories (e.g. SGI workspace). 2D trees are also used in managing document space, as seen in Docuverse[17]. There are many other examples of usage of flat 2D trees. A different 2D display of hierarchical information is introduced in Treemap [9,10], which uses a rectangular map.

The PDQ Tree-browser (Pruning with Dynamic Query) [12] was designed and developed at the University of Maryland. It is a visualization tool for hierarchies that utilizes dynamic queries and pruning. An overview and a detailed view of the hierarchy is provided with a wire frame showing the area of the hierarchy that is displayed in the detailed view. In addition to those views, dynamic query widgets are availabe for users to query nodes at all levels. Nodes that do not match the query are pruned. This application is used for data sets whose nodes on one level have the same attributes.

Non 2D representations

Many non-2D representations have been proposed. The fisheye paradigm [14] is the underlying principle for some of them. A fisheye view graph shows an area of interest quite large and with detail, and shows other areas successively smaller and in less detail. It achieves this smooth integration of local detail and global context by repositioning and resizing elements of the graph. WebBook(The Document Lens) [2] and SuperBook [8] are tools which help users organize their Web activities and document space. The fisheye overview can then be used to inspect portions of interest. The user is able to pan and zoom over the entire set of pages, while retaining a focus plus context display of the book.

Hyperbolic visualization[13,16] is a technique falling under the fisheye paradigm. The idea is to lay out the hierarchy in a uniform way on a hyperbolic plane and map this plane onto a circular display. An initial study comparing a hyperbolic browser against a conventional 2D scrolling browser with a horizontal tree layout showed that subjects preferred the hyperbolic browser, but there was no significant difference between the browsers in performance times for the task of finding specific node locations.

The Cone-Tree[21] is a 3D tree that articulates to bring forward into focus those position nodes the user touches. The tree can be culled manually or automatically to show only items of interest. In the fisheye version of the cone tree, only those parts of the tree related to some target node are expanded. Hyper-G [1] is a an example of 3D representation outside the fisheye paradigm. Hyper-G is the visualization component of a web organization tool Harmony. The web sites are represented as nodes on a 3D tree. Users can 'fly' through the tree hierarchy as in a flight simulator. Mukherjea et. al. [19] built a tool which allows designers to interactively build multiple information visualizations of an information space (web visualization was used as an example in this paper). The system uses four strategies to form views. Each of the strategies uses a combination of structural and content analysis of the underlying information space to form the visualizations. Three of the strategies they provide are graph layouts which provide binding, clustering and filtering capabilities to reduce complexity of the information space. Hierarchical structure was the fourth strategy. Cone Trees and Treemaps are choices of representations.

In general, visualization techniques which follow the fisheye paradigm have the advantage of achieving a smooth transition while the user moves towards the target location. The zooming capability allows user to concentrate on the portion of interest, thus reducing distraction caused by unnecessary information. On the other hand, the table of contents and 2D tree structures are easier to learn and comprehend. The disadvantage of circular hyperbolic trees and the 3D tree representations is that they may be disorienting to new users, thus requires more training than flat structures. The problems of a flat layout of tree hierarchy is that it may become unwieldy as the number of nodes increases. Information on the nodes may become too small to identify, but this problem can be ameliorated with higher resolution displays. However, the problem of it being more difficult to locate a node in such hierarchies will always exists because of information overload. This is a problem for WebTOC and other flat tree layout examples, while the fish-eye paradigm overcomes this problem by showing the relevant portions of information.

In evaluating the design of an overview representation, we need to consider the type of information we want to present in the overview and what kind of tasks (e.g. browsing, summarizing, or comparing contents) the overview is catered to. In navigational tasks, the overview structure facilitates the decision making in the next link to follow. Our first hypothesis concentrates on testing WebTOC's usability on navigational tasks of various complexity through a web site.

1.2.3. Value representation

Value bars display quantifiable attribute values of items to help users visualize and navigate large information spaces. It is especially useful for multi-attribute listings. Among other features it gives on overview of attribute distribution, and makes it easier to locate outliers and exceptions. User studies showed that users liked the ability of quickly finding extreme values of attributes (largest, youngest files, etc.). The ability to see multiple attributes for a single item was also a favored feature of value bars. The possibility of immediate navigation to the item selected in the context of the index of items was mentioned as "best feature". In a user test, subjects were asked to find files by different attributes (age, size, etc.) in a UNIX directory structure. The subjects using the value bars were much more efficient in tasks looking for extreme values on attributes than those using UNIX commands. In the task looking for attribute value distribution overview, users did not take advantage of the overview feature of the value bars. Our second hypothesis tests the usefulness of the value bars information in comparison tasks.


Continue
Return to the Title Page for WebTOC Evaluation