Applying Bifocal Displays to Enhance WWW Navigation


Chris Pilgrim, Swinburne Computer Human Interaction Laboratory, School of Computer Science and Software Engineering, Swinburne University of Technology, P.O. Box 218, Hawthorn 3122,Victoria, Australia. Phone +61 3 9214 5231 Fax: +61 3 9819 0823 Email: cpilgrim@swin.edu.au Home Page: Chris Pilgrim [HREF 1]

Ying Leung, Swinburne Computer Human Interaction Laboratory, School of Computer Science and Software Engineering, Swinburne University of Technology, P.O. Box 218, Hawthorn 3122,Victoria, Australia. Phone +61 3 9214 8765 Fax: +61 3 9819 0823 Email: yleung@swin.edu.au Home Page: Ying Leung [HREF 1]


Keywords: WorldWideWeb, Visualisation, Navigation

Introduction

Despite its relative short history, the World Wide Web (WWW) is now emerging as a powerful resource which will have much impact on Internet users. The vast amount of information available on the WWW, coupled with its easy accessibility, has seen the exponential growth of users and WWW pages in recent months. An increasing number of tools are also available to assist the user to manage and access information on the WWW. However, the unprecedented success of the WWW has brought a number of problems which are constraining its usability.

One of the key problems relates to the vast amount of information that the Web contains and the methods by which a user can access this information. It has been established that one of the major usability problems with hypermedia information spaces such as the World Wide Web is the user's risk of disorientation whilst navigating (Nielsen, 1990). Help should be provided to maintain a user's sense of orientation and facilitate navigation within the context of the total information space. Hence there is a need for support for both the local navigation task of moving between pairs of specific nodes as well as the global navigation task which involves movements that spans many nodes (Kahn, 1995). Most browsers display a limited amount of orientation information consisting of document name and URL as well as the URLs of possible links from the current page. In addition, many browsers provide a history list of pages previously visited which enables the user to establish some notion of location and also provides the ability to backtrack. Whilst these orientation clues do provide adequate support for navigation at the local level, they lack the contextual overview required for global orientation. Users, when presented with multiple paths to the same or different end points will quickly experience cognitive overloading as they struggle to maintain orientation (Hedberg & Harper, 1991).

The use of overview diagrams as an aid to navigation have provided a solution to then problem of global orientation (Nielsen, 1990). Overview diagrams are a graphical map of the structure of the hypermedia systems showing all nodes and links. Such diagrams act as a two dimensional table of contents and are particularly suitable for providing a level of orientation in non-linear hypermedia information spaces. Overview diagrams support the user's mental model of how the information space is structured by providing orientation at a visual level. There is evidence to suggest that mental models are a powerful aid to reduce learning time and improve users' overall performance (Rumelhart and Norman 1981, Halasz and Moran 1982, Foss et al, 1982).

The World Wide Web provides the technical support for overview diagrams through the use of image maps. A bit-mapped image of a Web space may be created by the Web page developer and made accessible to the user either as a simple static map of the Web space to provide orientation or as a dynamic map that can augment the traditional method of navigation by the encoding of graphical hot-spot links. A cursory examination of the Web shows that the use of image maps in this way is becoming popular.

Although image map overviews are an excellent tool for orienting and navigating a hypermedia system such as the World Wide Web, there are some drawbacks when they are applied to large information spaces which involve many nodes and links (Mukherjea et al, 1994). Large image maps give rise to the need to use of scroll bars to enable the user to change views of the map and as the entire map cannot be display in its entirety. Researchers (Beard and Walker II, 1990) have provided empirical evidence to suggest that users perform sub-optimally with scroll bars in tasks which require navigating a large two-dimensional space.

This paper proposes the use of the Bifocal Display as a visualisation aid to assist with navigating the WWW. A number of WWW pages have been implemented using this presentation technique to illustrate the concept.

Bifocal Displays

Effective displays have much to offer to ameliorate the visualisation difficulty when the user interacts with a large image map. In the context of presenting large compound graphs on a small display screen, Misue and Sugiyama (1991) suggest five design criteria. They term these criteria as detailedness, wholeness, simultaneity, image-singleness and appropriateness. The essence of these criteria is the concurrent presentation of detailed and global views to minimise the need for screen switching and ease interpretation.

Various techniques have been proposed to overcome this visualisation difficulty associated with large visual information systems. Leung (1996) illustrates that the three key techniques which can be used to facilitate visualising large information spaces are distortion, encoding and thresholding. Distorted presentations involve a geometric scaling of the data to generate a distorted display; they consist of a detail view of a small portion of the data space within a demagnified global scene. Encoded presentations allow attributes of the data to be displayed through graphical representation, thus saving valuable screen space. Thresholding presentations provide a systematic way of suppressing or revealing the information to be presented, reducing screen clutter.

The Bifocal Display was first proposed by Spence and Apperley (1982) to overcome the classical "window" problem associated with viewing large databases through the concurrent presentation of local detail with global context. The essence of this technique is to allow attributes of the data to be displayed through representation, thus saving valuable screen space. The Bifocal Display concept has been extended by Leung (1989) in a two dimensional graphical form using the implementation of an interactive London Underground map (Figure 1).

The two dimensional bifocal display comprises of nine distinct regions as shown in Figure 2. The central focus region provides a detailed view of part of the entire information space. The surrounding 8 regions are demagnified by a constant value in either x, y or x and y dimensions depending upon the position relative to the central focus region. With an interactive map display, the focus region together with the 8 surrounding regions shift as the user moves the mouse to view an desired area of the information space.


Figure 1: A Bifocal Display of the London Underground
(Adapted from Figure 4 of Leung, Spence and Apperley, 1995)

In the context of the WWW, the bifocal displays can therefore be applied in two ways concurrently - representing data in graphical form or demagnifying areas of the information space which are 'out-of-focus'. Both techniques have the desired effects of saving valuable screen space and allow concurrent display of the global scene together with local detail to be presented in context.


Figure 2: Components of a 2D Bifocal Display
(Adapted from Figure 3 of Leung, Spence and Apperley, 1995)

A Dynamic Bifocal Image Map

The School of Computer Science and Software Engineering [HREF 3] at Swinburne University of Technology [HREF 4] has a set of Web pages that document the four main activities of the school: Courses, Research, Staff and Administration. Each section has a large number of subsequent links to subsections and cross-links to other pages. Currently there is a variety of navigation assistance provided to users including the traditional menu system, a keyword search mechanism and a set of static graphical overview maps.

The original graphical overview map (Figure 3) displayed all of the links and nodes in the system using different colours to represent the levels of the hierarchy. Due to the size and complexity of the system, the use of scroll bars is essential to view the overall structure.


Figure 3: The Static Overview Map

A dynamic bifocal display [HREF 5] of this map has been implemented using the Java language which removes the need for scroll bars. This program implements the full distortion-oriented bifocal display technology by allowing the user to establish overall orientation within the system and to then navigate through to the detail of the section of interest by dynamically controlling the focal area of the map by mouse movements.


Figure 4: The Bifocal Display Overview Map

The central focal region is outlined by a white rectangle as shown in Figure 4. This region is not distorted in any way and provides the user with a window by which to examine the detail of the whole map. The area of the map outside of the central focus region is distorted in such a manner that the user can place the central focus region in the context of the whole map. The links between the nodes do not lose continuity over the boundry of the focal area thereby allowing the user to visually follow a path.

The Java program has two modes:
(a) Focus Control
This mode allows the user to move the central focus region by the use of the mouse. The point the user selects with the mouse becomes the centre of the new central focus region and the rest of the map distorts accordingly as shown in Figure 5.

(b) Page Navigation
This mode allows the user to select a specific node on the map with the mouse in order to jump to a corresponding URL.

The user selects the appropriate mode by the use of a small toolbar positioned at the top right of the map.


Figure 5: Movement of the Central Focas Region

Implementation, Performance & Further Work

The program has been implemented as a Java applet. The actual executable is around 10Kb whilst the four GIF images required for the distortion total 84Kb. The performance of the program once loaded is quite satisfactory but downloading does take approximately a minute. Using a 16 colour image map would improve the download time. The original image map was 1512 x 903 pixels in size. This map has been reduced to 800 x 600 using the distortion technique as it was found that the central focus region was too small when implemented in 640 x 480 resolution.

The co-ordinates of the image map required for the URL jumps were hard coded into the program. It is proposed to create a program which would take the output of a standard image map application and translate it into the format required for the Java program. Further work to automate the manual creation of the GIF images is required.

Conclusion

This paper has demonstrated that the Bifocal Display Technique is a effective way of presenting World Wide Web information by concurrently providing the user with a detailed local view and global context to assist with navigation. Through systematic application of encoding and distortion techniques to the large information space, the Bifocal Display enables a large information space to be presented on a small display surface. It is envisaged that through interaction with the bifocal display presentation of the image map, the user will also be able to establish a more robust mental model of the topological map, when compared with the conventional windowing approach using the scroll bars.

References

Beard, D.V. and Walker II, J.Q. (1990): Navigational techniques to improve the display of large two-dimensional space, Behaviour and Information Technology, 9, 6, 451-466.

Foss, D., Rosson, M. and Smith, P. (1982): Reducing manual labour: an experimental analysis of learning aids for a text editor, Proceedings of the Gaithersburg Conference on Human Factors in Computer Systems, Washington.

Halasz, F. G. an d Moran, T.P. (1982): Analogy Considered Harmful, Proceedings of the Gaithersburg Conference on Human Factors in Computer Systems, Washington.

Hedberg, J. & Harper, B. (1991): Creating Interface Metaphors for Interactive Multimedia, Proceeding of the First International Interactive Multimedia Symposium, Perth, 219 - 226.

Hollands, J.G., Carey, T.T., Matthews, M.L. and McCann, C.A. (1989): Presenting a graphical network: a comparison of performance using fisheye and scrolling views. In Designing and Using Human-Computer Interfaces and Knowledge Based Systems (Eds. Salvendy, G. and Smith, M.) Elsevier, Amsterdam, 313-320.

Kahn, P. (1995). Visual Clues for Local and Global Coherence in the WWW, Communications of the ACM, 38(8), 67 - 69.

Misue, K. and Sugiyama, K. (1991): Multi-viewpoint perspective display methods: Formation and application to compound graphs. In Advances in Human Factors/Ergonomics, Vol 18A, Hans-Jorg Bullinger, Ed., Elsevier Science Publishers, 834-838.

Leung, Y.K. (1989): Human-computer interface techniques for map-based diagrams. In Advances in Human Factors/Ergonomics , Vol 12B: Designing and using Human-Computer Interfaces and Knowledge Based Systems, (Eds. Salvendy, G. and Smith, M.) Amsterdam, Elsevier, 361-368.

Leung, Y.K (1996), Presentation techniques for large visual information systems, Proceedings of International Conference on Visual Information Systems, Melbourne, February 1996, 530-539.

Leung, Y.K., Spence R. and Apperley M.D. (1995): Applying Bifocal Displays to topological maps. International Journal of Human-Computer Interaction, 7, 1, 79-98.

Mukherjea, S. Foley, J. & Hudson, S. (1994): Interactive Clustering for Navigating in Hypermedia Systems, Proceedings of the ACM European Conference on Hypermedia Technology, Edinburgh,136 - 145.

Nielsen, J. (1990): The Art of Navigating Through Hypertext. Communications of the ACM, 33(3), 296 - 310.

Rumelhart, D. and Norman, D. (1981) Analogical processes in learning. In J Anderson (ed) Cognitive Skills and Their Acquisition (Hillsdale, NJ: Erlbaum) 335-359.

Spence, R. and Apperley, M.D. (1982): Data base navigation: an office environment for the professional. Behaviour and Information Technology, 1, 1, 43-54.


Hypertext References

HREF1
http://www.csse.swin.edu.au/chris/ - Chris Pilgrim's Home Page.
HREF2
http://www.csse.swin.edu.au/ying/ - Ying Leung's Home Page.
HREF3
http://www.csse.swin.edu.au/> School of Computer Science and Software Engineering Home Page.
HREF4
http://www.swin.edu.au/- Swinburne University of Technology Home Page.
HREF5
http://www.csse.swin.edu.au/Homepage/bifocal/bifocal.html - Dymanic Bifocal Image Map.

Copyright

Chris Pilgrim and Ying Leung ©: 1996. The authors assigns to Southern Cross University and other educational and non-profit institutions a non-exclusive licence to use this document for personal use and in courses of instruction provided that the article is used in full and this copyright statement is reproduced. The authors also grant a non-exclusive licence to Southern Cross University to publish this document in full on the World Wide Web and on CD-ROM and in printed form with the conference papers, and for the document to be published on mirrors on the World Wide Web. Any other usage is prohibited without the express permission of the author.
Pointers to Abstract and Conference Presentation
Abstract Conference Presentation Papers & posters in this theme All Papers & posters AusWeb96 Home Page

AusWeb96 The Second Australian WorldWideWeb Conference "ausweb96@scu.edu.au"