We have all heard the expression “A picture is worth 1000 words.” But what does this mean, especially in e-Learning design?
Using a common canvas, game and Web designers, as well as online marketing experts, take advantage of the 1,000,000 nerves connecting the eyes to the brain. That’s about 60 % more than the number of nerves connecting the ear and the brain! So why do we compromise visual design when it comes to online learning?
We’ll explore this question in this article, and we’ll introduce some design concepts that non-designers may wish to consider before undertaking their next e-Learning project. Specifically, you’ll read about:
- Art vs. Design
- The 50 millisecond mark
- The importance of color
- Basic Design Principles
- Balance
- Proportion
- Dominance
- Rhythm
- Unity
Introduction
So what does design have anything to do with e-Learning, anyway? Well, there is obviously instructional design. It’s the sort that goes into re-purposing content, such as raw text, images, video and audio, etc., into cohesive and engaging courseware. OK, that’s just dandy, “I already do that,” you say, “but I am no Michelangelo. What do I know about art?!”
Yes, perhaps you aren’t an artist. Perhaps your “masterpiece” consisted of stick figures on paper, drawn way back in second grade. Sadly, we cannot offer you any assistance if your aspirations are to become a world renowned artist. We can, however, provide you with some basic graphic design know-how for putting together a visually pleasing e-Learning course.
Art and design: Same, same, but different
"Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that's why it is so complicated."
Paul Rand, 1914-1996, famous graphic designer
Before we go any further it is important that we have at least a cursory discussion on the difference between art and design. We don’t claim to be experts, and it is a philosophical discussion altogether that merits its own treatment. Wikipedia defines art as a product of human activity intended to stimulate the senses and evoke emotional response. Design, on the other hand, is the development of a plan for a product, structure, system, or component that requires the consideration of aesthetics and function. From these definitions, we can gather that design is analytical and procedural, requiring tools and techniques; which means it is learnable, and therefore is an acquired skill.
Michael Brady points out that the distinction between art and design has many faces. The difference may be observed in the purpose, process, judgement, and materials involved in each. Art is its own end and requires no purpose other than for itself; it’s not utilitarian. Conversely, design is defined by its purpose and utility. Design depends on how parts work with one another, how it serves the client, and how it conveys information. Design is scrutinized by usability and purpose, and must be made to fit that end.
The artistic process differs from the design process in that art does not rely on “variables” as much as design does. The artist’s mind conceives an artistic piece with the end already known, working its way backwards, such as in a painting or sculpture. In design, on the other hand, the designer must consider many factors before undergoing the creative process. Those factors include pre-existing materials such as text, photographs, and colors, as well as usage, audience, etc.
Judgement requires a social criterion to determine success and failure. The basis for judging both art and design is the fundamental scale of beauty, and how closely the example of art or design approaches it. While we accept art for its own merits with little regard for its purpose, design carries the burden of purpose, and the “usefulness” of design is the measure of its success.
Art and design use materials differently. Art relishes in the materials that compose it, and considers them integral to itself such as in mixed media paintings of Jasper Johns' Flag (http://www.moma.org/exhibitions/1996/johns/pages/johns.flag.html).
Design, on the other hand, uses its materials as a vehicle for its purpose. The sample pictographs from the National Park Service in Figure 1 focus on visual communication and presentation. The material each pictograph is attached to is inconsequential to how it is used.
Figure 1 The meaning of these pictographs is the same no matter what surface they appear on.
Now that you have a general idea of the differences between art and design, we hope you realize that design is really a set of learnable techniques or “tools,” if you will, to add to your design arsenal to help you better convey your instructional message across.
"Great things are not done by impulse, but a series of small things brought together."
Vincent Van Gogh, Dutch post-impressionist artist
You’ve got 50 milliseconds: Ready, set … time’s up!
“Suspect each moment, for it is a thief, tiptoeing away with more than it brings.”
John Updike, American novelist A Month of Sundays
Did you know that it only takes about 50 milliseconds, or half the time for a human to blink, to accurately decide a Web site’s visual appeal? That’s what Gitte Lindgaard and her colleagues Cathy Dudek, Gary Fernandes, and J. Brown discovered in their research (see References at the end of this article). It is shocking to know that one-twentieth of a second is all it takes for aesthetics to elicit an emotional response. While Lindgaard’s study focuses on the factors that affect a user’s emotional response to a Web site, it is particularly relevant to us as e-Learning practitioners because the Web is the primary medium of our profession. Additionally, it corroborates the importance of an online courseware’s visual design impact.
There are three levels to emotional processing, according to Don Norman. The first, a subconscious “visceral response,” is perceptual and immediate (50 milliseconds). In fact, Robert Zajonc asserts that this immediate response is instinctive, biologically hard-wired in our physiology, and that it happens before the brain has had the time to cognitively recognize it. This is what Lindgaard refers to as the “mere exposure effect” (also known as “halo effect,” as some writers prefer to call it).
The second level of emotion is expectation-based; it is behavioral and takes place subconsciously. Judgement at this point is based on the comparison between what the user senses and the degree to which the stimulus actually satisfies that expectation.
The third level of emotion is reflective and intellectually-driven. At that point the user shifts to cognition. And, according to Gitte Lindgaard, depending on the first impression given by a new Web site, the user’s mind tries to validate the positive or negative response it experienced. If positive, the user concentrates on the enjoyable aspects of the site. If negative, usability issues become the centre of attention.
So, what does this mean? It means that by the time a user reaches the third level of emotion, she has already summed up her initial reactions in an emotional experience. The user decides on the merits, or lack thereof, of the online environment based on that experience. The mind tries to rationalize the first impression, seeking to find proof in the body’s initial reaction.
Having established the impact of aesthetics on first impressions, we are hard-pressed not to consider how this translates to online interactions. First impressions are powerful in that they can influence and impair judgement through selective filtering of incoming stimuli. Clifford Mynatt and his colleagues called this “confirmation bias” in their 1977 work. Information that does not conform to the initial impression is ignored. Making a positive first impression in the onset is pivotal to any learning environment. Cognition follows after the emotions have already colored the mind’s decision to like or not like the online experience, even before any of the text has ever been considered.
Lindgaard notes that, “The mere exposure effect begins to wane once the stimulus exposure time exceeds 50msec, when the organism begins to take more detailed information into consideration ... This has important implications ... because the value of textual information is likely to be assessed in terms of the site’s immediate visual appeal.”
Color is key: The Emperor’s new clothes
“The wise become as the unwise in the enchanted chambers of Power, whose lamps make every face the same colour.”
Walter Savage Landor, English writer and poet
There is a widespread misconception that interface design, particularly in the case of online learning environments, is all about “navigation.” This is David Guralnick’s observation. It is a sad day when a designer utters the words: “function THEN form.” The world weeps and all is lost. All drama aside, usability has been over-analyzed and over-thought. Interface design, in the context of online learning, is all about putting the learner in an appropriate environment to learn. Form AND function is the motto of a designer, and with that the “design process” must begin.
When starting any visual composition, there must be a decision regarding color. Should the composition be monochromatic or vibrant with color? What mood should be conveyed: cold, sombre, loud, erotic, or calming? James Knutson found, for example, that color is a known significant influence on a user’s first impressions. Studies show that upon opening a new Web environment, the background color appears prominently before the content becomes noticeable in the foreground. An informal experiment by Lindgaard, where computer science/HCI (human computer interaction) students were randomly shown Web sites with content of equal value in interest to all participants, unequivocally indicates color as the main reason for disliking a site. The results also show color preferences in users: white and blue rank as the most favoured, whereas black and yellow were the least favored; pastel shades ranked high in terms of appropriateness opposite darker shades.
You are probably asking yourself, “What do I know about color? I haven’t a clue where to begin!” Well, for starters, don’t be afraid of color. Combined properly, color can create an environment that is welcoming, easy on the eyes, and conducive to learning.
In addition to enhancing aesthetics, color can be used to attract attention, group elements, and indicate meaning. Use color conservatively by limiting your palette. A good rule is to limit your colors to five, depending on the complexity of the design.
Before finalizing your color story, ask yourself if it is right for your target audience. Is the color age appropriate? Does the color have a cultural meaning? Provide your learners with a lot of white space; this offers learners visual resting place between content. Yellow is a very strong color, but if you must use it, use it sparingly, perhaps as an accent or as a means of pointing things out.
Remember working with color isn’t rocket science. To help you explore the possibilities of color visit Janet Lynn Ford’s site (http://www.worqx.com/color/color_basics.htm). She has put together an excellent resource on the subject from basic color theory to color combinations. The site also offers free tools that help you pick colors and coordinate them. Another useful site is the AVIVA Directory (http://www.avivadirectory.com/color/). In addition to providing online color tools, it offers links to downloadable software, color schemes, techniques, and other references.
Basic design principles: The tools of the trade
“One only needs two tools in life: WD-40 to make things go, and duct tape to make them stop.”
G. M. Weilacher, American humorist
Once you have decided on the color scheme of your e-Learning course, you can begin considering the other elements that make up your page, slide, or compositional layout. Effective graphic design is not a haphazard collection of elements. It is an arrangement of objects into a visual composition with the intention to communicate effectively. Regardless of profession or medium, the principles of design are fundamental; they apply readily on canvas, film, paper, and even on a Web browser. There are many principles that apply to design, but we will only be covering the five that are of particular interest to us. These directly relate to page composition in an e-Learning courseware. They are: balance, proportion, dominance, rhythm, and unity.
To illustrate the design basics in more concrete terms with which we can relate, we will use the learning modules of The Basics of Employment Standards (http://www.hreuat.gov.ab.ca/employmentstandards/learning/legislation/) as examples. The client, Alberta Employment and Immigration, Canada, wanted to make the provincial employment standards accessible and digestible by the general working population. What would otherwise be an intimidating dry exposition of provincial code and regulations needed to be modular and “friendly” in its presentation, and have a broad appeal. We will briefly describe each principle, give an example, and where appropriate, provide some practice tips.
Balance
Balance is the concept of visual equilibrium. It relates to our physical sense of balance where two opposing forces in a composition work together. In Figure 2A, the combination of texts in the course menu and the slide content make the overall composition lopsided to the upper left. The addition of an image in Figure 2B balances the overall composition. Balance creates a unifying effect as it blurs the individuality of each element on a page into one piece, allowing the viewers’ eyes to flow seamlessly from one element to another.
Figure 2 Balance unifies a Web page.
Proportion
Proportion is about the relationship between two objects, whether it is one to another, or a part to the whole. In a visual composition, proportion can convey weight, distance, and interest. Look at the graphical composition of the Canadian dollar with the percent sign in Figure 3. Using scale (the size of the twenty-dollar and ten dollar bills) and color (the dollar bills vs. the percent sign) creates the illusion of depth. Imagine what would happen if the dollar bills were of the same size, and the percent sign was colored differently. There would be neither depth nor gradation of interest. The graphic would be flat and dull. Creating a page that is well proportioned reduces the feeling of visual clutter; sometimes less is more.
Figure 3 Proportion affects weight, distance, and interest.
Dominance
The principle of dominance creates degrees of importance and interest. The lack of dominance creates visual chaos and loss of direction. Establishing levels of dominance minimizes confusion and draws the eye to the intended starting point of the composition. In Figure 4, the designer considered that the learner is familiar with the overall purpose of the course menu and the banner indicating the current item on the menu. As a result, the user’s eye goes immediately to the instructions on the page.
Figure 4 Dominance draws the user’s eye to the instructions on this page.
Rhythm
Rhythm is the principle of design used to create a sense of movement and pattern. It is typified by a repetition or alternation of elements in set intervals. In Figure 5, a single image representing the idea of “days off” would not have sufficed. To capture that concept, images of activities in shapes of equal size and at regular intervals suggest pattern and relatedness.
Figure 5 Rhythm establishes pattern and helps to support concepts without requiring long explanations.
Unity
The concept of unity refers to the relationship of the parts to the whole; it is the principle that makes seemingly unrelated elements work together as a whole. Without unity, a courseware page containing a collection of elements is nothing more than that, a collection, rather than a composition.
Figure 6 is both the landing page and the main navigation page of a course. It consists of texts varying in size, color, style, and weight and a navigational graphic (nine puzzle pieces) made up of individual graphic buttons. The text making up the welcome message on the top of the page creates a link with the navigational text (the modules of the course in simple text buttons) at the bottom by stretching across the page from left to right. The title text element (Basics of Employment Standards), in blue, connects to the navigational graphic (each piece representing a module in the course) and the corporate logo using color. The “movement” of the blue ribbons flowing across the graphic towards the text suggests the link between the two types of navigation.
Figure 6 Unity in this screen comes from the movement of the blue ribbons.
For more information on design principles and other design techniques you can employ when putting together your next courseware, read Joshua David McClurg-Genevese’s article on The Principles of Design.
Conclusion
When we first considered writing this article, we wanted to express our passion … no ... our conviction that visual design is a critical component in e-Learning courseware. As the saying goes, “A picture is worth a thousand words.” And although some say that, “Art is design, and design is art,” it is a fact that design is an acquired skill, the basics of which anyone can apply.
It is an uphill struggle for learners to constantly have to go against their better “judgment,” and convince themselves that what they are reading or learning is indeed worthwhile. Design is about user experience. Knowing that there is a correlation between design aesthetics, first impressions, and its subsequent impact on the overall learner experience is a step in the right direction. Do your learners a favor and invest the time, effort, and resource to create an aesthetically pleasing learning environment to make the learning experience that much more powerful.
References
Brady, Michael. (1998) “Art and Design: What’s the Big Difference?” Eyesite. Retrieved August 15, 2008, from http://www.unc.edu/~jbrady/Essays/Art_Design.html.
Guralnick, D.A. (2006) “User Interface Design for Effective, Engaging, E-Learning”. Retrieved August 16, 2008 from http://www.kaleidolearning.com/Effective%20E-Learning.pdf.
Knutson, J.F. (1998) The Effect of the User Interface Design on Adoption of New Technology. Dissertation Abstracts International: Section B: The Sciences and Engineering 59(3-B), 1399.
Lindgaard, G. (2006) “Aesthetics, Visual Appeal, Usability and User Satisfaction: What do the User’s Eyes Tell the User’s Brain?” Retrieved July 15, 2008 from http://www.swinburne.edu.au/hosting/ijets/journal/V5N1/pdf/Article1_Lindgaard.pdf.
Lindgaard, G., Dudek, C., Fernandes, G., & Brown, J. (2006) “Attention web designers: You have 50 milliseconds to make a good first impression!” Behaviour & Information Technology, 25, 115-126.
McClurg-Genevese, J.D. (2005) “The Principles of Design”. Retrieved August 2, 2008 from http://www.digital-web.com/articles/principles_of_design.
Mynatt, C.R., Doherty, M.E. & Tweney, R.D. (1977) “Confirmation bias in a simulated research environment: An experimental study of scientific inference”. Quarterly Journal of Experimental Psychology, 29, pp. 85-95.
Norman, Donald A. (2004) Emotional Design: why we love (or hate) everyday things. Basic Books.
Rand, Paul. Misawa Lecture, MIT Media Laboratory, November 14, 1996. Quoted in IDEA Magazine, Special Issue February, 1997 by John Maeda. Retrieved September 15, 2008 at http://acg.media.mit.edu/events/rand/ideamag.html.
Wikipedia, The Free Encyclopedia (August 18, 2008) “Art”. Retrieved August 22, 2008 http://en.wikipedia.org/w/index.php?title=Art&oldid=232634849.
Wikipedia, The Free Encyclopedia (August 21, 2008) “Design”. Retrieved August 22, 2008 http://en.wikipedia.org/w/index.php?title=Design&oldid=233299747.
Wikipedia, The Free Encyclopedia. (August 19, 2008) “Graphic Design”. Retrieved August 22, 2008 http://en.wikipedia.org/w/index.php?title=Graphic_design&oldid=232902353.
Wikipedia, The Free Encyclopedia (2008) “Jasper Johns”. Retrieved August 22, 2008 http://en.wikipedia.org/w/index.php?title=Jasper_Johns&oldid=230044106.
Zajonc, R. (1980) “Feeling and Thinking: Preferences need no inferences”. American Psychologist, 35(2), pp. 151-175.