William E. Weihl
DEC Systems Research Center
130 Lytton Ave.
Palo Alto, CA 94301
weihl@pa.dec.com
All Web browsers that we know of display each page as a continuous scroll. Unfortunately, it is easy to lose context when viewing a snippet of the whole, and it is hard to jump to arbitrary places in the page. These problems become more severe with longer pages.
Outline processors provide one well known technique for addressing these problems. Outline processors allow a user to expand and contract selected sections and subsections of a document, thus retaining the high-level structure of the document while also displaying individual sections. In addition, outline processors allow the user to rapidly jump within the document. This report describes the application of outline processor technology to the display of Web pages.
The two sets of screen dumps below shows a Web page using Netscape (top) and using zippers (bottom). The zipper display is within the WebCard browser, an integrated system for handling e-mail messages, bboard articles, and Web pages [3].
The screen dumps below show the SRC home page. The page contains a level-1 heading (a graphic with the letters SRC followed by "Systems Research Center"), some text, and then four level-2 headings. The bottom-left screen dump is the default display with zippers: The single level-1 heading is automatically expanded, thereby causing the text it contains and any subheaders to be displayed. By default, subheaders are displayed contracted. In the bottom-right screen dump, we've expanded the second and third subheaders.
We know of one Web site that has hand-coded zippers [7]. The drawback of hand coding zippers is that it requires server interaction to expand or contract, and an exponential number of files (or a complex script) to generate all states.
Authors of long pages frequently add a table of contents to the top of the page, with entries in the table linking to the various sections. Sometimes, each section appears on its own page, with "next," "previous," "up," and "top" links on each page. Unfortunately, it is easy for the viewer to lose the big picture because the table of contents is not visible while looking at the contents of a particular section.
An alternative to zippers for retaining the big picture while viewing the details is a multi-panel display, such as in SuperBook [2]. One panel displays the table of contents and the other panel displays sections in the document. Clicking on an entry in the table of contents causes the other panel to display the corresponding part of the document. The user can also open and close levels of the table of contents, but the body of a section is always displayed in the second panel. A multi-panel display such as Superbook could be implemented using Netscape's frames, by adding appropriate HTML markups and Java code to a source document.
Another related system is SoftQuad's Panorama Pro [6], which displays SGML documents using a two-panel viewer similar to that of SuperBook. Panorama Pro is also loosely integrated with the Web: The application can be configured as an external viewer of documents whose MIME type is SGML. Clicking on a URL in a document displayed by Panorama Pro will cause Netscape (or some other user-specified browser) to fetch and display the URL. Electronic Book Technologies' DynaText [4] is another impressive SGML viewer; it is integrated into Netscape as a plug-in. It's important to realize, however, that Panorama Pro and DynaText are not Web browsers.
Our decision to expand an outline view in place was inspired in part by Pad++ [5], a zooming graphical interface, and in part by the host of successful "context+focus" visualizations developed at Xerox PARC.
We are currently working on a proxy-based implementation of zippers that allows zipper-enhanced pages to be displayed in any Web browser. The idea is simple: A "zipper proxy" runs on the same machine as the user's browser and sits between the browser and the browser's normal proxy. The zipper proxy uses the normal proxy for fetching pages, and modifies the returned HTML to elide material and to include zipper icons. Each zipper icon is linked to a specially constructed URL that is intercepted by the zipper proxy and which allows the zipper proxy to return an appropriate view of the page.
http://www.ncsa.uiuc.edu/demoweb/html-primer.html
http://superbook.bellcore.com:80/SB/
http://www.ebt.com/docs/prodinfo.html
http://www.cs.unm.edu/pad++/
http://www.sq.com/products/panorama/panor-fe.htm
http://bookweb.cwis.uci.edu:8042/Orders/orders-pt.html