Education and Spatial Hypermedia: The HyperMap Browser
Antoon Verhoeven, Kai Warendorf
School of Applied Science, Nanyang Technological University, Singapore 639798
    Abstract: To illustrate the potential of spatial hypermedia for education, we present HyperMap. HyperMap is a concept implementation of a spatial hypermedia browser. Information is presented in a scrollable 2D space, based on a map metaphor. Where the unrestricted navigation style of WWW hypermedia is undesirable, HyperMap provides extra navigation and guidance. Educational hypermedia content displayed on a map allows various limitations of WWW information display and linking to be lifted. The 2D view of information in HyperMap provides ubiquitous navigation and allows communication of implicit structure through the positioning of information. With the conditional hypermedia links in HyperMap, a student can be given knowledge-based guidance support. Other innovations in HyperMap are persistent objects that can be annotated, interactive multimedia content, and straightforward hypermedia authoring.  
1    WWW hypermedia for tertiary education

The popularity of the World Wide Web has made HTML and World Wide Web browsers the most widely used platform for hypermedia development. WWW hypermedia, originally designed for straightforward textual information retrieval, is more and more applied in educational settings, either in the classroom or outside for distance learning over the Internet, as described in [Marshall and Hurley 1994]. Especially for tertiary education, with self-motivated students, the role of distance education and hypermedia in students’ curriculum is expected to increase in the near future.

Currently, most educational hypermedia applications are based on WWW browsers and HTML v3.2. Because of the popularity of the WWW, HTML authoring tools and the possibilities of WWW browsers are well known to both users and authors. Although HTML and WWW browsers have undergone numerous extensions over the years, there is as yet no fundamental approach towards guidance and navigational support. This is a definite problem when using WWW hypermedia for tertiary education. Students often become disoriented when browsing a large information space. When there is insufficient information to select a particular link out of many alternatives, users tend to feel lost and browse at random.. One limitation is that in HTML the hypermedia links are still direct links, and thus prevent intervention from a guiding facility. Second, the graphical user interfaces of WWW browsers have been designed for unrestricted navigation where users know where to go and how to get there. In contrast, in educational applications of hypermedia, . the user cannot be expected to know where to go and how to get there.

From our previous research into tertiary hypermedia based computer science laboratory support [Verhoeven and Warendorf 1997], we consider navigational support to be essential for the success of educational hypermedia applications. Other researchers into hypermedia in education agree; [Jones and Berger 1995] suggest that hypermedia in education does not automatically lead to effective learning for all students. Differences in cognitive style influence a student’s browsing behavior. A static hypermedia design usually favors those students with a cognitive learning style compatible with that particular design. These findings and our own indicate that adaptive linking of hypermedia content is desirable. The potential of educational hypermedia combined with a knowledge-based guiding facility has been explored before [Trentin and Midoro 1996], although no user interface design specifications were included.

The shortcomings of WWW hypermedia for advanced educational application have been addressed in our design for an innovative hypermedia browser. We illustrate our design with a concept implementation named HyperMap. HyperMap offers users direct navigational support and guidance, in a graphical user interface based on a map-metaphor.

2    Shortcoming of the WWW for education

Hypermedia developers have in various ways addressed guidance and navigation. One is to generate on-line adaptive HTML documents. Individualized hypermedia content allows links to be omitted, ordered, and colored in order to guide a user [Schwarz et al. 1996]. Schwartz and Brusilovsky preferred icons and text-based adaptive annotation to only coloring, but were restricted by the current HTML standard.

In the area of user interface improvement for browsers, some HTML limitations have been addressed with Java applets. Applets run as small programs inside HTML documents and provide interaction in their separate graphical user interface. With applets, HTML can include highly graphical user environments. Recent HTML hypermedia applications increasingly include both applets and scripts integrated in HTML for adaptive user interaction. Applets and browser scripts are able to achieve localized user interaction in a graphical user interface, but do not scale up well for integrated navigation support, as reported in [Verhoeven and Warendorf 1998]. Size and communication limitations of applets, caused by restrictive WWW browsers, make them unsuitable as integrated guidance and navigation tools. In addition, the ‘next generation’ WWW research such as the Hyper-G project [Mauer 1996], have made few improvements of the standard hypermedia user interface and its maximum guidance level

We propose an alternative educational hypermedia design based on Spatial Hypermedia. A concept implementation named HyperMap has been implemented in Java. A major feature of HyperMap is that it is not restricted by HTML for its hypermedia document size and format.

3    Spatial Hypermedia and education

Spatial hypermedia [Marshall and Shipman III 1995] is based on a user interface with a central canvas where media objects (text pages, notepads, pictures, interactive visualizations, and questionnaires) are displayed and manipulated. Implicit relationships between media objects are visually present in the size and proximity of objects. The spatial layout helps authors to express relationships between objects and helps readers to interpret the information. The notion of a central canvas has been applied in development of collaborative hypermedia applications [Marshall and Shipman III 1995], geographic information systems [Lokuge and Ishizaki 1995], and applications for the communication of concept maps [Gaines and Shaw 1995].

Spatial hypermedia applications have been largely regarded as a tool for computer supported co-operative work. The usefulness of spatial hypermedia for education has not been fully explored yet. To investigate the potential of spatial hypermedia for education, HyperMap has been designed as a domain independent hypermedia browser for educational content. HyperMap allows knowledge-based connection between media objects, and thus the creation of adaptive hypermedia links. Its graphical user interface is based on a scrollable central canvas. A navigation tool, consisting of a scaled map of the canvas, is always visible. Interactive multimedia objects on the canvas form a media rich environment with a high level of interaction through guidance in link selection, questionnaires, visualization, animation, and audio support. This promotes a motivating multimedia experience that goes beyond passive reading of textual content. Where in HTML text is the central medium that links content together, in HyperMap the visualization and layout of objects is central. For educators, it aims to provide a tool in which a curriculum can be expressed visually.

4    HyperMap as an educational tool

HyperMap is intended for educational assignments in which information retrieval is a part of students’ activities. Both courseware and traditional intelligent tutoring approaches would be overly restrictive. In the spectrum of guidance in educational systems (figure 1), HyperMap aims at the middle area, with unguided WWW hypermedia on the extreme left and classical intelligent tutoring systems on the right. Here, guidance is interpreted as more than merely reducing the set of links from which to select. When restricting the available link set to one, navigation problems disappear, but also the opportunity to select the information that answers a student’s specific information needs. Thus, guidance should also explain and point out alternative links. For some educational domains, tutoring in HyperMap will be similar to guided discovery tutoring style [Elsom-Cook 1988]. Guidance is offered in a mixed-initiative dialogue, where the student usually will decide where to go in the information space. For some educational assignments, unrestricted browsing of information may be sufficient. Even then, HyperMap browsing will still differ from WWW browsing in that it takes full advantage of students’ map reading skills for orientation and navigation.

    Figure 1: When an assignment involves information retrieval tasks, guidance is essential. Spatial hypermedia can provide the direct navigation support lacking in most WWW hypermedia. Unlike tutoring systems, it leaves the student the ability to browse.
In HyperMap, all hypermedia links are indirect to allow intervention in the browsing process by a knowledge base (figure 2). For basic applications, simple conditional links may be sufficient. They restrict a user’s path through an information space by becoming active only after a set of links has been first visited. The user is thus forced to follow a path defined by the hypermedia author. This potential resembles ‘hypermedia sequences’ in Hyper-G [Mauer 1996], except that HyperMap gives more flexibility. Not the number of links is restricted, but their state will change between either enabled or disabled.
        Figure 2: The direct links in most WWW hypermedia restrict direct rule based intervention. With indirect links, a knowledge base can select the optimal destination, based on the student’s knowledge levels and browsing history.
Spatial Hypermedia, as implemented in HyperMap gives the user access to a large scrollable canvas, which may be up to several square meters in size. Free navigation takes place with the aid of a scaleable map, displayed next to it (Figure 3). When navigation is unrestricted, one mouse click on the map causes the large canvas to scroll to the requested position. When a valid link is selected, the view scrolls to the canvas position where the information is displayed. Guidance takes place when the application initiates scrolling to give the user a ‘tour’ around the canvas.

    Figure 3.A-B Authoring hypermedia in HyperMap (left picture) consists of moving and reissuing the media objects on the canvas. The right picture displays HyperMap from a user’s perspective. For reasons of clarity the total canvas size has been kept relatively small.

5    Accessing a 2D information space

Due to the virtually unrestricted size of the central canvas, even large information bases can be organized and placed on a single view area. This single-window approach avoids space contention, which occurs frequently in applications based on multiple windows, investigated in [Henderson and Card 1986]. Space contention can be regarded as user disorientation in window space. A navigational support facility, which relies on large numbers of simultaneously accessible windows, is likely to create more disorientation than it resolves. Therefore, HyperMap uses scrolling in a single window to access parts of the canvas currently not visible. Fast scrolling is initiated by a mouse click or mouse drag on the map in the right upper corner (figure 4). The map, which can be enlarged when necessary, displays the object on the canvas and the currently visible canvas area properly to scale. A map grid helps to visualize the current canvas - according to the map size ratio. Even when the map scrolling is disabled, the map still provides information to the student about the current position in the full curriculum, as all objects are displayed on the map.

      Figure 4 A-B The mapped canvas is always visible in the right corner (left picture), and can be enlarged for detailed map based navigation. Its size is independent from the browser’s window size (right picture).
One advantage of a large information canvas is that information objects can be displayed completely, as opposed to only displaying symbolic icons as in [Marshall and Shipman III 1995]. Further, HyperMap provides unlimited space for help texts and graphical guidance near hypermedia links. Thus, the user will generally have valid expectations when selecting a link. A third advantage is the space provided for users to leave annotations in empty slots scattered on the canvas. Whenever the need arises to add an observation, reminder, or memo, the user can do so and thus personalize the information space. The annotations are stored after the session has ended, and the personal information remains intact for future sessions. No separate and potentially distracting paper-based note taking activity is required.

Results in the literature on empirical experiments with hypermedia maps as navigational tools have shown mixed results. A negative effect from spatial navigation maps on information searching has been reported in [Sousa and Dias 1996] where it is argued that the presence of a spatial map of the content interferes with the development of a cognitive map. Although not empirically tested yet, a similar negative effect of the navigation map in HyperMap is not expected for two reasons. First, the map in HyperMap is not a separate node that has to be revisited repeatedly; instead, it is integrated in the browsing process and continuously visible. Second, the layout of the hypermedia objects visualizes their semantic relations, and is identical to the map layout. Thus, there is continuous and consistent semantic information available to help students in the development of a cognitive map.

6    Hypermedia link differentiation

In spatial hypermedia, the role of links is different then in conventional hypermedia. Information about the relevancy of a link is implied in the geometric organization. For educational purposes however, explicit links are also necessary. In HyperMap, explicit links provide guidance and restrict navigation, both by providing textual information and by scrolling the central canvas to the position where the link is anchored. Below five types of links are listed which are applicable in HyperMap. They can be combined on a single canvas to create a curriculum with an appropriate level of navigational freedom (figure 5):

Figure 5 Five types of hypermedia links are displayed. Sequenced links (1), multiple destination links (2), conditional links (3), proximity links (4), and implicit links. A curriculum can be laid out on the canvas from start S to the end E, with an educational optimal degree of browsing freedom.
7    Interaction and Multimedia

Multimedia in educational hypermedia provides extra motivation for students. However, when non-interactive media are applied, the benefits are small. HyperMap is intended to provide both passive and interactive multimedia. Currently a component library, consisting of multimedia HyperMap objects, is under development. As an alternative, the inclusion of existing Java applets, with only minor modifications, is possible as shown in figure 4, allowing the inclusion of existing HTML applets in HyperMap. Future HyperMap components will be based on a more robust and versatile component model.

8    Support for object-oriented hypermedia development and authoring

The hypermedia authoring process is often a bottleneck in the realization of a real world hypermedia application [Nanard and Nanard 1995]. Various map-based authoring tools, such as [Zizi 1995], aim to support authoring with graphical entity-relationship diagrams and other mapping techniques. In contrast, when authoring hypermedia content for HyperMap, the browser itself is the central authoring tool to display the information relationships.

Another supportive factor is that implementation in Java, an object oriented language, complements high-level hypermedia design. Object-oriented programming encourages the definition of classes of persistent multimedia objects, in accordance with existing object-oriented hypermedia development methodologies such as the Object–oriented Hypermedia Development Method [Rossi et al. 1995] and the Extended Object-Relations Model [Lange 1994]. We mention these advantages in [Verhoeven and Warendorf 1998]. An advantage for distance education applications is that Java applications easily support deployment over the Internet, while retaining platform independence. This makes Java an ideal foundation for educational applications. HyperMap has been designed with Internet features, either executed from the desktop or from inside a WWW browser.

9    Conclusion

The spatial hypermedia paradigm holds promises for tertiary educational hypermedia applications. The HyperMap browser under development is intended to provide a fundamentally education-oriented environment for hypermedia applications in which a student curriculum is integrated. The combination of a map-based user interface with knowledge-based hypermedia links offers guidance and navigation beyond WWW standards. Hypermedia authors benefit from the overall object-oriented design of HyperMap.

10    References

[Elsom-Cook 1988]. M. Elsom-Cook (1988). Guided Discovery Tutoring and Bounded User Modelling, in John Self (Ed.1) Artificial Intelligence and Human Learning, Chapman and Hall Computing, 164-178.

[Gaines and Shaw 1995]. B. Gaines and M. Shaw (1995). WebMap: Concept Mapping on the Web, Proceedings of the 4th WWW Conference, Boston USA,

[Henderson and Card 1986]. D. Henderson and S. Card (1986). Rooms: The Use of Multiple Virtual Workspaces to Reduce Space Contention in a window-based Graphical User Interface, ACM Transactions on Graphics (5) 3, 211-243.

[Jones and Berger 1995]. T. Jones and C. Berger (1995). Students' Use of Multimedia Science Instruction: Designing for the MTV Generation, Journal of Educational Multimedia and Hypermedia 4 (4), 305-319.

[Lai et al. 1996]. M.-C. Lai, H.-M. Lien and S.-M. Yuan (1996). Navigation Control in Educational Hypermedia, Proceedings of Educational Hypertext and Hypermedia 1996, Boston, 638-642

[Lange 1994]. D. B. Lange (1994). An Object Oriented Design Method for Hypermedia Information Systems, Proceedings of the 27th Annual Hawaii International Conference on System Sciences 1994.

[Lokuge and Ishizaki 1995]. I. Lokuge and S. Ishizaki (1995). GeoSpace: An Interactive Visualization System for Exploring Complex Information Spaces, Proceedings of CHI’95, papers/il_bdy.htm.

[Marshall and Hurley 1994]. A.D. Marshall and S. Hurley (1994). The design, development and Evaluation of hypermedia Courseware for the Worlds Wide Web, Multimedia Tools and Applications (3), 5-31.

[Marshall and Shipman III 1995]. C. Marshall and F. Shipman III (1995). Spatial Hypertext: Designing for Change, Communications of the ACM, (38) 8, 88-97.

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

[Nanard and Nanard 1995]. J. Nanard and M. Nanard (1995). Hypertext Design Environments and the Hypertext Design Process, Communications of the ACM, (38) 8, 49-56.

[Rossi et al. 1995]. G. Rossi, D. Schwabe, C. Lucena, D. Cowan (1995). An Object Oriented Model for Designing the human- Computer Interface of Hypermedia Applications, Proceedings of the International Workshop on Hypermedia Design (IWHD’95), Montpellier, France, 123-143.

[Schwarz et al. 1996]. E. Schwarz, P. Brusilovsky, and G. Weber (1996). World-Wide Intelligent Textbooks, Proceedings of Educational Telecommunications 1996, Boston, 302-307

[Sousa and Dias 1996]. A. P. Sousa and P. Dias (1996). Analysis of HyperMedia Browsing Processes in Order to Reduce Disorientation, Proceedings of Educational Hypertext and Hypermedia 1996, Boston, 638-642

[Trentin and Midoro 1996]. G. Trentin and V. Midoro (1996). A Learning-Lab Where AI Meets HyperMedia, Proceedings of Educational Hypertext and Hypermedia 1996, Boston, 276-282.

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

[Verhoeven and Warendorf 1998]. A. Verhoeven and K. Warendorf (1998). Java Hypermedia On and Beyond the World Wide Web, Computer Communications (20) 16, 1481-1489.

[Zizi 1995]. M. Zizi (1995). Providing maps to support the early stage of design of hypermedia systems, Proceedings of the International Workshop on Hypermedia Design (IWHD’95), Montpellier, France, 92-104.