Published for SITE 2000
by the Association for the Advancement of Computing in Education

Understanding Graphics for Effective Communication

Jerry P. Galloway
Associate Professor of Education
Coordinator of Computer Education
Indiana University Northwest
3400 Broadway - Gary, Indiana 46408


Abstract:  The use of graphics in screen design by students and teachers alike often fails to achieve real communication.  Today's authoring tools allow designers to randomly select and place graphic imagery virtually anywhere in presentations, tutorials, etc.  Some graphics are useful and important, others are basically neutral in their effect while others can detract or interfere with messages and ideas being presented.  It is important to better understand graphics and how graphics affect screen design in order to improve communication.  This paper reports recent research on teachers' use of graphics in HyperStudio screen displays.  Graphic displays are analyzed and the use and application of graphic imagery is categorized into discrete levels based on their level of communication.

Introduction

Advancements in computer graphics technology, especially hypermedia, are changing the language of visual communication and defining multidimensional communication models that require new perspectives in information design (Search, 1993).  Virtually any screen presentation is now considered passé poorly designed if lacking icons, graphics or other visual imagery.  Icons can be used to represent information, concepts and ideas (Borg & Staufenbiel, 1992) and linkages (hotspots) to other information sites. Graphic symbols may only decorate screen displays yet can be used to convey or identify information, summaries or overviews, supplying instructions, and indicate position, size, representation, and more (Pettersson, 1993).

It has been said that a picture is worth a thousand words.  In fact, graphics have been described as so information-rich that it is difficult to fully account for the content.  Structured or systematic classifications of the communication, information or effectiveness of graphics is even more difficult.  Tiemens (1993) provides seven categories to account for visual imagery: (a) duration, (b) transition, (c) framing, (d) view angle, (e) orientation, (f) motion, and (g) content.  While this classification system might be useful, Tiemens calls for the need to organize or classify the use and application of graphics and visual imagery to better analyze their value.  Communication value, the conveyance of ideas through visual representations, is difficult to analyze and catalog without rules and codes for the application of graphic imagery.  Misanchuk and Schwier (1995) further attest to the problem of lacking protocols for guiding the design of graphics and screen imagery for instructional purposes.

Graphics are among numerous important components of screen displays (Schaefermeyer, 1990) from text style to scrolling effects and graphic line design (Aspillaga, 1992).  Overall screen design and graphic appearance are also important variables in effective communication and user-interface for hypermedia of all types including web page design (Descy, 1995; Van Brakel, 1995).  Research has shown that computer screen displays can affect learning (Costello, 1995; Hathaway, 1984) and retention (Aspillaga, 1991).  Even the early years of computer technology in education called for software that would more fully utilize the visual versatility of the medium.  Graphics and graphic imagery do affect the learner's understanding of material and provide additional meaning to text displays.  But, the role that graphic symbols play in screen design of educational products should also account for the needs of specific audiences (Emery, 1993).

Graphic Appearance

Ready-to-use clip art is available in many software packages and respectable graphics are easily created with drawing tools available on virtually any machine.  Yet, graphics can be poorly applied and reduced to achieving a mere decoration or, in worse cases, even distraction from the primary content.  There is a need to actually think visually in spite of current limitations of the medium (Gibbs & Fewell, 1997).  Graphics can be abstract lines and figures, or pictures, logos, etc. any of may be intended as realistic or merely representational (Eugenio, 1994).

Philleo (1993) looked at using graphics on buttons and hotspots in HyperCard with middle school kids.  He looked at (a) graphic appearance, (b) user curiosity and attention to buttons with graphics, and (c) the relationship between graphic and content.  However, the research yielded no significant conclusions other than the general usefulness of the hyper- medium.  It left many questions yet to be explored.

Graphics can provide clues to trails and pathways through instructional hypermedia and help to structure the information presented.  Graphics may be considered in terms of their design and appearance as well as how well they may be understood (Kearsley, 1988).  The cognitive impact of icon design (Lee, 1996) addresses issues of color, size, placement and the inclusion of text in terms of how these elements actually affect understanding.  The complete setting, including the background, can affect the recognizability or retrievability (meaningful understanding) of graphic imagery (McNair, 1996).

While graphics can be analyzed intrinsically, it is a common concern of computerized presentations that graphics be considered in terms of the human-computer interface.  That is, looking at graphics beyond their mere physical characteristics and considering attention value versus learning and recall, the relationship between packaging and content, and therefore the overall effectiveness of communication (McFarland,1995).  Knupfer (1997) examined the use of graphics and icons in web page design as tools for communication, including aesthetics and functionality.  Educational and school web sites tended to use text rather than images to present information; sometimes overuse of backgrounds interfered with the overall message.  Non-educational sites were similar except that professionally developed commercial sites contained a greater use of animations and more sophisticated graphics

A system for understanding graphics in terms of their communication value is needed.  The study below outlines a structured approach in which graphic imagery is categorized into 6 levels of communication from meaningless abstractions to conveying conceptual relationships and compound notions.
 

The Study

The Course

In-service teachers (n=30) participated in a summer workshop on using HyperStudio.  While approximately three-quarters were beginners in using computers, all were new to using HyperStudio and hypermedia in general.  The teachers were to create three stacks (hypermedia presentations) during the 6 week course.  They were (a) a linear presentation, (b) a virtual tour, and (c) an instructional stack.  No specific topics were assigned and no specific parameters were assigned about the percentage of graphic imagery versus text in screen design.  The communication value of graphics with examples across all levels described below was presented as well as other communicative aspects of overall screen design.

The linear presentation project called for students to design a relatively brief presentation of 5 to 7 cards (hypermedia screen views) arranged linearly with no hyper-jumps included.  This “slide-show” concept was to be consistent with making a presentation to a passive audience in a lecture format.  The sophistication of screen design was completely up to the ingenuity of the teachers.  Other than small, one-card activities to review tool use and other functions, this was to be the first actual assignment to be completed early in the course.

The virtual tour project (second in the course) called for teachers to create a virtual world of some geographical spatial area that could be toured by the reader.  The virtual world was to provide information and a realistic sense of being in that place in terms of geographic locations (forward, back, left, right, in, out, etc.).  For example, one might enter the door of an art museum and walk through the rooms or halls to view the exhibits contained inside.  This project did not call for an animation component for creating the actual sensation of movement.  In other words, this was not to be a simulation of motion and travel.  It was instead to be an exploration or expedition through both a topic and a geographical space in which that topic might normally be found.  Another example, might be a walk along the boardwalk next to the beach.  One might move forward or back, left or right to move from one shop or attraction to the next.  Depending on the map or physical orientation involved, one might turn and see the beach as well.  The goal of their project was to present information about the sites, attractions and points of interest in that virtual area.  Whether that information was to be primarily graphic or textual was left to the teacher.

The instructional stack was intended as a self-guided tutorial or instructional presentation, but in any event, to serve in the process of teaching.  Too, it was not to be merely linear as in the first assignment and would thus need a multidirectional, hyper-linked layout.  This assignment was to be more substantial overall, communicate more and better than the first because this was their final work in the course.

Exclusions and Limitations

Many issues are faced in the development of effective screen display: too much or too little, black and white or color, clip-art or hand-drawn, scanned or downloaded, and more.  The term graphics is often used to refer to everything from buttons to full-motion video.  For this report, the term graphics is meant to include geometric shapes, clip art, drawn or imported images, including black and white, color and even animated graphic images.  Furthermore, the term “graphics” addresses generally discrete images as separate entities and thus ignores the potential of combining graphics into a composite or a choreographed symphony of interaction for a combination design or communication effect.  Sound, while often an issue in screen design, was not considered except to the extent that a graphic symbol or image may be associated with that sound.  Video per se is considered categorically separate from the graphics drawings, images, pictures and icons of this study.

Certainly there are different types of graphics.  The distinctions between object-oriented, vector or bit-mapped graphics is irrelevant in this study and more appropriately relates to how such graphics are created than the role they play in screen appearance.  Various methods of drawing and creating graphics have both merit and limitations depending on the application and one's personal skills.  Sources of graphic imagery are basically irrelevant in this study as the focus is instead on its use and on-screen role and communication value.  Distinctions between drawing original images versus using commercial clip-art or downloading imagery from the Internet also have no bearing on display uses and more appropriately relate to issues of availability, ease of acquisition and such.

This paper does not address the operational function of graphic images as programmed objects to perform tasks or as mapped hotspots to execute actions.  It is the role of the graphic object and its application to the screen design and communication value that is of interest here.  Certainly, programmed functionality can be applied, depending on the software used, to any graphic or portion of a graphic at virtually any level of screen application.  For example, a simple 3x5 card frame or picture frame line or image that might be used to contain text or another graphic image, low in communication value, can itself be programmed as a hot-spot in HyperStudio, in HTML Web-page programming and other software packages.  Also, an image of gears or pulleys for a display about industry (higher in communication value) might be programmed to execute specific actions, again depending on the software.  Nevertheless, the functionality is irrelevant to the role of the graphic design and communication value.  There are many important issues about programming functionality into hyper-media applications for graphics as well as text.  These issues are better left to another discussion and have little or no real bearing on the levels of graphic use outlined in this paper.

Graphic Communication System

The system involves six levels of use or application of graphic imagery in screen design and communication.  These levels represent a hierarchy of sophistication and complexity in the graphic's communication value in screen design.  These levels do not rate the sophistication or complexity of the graphic images themselves.  Graphics are identified and classified into one of the 6 levels with the notion that higher is better in terms of conveying and representing clear and useful ideas.

It may be that more complex graphic designs would serve better or might be more functional at any of the various levels to achieve the prescribed purpose while the role in communication remains the same.  For example, a simple black box frame (level 1) might be sufficient to delimit text from the surrounding screen area.  However, a box with gradient color and varied line thickness might somehow serve better in the aesthetics or general appeal of the screen appearance.  Another example, a simple, two-dimensional triangular shape (level 5) might be sufficient and effective in instruction, where as, a three-dimensional triangular object with shadow effects might be preferred.  In each case the use or application of the graphic object - the role the graphic image plays in the display - would be the same:  level 1 versus level 5.

The six levels are detailed below and include a description of examples to assist in evaluating screen designs.  Of course, different observers might interpret these descriptions differently.

Level - 1
Includes the most basic, abstract geometric shapes such as boxes, lines, circles, arrows, etc.  These graphics are used primarily to establish abstract separations, to delimit screen areas, to create borders, separate text, provide some color, etc.  These graphics have no particular appearance other than general geometric shapes and may often decorate screen appearance or focus attention on other screen components.

Level - 2
Includes shapes, clip art and images for purposes similar to level 1 above.  These graphics would more likely be specifically designed for the role they play in the screen design.  It may be that they're commercially designed (clip art) and thus, their quality may more clearly establish their role and purpose.  For example, a picture of a notebook, window or stage, courtyard or patio, etc., which might be used to delimit screen areas, to create borders, provide some color or provide on-screen containers for text or other material.

Level - 3
Includes shapes, clip art and images, drawn or commercial, provided for purposes of decorating the screen.  The decorative effect is likely limited to random, ambiguous or very general purposes.  For example, the inclusion of a smiley face, stick figure, a star or the sun, etc., all of which serve no specific communication purpose.

Level - 4
Again, this level includes shapes, clip art and images, drawn or commercial.  These graphics would be used to decorate a screen display consistent with or to establish a theme.  The primary difference from level 3 above is that these graphics seem to focus attention on a particular or specific idea and thereby serve to further that notion.  For example, an apple or school house on a screen for teachers, a car or stop light on screen for drivers, a compass or sextant on a screen about explorers, etc.

Level - 5
Again, this level includes Include shapes, clip art and images, drawn or commercial.  But, more than merely establishing a theme, these graphics tend to convey ideas and are often objects used in instruction.  That is, they may instruct or be referenced in instruction.  The images themselves are not mere decoration and are intended as the focus of the display.  For example, triangles referenced in instruction on geometry, a clock image for telling time, component parts for constructing machines, etc.

Level - 6
Again, this level includes Include shapes, clip art and images, drawn or commercial.  This highest form of graphic imagery is used to communicate specific and more complex ideas and concepts important in the communication.  The notion that a picture is worth a 1000 words.  Such graphics might include conceptual relationships conveyed in the imagery itself but somewhat more sophisticated than level 5 above.  For example, a turning earth used to illustrate planetary rotation, etc.
 

Results and Discussion

In general, most projects were under developed and involved fewer cards than expected.  Hand-drawn graphics were poor in appearance as skills with tools and mouse control were weak.  The virtual tour project was somewhat misunderstood and many of the instructional projects were little more than linear presentations and thus lacked sufficient multidirectional linkage.  However, these findings were incidental to the graphical classification system being employed in this study.

Graphics were tallied and classified while observing presentations of their completed projects.  Figure 1 illustrates that teachers make frequent use of simple shapes like lines and boxes in their screen displays an average of 4.31 times per student across their three projects.  This is an interesting comparison with the significantly less average of 1.31 occurrences of level 2 graphics, which can achieve a more or less similar purpose but at a higher quality.

Levels 3 and 4 proved to be the highest occurrences of 4.62 and 5.23 respectively indicating that graphic imagery was typically used for purposes of decorating the screen.  There seems to have been a balance between the general or random application of miscellaneous graphics and those used to emphasize or support a theme or topic.

Much more infrequent were level 5 graphics (2.92) that might have been referenced in instruction or been used to convey actual ideas.  Of course, at 0.28 level 6 graphics were practically nonexistent and the least used out of all categories.
 
As shown in Figure 2, the quantity of teachers who designed and used graphics of the various types (at least one instance across the three projects) is quite similar across the categories to the averages per student.  With 100 percent of the students using type 4 graphics they all thought in terms of using graphics to support a theme or topic.  Of course, a low 31 percent of teachers used any graphics that conveyed actual concepts and notions intrinsic to the graphic itself.  It is encouraging that 77 percent of teachers had at least one instance of level 5 graphics - imagery used to instruct or assist with instruction.
 

This study of course provides no standardization or inter-rater reliability and different observers might judge the same screen displays differently.  The judgments made in this study, while consistently applied from a single observer, are nevertheless subjective and debatable.  This largest form of graphic use from these teachers - levels 3 and 4, decorative graphics - is still considered weak in communication value.  Graphic use generally failed to make the shift to becoming functional tools of communication.

The notion that graphics can intrinsically convey complex notions and ideas seems lost on most amateur designers.   Teachers almost presume that the very purpose and intent of graphic imagery is merely to decorate in support of a general theme.  It may be that these teachers tend to seek a comfortable balance, a kind of moderation, between text and graphics without much effort toward communicating with graphics.  Text is readily available and easily applied to virtually any screen area and thus tends to become the preferred method of communicating ideas.  As most of these teachers were beginners with computing and hypermedia, a simpler explanation might simply be that their history of communication was predominantly words.

There are of course many interesting questions that can be examined using this categorization method.  For example, how do art teachers, who may be comfortable with and experienced in designing graphic and pictorial imagery, compare with language arts or literature teachers in designing hypermedia presentations?  Of course, it would be important to examine how teachers can be directed or influenced to think in terms of graphic communication.  Virtually any prompt or treatment can be examined with control groups using this system of classifying and understanding how graphics can be made to communicate ideas.
 

References

Aspillaga, M. (1991).  Screen Design: Location of Information and Its Effects on Learning.   Journal of Computer-Based Instruction; 18 (3), 89-92.

Aspillaga, M. (1992).  Implications of Screen Design upon Learning.  Journal of Educational Technology Systems, 20 (1) 53-58.

Borg, I.; & Staufenbiel, T. (1992).  The performance of snow flakes, suns, and factorial suns in the graphic representation of multivariate data.  Multivariate Behavioral Research, 27 (1), 43-55.

Costello, J. (1995). Interactive Multimedia Design: A Visual Approach.  Journal of Interactive Instruction Development, 8 (2), 3-7.

Descy, D. E. (1995).  Adding Graphics to Your WWW Page.  TechTrends, 40 (6), 9-11.

Emery, D, (1993).  Developing Effective Instructional Graphics.  Journal of Interactive Instruction Development, 6 (2), 20-24.

Eugenio, V. (1994).  Deciding between realistic and representational visual images: Findings from the literature.  Journal of Instruction Delivery Systems, 8 (4), p23-27.

Gibbs, W. J.; & Fewell, P. J. (1997).  Virtual courses and visual media.  In: VisionQuest: Journeys toward Visual Literacy. From the Annual Conference of the International Visual Literacy Association (Cheyenne, Wyoming, October, 1996).

Hathaway, M. D. (1984). Variables of Computer Screen Display and How They Affect Learning.  Educational Technology; 24 (1) 7-11.  In Proceedings of the 1997 National Convention of the Association for Educational Communications and Technology.  Albuquerque, NM, February 14-18, 1997  (see Eric Document I.D. #ED409846.)

Kearsley, Greg (1988). Authoring Considerations for Hypertext.  Educational Technology, 28 (11), 1-24.

Knupfer, N. N.  (1997). Visual aesthetics and functionality of web pages: Where is the design? In: Proceedings of the 1997 National Convention of the Association for Educational Communications and Technology, Albuquerque, NM, February 14-18, 1997. (see Eric Document I.D. # ED409846.)

Lee, S. C. (1996).  Perceptual considerations in icon design for instructional communication. Educational Technology, 36 (2) p58-60.

McFarland, R. D. (1995).  Ten design points for the human interface to instructional multimedia. T.H.E. Journal, 22 (7), p67-69.

McNair, J. R. (1996).  Computer icons and the art of memory.  Technical Communication Quarterly, 5 (1), p77-86.

Misanchuk, E. R.; & Schwier, R. A. (1995).  The mythology of colour in multimedia screen design: Art, science, and connoisseurship. Canadian Journal of Educational Communication, 24  (1), p3-26.

Pettersson, R. (1993).  Using digital image elements to produce schematic pictures.  In: Visual Literacy in the Digital Age.  From the Annual Conference of the International Visual Literacy Association (Rochester, New York, October 13-17, 1993).

Philleo, T. (1993).  Icon images in HyperCard: An exploration of visual concepts with middle school students.  In: Art, Science & Visual Literacy.  From the Annual Conference of the International Visual Literacy Association (Pittsburgh, PA, September 30-October 4, 1992).

Schaefermeyer, S. (1990). Standards for Instructional Computing Software Design and Development.  Educational Technology, 30 (6), 9-15.

Search, P. (1993).  Computer graphics: Changing the language of visual communication.  Journal of the Society for Technical Communication, 40 (4), p629-37.

Tiemens, R. K. (1993).  Analyzing the content of visual messages: Methodological considerations.  In: Verbo-Visual Literacy: Understanding and Applying New Educational Communication Media Technologies.  From the Symposium of the International Visual Literacy Association (Delphi, Greece, June 25-29, 1993).

Van Brakel, Pieter A.; And Others, (1995). Some guidelines for creating World Wide Web home page files.  Electronic Library, 13 (4), 383-388.


Contact Dr. Galloway at ......... info@jerrygalloway.com

EXIT