Enhancing Student Learning by Incorporating Visualization and Navigation Tools In Web-based Learning by Toh Seong Chong, Ph. D. e-mail: [email protected]Center for Instructional Technology and Multimedia, Universiti Sains Malaysia Paper presented at Malaysian Educational Technology Conference, 2000AbstractIn a world of information overload, students need to be taught to process andcommunicate information in a dynamic non-linear manner. However there are problems with the use of multimedia. The tools available today don’t help the students with what we believe to be most important, processing andcommunicating information. The authoring tools available make it possible forstudents to combine media into a glitzy presentation but they don’t help the students to synthesize the information and to think and communicate in a non- linear way.To overcome this situation, this paper discusses the design anddevelopment of various visualization and navigation tools that act as cognizantadvisor, 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, UniversitiSains 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 lear ning depends on systematic and so und 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;
12
Embed
Enhancing Student Learning by Incorporating Visualization and Navigation Tools
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
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 don’t help thestudents 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 don’t help thestudents to synthesize the information and to think and communicate in a non-linear 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 ishappening within hidden or difficult-to-perceive processes. These tools aredeveloped at the Center for Instructional Technology and Multimedia, Universiti Sains Malaysia.
Introduction
Web-based Learning and Information Superhighway are two computer related buzzwords of thedecade. Questions regarding the use of and the place of both in society abound. Both havecaptured the imagination of the media and are enjoying unprecedented coverage in the mediaand commercially. More and more educators are jumping into the bandwagon of WWW to use itas a vehicle for implementing instructional improvements (Reeves, 1997, Khan, 1997; Owston,1997).
Despite these potentially powerful uses, there are serious misunderstandings and misgivingsamong educators about the potential of the WWW to support learning. Many teachers andadministrators 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 callsfor 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 thathave to be addressed are:
• deciding how experiences that are incorporated within the Web-based learning environmentthat can best be presented to the learners;
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
• deciding how human-computer interfaces can be used to initiate, promote and sustaininvolvement in the learning activities;
•
designing interfaces in a way that enables the maximum pedagogic impact of the underlyingcomputer system to be achieved.
Although many types of software can be used as cognitive tools for learning (e.g., visualizationtools, navigation tools, databases, spreadsheets, and authoring systems), this paper highlightsthe power of visualization tools and navigation tools when employed as intellectual partners inWeb-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 andscanning a given given stimulus, interpreting significant details or cues, and, finally, perceivingsome general meaning (Levie, 1987). Memory for visual information involves the cognitiveprocesses of storing and recalling information from visual stimuli.
Visual Perception
Visual perception is largely concerned with visually recognizing shapes and patterns of objectsdirectly in our visual field. Gestalt psychologists from the 1920s, such as Max Wertheimer, KurtKoffka, and Wolfgang Kohler, were among the first to be interested in visual perception. Gestaltperceptual factors build a visual frame of reference which can provide the designer with areliable psychological basis for the spatial organization of graphic information. To theGestaltists, 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 itsparts.
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. Suchtools 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 toolsencourage the learner to form symbolic mental images of their world, since, according toCsikszentmihalyi (1990):
...playing with ideas is extremely exhilarating. Not only philosophy by theemergence of new scientific ideas is fueled by the enjoyment one obtainsfrom creating a new way to describe reality....When a person has learned asymbolic system well enough to use it, she has established a portable, self-contained world within the mind. (p. 127)
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
The learner is motivated to use visual thinking tools because he or she enjoys theintellectual challenge of active visual construction of ideas, both as an individual and
as a participant in group activity. The chances for successful problem solving areenhanced by the application of visual thinking tools, and increase the learner'ssatisfaction as a result.
A definition proposed by Hartley (1996) is: "Visual tools are symbols graphically linkedby mental associations to create a pattern of information and a form of knowledgeabout an idea." (p. 24). The crucial point here is that they are tools used for theconstruction of content knowledge, not just storage structures for ideas alreadydeveloped.
(a) Visualization Tool to link HTML with QuickTime Movie, AVI movie, and MPEGmovie
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 adesigner to link a HTML Web Page to a QuickTime Movie Player. See Figure 1. The movie sizecould be as large as 640 pixel by 480 pixel. Quality of the movie on the Web is smooth and theanimation is crisp and clear.
This is done by embedding a JavaScript in the HTML file as follows:-
In order for this tool to work, QuickTime 3.0 System Software have to be installed into thecomputer system. This software will enable you to integrate video, graphics, music, sound,sprites, text, panoramas and animations into your documents. At the same time QuickTimePluggin will be automatically installed into the Internet Browser.
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
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 MPEGmovies. Using this tool the resulting Web Page will be linked to a QuickTime movie file withcontrollers (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 realitytechnology 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 VRmoves the photographic image from the flat, 2D world into a more immersive experience,complete with 3D imagery and interactive components. Interactive content design andimmersive imaging allow the viewer to explore and examine detailed virtual worlds using a
computer and mouse, not cumbersome goggles, headsets or gloves.
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
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 surroundingenvironment. From the central observation point, called a node, a viewer can look in anydirection 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 invisibleyet detectable mask on the final panorama. Developers can use these hot spots to linkpanoramas to other QTVR panoramas, QTVR objects, QTVR scenes, or other media such asgraphics, text, videos, and sounds via an authoring environment. Alternatively, the same hotspots can be used to link to other World Wide Web sites when the QTVR panorama is includedon a web page. The power of this visualization tool is tremendous. It can be use to visualizeobject, scenes and sequences that are difficult to perceive. At the Centre for Instructional andMultimedia, USM., we experimented with this VR technology to teaching difficult concepts inscience topics.
(c) Visualization Tools created using Macromedia Flash
One of the most recent exciting development is the creation of a Web-based vector graphicsmovie software called Macromedia Flash. Flash movies are compact, vector graphics, so theydownload rapidly and scale to the viewer’s screen size. The Flash Player resides on the localcomputer, where it plays back movies in browsers or as stand-alone applications. As you workin Flash, you create a movie by drawing or importing artwork, arranging it on the Stage, andanimating it with the Timeline. You make the movie interactive by making it respond to events
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
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.
At the CITM we have created and experimented with numerous Flash movies. This technologyif properly designed and utilized has rich potential to enhance visual learning because thevector graphics are capable of fast animations. Figure 3 is a example of a Flash movie createdfor our CITM Web site.
(d) Thinking-Process Maps Tools
"Thinking-process maps are visual tools defined by fundamental and global thinkingprocesses, from constructing simple categories to developing new theories. ...[they] arevisually designed to reflect fundamental patterns of thinking." (Hyerle, 1996, p. 72). Theemergence 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. Thesemaps are designed to facilitate the constructivist visualization of ideas. See Figure 4.
Figure 3. Visualization Tool using Macromedia Flash
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation 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 coursewarepackages 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 aparticular location. End-user interface design to facilitate this mode of working is fairlystraightforward; the various approaches that have been used are well-documented in theliterature. Within such systems, learners and trainees form distributed learning groups andcommunicate with each other using interactive workstations that are connected together usingvarious telecommunications. Learners can benefit both instructionally and socially when theWWW 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 wholearn alone by himself because the interactions among the learners may have more influenceon their learning than the interactions between the learners and the Web-based content. SeeFigure 5 shows an example of a collaborative support tool to enable learners to explore further the Solar System.
Figure 4: Thinking-Process Maps Tools
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
For many learning tasks, people need adjunct memory support visualization tools. Adjunctmemory support presents information that's needed to complete a learning task but isn't thefocus of the instruction—the value of pi, for example, or a list of detailed procedural steps. Thefollowing example shows a simulation sequence in which learners are asked to perform severalsteps.
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
In the above adjunct memory support visualization tool (Figure 6), clicking the Steps button inthe 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 thescreen the information the learner will need to refer to during the instruction, especially torespond 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, wherehe 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 areuseful tools for planning the application's content and navigational structure. During the design
Figure 6: Adjunct Memory Support Visualization Tool
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
Figure 7: Earth Movements Tutorial with Navigational Controls
process the two development aids are integrated. A navigation map simply outlines theconnections 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 landmarksand 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 incorporatingthese 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 earthmovements resulting in natural phenomena such as volcanoes. An interesting feature about thiscourseware is that it enables students to engage in tasks or activities involving the comparison,selection and appreciation of the various types of earth movements.
Earth Movement Tutorial is an application aimed to help students understand the mostimportant phases involved in the earth movements. The pages in this electronic book makesubstantial 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 theappropriate menu buttons or by selecting the map button in the navigator controller. See Figure8.
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
Fi ure 8: Visualization Navi ational Ma Yee K. F. 1999
The user location (where am I?) within the courseware is always explicitly posted through pageheadings 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.
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 inthese pedagogic situations depends critically upon the use of appropriately designedinstructional software. Within such software the importance of end-user interfaces is paramountsince it is the interface subsystem that provides the basic mechanisms by which all human-computer information is exchanged. If these interfaces are not to mask or stifle the pedagogicprocesses they are intended to promote, they must be relatively easy to use, unconstrainingand 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 itsultimate goal is to develop rich cognitive structures that can handle demanding real-lifesituations.
References
Csikszentmihalyi, M. (1990). Flow: The psychology of optimal experience. New York: Harper Perennial.
7/28/2019 Enhancing Student Learning by Incorporating Visualization and Navigation Tools
Hartley, J. (1996). Text Design. In D.H. Jonassen (Ed.), Handbook of research for educationalcommunications 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: EducationalTechnology.
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, 2 6(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 theWorld Wide Web. In Web-Based Instruction, Khan, Badrul H. (Ed), Educational TechnologyPublications, 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), PortDickson, Malaysia.
Windschitl, M.. (1998). The WWW and classroom research: What path should we take?Educational Researcher, 2 7(1), 28-33.
Yee, K. F. (1999). The Earth Movement Multimedia Courseware. Centre of InstructionalTechnlogy and Multimedia, USM.
Author’s Note: Dr. Toh Seong Chong is a lecturer at the Centre for Instructional Technologyand Multimedia, University of Science Malaysia. His research interests include InteractiveWeb-page Design, Multimedia Courseware Design and Rapid Prototyping of Courseware.For further details concerning this paper please contact: him at [email protected] or browsethe CITM Web-page URL http://www.ptpm.usm.my