Two Document Visualization Techniques for Zoomable Interfaces

Unpublished

Jonathan Meyer and Ken Perlin
Media Research Laboratory
New York University
719 Broadway, NY, NY 10003
meyer@cs.nyu.edu, perlin@cs.nyu.edu

Benjamin B. Bederson and James D. Hollan
Computer Science Department
University of New Mexico
Albuquerque, NM 87131
bederson@cs.unm.edu, hollan@cs.unm.edu

KEYWORDS

Interactive user interfaces, multiscale interfaces, zoomable interfaces, information navigation, hypertext, information visualization, Pad++.

ABSTRACT

We have developed two interactive document visualizations in Pad++, an environment for exploring zooming techniques for interfaces. The first is a page- based elliptical view that shows an entire document simultaneously and provides multiple navigation mechanisms. We have used it to develop a tutorial document. The second technique employs an inverted triangle view so that any size document can be presented in the same amount of space. Access is via zooming rather than panning.

INTRODUCTION

Viewing large documents on small computer displays is always a problem. It is difficult to show very much of a document at a time and this reduced view makes it difficult for users to sense where they are within the document.

Several techniques have been developed to address these problems. Fisheye views [4] show a distorted view of the document in an attempt to show local detail while maintaining global context. The Information Visualizer [3] uses three-dimensional graphics to increase the effective amount of information that can be presented. More traditionally, scrollbars are used to pan through long documents and hyperlinks provide quick access to parts of the document linked to words or phrases.

In this paper we explore two document structures that incorporate zooming [5] as a fundamental aspect of their design. They are both implemented using the Pad++ zooming graphical interface system [1][2].

THE ELLIPTICAL VIEW

This view consists of a sequence of pages along an ellipse (Figure 1). The first page is placed at the bottom. Middle pages are drawn at a smaller scale along the top edge of the ellipse. The title for the document is naturally placed at the center of the ellipse, and shown at a large scale. This allows users to identify the document from a distance.

Figure 1 - The elliptical view.

Note that the spacing between pages varies according to their scale. There are more pages along the top than the bottom of the ellipse. One or more elliptical documents can be placed on a page in a parent document. This allows the creation of a recursively nested hierarchy of elliptical views. Also, there is no reason to limit the document to one loop. Two loops sharing the same starting page could be drawn at right angles, creating an interlocking ring structure. Care is needed to ensure that pages in the loops do not overlap.

Interaction

Clicking on the title of the document opens it by zooming to the first page. Clicking on a page causes the view to pan and zoom so that the page is at its preferred size - centered on the Pad++ surface and occupying 90% of the available space. The current page is shown with a dark border so that you can easily identify it in a zoomed out view. Clicking again on a page once it is at its preferred size advances to the next page.

Pages in this structure have an absolute location in the workspace. Since zooms and pans are animated, moving from one page to the next implicitly shows the position within the document. For instance, a zoom with a pan to the left occurs near the start of the document. Towards the end of the document, Pad++ zooms out and pans to the right. In addition, hyperlinks can be annotated with arrows pointing to the destination page, giving the user a sense of where the link will take them.

If the user wishes to skip a few pages, it is easy to zoom out until the required page is visible, then click on the page to view it. A zoomed out view of the entire document makes an automatic index. This type of thumbnail index can be turned on and off at a fixed position at the bottom of the screen.

One difficulty with the elliptical view is that it is only practical for a relatively small numbers of pages (less than about 30). Also, for the current implementation, achieving pleasing layouts for documents of different lengths requires manual change of parameters.

THE INVERTED TRIANGLE VIEW

In this document structuring technique, each line of text is shown a little smaller than the line before (Figure 2). In our implementation, the text halves in size every twelve lines.

Figure 2. Inverted triangle views of Shakespeare's sonnets.

The advantage of this layout is that you can fit any amount of text in a fixed-size frame. In addition, the first lines of the document are clearly visible within this space even when the view is zoomed out. To view text in the document, the user positions the pointer at the apex of the document and zooms in. Panning is not necessary.

Another characteristic of an inverted triangle view is that there is always blank space on either side of the document apex. This space can be used for indices, annotations, and other navigational aids, or for other triangular documents to create a fractal-like view. These can be loaded by clicking on hyperlinks within the original document.

We implemented a zoomable directory browser [2] that represents each file as a constant size square whose contents become visible upon zooming. The inverted triangle view would be appropriate for this browser, especially since only the first few lines of each file must be loaded to create the triangular view. As the user zooms in, more of the file can be read in but the overall topology of the layout is maintained and can be specified independent of file size.

This view does present some difficulties. First, in the limit it requires an arbitrary level of numerical precision for computations. Currently, Pad++ computations have finite precision so this limits the size of documents that can be handled. Secondly, the triangular view can be difficult to read and edit. Text editing of a more traditional linear view may be required.

CONCLUSION

We have explored two new document presentation techniques using Pad++. Both techniques place documents at absolute positions within a large zoomable space. When combined with animated navigation, this helps to give users a sense of structure and of where they are within the space of documents. In addition, zooming solves some of the problems of limited display size. While we are optimistic about these novel approaches, additional evaluation and comparisons of their effectiveness to more traditional techniques is required.

ACKNOWLEDGEMENTS

This work was supported in part by ARPA grant N660011-94-C-6039 to the University of New Mexico.

We would like to thank several members of the NYU Media Research Laboratory at NYU who have helped us with their comments and insights. They include David Bacon, Troy Downing, Allison Druin, David Fox and Athomas Goldberg.

REFERENCES

[1] Benjamin B. Bederson and James D. Hollan, Pad++: A Zooming Graphical Interface for Exploring Alternate Interface Physics, in Proceedings of ACM User Interface and Software Technology Conference (UIST `94).

[2] Benjamin B. Bederson, Larry Stead, and James D. Hollan, Pad++: Advances in Multiscale Interfaces, in Proceedings of ACM Human Factors in Computing Systems Conference (CHI `94 conference companion).

[3] Stuart K. Card, George G. Robertson, and Jock D. Mackinlay. The Information Visualizer, an Information Workspace, Proceedings of ACM Human Factors in Computing Systems Conference (CHI `91), pp. 181-188.

[4] George W. Furnas, Generalized Fisheye Views, Proceedings of 1986 ACM SIGCHI Conference, pp. 16-23.

[5] Ken Perlin and David Fox. Pad: An Alternative Approach to the Computer Interface, Proceedings of 1993 ACM SIGGRAPH Conference, pp. 57-64.

Web Accessibility