Design Theory Site Design Page Design MultiMedia: Using Graphics & Pictures Teacher Resources Table of Contents Home Page Copyright © 1999 by Bonnie Skaalid

Research into static and dynamic illustrations in text and computer based instruction may give some guidelines as to how graphics are used and when they are useful or distracting in web design [1, 4]. Functions of Graphics in Instruction Levie and Lentz [4] identified four functions for graphics: attentional - pictures or graphics attract attention to the material or direct attention within the material - hopefully using graphics in this way will heighten the likelihood that a user will remember the material. affective - pictures enhance enjoyment or affect emotions and attitudes (Kitty's PageWorks is a great example of this category) cognitive - the cognitive use of graphics involves using pictures to increase comprehension (for example, providing elaboration for a text explanation), to improve recollection and retention, or to provide information that is not otherwise available (Here's a section from the cellsalive.com website - Enhancing the Microscope Image which really uses graphics effectively to elaborate on text points) compensatory - the compensatory use of pictures involves helping poor readers by adding pictorial clues to decode text (Pie, Patience and Robert's Great Ideas is a story which uses graphics to illustrate the main events of the story) Proper Use of Graphics Anglin, Towers, and Levie [1] looked at the research on the use of graphics and pictures in text instruction and reached the following conclusions: static visual illustrations can facilitate the acquisition of knowledge when they are presented with text materials. However, the facilitative effects of illustrations are not present across all learning situations.... illustrated visuals used in the context of learning to read are not very helpful illustrated visuals that contain text-redundant information can facilitate learning illustrated visuals that are not text-redundant neither help nor hinder learning illustration variables (cueing) such as size, page position, style, color, and degree of realism may direct attention but may not act as a significant aid in learning there is a curvilinear relationship between the degree of realism in illustrations and the subsequent learning that takes place (p. 766) Misanchuk, Schwier & Boling [6] suggest that there are various issues which need to be addressed in considering how to use graphics or whether to use graphics at all. These issues include: Germaneness - Germaneness means that a picture is not only relevant to the discussion, but essential. It cannot be removed without harming comprehension. Realism - although it would seem evident that high quality, realistic pictures would be most effective, research has not verified this understanding. In many instances, "the detail of a photograph may also overwhelm the learner with irrelevant information so that instructionally salient features are difficult to discern" [Lowe, (1995) p. 294, as cited in 6]. In many instances, simplified drawings will prove better instructional aids since they focus attention on the salient points under construction. [3] Complexity/Simplicity - "The general rule of thumb is to use graphics that are as simple as possible. Complexity should be added only where absolutely required." [6] Size - Reeves and Nass [7] discovered that larger pictures caused more arousal, were better remembered and were better liked than smaller ones. Since larger pictures are more memorable, it would seem important to include the largest pictures you could possibly use on your page. As Misanchuk et al. (in press) point out, however, the larger the picture, the longer the download time and the more likelihood that your user will become frustrated and leave your site. It is necessary to balance the need to have a graphic which is large enough to be comprehensible with the need to have the page download quickly before users move on. It is also important that you design graphics which are not too large for the user's screen. Lynch and Horton [5] have included recommendations for maximum width which would be viewable across platforms. Cultural factors - Since it is possible that users from other cultures will be viewing our sites, it is important that care is taken to ensure that the use of certain colors or graphics does not offend users from other cultures. Horton [2] gives recommendations about using graphics in culturally sensitive ways. They conclude: Visuals that complement the text information being presented increase the likelihood for retention of that information, but visuals which are not related to the text have no effect on retention. When bandwidth is a problem, gratuitous visuals would seem to be unnecessary in page design. [6] [1] Anglin, G., Towers, R., & Levie, H. (1996). Visual message design and learning: The role of static and dynamic illustrations. In D.H. Jonassen (Ed.), Handbook of Research for Educational Communications and Technology . New York: Simon and Schuster Macmillan. [2] Horton, W. (1993). The almost universal language: Graphics for international documents. Technical Communication, 40(4), 682-693. [3] Houseman, J. (1997). If you build it will they come: or, do you have to give a mark for it? Paper presented at the Association for Media and Technology in Education in Canada , Saskatoon, SK., June, 1997. [4] Levie, W.H. & Lentz, R. (1982). Effects of text illustrations: A review of research. Educational Communications and Technology Journal, 30 (4), 195-232. [5] Lynch, P. & Horton, S. (1997). Web style manual, 2nd ed. Yale Center for Advanced Instructional Media. [Online]. Available: http://info.med.yale.edu/caim/manual/contents.html [6] Misanchuk, E., Schwier, R. & Boling, E. (in press). Visual design for instructional multimedia. [7] Reeves, B. & Nass, C. (1996). The media equation: How people treat computers, television, and new media like real people and places. New York, NY: Cambridge University Press. Media:[Multimedia Research] [Using Graphics and Pictures] [Animation] [Video] [Audio] [Response Times] Main Level: [Home Page] [Design Theory][Site Design] [Page Design] [MultiMedia] [Teacher Resources] [Table of Contents]