The design elements in developing effective learning and instructional web-sites.

Abstract

For nearly a decade, the Internet has been widely touted as the educational tool of the future wherein sophisticated educational web-sites would compete with, if not replace, the chalk and blackboard. Yet, web page design elements of color, text, illustrations and multimedia may not be effectively implemented to optimize online instructional environments that facilitate the learning process. Online materials should be presented in a manner so that they incorporate not only different learning modalities but are capable of reducing cognitive load, increasing retention and problem-solving transfer, facilitating the process of building internal and external connections among and between information while meeting educational objectives. As a result, meaningful student learning may be dramatically enhanced as a result of vigilantly employing state-of-the-art design techniques, which reduce cognitive load. After examination of the current research in this area, recommendations are made for more innovative use of color, text, illustrations and multimedia when designing and building web-sites for online instruction.

**********

Overview of Web-Based Learning

Education is currently facing a paradigm shift in how it delivers instruction to learners. This shift is increasingly away from traditional classroom instruction to cyber-classroom learning environments in which learners and instructors are often geographically separated from one another. Helping to induce this paradigm shift is the rapid and continued development of the Internet and World Wide Web (WWW), or what is commonly referred to as "the web". This is providing educators with new and exciting opportunities for delivering effective instruction revolutionizing the way the learning process is being facilitated and enhanced. The web is ideally suited as a vehicle to deliver education since it incorporates constructivist principles, which engage learners in authentic activities for seeking and creating their own knowledge. This teaching strategy employs learner-directed problem solving strategies that can be used to sharpen critical thinking skills of students. Moreover, the web can add a dynamic richness to the curriculum that is virtually impossible to incorporate with conventional educational methods (Starr, 1997).

Truly, the web has the potential to become a tremendous learning resource on which instructional designers expect to capitalize on in order to deliver large amounts of information in a student-centered, non-linear manner while allowing for multiple alternative inputs from online classmates as well as from classroom and/or distant instructors. Furthermore, properly designed and constructed learning and instruction websites have the power to provide interactivity between teacher and learner, to afford the learner control of the information he or she processes, and to give and receive feedback about the knowledge being constructed. These enhanced learning opportunities apparently are all too often missing from traditional classroom settings. However, these learning characteristics can also be absent from poorly, carelessly designed and constructed instructional web-sites which fail to incorporate reliable design concepts (El-Tigi & Branch, 1997).

There are several key features of the web that are unique in delivering materials to facilitate the learning process. The first of these is the web's ability to use hypertext links, which provide swift navigation and the simplest form of learner interaction, enabling learner-centered control of information. This feature enables the web-site designer to create multiple links independent of a rigid hierarchical structure allowing the learner to seek immediate elaboration of hyper-linked words or images, to choose which topic to view, or to follow individualized, non-linear pathways through the learning materials.

The second, and perhaps the most important feature of using the web for instruction, is its increasing ability to incorporate multi-media learning. In multi-media learning, students are able to receive instructional materials and/or information in more than one presentation mode. For example, it employs combinations of images, text, sounds, and/or animations, which can be either static or interactive (Mayer, 1997). Current technologies permit instructional designers and educators to incorporate audio, video, and animation into distance learning courses and deliver these courses to multiple geographically dispersed students via the web.

A third educational feature of the web is its ability to support high levels of learner interactivity. This inter-activity goes beyond static web pages and page linking, to true interactive pages involving the exchange of information between the user and the server. With this feature included in instructional web-sites, students will have the ability to implement searches for key information relevant to their particular learning needs, take online self-assessments with immediate feedback to gauge their progress, and use learning simulations in which the student learning is guided through the use of intelligent agents (Ritchie & Hoffman, 1997).

In addition to the web's key features, which add to its educational value, additional attributes also make it an attractive medium for the development of learning and instruction sites. One benefit, not to be taken lightly, is that cross-platform distribution characteristics of the web insure that designers no longer need to be concerned with producing separate versions of the same material for different computing platforms such as Macintosh and Windows. Web pages written in Hypertext Markup Language (HTML) or with any of the other new languages such as Extensible Markup Language (XML) and Java are all platform neutral allowing them to be nm on any operating system. In addition, the two main graphical browsers, Interact Explorer and Netscape Navigator, provide an intuitive, user-friendly interface that learners can master quickly.

The web also allows for seamless integration of learning materials via hyperlinks from many different sites around the world. For example, lesson one on quantum physics may be located on a server at a university in California, while lesson two on this same topic could be located half a world away at a site in Germany. This feature can enlist participation by geographically distant faculty members who are experts in specific fields, so that rich, interdisciplinary instructional materials can be more effectively constructed.

And lastly, the web allows for quick and easy revision and additions of new learning materials. New information and current research findings on a topic can be now be formatted and uploaded with minimal effort, producing instructional materials that may be years ahead of a textbook on currency of information, thus keeping students apprised of the latest information and trends (Nash & Dougherty, 1999).

The problem with using the web to deliver learning and instructional materials is that, all too often, these sites are constructed without designers giving any consideration to the proper use of design elements such as color, text, illustrations and multimedia that are based on dependable conceptual frameworks. Unfortunately, the current mindset in many educational institutions is to rush to host poorly designed web-sites, which instead of enhancing the learning process may, in fact, actually impede student learning.

Effective Uses of Color

Humans' perception of color is the result of many factors: an object's capacity to reflect and absorb certain wavelengths of light, the characteristics of the light source illuminating the object, the medium through 'which the light travels, the physiological state of the eyes of the observer, the properties of surrounding object which may alter light reaching the object and the person's previous experience with the object or its colon (Murch, 1983). Therefore, instructional web-site designers can only specify what colors the monitor should display, but because of the intervening factors between the display and perception of color, the designer cannot completely control what colon the student actually sees while viewing the online instructional material through a computer monitor (Hartley, 1999).

Using a percentage mix of red, green and blue phosphors (RGB) produces colon on a computer screen. Humans, on the other hand, refer to color by three different interrelated components: hue, saturation, and lightness. For example when someone describes something as "dark blue" they are simultaneously using hue, saturation, and lightness in description of that object. Thus, it is not only important for the instructional web-site designer to understand how a computer monitor produces colors in the unfamiliar additive RGB system but also how they are perceived when viewing a color with hue, saturation, and lightness. This design gap is bridged by most common current computer monitors, such as those for the PC and MAC, by the use of an easily accessible interface allowing the designer to manipulate controls for hue, saturation, and lightness directly and interactively (Boerner, Boerner, McGill, Skalnik & Verdugo, 2000).

Using Color to Enhance Learning

No doubt, color can effectively enhance the learning process. One of color's chief attributes is its ability to make text and images stand out and to promptly draw the learners attention to them (Tufte, 1990). On web pages, using small spots of intense, saturated color can effectively transmit information by making it stand out from the rest of the page. However, using color to highlight important information doesn't necessarily have to correspond to colon of objects in the real world. For example, using bright red to show the correct position of a hand on a piece of equipment isn't implying that the hand is truly red, but rather the color in this case, is used to draw the attention of the learner to proper hand positions on that particular piece of equipment.

Color-coding is frequently used in the instructional process and can assist the learner in focusing on essential learning cues. Color, when used as an organizational and differentiating factor, helps learners recall and retrieve information more readily (Durrett & Stimmel, 1987). A simple way to use color-coding is for categorizing information. For example, two categorizes of colon may be used to differentiate between planes on an air traffic display screen, where one color is used to designate planes at high altitude and another, for planes at a low altitude. Research has shown that in order for effective learning to take place, the optimal number of colon used to differentiate material should kept to a minimum often or less (Milheim & Lavix, 1992).

A designer must keep in mind that cognitive ability is limited because of the limitations of working memory. For instance, Keyes (1993) theorized that we could use color in instructional materials to decrease the learner's cognitive load. Cognitive load can be defined as the mental requirements of a task or the expanded mental effort of the learner. Color works to decrease cognitive load by creating a visual layer separate from monochromatic typographic and spatial cues. Because color is perceived automatically, less cognitive processing effort is required, thus the learner can assimilate more information.

Cognitive load is also closely tied to color-coding. Certain colors denote specific associations and meanings that users don't have to learn, thus leaving that space free in memory to absorb additional information. In support of this idea, Brusilovsky, Schwarz, and Weber (1997) use color to support student navigation through course material, which they call "adaptive annotation". This means that certain visual cues such as icons, fonts and color are employed to convey the type and educational state of each link. The visual metaphor of traffic light colors which students automatically associate with specific, preconceived meanings can be used: red indicates not ready to be learned, green connotes ready for the learning goals, and yellow means ready but not recommended. Accordingly, web-site designers should strive to incorporate similar types of color associations into their instructional web-sites in order to decrease student cognitive load.

Restrictions Associated with Color Usage

As with any design element such as color, there are certain potential problems associated with its use of which instructional designers should be aware. Instructional web-sites are now able to reach globally ethnic and diverse student populations in which colors have different connotations and associated meanings. For example, in Japan, green implies youth and energy, while in France it connotes criminality. In Euro-centric cultures, yellow can mean either caution or cowardice, while in Egypt it signifies happiness and prosperity. In Korea, a name inked in red is used only in reference to the deceased. One solution to this problem would involve the designer knowing his or her intended audience while conducting prototyping and user-acceptance tests within the target population. However, a more global approach would entail using international color standards for a particular field as developed by the International Standards Organization (ISO). Another possible solution would be to develop a subset of colors best used across cultures keeping in mind the negative color connotations within specific cultures.

Using color in learning and instructional web-sites may also result in a "too much of a good thing" problem. Computers now offer designers millions of different colors to choose from resulting in the tendency of some designers to overdo their use of them. This overuse of color can be distracting and irritating to the learner and has been shown to degrade performance on memory and recognition tasks. Solutions include the adequate use of white spaces to allow the eyes to rest, and the consistent use of colors throughout the entire website.

As an example, whenever the user is presented with a navigation menu within the site, each menu item is rendered in its own unique color. This color is then kept consistent throughout subsequent screens within that particular menu choice.

Text and Illustrations

For the past 20 years, Mayer, an expert in the field of human learning and memory, has conducted numerous research studies which examined how and why meaningful learning takes place. Though originally not conducted with web-based learning environments, Mayer's research, in the use of text and illustrations, can be applied to designing effective learning and instructional web-sites.

Mayer's (1993) cognitive model of learning from text and pictures is composed of six different components: text, illustrations, learners, processes, outcomes and performances.

There are four cognitive processes relevant to this model of learning from text and illustrations: selecting - paying attention to relevant pieces of information in the instructional materials, organizing - building internal connections and logical links between pieces of information, integrating - building external connections between the incoming information and knowledge already in long-term memory, and encoding - placing knowledge constructed in short-term into long-term memory for permanent storage. Encoding is a necessary step for long-term storage of material that can be retrieved for problem solving tasks.

Text consists of three different types: narrative text that tells a story, descriptive text presents the facts and explanative text explains how something works. For example, text relating how lungs work is a narration; a text that describes the characteristics of lung components is a description; a text that systematically describes the series of changes within the lung during the process of inhalation and exhalation is an explanation.

Illustrations according to this cognitive approach to learning are of four types: decorative, representational, organizational and explanative. Accordingly each type of illustration elicits a different cognitive process. Decorative illustrations are images that are not directly relevant to the text and do not enhance the message of the text, thus they do not affect the readers cognitive processing of the text. These types of illustrations simply fill in space on a textbook page or on the computer screen, and would not instruct because it would neither guide the reader's attention towards conceptual information nor help the reader make useful connections (Mayer, 1993).

Representational illustrations portray a single element mentioned in the text, and serve to direct the reader's attention to it. In most cases, these illustrations are unlabeled images within the learning material. They only affect the cognitive process of selecting.

Organizational illustrations depict the structural relations among two or more elements and help to guide the reader's attention to them. They assist the student in building internal connections among the different elements. Ideally these illustrations should employ three common structures: a map that shows the part-whole relations among the elements, a matrix that shows the feature values of two or more items, and a tree diagram that shows the set-subset relations among the elements. Organizational illustrations affect the cognitive processes of selecting and organizing (Mayer, 1993).

Explanative illustrations are used to explain how systems or processes work by showing the principle-based relations among state changes in major elements within the system as a whole. A principle-based relation is a specific cause-and-effect connection between two events. To illustrate, imagine the movement of the diaphragm as it draws air into the lungs on inspiration, which in turn can be explained by a more general physics rule in which air moves from an area of higher pressure to an area of lower pressure. Research studies in text-based instruction show that explanative illustrations can significantly improve learning for three reasons: 1. They affect each of the basic cognitive processes required for meaningful learning, 2. They have proven in controlled experiments that they increase conceptual recall and transfer by more than 50%, and 3. They are underutilized in current textbooks leaving room for improvement (Mayer & Gallini, 1990).

Uses of Text, Illustrations and Multimedia

While the proper use of color, text and illustrations is essential for creating well-developed materials, the web offers another dimension for encoding information which is not found in texts. The web can now provide the users with multimedia presentations that incorporate text, illustrations, sound and animation capabilities.

It is a commonly accepted notion that working memory is sensory based, in that working memory has both visual and auditory registers, and both are used concurrently to input information. Color, text and illustrations are all visual input modalities, and although they can be used in conjunction to lower cognitive load, solely depending on their use may not optimize working memory. However, when they are used simultaneously, a few key design principles should be adopted.

Illustrations are best used when element interactivity is high and information must be processed simultaneously rather than serially, whereas text is fine when the interactivity between elements is low and the information can be processed serially (Marcus, Cooper, & Sweller, 1996). However, illustrations without text, and text without illustrations have been shown to be less effective than their concurrent use. In a study by Mayer (1993) and a later study by Chandler and Sweller (1991), it has been shown that labeled diagrams are superior to the use of either text or illustrations separately. In another study by Mayer and Anderson (1991), it was shown that visual information, both in pictorial and textual forms, was most effective when used together for explanative data. Chandler and Sweller have also shown that text must be placed in close proximity to the pictures so that cognitive load is reduced from eye movements trying to input both concurrently. This is known as the "split-attention" effect. If the split-attention effect occurs when students take in information, then the students' cognitive load increases. Therefore, combining text and graphics close together will keep the students from over-whelming their input capacities.

The latest addition to the web is multimedia that has the capability to add the aural dimension to lessons which may utilize both visual and aural short-term memory registers simultaneously, so that maximum storage capacity in working memory can be efficiently activated. In fact, much of the research in multimedia using both visual and aural information has focused on this very premise. In a study by Mousravi, Low and Sweller (1995), they found that the content of a lesson may be best remembered visually or aurally depending on the type of information to be encoded. In other words, the context and type of information dictated which type of encoding would be superior: aural or visual. Further, they demonstrated that using both modalities was superior to using a single modality in their experiments with geometry students.

Several studies have indicated that well-designed multimedia modules are superior as they offer the capability to utilize concurrent visual and textual lessons with voice which provides the bridge to linking complex elements. Additionally, results of recent studies also indicate that it is best to use both visual and verbal presentation of information concurrently. However, although it is best to present visual and verbal information concurrently, it may not always be necessary. What is essential, is that both types of information are held in their respective visual and verbal registers concurrently in working memory together i.e., cognitive contiguity. This was shown to happen only if the chunks of information are small enough not to overload the learner's working memories. In short, small sequential bite sizes of visual and verbal inputs were shown to be as effective as their concurrent presentation in instruction. Therefore, designers must remember that presenting small manageable amounts of information in both modalifies is better than exposing the learner to large amounts of information of either separately. Using animation, Mayer and Anderson (1991) found similar results indicating that it is superior to hold small amounts of information in both registers at the same time. Students exposed to animation with concurrent voice instruction outscored the group receiving fairly large sequences of verbal instruction followed by a sequence of animated instruction.

Animation is the latest addition to web-based learning and may be seen by many as not only the latest, but also perhaps the greatest tool for learning. Although it has its merits, it may also have some limitations. In the same study by Mayer and Anderson, it has been shown that animation provides a great learning enhancement as the animation group outscored the verbal-only group. However, the group receiving input from animation modules without verbal input received lower scores than the animation with voice group. In fact, Mayer and Anderson predict that in some cases, animations without sound may be as ineffective as no instruction at all. Essentially, their study showed that while animations may be engaging, they are meaningless to students who cannot determine what the elements and actions used in them are intended to convey. The students must not simply receive input in visual and textual form, but they must understand their referential connections. Speech, if used properly, can help integrate the textual and visual information if speech is used to tie them together. In summary, multimedia offers a new addition of voice to learning materials that may be a necessary dimension for learning complex, interrelated knowledge.

Summary

While well-designed materials, and the use of sound learning models involving taxonomic organization, sequencing and chunking are not explicitly covered in this paper, it must be emphasized that the proper use of color, text and illustrations cannot effectively enhance poorly designed modules. Therefore, it is best that the designer also be conversant in development of lesson design as well as experienced in the cognitive loads required in the placement and use of color, text, illustrations, and multimedia.

Obviously, there exists among learners a lack of equanimity which may vary by age, previous experience, and level of education. Therefore, to determine if the intended population of users actually is obtaining maximal benefits from the materials, prototyping of the learning modules should be employed. In industry, prototyping has been used successfully to create products which deliver user-centered software while reducing the number of costly redesigns (Laudon & Laudon, 2000). However, before prototyping is employed, there are several basic design considerations which should be adopted before the preliminary versions of educational modules are coded. A subset of these design factors which are covered in this paper to reduce cognitive load and optimize working memory are summarized below:

Color

   * On web pages, using small spots of intense, saturated color can
   effectively transmit information by making it standout from the rest of the
   page by drawing the learner's attention to it and emphasizing it as
   important.

   * Color-coding is frequently used in the instructional process and can
   assist the learner in focusing on essential learning cues. Color, when used
   as an organizational and differentiating factor, helps learners recall and
   retrieve information more readily.

   * Certain colors denote specific associations and meanings that users don't
   have to learn, thus leaving that space free in memory to absorb more
   information.

Illustrations

   * Text, color, bullets, icons and fonts can be utilized to have certain
   pre-designated meanings, thus reducing cognitive load.

   * Representational illustrations portray a single element mentioned in the
   text, and serve to direct the reader's attention to it.

   * Organizational illustrations can depict the structural relations among
   two or more elements and help to guide the reader's attention to them. They
   assist the student in building internal connections among the different
   elements. Ideally, these illustrations utilize three common structures: a
   map that shows the part-whole relations among the elements, a matrix that
   shows the feature values of two or more items, and a tree that shows the
   set-subset relations among the elements. For example, advance organizers
   have been proven to be an effective method in providing a schema for
   incorporating new knowledge.

   * Explanative illustrations can significantly improve learning for two
   reasons: First, they affect each of the basic cognitive processes required
   for meaningful learning. Second, they have proven in controlled experiments
   that they increase conceptual recall and transfer by more than 50%.

Multimedia

   * Combine text and illustrations in close proximity.

   * It is maximal to presented information both aurally and visually if the
   information is complex and inter-related.

   * Use multimedia when it is warranted, and include voice and visuals in
   small chunks, especially if the concepts to be taught are complex.

In essence, when designing instructional web-sites, encoding of information is of utmost importance and unfortunately, often presents a major obstacle in learning environments. For maximum transfer to take place from short to long term memory, the instructional designer must pay careful attention to the storage of information into the limited domain of short-term memory. If the short-term memory is overwhelmed, long term storage will never occur. Therefore, cognitive load factors must be accounted for in design of materials.

References

Boerner, G. L., Boerner, G. L., McGill, D., Skalnik, P., & Verdugo, P., (2000). Elements of effective web pages. Syllabus, 13 (8), 42-46.

Brusilovsky, P., Schwarz, E., & Weber, G., (1997). Electronic textbooks on the World Wide Web: From static hypertext to interactivity and adaptively. In B.H. Khan (Ed.), Web-based Instruction (pp. 255-261). Englewood Cliffs, NJ: Educational Technology Publications.

Chandler, P. & Sweller, J., (1991). Cognitive load theory and the format of instruction. Cognition and Instruction, 8 (4), 293 - 332.

Durrett, J. & Stimmel, D. T., (1987). Color and the instructional use of the computer. In H. J. Durrett (Ed.), Color and the Computer (pp. 241-253). Orlando, FL: Academic Press.

El-Tigi, M. & Branch, R. M., (1997). Designing for interaction, learner control, and feedback during web-based learning. Educational Technology, 37 (3), 23-29.

Hartley, K. W., (1999). Media overload in instructional web pages and the impact on learning. Educational Media International, 36 (2). 145 - 150.

Keyes, E., (1993). Typography, color and information structure. Technical Communications: Journal of the Society for Technical Communication, 4, 638 - 654.

Laudon, K.C. & Laudon, J.P. (2000). Management Information Systems --Organization and Technology in the Networked Enterprise (p. 373). Upper Saddle River, NJ. Prentice Hall.

Marcus, N., Cooper, M., & Sweller, J. (1996). Understanding instructions. Journal of Educational Psychology 88(1), 49-63.

Mayer, R. E., (1989). Systematic thinking fostered by illustrations in scientific text. Journal of Educational Psychology, 81 (2), 240-246.

Mayer, R. E., & Galllini, J., (1990). When is an illustration worth ten thousand words? Journal of Educational Psychology, 82 (4), 715-726.

Mayer, R. E., & Anderson, R. B., (1991). Animations need narrations: An experimental test of a dual-coding hypothesis. Journal of Educational Psychology 83(4), 484-490.

Mayer, R. E., (1993). Illustrations that instruct. In R. Glaser (Ed.), Advances in Instructional Psychology (pp. 253-282). Hillsdale, NJ: Erlbaum.

Mayer, R. E., 1997. Multimedia learning: Are we asking the right questions? Educational Psychologist, 32 (1), 1-19.

Mousravi, S., Low, R. & Sweller, J. (1995). Reducing cognitive load by mixing auditory and visual presentation modes. Journal of Educational Psychology, 87(2), 319-334.

Murch, G. M., 1983. Perceptual considerations of color. Computer Graphics World, 6 (7), 32-40.

Ritchie, D. C. & Hoffman, B., (1997). Incorporating instructional design principles with the World Wide Web. In B. H. Khan (Ed.), Web-based Instruction (pp. 135-138). Englewood Cliffs, NJ: Educational Technology Publications.

Starr, R. M., 1997. Delivering instruction on the World Wide Web: Overview and basic design principles. Educational Technology, 37 (3), 7-14.

Tufte, E. R., (1990). Envisioning information. Cheshire, CT: Graphics Press.

Ms. Vogt is a doctoral student at the Rossier School of Education. She is founder of Genderwatchers, an organization devoted to the advancement of women and girls. Mr. Kumrow, Assistant Professor, is a doctoral student at the University of Southern California's Rossier School of Education. Dr. Kazlauskas, Professor, teaches at USC. His research and service include instructional use of computers, information and information systems, technology and facility planning, administrative computing, and training design.