The Zoom Browser
Showing Simultaneous Detail and Overview in Large Documents
av Lars Erik Holmquist
Abstract
We have developed a novel visualization technique, flip zooming, which is capable of providing both overview and details when working with large texts on computer screens. To test the method, we have implemented the Zoom Browser, which uses flip zooming to present web pages. We believe that applications based on flip zooming can offer many interesting possibilities when users need to work with large documents on computers.
Innehåll
2.1 Developing a new focus + context technique
2.2 Problems with flip zooming
3.1 Navigating World Wide Web documents
3.2 The Zoom Browser's display modes: thumbnail, summaries and alternating
3.3 Visual aids for navigation and reading
3.3.1 Lines connecting pages belonging to the same document
3.3.2 Boxes around pages belonging to the document currently in focus
3.4.1 Users like the overview that the Zoom Browser offers
3.4.2. Feelings were mixed about the flexible page placement
3.4.3 The distincition between different types of "pages" was unclear
4 Conclusions and future directions
Keywords
Focus+context views, electronic documents, information visualization
(Åter till början av artikeln)
1. Introduction
More and more documents are created and read on computer screens. Word processors and desk-top publishing applications offer powerful tools for writing, editing and designing documents, and text viewers and web browsers offer equally powerful tools for searching and viewing these documents. Many texts are not even printed to paper anymore, but exist solely in electronic form.
However, there are some fundamental differences between documents that exist on paper, and documents that only exist electronically, in particular when the document is large. "Real" books and magazines are tangible, and offer many visual and tactile clues which tell the reader about properties which are not obvious on a screen. A reader can easily see how far she has read in a book and how much is left, or quickly flip through the pages of a magazine to find interesting articles. But when reading a large document on-screen, it can be very hard to know how big the documents is, and casually flipping through it is almost impossible. Current interface methods such as scroll-bars offer only very primitive possibilities for users to interact with large documents. It seems that the printed pages offers qualities which simply do not exist in their electronic counterparts.
Many researchers in information visualization have tried to find ways to overcome these problems, by designing methods to visually present documents and other data in ways that lets the user get both an overview and access to details at the same time. Such methods are sometimes referred to as focus+context methods. For instance, the bifocal display, introduced by Spence and Apperley (1982), presented users with a combination of a detailed view and two distorted views, where the detailed view may be a page of text and the distorted views may be compact representations of larger sets of texts
Figure 1. Scematic views of the dirstortion used in the bifocal display (top)
and the perspective wall (Figure 1.2).
Figure 1.2
(Figure 1, top). The perspective wall, by Mackinlay, Robertson and Card (1991), furthered this by presenting a detailed view of a large material presented on a seemingly three-dimensional "wall". The material could be smoothly scrolled over the focus area where items of interest appeared in greater detail (Figure 1, bottom). Taking the three-dimensional distortion approach one step further, the document lens by Robertson and Mackinlay (1993) presented a number of pages of text laid out on a three-dimensional cut-off pyramid, with the focus page on top of the pyramid and other pages on the sides (Figure 2). Several other related works on focus+context visualization are included in the reference list.
Fig 2. Schematic view of the distortion used in the documents lens.
We have developed our own focus+context visualization method for large documents, flip zooming, which will be presented below. We will also describe an application based on our method, the Zoom Browser, and briefly outline some further work in this area. Although still experimental, we believe that flip zooming offers some interesting advantages over traditional methods to present large documents on computer screens.
(Åter till början av artikeln)
2. Flip zooming
2.1 Developing a new focus+context technique
When examining the previously developed focus+context techniques, we found the document lens to be a promising approach. However, the following problem areas with the document lens were identified:
The spatial deformation which is applied to the text outside the focus may make it difficult to identify important features
Real-time performance may suffer because of the advanced calculations required for the display
Fig 3. Starting point
Our attempts to address these shortcomings started with an unfocused view of the pages in a document (Figure 3). The pages were represented by thumbnails and connected by lines, to give an indication of their sequence.
Fig 4. Inspired by the document lens
The first attempt at a zoomed view (Figure 4) was inspired by the document lens, but with size reduction applied to each page individually, and equally in both dimensions. A problem with this view is that the pages close to the focus are smaller than those further away, which may be undesirable, since the information closest to the focus is often regarded as more important for the context. Worse, the distribution of the non-focus pages is unclear - there is no easy correlation between the un-focused view and the focus view.
Fig 5. Similar to the rubber sheet view
A second attempt (Figure 5) was inspired by the rubber sheet view (Sarkar & Brown 1993) but without the deformation of individual pages that would occur in such a display. This view had the advantage of a clear correlation between the page distribution in the non-focus and focus views, but it made poor use of the display, with much space left empty.
Fig 6. No lines connecting pages.
Fig 7. Normal page numbering.
It seemed that the lines between the pages were a restricting factor, so we removed them (Figure 6). Instead of lines, some other method for determining a page's place in the sequence was needed; a simple left-to-right, top-to-bottom ordering seemed appropriate (Figure 7).
Fig 8. Zoomed view
Fig 9. Page numbering in zoomed view.
When a page is brought into focus, it should be placed approximately in the middle of the display, with the other pages arranged around it (Figure 8). The left-to-right, top-to-bottom ordering can still be kept, with all pages with lower page numbers placed above and to the left of the focus page, and pages with higher numbers placed below and to the right (Figure 9). This would make a page's place in the sequence clear, but remove the restrictions of keeping a rigid structure as in Figure 5.
A little experimentation shows that the left-to-right, top-to-bottom arrangement allows for some freedom in the lay out of an in-focus view. This proved to be an advantage in the subsequent implementation of the Zoom Browser, since it allowed us to make page layouts that were adapted to the usage situation.
(Åter till början av artikeln)
2.1.1 The flip zoom technique
We have called the technique described above flip zooming. Users navigate through a document by "flipping" through the pages, like the pages in a book.
For the basic view of a document, it is split up into a number of "pages" of equal length. The pages are laid out on the display in left-to-right, top-to-bottom order. The pages are represented by thumbnail sketches, which provide a context view, but are usually too small to read.
When users wants to read the text on a page, they select it by clicking on its thumbnail representation. The page is then zoomed to a readable size. The surrounding pages are reduced in size and re-arranged to accommodate the expanded page. When users want to view a new page, they can either "flip" to the next or previous page in the sequence, by clicking on an interface button or using a key-board short-cut, or they can select a new page from another part of the document randomly, by clicking on its thumbnail representation.
(Åter till början av artikeln)
2.1.2 Advantages of flip zooming
Flip zooming can give users an overview of a large document. It allows easy access to any part of a document, much like the other focus+context views presented earlier. Flip zooming lets users identify important features of a document at a glance, and to randomly select and read any part of the text instantly.
When compared to the previously mentioned focus+context methods for presenting large documents, flip zooming offers the following advantages:
No deformation of the text outside the focus improves readability
By shrinking the text pages outside the focus equally in both dimensions, rather than applying some more complicated geometrical transformation, the text retains more of its original appearance, and important features are easier to identify.
Improved real-time performance
No advanced math is required for calculating the context display, and the graphics can be pre-calculated with little cost in memory-space.
Possibility to include other types of non-focus information
The content of the pages outside of focus is not limited to being a reduced version of the text contained in the original document. Other information can be displayed instead, such as important keywords, icons, or summaries.
Easier implementation of multiple foci
Multiple foci are a problem with many focus+context views, because it is often unclear how areas between two foci should be treated. This is less of a problem with flip zooming, since all non-focus pages are reduced to the same size.
(Åter till början av artikeln)
2.2 Problems with flip zooming
2.2.1 ScalabilityScalability is an important issue with any focus+context technique. With flip zooming, it is obvious that when a certain number of pages are introduced, the thumbnail representations become too small to convey any useful information, except possibly color. And when there are more pages than there are pixels on the screen, the method breaks down completely. However, this problem is not unique to the flip zoom technique; in fact, loss of information occurs in all focus+context technique at some point.
It might be possible to overcome the problem by introducing an amount of hierarchical structuring to the presented material. For instance, if a book is represented, it could first be seen as just a single image, depicting the cover. This could then be "opened" by clicking on it, revealing a number of pages, each representing a chapter. The individual chapters could then be "opened" or "closed", revealing or hiding the actual text pages contained. In this way, a much larger amount of information can be displayed, but the context would still be retained.
(Åter till början av artikeln)
2.2.2 The position of the focus page is not fixedThe fact that the focus page can appear at different positions on the screen might be confusing to users. To have the focus page at a fixed position in the middle of the display would solve this problem, but it would mean a serious trade-off in screen real-estate usage, and would therefore be contrary to the purpose of the flip zoom technique. Usage-sensitive methods such as the flexible page placing implemented in the Zoom Browser (as described below) might provide a better solution. Another solution might be to introduce smooth animation to ease the transition between different states.
(Åter till början av artikeln)
3. The Zoom Browser
Figure 10. The Zoom Browser running inside another web browser.
The Zoom Browser is a prototype web-browser based on the flip zoom technique. It was written in Java, a platform-independent programming language. Therefore, the Zoom Browser can run on any computer platform which supports Java. Furthermore, most web-browsers support Java, which means that the Zoom Browser can be launched by another browser, and even run on a web-page. (Figure 10)
Just like any other browser, the Zoom Browser can be used to load and display documents from the World Wide Web using flip zooming. It supports a subset of the Hypertext Markup Language (HTML), including hypertext links and most basic formatting commands. The Zoom Browser does not currently support in-line pictures, or some of the more advanced features of HTML, like tables, but these could be added in the future.
(Åter till början av artikeln)
3.1 Navigating World Wide Web documents
When the Zoom Browser is first started, it displays a default page. Users can then follow hypertext links (which appear in a different color, just like in traditional browsers) or manually enter addresses to other hypertext documents they wish to see, just like with any ordinary web-browser.
The Zoom Browser is capable of displaying multiple HTML files simultaneously, meaning that when users follow a link, the new file is loaded and its first page is placed in focus, but previously loaded documents remain on the display. This means that the Zoom Browser can be used for unusual but useful tasks such as downloading and displaying the content of an entire web site. It can also be used to compare two or more documents. To avoid the display being cluttered by pages belonging to documents which are no longer of interest, the Zoom Browser allows users to remove unwanted documents.
When reading a loaded document, users may first select a page from the text randomly, by clicking on it. Then they can either continue to select pages randomly, or they can "flip" forwards and backwards in the document. Flipping is done by either clicking on the buttons marked ">" (forwards) and "<" (backwards), or using the left and right arrow keys on the keyboard as a short-cut.
Users may increase or decrease the size of the focus page, by pressing the buttons marked "+" (for increasing the size of the focus page) and "-" (for decreasing the size) or using the up and down arrow keys on the keyboard. When the focus page changes size, the size of all other pages is adapted accordingly. The size and shape of the window in which the Zoom Browser resides can also be set to any desirable size; the display adapts automatically, changing the size of all pages as necessary.
(Åter till början av artikeln)
3.2 The Zoom Browser's display modes: thumbnails, summaries, and alternating
The Zoom Browser can display the pages which are not in focus as thumbnails, as in the basic flip zoom view. But it can also make use of the formatting information found in HTML files to provide additional functionality.
Figure 11. The Zoom Browser, displaying thumbnails, with no page in focus
When the Zoom Browser is displaying thumbnails, the pages that are not in focus become miniaturized versions of how they would ordinarily look (Figure 11). This allows the user to discern important features of the text, such as lists, headers, and links, at a glance, but does usually not provide enough resolution to allow reading of any text.
Fig 12. The Zoom Browser, displaying summaries, with a page in focus
When displaying summaries, the Zoom Browser extracts the text from the document's headers, and uses this as summaries which are displayed when a page is not in focus (Figure 12). The summaries are displayed in a font large enough to be read by the user, which makes it possible to find important section of a document at a glance, as long as they are identified by corresponding headers.
However, many pages may not contain headers, and this means that these pages are left blank when not in focus on the summaries display. This can be desirable in some cases - it makes the display look less cluttered and it improves the browser's real-time performance, since no thumbnails have to be displayed. But it has the disadvantage of not using the whole display for context information.
Fig 13. The Zoom Browser, displaying both thumbnails and summaries.
To make use of all pages while still retaining the readability of the summaries, we introduced the alternating display (Figure 13). Here, summaries are displayed whenever a header is available. But when a page does not contain any headers, it is not left blank; instead, a thumbnail is displayed in the usual way. This combined display provides advantages of both the other methods: It gives a readable summary whenever such information is available, and it provides a thumbnail sketch of the page otherwise.
(Åter till början av artikeln)
3.3 Visual aids for navigation and reading
To help users navigate with the Zoom Browser, several visual aids were introduced.
4.3.1 Lines connecting pages belonging to the same document
Fig 14. The Zoom Browser displaying three documents simultaneously.
All pages belonging to a document are connected with thin lines (see Figure 14). Unlike the lines that were found restrictive during the initial development of flip zooming (Figure 3), these lines are added after the page layout is complete. The lines show the sequence of the pages, so that there is a line from the first page to the second, from the second to the third, and so on. Furthermore, the pages immediately preceding and following the page in focus are connected to the focus page with thicker lines, to further identify them.
(Åter till början av artikeln)
3.3.2 Boxes around pages belonging to the document currently in focusSince the Zoom Browser can display many different documents simultaneously, an aid to help users in identifying different documents was introduced. All pages belonging to the same document as the page currently in focus are outlined by a box, which makes the currently active document stand out visually. Figure 14 shows an example of this.
(Åter till början av artikeln)
3.3.3 Usage-dependent placement of focus pagesThe fact that flip zooming allows some freedom when distributing the pages on the display allowed the placement of the focus page to be made usage-dependent. This was handled in the following way: If users select a page randomly, i.e. by clicking on its thumbnail representation, the new focus page is displayed as close to the mouse cursor as possible. The reasoning was that the user's attention would be directed to the location of the cursor, and placing the focus page near it would make it quicker to find. When a page is chosen by "flipping" from an adjacent page, however, the new focus page is placed as close to the previous focus page's location as possible. The user's attention would then already be directed towards that location, since they have been reading a previous focus page.
(Åter till början av artikeln)
3.4 User Experience
The Zoom Browser prototype has served as a useful starting point for discussions about flip zooming and focus+context visualization. We have let a number of users try out the Zoom Browser application informally and offer their opinion. Here are some points from these sessions
(Åter till början av artikeln)
3.4.1 Users like the overview that the Zoom Browser offersPeople who tried out the application were pleased with the way the Zoom Browser makes a whole document available at a glance. In particular, the mode where HTML headers were displayed was popular. Several people said outright that they wanted to use the Zoom Browser on material they were working with.
(Åter till början av artikeln)
3.4.2 Feelings were mixed about the flexible page placementSome users found the flexible page placement quite annoying, and would have preferred to have the focus page in a fixed position. Others thought that it was not a problem, and preferable to the trade-off of reducing the size of the non-focus pages.
(Åter till början av artikeln)
3.4.3 The distinction between different types of "pages" was unclearWe had to spend much time explaining that a single web-page was often represented by many thumbnail "pages" on the Zoom Browser's display. And the fact that several web-pages could be displayed simultaneously did not make it easier! This has lead us to believe that for flip zooming to function well in a web-browser application, more thought has to be devoted how to represent the different kinds of "pages" that users will encounter. Perhaps it would even be better to only let the browser display one single web-page at a time.
(Åter till början av artikeln)
4. Conclusions and future directions
We have introduced flip zooming as a method for visualizing large documents, and the Zoom Browser applications has been implemented as a starting point for discussion about this and other focus+context visualization techniques. Judging from user reactions to the Zoom Browser prototype, the technique holds great promise for providing better access to large documents on computer screens.
Fig 15. Using flip zooming to show a document side-by-side with the original
manuscript
After developing the Zoom Browser, we have done some work to generalize the flip zoom technique to show other types of data than text. Initially, we developed an image browser which lets users browse hierarchically ordered image collections (Holmquist & Björk 1998). We are now attempting to integrate text and images on the same display. Currently, we are constructing a browser which lets users examine an electronic version of a text side-by-side with scanned images of the actual manuscript pages, which can contain alterations and corrections by the author which may or may not turn up in the final version. This work is performed in collaboration with the Digital Variants project at Edinburgh University (Fiormonte & Babini 1998). Figure 15 shows an example of this work. We believe that such a browser might prove very useful for students and researchers who are working with a variety of electronic documents, such as those collected in the Digital Variants project.
(Åter till början av artikeln)
5. Acknowledgements
Thanks to Christopher Ahlberg, who was instrumental in the development of flip zooming and the Zoom Browser, and who contributed greatly to earlier drafts of this article. Thanks also to Erik Wistrand, who gave much input during the development of the Zoom Browser. Support to this project came from SSKKII, NUTEK, KFB and The Viktoria Institute, all of which are gratefully acknowledged.
(Åter till början av artikeln)
Om författaren
Lars Erik Holmquist är ledare för forskningsgruppen PLAY vid Viktoriainstitutet i Göteborg. Play arbetar med tillämpad IT-forskning i gränslandet mellan konst och ny teknik
(Åter till början av artikeln)
Referenser
Bartram, L., Ho, A., Dill, J., Henigman, F. The Continuous Zoom: A
Constrained Fisheye Technique for Viewing and Navigating Large Information Spaces. In Proceedings
of ACM UIST '95, pp. 207-215, ACM Press, 1995.
Bederson, B., Hollan, J., Perlin, K., Meyer, J., Bacon, D., and Furnas,
G. Advances in the Pad++ Zoomable Graphics Widget. In Journal of Visual Languages and
Computing, no. 7, pp. 3-31, 1996.
Eick, S., Nelson, M., Schmidt, J. Graphical Analysis of Computer Log
Files. In Communications of the ACM, vol. 37 no. 12, ACM Press, 1994.
Fiormonte, D. and Babini, L. Digital Variants and the Writing Process. In
Computer & Text 16, April 1998.
Furnas, G. W., Generalized Fisheye Views. In Proceedings of ACM SIGCHI
'86, pp. 16-23, ACM Press, 1986.
Henderson Jr., D. A., Card, S. K, Rooms: The Use of Multiple Virtual
Workspaces to Reduce Space Contention in a Window-Based Graphical User Interface. In ACM
Transactions on Graphics, vol. 5 no 3, pp. 211-243, ACM Press, 1986.
Holmquist, L. E. Focus+Context Visualization with Flip Zooming and the
Zoom Browser. In CHI '97 Extended Abstracts, ACM Press, 1997.
Holmquist, L.E. and Ahlberg, C. Flip Zooming: A Practical Focus+Context
Approach to Visualizing Large Information Sets, in Design of Computing Systems: Social
and Ergonomics Considerations (Eds. Smith, M., Salvendy, G. and Koubek, J.), pp.
763-766, Elsevier, 1997.
Holmquist, L. E. and Bjˆrk, S. A Hierarchical Focus+Context Method
for Image Browsing. In SIGGRAPH '98 Sketches and Applications, ACM Press, 1998.
Leung, Y. K, Apperley, M. D, A Review and Taxonomy of Distortion-Oriented
Presentation Techniques, ACM Transactions on Computer-Human Interaction, vol. 1 no
2, pp. 126-160, ACM Press, 1994.
Mackinlay, J. D., Robertson, G. G., Card, S. K. The Perspective Wall:
Detail and Context Smoothly Integrated, Proceedings of ACM SIGCHI '91, pp. 173-179,
ACM Press, 1991.
Robertson, G. G., Mackinlay, J. D., The Document Lens, Proceedings of
ACM UIST '93, pp. 101-108, ACM Press, 1993.
Sarkar, M., Brown, M. H, Fisheye Views, Communications of the ACM,
vol. 37 no. 12, pp. 73-84, ACM Press, 1994.
Sarkar M., Snibbe, S. S., Tversky, O. J., Reiss, S. P., Stretching the
Rubber Sheet: A Metaphor for Viewing Large Layouts on Small Screens, Proceedings of ACM
UIST '93, pp. 81-91, ACM Press, 1993.
Spence, R., Apperley, M., Data base navigation: an office environment for
the professional, Behavior and Information Technology, vol. 1 no. 1, pp. 43-54,
1982.
Wistrand, E., Creating Image Context Using Image Trees, ACM SIGCHI '96
Short Papers, ACM Press, 1996.
© Lars Erik Holmquist 1998