We have all heard the cliché: “A picture is worth a thousand words.” There’s just one important caveat: It has to be the right picture. And sometimes, getting the right picture still isn’t enough. Even the most relevant graphic, if executed poorly or laid out haphazardly, will not enhance learning, but quite possibly will depress it.
- More Than Just Eye Candy: Part 1
- More Than Just Eye Candy: Part 2
Robert Rankin reported in 1989 that 92% of learners’ comprehension mistakes about graphics were caused by four reasons: 1) layout-related difficulties; 2) lack of caption/picture correspondence; 3) unfamiliarity of the graphical convention; and 4) misinterpretation of the graphical layout. As just one such example, try to decipher the graphic in Figure 1. This graphic, indicating the three critical steps in finding data (1-Search, 2- Filter and 3-Select), is plagued by serious graphical choice and layout difficulties. The steps move from right to left; the graphical convention of the ribbons to indicate steps is confusing; and finally, probably no user will “get” that the data search is through the roadways of the motherboard; worse, it adds significant (and unnecessary) cognitive load to the learner’s attempt to interpret it and to relate it to the content being taught. A colorful picture, perhaps, but as William Winn and William Holliday might suggest, based on their work in 1982, Western audiences are frustrated with illustrations that move from right to left. For all audiences, the relationships of objects should, if possible, reflect their real life arrangement.
FIGURE 1 A weak design to teach a search and filter procedure.
In the first part of this two-part series, Dr. Ruth Clark related a common request that we often hear in our design and consulting work: “How can a non-graphics person learn to envision art to support instructional content?” Additionally, she summarized our three views of graphics as categorized by their surface features, their communication functions and how they support the learner’s cognitive processing of the content. In this second part, we present a design model that incorporates the findings of research and focuses on a systematic process of developing graphics. This approach can get your creative juices flowing and also help you avoid the mistakes evident in Figure 1.
Basis for the model
As we developed the model, we looked to the experiences of art-intensive industries such as advertising, print and even web/software development. The design processes in each of these disciplines contain many of the same phases, but with differing emphasis, depending on the visibility and importance of the graphics themselves.
From advertising, we looked at the importance of dynamic sessions involving team members as they devise an overall treatment. We looked at the iterative and collaborative nature of the creative process and how copywriters, art directors, and graphic designers communicate to each other to support the overarching goal. As advertising legend David Ogilvy said in 1983, “Creativity strikes me as a high-falutin word for the work I have to do between now and Tuesday.”
From print, we saw the necessity of package requirements, branding guidelines (though that is certainly also an aspect of advertising), and formatting standards.
From web/software development, we took the importance of the graphical user interface (GUI) itself and how it affects and is affected by the individual graphics displayed within its shell. In some situations, of course, the GUI is pre-determined, either because of corporate- wide standards or the requirements of a Learning Management System (LMS) that has its own GUI.
Finally, from our instructional design backgrounds, we know that planning graphics is a principle-based task, depending on the judgment of the practitioner. Of course, as with all principle-based tasks, although these are guidelines that can help direct and shape the practitioner’s choices, the creative process cannot be reduced completely to a lock-step procedural recipe.
A visual design model overview
The design model in Figure 2 includes five main phases. Note that this model focuses on planning graphics not on the production issues of actual design and development. The first two phases are analytic and definitional. The third phase is both analytic and creative as it concentrates on the look and feel and the needs it must meet. The last two are design intensive and iterative. In our book, we also discuss the production end of how to get from graphic idea to finished product. However, this model focuses on first establishing that graphic idea.
FIGURE 2 A visual design model
The first two phases in Figure 2 illustrate how front-end analysis nails down the parameters and requirements for all course graphics. In Phase I, the training professional or design team defines the goals of the instructional materials. What is their purpose and role in the organization? In Phase II, the team defines the context in which the instructional materials will be used.
Once these requirements and definitions are identified, the next phase concentrates on creating the GUI, if not already established, and determining the overall graphic look.
The last two phases zero in on planning individual graphics. Phase IV concentrates on identifying the type of communication functionality that your content requires. Finally, Phase V focuses on how psychological events of learning shape the design of visual elements of the instruction. The following provides a more detailed look at what is involved in each phase of the model.
Phase I: Define the goal
Visual design for instruction starts with the anticipated outcomes. We create most instruction to meet one or more of the following goals:
- To inform or motivate (often described as building awareness)
- To build procedural skills and teach the associated knowledge required
- To build problem-solving skills and teach the associated knowledge required
As obvious as it may seem, defining the goal of your instruction determines the direction of your graphic design. Information or motivation campaigns are often high-profile. When organizations launch new initiatives, they often introduce them with awareness training. Customer satisfaction, quality control, or corporate strategy initiatives are common examples. New product knowledge programs to create awareness and motivation for the sales force are others. Because these programs are central to the company’s vision, they often have big budgets, high visibility, and require slick graphic treatment. Indeed, the design approach may resemble an advertising agency’s campaign more than the development of an instructional text.
Figure 3 is one example of this high profile approach. This e-Learning module used sophisticated 3-D modeling to engage the audience. The message light on the phone flashes, the phone mail “plays” an announcement of the new campaign, and the photographs in the newsletter come “alive.”
FIGURE 3 Fujitsu awareness campaign for an online newsletter. Credit: Learning Edge, Inc.
On the other hand, when the goal of the training is skill building, especially for internal processes such as claims adjudication or automotive engine diagnostics, the emphasis is on accuracy and currency of the instructional content as well as effectiveness of the instructional strategies used. Generally, these types of courses are the bread and butter offerings that have lower budgets and less visibility. But even if these projects are well-funded, the emphasis is on the details and skills the learners need in order to perform the tasks.
Skill building courses may primarily focus on building procedural knowledge (near-transfer skills). Much software training falls into this category. The goal is to help learners perform step-by-step tasks in a consistent manner. Other courses may concentrate on building principle-based knowledge (far-transfer skills). Far-transfer tasks are those that involve problem-solving and judgment such as deciding whether to fund a bank loan applicant.
It seems basic, but simply articulating the goals of the course is a crucial first step, especially in making sure there is a consensus about what the outcome of the e-Learning program is to be. Sometimes the sponsoring organization may see the goal as building awareness and motivation, thus requiring highly ornate graphics and animation to build interest. On the other hand, the instructional designers may realize the true goal is to build skill, thus requiring representational or interpretive graphics that delineate the details, concepts, conditions, and principles required to perform specific tasks. So make sure you define and agree on the true goal of the training early in the process. Otherwise, your “client” or the sponsoring organization may be looking for glitter, sizzle, and dancing pop bottles when what is really needed is a clean animation of a procedure or process such as that shown in Figure 4. When the learner plays the animation, a voice over explains the distribution and reimbursement process involved for the pharmacy when it fills a prescription.
FIGURE 4 Flash animation of the process of filling a prescription once the physician has written it in. Credit: Copyright 2002, Total Learning Concepts
Phase II: Define the visual context
If a graphic can’t be seen, it has no impact. If it can’t be viewed because of low bandwidth, poor lighting, or because the learner is color-blind, the message is lost. Defining the visual context requires determining the audience, the physical surroundings in which the e-Learning will be used, and the delivery platform considerations. Let’s look briefly at each of these factors.
Who are the learners?
Consider the target audience’s prior knowledge of the course content. Research shows that graphics benefit learners who have no prior knowledge of the content but are less critical for learners who do have prior knowledge. In fact, graphics may slow experts from getting the information they need quickly.
Analyzing the audience as to culture, age group, or education also helps you identify any potential problems learners may have perceiving or understanding the graphics selected. The classic example is a target audience primarily com- posed of older, adult males, who statistically have a higher percentage of color blindness than any other segment of the population. Consider a course that cues correct answers with green text and incorrect answers with red. If no other cueing technique is used (such as labels, shapes, or color intensity), the colorblind male may have difficulty discerning which is which since these colors often appear to them as muddy variations of grey. Still, year after year, designers create interfaces that rely solely on precisely this color-coding without providing any backup cueing system such as checkmarks or other graphic shapes.
What is the learning environment?
We traditionally think of the e-Learning environment as the desktop. But in these days of just-in-time training and on-the-job performance support, the learning environment can be the learner’s break room in a manufacturing plant, their station on the assembly line, or even a conference room. Investigate where the e-Learning will be used and identify lighting conditions, distance from monitor or display, seating and any other factor that can impact learners’ perception of the training — for example, do they wear goggles, gloves, or other potentially restrictive clothing?
What is the delivery platform?
Those of us in e-Learning know the litany: Commercial internet? Company intranet? Need to support remote dial-up connectivity? Standardized desktop settings? Browser versions? Plug-in support? No other factor is more key to the success of your program.
Perhaps you have taken an e-Learning module and experienced a long download time for a highly-ornate graphic (and may have even abandoned the training after becoming frustrated by the wait). Maybe you have viewed a course on a laptop LCD screen and missed important color coding distinctions that were easily visible on a CRT monitor. Or possibly, you have been a member of a team viewing an e-Learning course projected in a conference room where the furthermost members were too far away to read the callouts on a graphic or even to distinguish one graphic from another. Identify all delivery platform issues; work with the systems people to create a quick functionality sample; and test it to see that it runs on the platforms identified.
What are your constraints?
Finally, the greatest visual designs in the world are always shaped by the practical realities — budgets, time tables, accessibility requirements, and even corporate style guides that must be adhered to. Some e-Learning applications, such as those that support periodic software releases, are essentially disposable once that need has been met. They often have small budgets, immovable deadlines, and usually must conform to a set of standards already in place. All these pragmatic considerations can severely restrict your graphic design.
