Enhancing Student Learning by Incorporating Visualization and Navigation Tools In Web-based Learning by

Toh Seong Chong, Ph. D. e-mail: tohsc@usm.my Center for Instructional Technology and Multimedia, Universiti Sains Malaysia

Paper presented at Malaysian Educational Technology Conference, 2000

Abstract
In a world of information overload, students need to be taught to process and communicate information in a dynamic non-linear manner. However there are problems with the use of multimedia. The tools available today dont help the students with what we believe to be most important, processing and communicating information. The authoring tools available make it possible for students to combine media into a glitzy presentation but they dont help the students to synthesize the information and to think and communicate in a nonlinear way.To overcome this situation, this paper discusses the design and development of various visualization and navigation tools that act as cognizant advisor, aide, facilitating the students to develop appropriate models of what is happening within hidden or difficult-to-perceive processes. These tools are developed at the Center for Instructional Technology and Multimedia, Universiti Sains Malaysia.

Introduction
Web-based Learning and Information Superhighway are two computer related buzzwords of the decade. Questions regarding the use of and the place of both in society abound. Both have captured the imagination of the media and are enjoying unprecedented coverage in the media and commercially. More and more educators are jumping into the bandwagon of WWW to use it as a vehicle for implementing instructional improvements (Reeves, 1997, Khan, 1997; Owston, 1997). Despite these potentially powerful uses, there are serious misunderstandings and misgivings among educators about the potential of the WWW to support learning. Many teachers and administrators assume that the WWW is a panacea, and that simply putting content on the Web guarantees better learning. Windschitl (1998) describes the folly of these assumptions and calls for more systematic research into the effectiveness and impact of the WWW in education. Effective Web-based learning depends on systematic and sound instructional design (Toh, 1999). Toh (1999) suggested that to promote and support active learning, the important problems that have to be addressed are: deciding how experiences that are incorporated within the Web-based learning environment that can best be presented to the learners;

deciding how human-computer interfaces can be used to initiate, promote and sustain involvement in the learning activities; designing interfaces in a way that enables the maximum pedagogic impact of the underlying computer system to be achieved.

Although many types of software can be used as cognitive tools for learning (e.g., visualization tools, navigation tools, databases, spreadsheets, and authoring systems), this paper highlights the power of visualization tools and navigation tools when employed as intellectual partners in Web-based learning. Before describing the various visualization and navigational tools, a brief discussion on key visualization principles will be useful.

Visual Cognition
Visual cognition includes all the mental processes involved in the perception of and memory for visual information (Pinker, 1984). Perception is the process of selectively attending to and scanning a given given stimulus, interpreting significant details or cues, and, finally, perceiving some general meaning (Levie, 1987). Memory for visual information involves the cognitive processes of storing and recalling information from visual stimuli.

Visual Perception
Visual perception is largely concerned with visually recognizing shapes and patterns of objects directly in our visual field. Gestalt psychologists from the 1920s, such as Max Wertheimer, Kurt Koffka, and Wolfgang Kohler, were among the first to be interested in visual perception. Gestalt perceptual factors build a visual frame of reference which can provide the designer with a reliable psychological basis for the spatial organization of graphic information. To the Gestaltists, the parts of a visual image may be considered, analyzed and evaluated as distinct components. Also, the whole of a visual image is different from and greater than the sum of its parts. Three important Gestalt Principles are: Figure and Ground Similarity, Proximity or Contiguity, Continuity Closure, Area, Symmetry

Visualization Tools
A visualization tool is essentially a facility that enables students and trainees to obtain particular perspectives on and views of a collection of stored data or of a dynamic, ongoing process. Such tools are usually highly interactive since they allow their users to have both fine-grained and coarse-grained control over the view or system perspective that is presented. These tools encourage the learner to form symbolic mental images of their world, since, according to Csikszentmihalyi (1990): ...playing with ideas is extremely exhilarating. Not only philosophy by the emergence of new scientific ideas is fueled by the enjoyment one obtains from creating a new way to describe reality....When a person has learned a symbolic system well enough to use it, she has established a portable, selfcontained world within the mind. (p. 127)

The learner is motivated to use visual thinking tools because he or she enjoys the intellectual challenge of active visual construction of ideas, both as an individual and as a participant in group activity. The chances for successful problem solving are enhanced by the application of visual thinking tools, and increase the learner's satisfaction as a result. A definition proposed by Hartley (1996) is: "Visual tools are symbols graphically linked by mental associations to create a pattern of information and a form of knowledge about an idea." (p. 24). The crucial point here is that they are tools used for the construction of content knowledge, not just storage structures for ideas already developed.

(a) Visualization Tool to link HTML with QuickTime Movie, AVI movie, and MPEG movie
QuickTime Movie is one of the digital movie formats. Unfortunately most movie files that we see on the Web pages are small and difficult to control. This section describes a tool to enable a designer to link a HTML Web Page to a QuickTime Movie Player. See Figure 1. The movie size could be as large as 640 pixel by 480 pixel. Quality of the movie on the Web is smooth and the animation is crisp and clear. This is done by embedding a JavaScript in the HTML file as follows:<a href="javascript:openWindow('color_select.mov');"><br> In order for this tool to work, QuickTime 3.0 System Software have to be installed into the computer system. This software will enable you to integrate video, graphics, music, sound, sprites, text, panoramas and animations into your documents. At the same time QuickTime Pluggin will be automatically installed into the Internet Browser.

Figure 1: Visualization Tool linking HTML page with QuickTime Movie

The source code above can be easily modified to access Microsoft AVI movie files, and MPEG movies. Using this tool the resulting Web Page will be linked to a QuickTime movie file with controllers (See Figure 1). This represents a powerful tool to visualize a learning process.

(b) Visualization Tool for Panoramas

Another interesting visualization tool to link the HTML web page with QuickTime Virtual Reality (VR) movies to create panoramas. QuickTime VR is Apple's photorealistic virtual reality technology that makes it possible to explore places as if you were really there. All major applications that play QuickTime movies can also play QuickTime VR movies. QuickTime VR moves the photographic image from the flat, 2D world into a more immersive experience, complete with 3D imagery and interactive components. Interactive content design and immersive imaging allow the viewer to explore and examine detailed virtual worlds using a computer and mouse, not cumbersome goggles, headsets or gloves.

Figure 2: Visualization Tool using QT Virtual Reality Panorama movie

QTVR panoramas are in essence the view from a single point in space out to a surrounding environment. From the central observation point, called a node, a viewer can look in any direction and may zoom into or out from a particular view by changing the zoom angle of their view. QTVR panoramas support the creation of hot spot areas, which function as an invisible yet detectable mask on the final panorama. Developers can use these hot spots to link panoramas to other QTVR panoramas, QTVR objects, QTVR scenes, or other media such as graphics, text, videos, and sounds via an authoring environment. Alternatively, the same hot spots can be used to link to other World Wide Web sites when the QTVR panorama is included on a web page. The power of this visualization tool is tremendous. It can be use to visualize object, scenes and sequences that are difficult to perceive. At the Centre for Instructional and Multimedia, USM., we experimented with this VR technology to teaching difficult concepts in science topics.

(c) Visualization Tools created using Macromedia Flash

One of the most recent exciting development is the creation of a Web-based vector graphics movie software called Macromedia Flash. Flash movies are compact, vector graphics, so they download rapidly and scale to the viewers screen size. The Flash Player resides on the local computer, where it plays back movies in browsers or as stand-alone applications. As you work in Flash, you create a movie by drawing or importing artwork, arranging it on the Stage, and animating it with the Timeline. You make the movie interactive by making it respond to events

and to change in specified ways. When the movie is complete, you export it as a Flash Player movie, embed it within an HTML page, and transfer it and the HTML page to a web server.

Figure 3. Visualization Tool using Macromedia Flash At the CITM we have created and experimented with numerous Flash movies. This technology if properly designed and utilized has rich potential to enhance visual learning because the vector graphics are capable of fast animations. Figure 3 is a example of a Flash movie created for our CITM Web site.

(d) Thinking-Process Maps Tools

"Thinking-process maps are visual tools defined by fundamental and global thinking processes, from constructing simple categories to developing new theories. ...[they] are visually designed to reflect fundamental patterns of thinking." (Hyerle, 1996, p. 72). The emergence of visual thinking language has evolved from the dynamic representations of systems analysis and the realm of concept mapping. Thornburg (1998) and Hyerle (1996) present overviews of schemes useful to education as well as industry and science. These maps are designed to facilitate the constructivist visualization of ideas. See Figure 4.

Figure 4: Thinking-Process Maps Tools

(e) Visualization Tools for Supporting Collaboration

Collaborative learning refers to instructional strategies whereby learners work together in pairs, small groups, or even large groups to accomplish shared goals. In the past, most courseware packages for the support of learning and training have been designed to support individual, isolated users working on their own personal computer systems each of which was located at a particular location. End-user interface design to facilitate this mode of working is fairly straightforward; the various approaches that have been used are well-documented in the literature. Within such systems, learners and trainees form distributed learning groups and communicate with each other using interactive workstations that are connected together using various telecommunications. Learners can benefit both instructionally and socially when the WWW is used to structure and guide groupwork. Given an appropriate instructional design, two or more learners working together via the WWW might accomplish more than a learner who learn alone by himself because the interactions among the learners may have more influence on their learning than the interactions between the learners and the Web-based content. See Figure 5 shows an example of a collaborative support tool to enable learners to explore further the Solar System.

Figure 5. Collaborative Learning Visual Tools

(f) Adjunct Memory Support Visualization Tools

For many learning tasks, people need adjunct memory support visualization tools. Adjunct memory support presents information that's needed to complete a learning task but isn't the focus of the instructionthe value of pi, for example, or a list of detailed procedural steps. The following example shows a simulation sequence in which learners are asked to perform several steps.

Figure 6: Adjunct Memory Support Visualization Tool

In the above adjunct memory support visualization tool (Figure 6), clicking the Steps button in the lower left corner of the screen causes the steps to appear in the window as a reminder. After performing the procedure a few times, most people will no longer need the help. But for new users, such memory support is critical. The screen designer have to keep visible on the screen the information the learner will need to refer to during the instruction, especially to respond to questions.

Navigational Tools
Navigation within systems has been and continues to be an area of interest and investigation. Whether or not the system or application is one which uses a hypertext database, researchers, designers, and users recognize the problem of keeping the user informed of where he is, where he came from, and where he can go and how he can get to a desired destination. During the development of a multimedia application, storyboards and navigation maps are useful tools for planning the application's content and navigational structure. During the design

process the two development aids are integrated. A navigation map simply outlines the connections or links among the various areas or parts of the content. It shows the logical flow of the content that will be supported via the user interactive interface. Basically the designer works with four basic organizing structures, linear, hierarchical, nonlinear, or composite. Even though, users like to have control and to have a sense of freedom, it is important to provide landmarks and roadmaps or guides that enable users to be successful in navigating through the system. At the CITM, Yee (1999) designed a courseware entitled The Earth Movements incorporating these navigational tools.

Description of Earth Movements Tutorial (Yee, K. F., 1999)

The purpose of this tutorial is for students to recognize and describe the various earth movements resulting in natural phenomena such as volcanoes. An interesting feature about this courseware is that it enables students to engage in tasks or activities involving the comparison, selection and appreciation of the various types of earth movements.

Figure 7: Earth Movements Tutorial with Navigational Controls

Earth Movement Tutorial is an application aimed to help students understand the most important phases involved in the earth movements. The pages in this electronic book make substantial use of multimedia technology. It includes a navigation controller that enables linear (depth-first) and non-linear navigation . Non-linear navigation is achieved by selecting the appropriate menu buttons or by selecting the map button in the navigator controller. See Figure 8.

The user location (where am I?) within the courseware is always explicitly posted through page headings and highlighted indicator buttons at the left of the chapter name in the navigator controller. Within the map, the highlighted block shows the last page visited by the user (See Figure 8). These intuitive cues keep the user oriented throughout the tutorial.

Figure 8: Visualization Navigational Map (Yee, K. F., 1999)

Conclusion
Many organizations are now making increasing use of computers as support aids for teaching, learning and training processes. Invariably, the successful deployment of computer systems in these pedagogic situations depends critically upon the use of appropriately designed instructional software. Within such software the importance of end-user interfaces is paramount since it is the interface subsystem that provides the basic mechanisms by which all humancomputer information is exchanged. If these interfaces are not to mask or stifle the pedagogic processes they are intended to promote, they must be relatively easy to use, unconstraining and supportive of the tasks that are to be undertaken within the given learning/training domain. This paper has considered some of the more important visualization and navigational tools that are needed when designing end-user interfaces for use in instructional software - given that its ultimate goal is to develop rich cognitive structures that can handle demanding real-life situations.

References
Csikszentmihalyi, M. (1990). Flow: The psychology of optimal experience. New York: Harper Perennial.

Hartley, J. (1996). Text Design. In D.H. Jonassen (Ed.), Handbook of research for educational communications and technology (pp. 795-820).New York: Simon & Schuster Macmillan. Hyerle, D. (1996). Visual tools for constructing knowledge. Alexandria, VA: Association for Supervision and Curriculum Development. Khan, B. H. (Ed.). (1997). Web-based instruction. Englewood Cliffs, NJ: Educational Technology. Levie, W. (1987). Research on pictures: A guide to the literature. In D. Willows & H. Houghton (Eds.) The psychology of illustration, volume 1: Instructional issues (pp. 1-50). New York: Springer-Verlag. Owston, R. D. (1997). The World Wide Web: A technology to enhance teaching and learning? Educational Researcher, 26(2), 27-33. Pinker, S. (1984) Visual cognition: An introduction. Cognition, 18, 1-63. Reeves, T. C., & Reeves, P. M., (1997). Effective Dimensions of Interactive Learning on the World Wide Web. In Web-Based Instruction, Khan, Badrul H. (Ed), Educational Technology Publications, New Jersey. Thornburg, D. D. (1998). Brainstorms and lightning bolts: Thinking skills for the 21st century. San Carlos, CA: David D. Thornburg and Starsong Publications. Toh. S. C., (1999). Designing Effective Interactive Multimedia Courseware: Use and Misuse. Proceedings of the Malaysian Education Technology Conference (META, 1999), Port Dickson, Malaysia. Windschitl, M.. (1998). The WWW and classroom research: What path should we take? Educational Researcher, 27(1), 28-33. Yee, K. F. (1999). The Earth Movement Multimedia Courseware. Centre of Instructional Technlogy and Multimedia, USM. Authors Note: Dr. Toh Seong Chong is a lecturer at the Centre for Instructional Technology and Multimedia, University of Science Malaysia. His research interests include Interactive Web-page Design, Multimedia Courseware Design and Rapid Prototyping of Courseware. For further details concerning this paper please contact: him at tohsc@usm.my or browse the CITM Web-page URL http://www.ptpm.usm.my