Hypermedia on the Map:
Spatial Hypermedia in HyperMap
Antoon Verhoeven and Kai Warendorf
Intelligent Systems Laboratory, School of Applied Science
Nanyang Technological University, Singapore 639798


Hypermedia has become an increasingly applied paradigm in applications for training, education, and complex information retrieval. To support hypermedia users in applications where unguided browsing is unproductive, adaptive hypermedia environments are needed. Currently, WWW browsers are the cornerstones of most hypermedia applications targeted at Internet users. However, for certain applications, WWW hypermedia can not meet the high requirements for adaptive user support. We propose a spatial hypermedia environment to overcome limitations in graphical layout and adaptivity of HTML-based hypermedia. A prototype browser named HyperMap illustrates a browser user interface based on spatial navigation implemented in Java.

1 Issues in Hypermedia Research

The popularity of the World Wide Web has made HTML and World Wide Web browsers the most widely used standard for hypermedia development. WWW hypermedia, originally intended for textual information, is increasingly applied in educational settings [7,15], where a high level of user interaction and multimedia integration is required. Empirical research of hypermedia applications has suggested that hypermedia disorientation often restricts the effectiveness of hypermedia. When users have to spend considerable time on finding their way in an information space, performance and learning suffers from a high cognitive load.

Especially for hypermedia applications that are accessed by users with varying information needs and knowledge levels, increasing the adaptation of hypermedia systems is one approach to increase the effectiveness of hypermedia. The goal is to extend hypermedia with the ability to create a model of the userís knowledge and preferences, and subsequently provide individualised guidance and navigation support based on the user model. Adaptation in hypermedia is based on the real-time creation of an individualised user model, which contains all information regarding the userís preferences, browsing history, information needs, and knowledge levels, a technique widely applied in intelligent tutoring systems. Information about the user is obtained from continuous monitoring by the hypermedia application of the userís selection links, responses to prompts, and in some cases the timing of all input actions as well. A rule base applies the information to determine what hypermedia links are most compliant with the userís goals.

In Brusilovskyís overview of adaptive hypermedia research [2], adaptation is helpful in the hiding, ordering, and annotation of hypermedia links to meet a userís information needs. Adaptivity helps to minimise user disorientation, improve information retrieval speed, and maximise the educational effectiveness.

This paper focuses on spatial hypermedia with its potential for highly adaptive hypermedia applications. In addition, to address equally important user interface design issues, a prototype spatial hypermedia browser is presented. It illustrates a graphical user interface (GUI) with integrated spatial navigation support, targeted at educational applications based on highly graphical hypermedia content.

2 Limitations of the WWW

Most current adaptive hypermedia systems are based on the WWW, since it guarantees direct accessibility for WWW users world-wide. HTML and WWW browsers have undergone numerous extensions, which made them the de facto WWW hypermedia standard. Browser Ďplug-iní libraries, script languages, and Java applets have increases the adaptivity of HTML hypermedia. However, there is no fundamental approach towards adaptation, guidance and navigation support. HTML hypermedia consists of direct links, and thus prevents direct intervention from a guiding facility in the browser itself. Also, WWW browser user interfaces are designed for unrestricted navigation where the user knows where to go next and how to get there. These limitations can be partly overcome by extension of the WWW server with an adaptive HTML generator, as demonstrated in [14]. Another possibility, extension of a WWW browser, has been demonstrated in [3] with helper applications that extends HTML hypermedia with concept maps. The following issues still remain for WWW based hypermedia:

The maximum degree of adaptation that can be achieved with hypermedia is dependent on the level of detail in user modelling. This in return is dependent on the availability of data. Various limitations from the WWW that affect user monitoring exist. Among these, mentioned in [1], are the stateless nature of HTTP, the direct link model of HTML, and page caching in WWW browsers, all of which obstruct detailed user monitoring. An additional restriction for real-time user modelling is that continuous and immediate WWW server access is required. WWW hypermedia has limited control over the userís browsing activities. Especially for education, a restriction of random browsing is desirable to maximise learning. Extensions based on helper applications can confuse users Ďwith a bewildering array of non-standard navigational tools and controlsí [1]. In HTML version 3.2, hypermedia layout is centred around text in a page format, as in textbooks. For some applications, a more graphic-oriented layout of hypermedia content is desirable. This issue is also recognised in recent proposals for extensions of HTML with layers, although currently still in a draft stage. Currently, most (mainly commercial) projects to extend the WWW, such as Hyper-G [9], remain HTML centric. We address these shortcomings in hypermedia browser design that not based on WWW hypermedia. 3 Spatial Hypermedia

Spatial hypermedia is a promising paradigm for demanding hypermedia applications, especially for education and training purposes. Spatial hypermedia, introduced in [8], is based on a central scrollable canvas on which hypermedia objects are displayed and manipulated. Relationships between information elements are visually present in the spatial arrangement, where size and proximity of objects convey extra implicit information (figure 1). Configuration and proximity help authors to express relationships between hypermedia information. They also help users to better interpret the information. The notion of a central canvas has been applied in development of collaborative hypermedia applications [8], geographic information systems [6], and applications for the communication of concept maps [3].

Figure 1 Spatial Configuration of hypermedia elements. Text and pictures can be organised in hierarchies, cycles, and more informal clusters, unrestricted by screen dimensions. Hypermedia presented in a spatial, non-HTML context has several advantages. First, the graphical orientation of spatial hypermedia allows direct navigation, supported by a map metaphor and additional visual cues. Second, indirect spatial hypermedia links allow integration with a knowledge base integrated in the hypermedia client itself. And third, navigation control and user monitoring can match higher requirements than is possible with most other types of hypermedia.
Figure 2 Navigation through scrolling, a large spatially organised information space can be traversed. A hypermedia structure can be represented in a directed graph, which contains all possible paths through an information space. In spatial hypermedia, the hypermedia objects are laid out on a large canvas, where proximity and configuration have a semantic connotation. When the canvas contain many objects (>100), a subdivision of the information into several collections [8] is helpful for navigation and orientation. The resulting hypermedia graph is a topographically correct map of the 2D information space (see figure 2).

4 Guidance in spatial hypermedia

Our design of a spatial hypermedia browser is aimed at tertiary education. The major design drivers were optimal guidance, simplicity in usage even for novice users, and support for a varying level of browsing guidance.

4.1 Navigation with a scaled map

To overcome screen size limitations, most spatial hypermedia implementations use scrollbars to navigate the canvas, and collections on the canvas. In contrast, our design relies on a small clickable map for navigation and orientation. A map allows fast scrolling and prevents user disorientation, since the userís position on the large canvas is always visible. To further support navigation, instead of link symbols, all hypermedia objects are preferably fully visible on the canvas. This provides extra visual cues, and ensures that the map represents the information space accurately.

4.2 Link selection and scrolling

In spatial hypermedia, most links are implicitly present in the proximity and configuration of the hypermedia elements on the canvas. When an explicit link is selected to an object (be it text, an audio clip, a picture, or animation) that is located outside the currently visible canvas area, the application will scroll the canvas until the selected information is visible. The traversing of the canvas should be continuously visible on the scaled map. Then, a user directly sees the view of the canvas traversing the information space, as well as the movement of the view area on the scaled map.

In a well-designed information space the role of inter-canvas links is limited since a single canvas should be self-contained, similar to a chapter in a book. Following this analogy, a collection is a paragraph, and the individual hypermedia elements are subparagraphs, though not necessarily textual. Elements can be audio clips, animation, prompts, questionnaires, simulations, or notepads.

4.3 Guided tours in spatial hypermedia

Guided tours through an information base are useful to give new users an overview of an information space. In spatial hypermedia, a natural implementation of guided tours is a series of automatic scrolling activities (figure 3).

With hypermedia tours consisting of repeated scrolling over the information display, it is possible to include multimedia presentations integrated within the spatial hypermedia framework. No separate user interfaces for representation are required, and the user has complete control where and when to resume browsing.

Figure 3 Guided multimedia tour Four canvas locations form an interactive multimedia presentation consisting of images (I), audio samples (A), and text (T) resources.   4.4 Additional guidance from visual cues

To further support a semantically rich hypermedia layout, the addition of annotation and arrows on the scrollable canvas extend the semantics of the laid out relationships between the objects. Opportunities for user to add their own annotations minimises the need for separate paper-based annotations; especially for learners, annotation can be a central educational activity to achieve active learning.

The combination of arrows, annotations, and collections allows the construction of entity-relationship diagrams as collections in spatial hypermedia.. To accomplish this, the diagrams first have to be transformed into higraphs. Higraphs, a visual formalism proposed in [4], enable the expression of entity-relationship diagrams in standard spatial hypermedia content with annotation, arrows, and collections.

4.5 Adaptation from a knowledge base

Hypermedia adaptivity requires hypermedia links to be dynamic. When a dynamic link is selected, a knowledge base, consisting of a set of if-then rules, analyses the user model in order to select the optimal destination from a set of alternatives. Rules to control and direct a learnerís navigation can be divided into context-free rules and node-dependant rules [10]. Spatial hypermedia is compatible with both types of rules. Context-free rules can impose and lift dynamic access restrictions for certain canvas areas based on didactic knowledge, while node-dependant rules resolve dynamic link selection at node level, based on the immediate browsing/scrolling history.

Guided tours, restriction of navigation, and interactive prompts are all three potential actions for a rule based guidance facility to interrupt, guide, and advise a user during hypermedia browsing. The mechanism of canvas scrolling supports flexible control of a userís navigation. Especially in education and training hypermedia, a temporary strict navigation control can be necessary.

5 HyperMap, a spatial Browser

The design considerations of section four are applied in the implementation of HyperMap, a prototype spatial hypermedia browser. HyperMap is a platform independent Java application that is executed as a standalone application, or alternatively as an applet in a WWW browser. HyperMap does not depend on additional features besides the Java runtime environment already present in WWW browsers. Although file access restrictions limit applets, the advantage for WWW users is that no prior software installation is required.

HyperMap gives the user access to a scrollable canvas that can be up to several square meters in size. In unrestricted navigation mode, the central navigation instrument is a clickable map in the right upper corner of the application window (figure 4). The map displays the scaled canvas content and the position of the currently visible canvas area. A mouse click on the requested destination causes the canvas to scroll.. The optimal map size for navigation is set by the user, depending on available screen area and canvas content.

Figure 4.A-B The left picture displays HyperMap from a userís perspective. The only control visible if for map sizing. Authoring in HyperMap (right picture) consists of creating, moving and sizing media objects. 5.1 User Interface Aspects of HyperMap

The GUI of HyperMap has been designed to make the browser as transparent in use as possible to reduce usersí cognitive load resulting from hypermedia browsing. Two GUI design principles followed from this.

Reduced number of browser controls

Since direct map navigation with either mouse or cursor keys is the foundation of the user interface, few additional GUI controls are required. Only one slider control for map sizing is directly visible. With fewer control widgets, the canvas view area is maximised in order to reduce scrolling. The necessity for menu bar access is minimised as well, in order to keep attention focused on the canvas area. Most user control consists of mouse based direct manipulation of hypermedia.

A single external window

Hypermedia browsing often occurs alongside other windowed applications. In addition, HyperMap is a platform-independent application, and therefore no assumptions regarding available display size have been made. For this reason all interaction in HyperMap takes place in a single window that is fully sizeable, and accessible even when small-sized. The single window approach answers the problem of window clutter in systems with either a small screen area or with a large number of windowed applications [12]. Window clutter is an additional source of disorientation for multiple- window hypermedia applications. When continuous window manipulation is required, the usability of a hypermedia browser is affected.

5.2 Spatial hypermedia authoring

The hypermedia authoring process is a major aspect of realisation of a real world hypermedia application [11]. The absence of support for creative development of hypermedia content is referred to as the authoring bottleneck. The usual approach to overcome the bottleneck is a separate authoring tool set. Hypermedia authoring tools, such as [17], are often based on entity-relationship diagrams and other mapping techniques manipulated in an authoring tool that resembles a spatial hypermedia browser. In HyperMap the browser itself is the central authoring tool to create, arrange, and modify hypermedia element with their semantic relationships. The absence of a separate tool minimises the step from hypermedia using to hypermedia authoring.

5.3 Implementation in Java

Object-oriented design with Java encourages the definition of classes of persistent multimedia objects, in accordance with existing object-oriented hypermedia development methodologies, as suggested in [16]. Compatible hypermedia methodologies are the ObjectĖoriented Hypermedia Development Method [14] and the Extended Object-Relations Model [5]. An advantage for implementation is the straightforward deployment of Java applications over the Internet, with standard HTTP servers as hypermedia servers.

6 Conclusion

In this paper we outlined how spatial hypermedia complements HTML based hypermedia. Especially for hypermedia in training and education, the visually oriented map metaphor offers a high level of navigation support and potential for adaptation to information needs. Spatial tours integrate multimedia presentations with hypermedia interaction. Also, for hypermedia authors, the expressiveness and directness of spatial hypermedia authoring without additional tools is advantageous. Our development of HyperMap will continue to realise said advantages, aimed an intelligent hypermedia system for tertiary computer science education.


[1] C. Brown and S. Benford. Tracking WWW Users: Experience From The Design of HyperVisV, Proceedings of WebNet 1996, pp. 57-63.

[2] P. Brusilovsky, Methods and techniques of adaptive hypermedia, User Modeling and User Adapted Interaction, 1996, vol. 6 no.2-3.

[3] B. Gaines and M. Shaw, WebMap: Concept Mapping on the Web, World Wide Web Journal, vol. 1 no.1, 1995, pp. 171-183.

[4] D. Harel, "On Visual Formalisms", in Comm. of the ACM, vol. 31, no. 5, May 1988, pp. 514-530.

[5] D. B. Lange, "An Object Oriented Design Method for Hypermedia Information Systems", in Proceedings of the 27th Annual Hawaii International Conference on System Sciences, 1994, vol. III, pp. 366-375.

[6] I. Lokuge and S. Ishizaki, "GeoSpace: An Interactive Visualization System for Exploring Complex Information Spaces", in Proceedings of CHIí95, Denver, USA, May 1995.

[7] A.D. Marshall and S. Hurley, "The design, development and Evaluation of hypermedia Courseware for the World Wide Web", in Multimedia Tools and Applications, vol. 3, no. 5-31, 1994.

[8] C. Marshall and F. Shipman III, "Spatial Hypertext: Designing for Change", in Communications of the ACM, vol. 38, no. 8, August 1995.

[9] H. Mauer (Ed.), Hyper-G now Hyperwave: The next generation Web solution, Addison-Wesley Longman, 1996.

[10] J.F Merlet, "Human Computer Interactions Through an Intelligent Hypermedia", in Proceedings of the International conference on Systems, Man, and Cybernetics, vol.4, pp. 268-71, 1993.

[11] J. Nanard and M. Nanard, "Hypertext Design Environments and the Hypertext Design Process", in Communications of the ACM, vol. 38, no. 8, 1995.

[12] D. Henderson and S. Card, "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, July 1986.

[13] G. Rossi, D. Schwabe, C. Lucena, D. Cowan, "An Object Oriented Model for Designing the human- Computer Interface of Hypermedia Applications", in Proceedings of the International Workshop on Hypermedia Design, Montpellier, France, 1995.

[14] E. Schwarz, P. Brusilovsky, G. Weber, "World-Wide Intelligent Textbooks", Proceedings of Educational Telecommunications 1996, pp. 302-307.

[15] A. Verhoeven and K. Warendorf, "Design Issues for a Hypermedia Lab support ITS" in Proceedings of PACES 97, pp.567-574, Singapore, 1997.

[16] A. Verhoeven and K. Warendorf,, "Java Hypermedia On and Beyond the World Wide Web", to appear in Computer Communications, September 1997.

[17] M. Zizi, "Providing maps to support the early stage of design of hypermedia systems", in Proceedings of the International Workshop on Hypermedia Design, Montpellier, France 1995.