Effects of Violating Screen Design Principles of Balance, Unity and Focus on Recall Learning, Study Time and Completion Rates
Michael Szabo, Ph. D. and Heather Kanuka
Faculty of Education, University of Alberta
Edmonton, AB Canada
Tel: (403) 492-3667 X 225/(403)492-7625
e-mail: <mike.szabo@ualberta.ca>/heather.kanuka@ualberta.ca
Abstract: The purpose of this study was to determine if artistic screens (screens that employ accepted principles of design) influence achievement, completion rates or time spent during the learning process. The dependent variables for this study were a 36 item multiple choice post test, completion time and completion rate. Fifty-two adult subjects from a research university in Western Canada participated in this study. Comparisons of the two groups showed that there was no difference in achievement scores between subjects who used the lesson with good design principles and those who used the lesson with poor design principles. Subjects who used the lesson with good design principles completed the lesson in less time (21%) and had a higher completion rate (74% vs. 45%) than those who used the lesson with poor design principles. There was no significant difference in recall on the post test or mean time to complete based on gender within group one. Possible explanations focused on automaticity of control processes while learning and complexity of cognitive processing as a function of complexity of visuals.
1. Introduction
Heines [1984] claims a poorly designed computer screen can hinder communication. Can a visually pleasing computer screen enhance communication and learning? Much of the literature in computer based instruction offers guidelines based on the empirical research available regarding the use of text, color and graphics [Aspillaga, 1991; Baek & Layne, 1988; Duin, 1988; Heines, 1984; Rubens & Krull, 1985; Soulier, 1988; Steinberg, 1991; Szabo & Poohkay, 1995] and includes such areas as: text density, text size, line length, margins, columns, location of information, color choices and the use of graphics (in motion or static). If a visually pleasing screen is important, as much of the literature states [Misanchuk & Schwier, 1995; Yang and Moore, 1996], why are there not similar guidelines based on empirical research on how to design a computer screen that is visually pleasing?
One reason for the lack of information about how to create a visually pleasing screen is that many of us believe this aspect of computer design falls into an area where we must use "judgment, common sense, and a refined connoisseurial sensitivity" [Misanchuk & Schwier, 1995, p. 20]; or put another way, this area of computer screen design is soft information and cannot be empirically tested.
In regard to this assumption, the principles of design (unity, focal point, balance) are most often used to create visually pleasing images and can be empirically tested. Generally, when designing a visual image that is pleasing, the principles of design are used; not, as Misanchuk & Schwier [1995] claim, "judgment, common sense, and a refined connoisseurial sensitivity" (p. 20).
The goals of the graphic designer and the goals of the instructional technologist both have much in common, including (1) attracting and holding the viewer's attention, and (2) communicating information which aims to have the viewer remember the information. To achieve these goals, most graphic designers use the principles of design. Is it possible for instructional technologists to apply these same design principles to achieve the same goals?
Creators of mediated instruction tend to use one of three developmental philosophies [Bunderson, 1981]; logical (plan carefully using the best available knowledge and execute once), empirical (develop quickly in a lean format and iteratively test and revise), or artistic (create an outstanding graphic design of work of art). Guidelines and suggestions how to implement the artistic approach abound. We were unable, however, to find any studies which attempted to quantify relationships between the artistic aspects of instruction and measurable student performance outcomes. If instructional technologists apply these design principles to computer screen layouts, how might this influence achievement, completion rate, and time?
2. Literature Review
2.1 Visual Cognition
Visual cognition is the process of how we perceive and remember visual information [Pinker in Rieber & Kini, 1991]. Research has confirmed that we seem to be exceptionally good visual learners [Kobayashi, 1986] and that visuals enhance the leaning process [Adams & Hamm, 1989; Dwyer, 1987; Duin, 1988; Soulier, 1988]. A reasonable question to ask next is, why? Steinberg [1991] suggests there are two different theories about how information is stored in our memory. One of these theories provides an explanation of why we remember information better when it is presented with a visual image.
The first theory proposes that information is stored in our memory, based on its meaning, in complete and logical statements. This is referred as propositions or propositional forms [Steinberg, 1991; Pylyshyn in Rieber & Kini, 1991]. According to this view, "pictures are stored in memory in terms of their meanings rather than as images" [Steinberg, 1991, p. 145]. This view does not provide an explanation of why visual images enhance the learning process.
The second theory suggests that we store words and visual images in two systems: one verbal and the other perceptual [Steinberg, 1991]. This is referred to as the dual coding theory [Paivio in Steinberg, 1991]. In this theory, it is believed that visual perception is different from verbal perception. Perception, according to Levie [1987], is the process of selectively attending to and scanning a stimulus, interpreting important details and perceiving meaning [Steinberg, 1991]. According to this theory, visuals are remembered better than words because visuals are more likely to be encoded redundantly than words. Thus, the likelihood of recall is extended due to the accessibility of two mental representations instead of just one. If one memory trace is absent (whether a visual or words), the other remains accessible [Rieber & Kini, 1991]. When the content is highly imageable, dual-coding is more likely to occur [Paivio & Caspo in Rieber & Kini, 1991].
The dual coding theory, then, may explain why the use of visuals enhances the learning process although it has been strongly criticized: "Above all, representatives of research in artificial intelligence maintain that all of our knowledge is stored in a unique memory system in a prepositional format independently of whether it was decoded as linguistic or visual information" [Molitor, Ballstaedt & Mandl in Mandl & Levin, 1989, p. 7]. If one postulates that information from different media is stored separately, one would expect that cues to access the information be medium dependent. That has never been confirmed, however" [Baggett & Ehrenfeucht, cited in Mandl & Levin, 1989, pp. 105-106].
2.2 Visual Literacy
In general terms, visual literacy is an acquired competency in visual expression and communication that involves, according to Thiel [1981], "insights and skills no less disciplined than those required for proficiency in engineering and construction" (p. 12). When the multimedia designers are visually literate, multimedia learners are capable of making better choices and are more capable at gathering information from environments which are text and visually rich [Peterson, 1996]. Thus, as we move into this age of visual multimedia there is a need for us to practice more enlightened visual literacy and this calls for the use of the design principles (e.g., unity, focal point and balance) [Graves, 1941; Lauer, 1979; Greenberg & Jordan, 1991]. This is not to say, however, that every good visual design needs every design principle; but when the designer is striving for a technically good design, the use of design principles produces a visual image which is that much better. The design principles investigated in the present study are described below.
2.3 Design Principles
2.3.1 Unity/Focal Point
"Unity implies that a congruity or agreement exits among the elements in a design; they look as though they belong together, as though there is some visual connection beyond mere chance that has caused them to come together. Another term for the same idea is harmony. If they appear separate and/or unrelated, your pattern falls apart and lacks unity" [Lauer, 1979, p. 2].
Creating unity is, according to Lauer [1979], a relatively easy task; it is already in our nature to seek organization or to make sense of things. A critical consideration of visual unity is that the whole must dominate over the parts; the viewer must first perceive the entire design prior to observing the individual elements [Lauer, 1979; Taylor, 1981; Graves, 1941; Greenberg & Jordan, 1991]. It is also important not to confuse visual unity with intellectual unity: "Visual unity denotes some harmony or agreement between the items that is apparent to the eye ... A conceptual unity is not observable by the eye. A unifying idea will not necessarily produce a unified pattern" [Lauer, 1979, p. 4]. There are several ways to achieve unity, such as proximity, repetition and continuation [Graves, 1941; Lauer, 1979].
2.3.2 Focal Point (Dominance or Emphasis)
"The designer's main enemy is boredom. It is almost better for viewers to stand and revile your image, rather than to pass it quickly with a bored "ho-hum." [The designer's] job is to catch attention and provide a pattern that stimulates the viewer by offering some visual satisfaction. Nothing will guarantee success, but one device that can help is a point of emphasis, a "focal point." This attracts attention and encourages the viewer to look further" [Lauer, 1979, p.22]. The ways to achieve focal points are endless. Two common ways to achieve focal points techniques are contrast and isolation.
2.3.3 Balance
"A sense of balance is innate; as children we develop a sense of balance in our bodies and observe balance in the world around us. Lack of balance or imbalance disturbs us. Dangerously leaning trees, rocks, furniture, ladders, and so forth are avoided carefully. But even when no physical danger is present, as in a design or painting, we still feel more comfortable with a balanced pattern" [Lauer, 1979, p.36].
When looking at a visual image we envision a vertical axis and usually expect to see some sort of visual weight grouping on either side [Lauer, 1979; Greenberg & Jordan, 1991; Poore, 1967]. This functions as the fulcrum on a scale and should provide a sense of balance. When this balance is not present a "certain vague uneasiness or dissatisfaction results. We feel a need to rearrange the elements, in the same way that we automatically straighten a picture on the wall" [Lauer, 1979, p. 36].
3. Method
The question addressed in this study was: Do achievement, completion rate, and lesson time vary with screen layouts using good design principles, compared with screen layouts that use poor design principles, in computer based instruction with part-time adult learners from a research university in Western Canada?
Two versions of the same self-paced, computer-based tutorial which presented identical content and strategy were prepared by the researcher using Authorware Professional. One version of the tutorial had screen layouts that used good design principles (unity, focal point and balance), the other tutorial had screen layouts which used poor design principles. See Figures 1 and 2 for comparison of good (left) and poor (right) designs. The screen layouts were judged by an expert in the field of art and design. The content, how to do a term paper, was identical in both tutorials. In this study, the function of the instructional graphics would be classified as decoration as opposed to representation, organization, interpretation or transformation [Levin, Anglin & Carney, 1978]. Achievement was defined as recall of information on the subject of How to do a Term Paper as measured by a 36 item paper and pencil test with no visual components. Time to complete the lesson and completion rate were the other two dependent variables.
Eighty seven adult learners were randomly assigned to either good (n=43, with a completion of 32) or poor (n=44, with a completion of 20) lesson design groups. Fifty two of the 87 who agreed to participate completed the computer based tutorial and post test required for this study.
[Fig. 1] Figure 1. Sample screens showing good (left) and poor (right) use of focal point.
[Fig. 2] Figure 2. Sample screens showing good (right) and poor (left) use of balance.
[Fig. 3] Figure 3. Sample screens showing good (left) and poor (right) use of the unity principle.
4. Findings
Group means were compared using a t-test on achievement score, completion rate, and time to complete the lesson. There was no significant difference in achievement scores between the lesson that contained screen layouts using good design principles compared with the lessons that contained screen layouts not using good design principles. However, students who completed the lesson with the good design took significantly less time (21%) and recorded a significantly higher completion rate (74% vs. 45%) than students who were assigned to the poorly designed lesson.
5. Discussion
The design principles chosen in the study (unity, focal point and balance) and used as decoration do not appear to affect recall learning. Poor use of these design principles however is related to increased instructional time and a reduced completion rate, or persistence when the use of visuals was decoration.
There are several hypotheses as to why poor screen design might result in increased instructional time and reduced persistence. Research on visuals in instruction shows that more complex diagrams lead to more visual inspections when reading an illustrated text [Hegarty et al. 1991] and that detecting an object within a visual is faster if the visual is coherent rather than jumbled [Biederman, et al. 1973]. If poor screen design contributes to perceived complexity or incoherence, more time might be spent inspecting the visuals without a concomitant gain in achievement. As far as persistence is concerned, one might consider the hypothesis that poor screen design casts doubt in the perception of the learner, via the 'halo effect', that the instruction possesses the high quality necessary to cause persistence. Simply put, if the subject perceives the graphics aren't good, perhaps the instruction is also lacking and not worthy to continue. As such, the question of motivation begins to call for our attention.
Another hypothesis deals with automaticity of processing when it comes to learning from text [Shiffrin & Schneider, 1977]. When we study, drive, or do a myriad cognitive or psychomotor things, this argument suggests we tend to 'automate' the control process. Recall having driven a stretch of road recently with absolutely no recollection of the scenery you just passed. Similarly, when approaching a learning task such as the one used in this study, one may unconsciously enter an automatic process control mode in order to maintain some sense of efficiency of learning. Certain events in our environment, such as a signal or siren cause us to switch out of automatic mode and into manual process control where we experience a heightened awareness of our surroundings. Perhaps viewing good screen designs encourages automatic processing and viewing poor screen designs encourages manual and therefore less efficient processing.
Further research is suggested to determine if there is any effect on actual performance, i.e., on the quality of the term papers produced as a function of this instruction. One can also question whether an interruption to manual processing might have a measurable effect upon learning a topic which is new or unfamiliar to the learner. Presumably more than one person in the present study has had experience in writing term papers, experience which overrode any other differences in achievement scores.
This study was delimited to the use of a subset of design principles, and the instructional graphics served a decorative function. Studies using different design principles and graphics with different functionality should be conducted to shed more light on this area of instruction.
However, the results of this study indicate that if we are concerned with minimizing learning time and maximizing learner completion rates, as we design screens for computer based instruction we should consider applying the principles of design used in this study. An explanation for the results that occurred in this study could be that the use of good design principles in computer based learning requires less unrelated processing of information as well as easier concentration on the content in terms of recall.
These results indicate that instruction using good screen design principles has no gender-based affect on achievement, learning time or completion rate. It could be that the screen design principles chosen in the study have similar automaticity processing effects between genders for learning time and recall learning.
6. References
[Adams and Hamm 1983] Adams, D. & Hamm, M. (1989). Media and literacy: learning in an electronic age. Issues, ideas and teaching strategies. Springfield, IL: Charles C. Thomas Publisher.
[Aspillaga 1991] Aspillaga, M. (1991). Screen design: location of information and its effects on learning. Journal of Computer-Based Instruction, 18, 89-92.
[Baek and Layne 1988] Baek, Y.K. & Layne, B.H. (1988). Color, graphics, and animation in a computer-assisted learning tutorial lesson. Journal of Computer-Based Instruction, 15, 131-135.
[Biederman and Glass and Stacy 1973] Biederman, I., Glass, A. L., & Stacy, E. W. (1973). Searching for objects in real world scenes. Journal of experimental psychology, 97, 22-27.
[Bunderson 1981] Bunderson, C. V. (1981). Courseware. In H. F. O'Neill, Jr. (Ed.), Computer-based instruction: A state of the art assessment. NY: Academic Press.
[Duin 1988] Duin, A. (1988). Computer-assisted instructional displays: effects on students' computing behaviors, prewriting, and attitudes. Journal of Computer-Based Instruction, 15, 48-56.
[Dwyer 1987] Dwyer, F. M. (1987). Enhancing visualized instruction: Recommendations for the practitioners. State College, PA: Learning Services.
[Graves 1941] Graves, M. (1941). The art of color and design. New York, NY: McGraw-Hill Book Company, Inc.
[Greenberg and Jordan 1991] Greenberg, J. & Jordan, S. (1991). The painter's eye: learning to look at contemporary American art. New York, NY: Delacorte Press.
[Hegarty and Carpenter and Just 1991] Hegarty, M., Carpenter, P. A., & Just, M. A. (1991). Diagrams in the comprehension of scientific texts. In R. Barr, M. Kamil, P. Mosenthal, & P.D. Pearson (Eds.), Handbook of reading research. (Vol. II, pp. 641-668). New York: Longman.
[Heines 1984] Heines, J. (1984). Screen design strategies for computer-assisted instruction. Bedford, MA: Digital Press.
[Kobayashi 1986] Kobayashi, S. (1986). Theoretical issues concerning superiority of pictures over words and sentences in memory. Perceptual and Motor Skills, 63, 783-792.
[Lauer 1979] Lauer, D. (1979). Design basics. New York, NY: Holt, Rinehart and Winston.
[Levie 1987] Levie, W. (1987). Research on pictures: A guide to the literature. In H. Houghton & D. Willows (Eds.), The psychology of illustration: vol. 2 instructional issues. New York: Springer-Verlag.
[Levin and Anglin and Carney 1987] Levin, J. R., Anglin, G. J,. & Carney, R.R. (1987). On empirically validating functions of pictures in prose. In D. M. Willows & H. A. Houghton (Eds.), The psychology of illustration: Vol. I. Basic research (pp. 51-85). New York: Springer-Verlag.
[Mandl and Levin 1989] Mandl, H. & Levin, J. (1989). Knowledge acquisition from text and pictures. New York: NY: Elsevier Science Publishing Company, Inc.
[Misanchuk and Schwier 1995] Misanchuk, E. R. & Schwier, R. A. (1995). The mythology of color in multimedia screen design: art, science and connoisseurship. Canadian Journal of Educational Communication, 24, 3-26.
[Peterson 1996] Peterson, A. J. (1996). Multimedia science education, visual literacy and the structure of intellect. http://www.inft.com/sfef/mm_vi.html
[Poore 1967] Poore, H.R. (1967). Composition in art. London: The Oak Tree Press, Ltd.
[Rieber and Kini 1991] Rieber, L. & Kini, A. (1991). Theoretical foundations of instructional applications of computer-generated animated visuals. Journal of Computer-Based Instruction, 18, 83-88.
[Rubens and Krull 1985] Rubens, P. & Krull, R. (1985). Application of research on document design to online displays. Technical Communication, 32, 29-34.
[Shiffrin and Schneider 1977] Shiffrin, R. M. & Schneider, W. (1977). Controlled and automatic human information processing: II. Perceptual learning, automatic attention and a general theory. Psychological Review, 84, 127-190.
[Soulier 1988] Soulier, J. (1988). The design and development of computer based instruction. Toronto, ON: Allyn and Bacon, Inc.
[Steinberg 1991] Steinberg, E.R. (1991). Computer-assisted instruction: a synthesis of theory, practice, and technology. Hillsdale, NJ: Lawrence Erlbaum Associates, Inc.
[Szabo and Poohkay 1995] Szabo, M. & Poohkay, B. (1995). An experimental study of animation, mathematics achievement and attitude toward computer assisted instruction. Journal of Research on Computing in Education, 28, 56-69.
[Taylor 1981] Taylor, J.C. (1981). Learning to look: a handbook for the visual arts. London, ON: The University of Chicago Press.
[Thiel 1981] Thiel, P. (1981). Visual awareness and design. Seattle, WA: University of Washington Press.
[Yang and Moore 1996] Yange, C-S, & Moore, D. M. (1996). Designing hypermedia systems for instructors. Journal of Educational Technology Systems, 1, 3-30.
