Two Document Visualization Techniques for Zoomable Interfaces
Two Document Visualization Techniques for Zoomable Interfaces
Jonathan Meyer and Ken Perlin
Media Research Laboratory
New York University
719 Broadway, NY, NY 10003
Benjamin B. Bederson and James D. Hollan
Computer Science Department
University of New Mexico
Albuquerque, NM 87131
Interactive user interfaces, multiscale interfaces,
zoomable interfaces, information navigation, hypertext,
information visualization, Pad++.
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.
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
Several techniques have been developed to address these
problems. Fisheye views  show a distorted view of the
document in an attempt to show local detail while
maintaining global context. The Information Visualizer
 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  as a fundamental aspect of their
design. They are both implemented using the Pad++
zooming graphical interface system .
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
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.
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
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  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.
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.
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
 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).
 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).
 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.
 George W. Furnas, Generalized Fisheye Views,
Proceedings of 1986 ACM SIGCHI Conference, pp. 16-23.
 Ken Perlin and David Fox. Pad: An Alternative Approach
to the Computer Interface, Proceedings of 1993 ACM
SIGGRAPH Conference, pp. 57-64.