Chopeta C. Lyons
More Than Just Eye Candy:
Graphics for e-Learning

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. 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.

Eye Candy Weak Design

Figure 1: A weak design to teach a search and filter procedure

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.

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 and 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

Clark-Lyons Visual Design Model

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 deign 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.

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 and 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”.

Fujitsu 3-D modeling GUI

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 skills 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 a process such as that shown in Figure 4 below. When the learner plays the animation, a voice over explains the distribution and reimbursement process involved for the pharmacy when it fills a prescription.

Real Pharmacy e-Learning GUI

Figure 4: Flash animation of the process of filling a prescription once the physician has written it. © 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 leaner 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 composed 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 variations? 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.

Phase III: Design the visual approach

Graphics for most e-Learning projects fall into one of three broad categories: the Graphical User Interface (GUI) designed to support the training package as a whole; the individual graphics designed to support individual content points within lessons; and the layout of each screen to best support the instruction.

Even a mishmash of random choices is a style, deliberate or not. In this third phase, the team previews the graphic requirements of the entire course to assess specific real-estate or interface elements needed to accommodate individual graphics. These are incorporated into the GUI as well as into any specifications that will dictate the style of the individual graphics.

In Figure 5, the interface for a banking course uses elements from US Treasury paper money (scroll work, seals, etc.) and money colors (green and gold) to relate to the content. Graphical Interface

Figure 5: Graphical user interface related to content

Credit: Mark A. Palmer for Computer Management & Integrators, Inc.

In Figure 6a, the designer picked a pretty interface template, without thinking too much about the individual graphics.

An attractive template

Figure 6a: The template chosen in a vacuum
without considering the individual graphics.

When the designer turned to creating the individual graphic, she didn't spend much time considering how the completed visual would work within the template, a problem for her especially since she planned to use popups for additional information. (See Figures 6b and 6c).

An Individual Process Flow graphic

Figure 6b: Individual Process Flow graphic

Figure 6c represents the space the designer needs when all popups are open, keeping information simultaneously available.

An Individual Process Flow graphic with popups

Figure 6c: Individual Process Flow graphic with popups

And finally, the designer begins to lay out all her elements in the template -- with title, instruction, individual graphic and popups.

The individual screen layout

Figure 7: Finished lay out.

Now she begins to see that her template choice takes up a lot of real estate at the bottom and crowds her individual graphics and the popups. A better approach would have been for her to start by considering the "worst case graphic" when she selected the template and thus saving herself time-consuming resizing and adjusting.

Ideally, the look and feel is the culmination of careful consideration of the elements below.

Make a preliminary assessment of content graphic requirements

It’s important to assess the general requirements of the individual graphics before settling on a treatment or GUI that ultimately must accommodate them. Seasoned training professionals typically assess what they deem the “worst-case” graphic – in terms of real estate, page orientation, colors, and functionality needs. This need is especially great in big projects, with multiple instructional designers, writers and artists. For example, one team recently created a GUI for a 12-module course that restricted graphics to the upper right quadrant. But two entire modules needed graphics with a horizontal (or landscape) span. The GUI couldn’t support them and had to be adjusted. New templates needed to be created at a late stage in the development process.

Also assess the individual graphics in terms of the general communication functions and psychological learning events required by the content (discussed in more detail in Phases IV and V below). Finally, if you are responsible for designing the GUI, your design depends on many of the factors you assessed in the first two phases of this Model.

Determine the image the package should project

The image (variously called the “look and feel,” the GUI, or even the style) communicates in a way the influences the e-Learning’s acceptance and credibility. Also, the sponsoring organizations often have strong opinions about this image. Companies often want their training to be a reflection of the corporate culture. For example, some organizations may believe a comic book treatment undermines the seriousness of the subject matter or projects a less-than-professional image. On the other hand, other organizations may feel that same comic book treatment makes the material accessible and less overwhelming to the learner. After assessment of the learner, content, environment and goals of the training, eBG Training department successfully employed a colorful treatment similar to the palette used in Figure 8 in its ad campaigns.


Figure 8; A cartoon treatment Credit 2002 Intel Corporation

The bottom line is to determine the image appropriate to learner, content, environment and acknowledgment of the sponsoring organization’s desires.

Phase IV: Match communication function to content types

In this phase of our design model, you evaluate your content to determine individual graphics that will illustrate key instructional points. You plan graphics best suited to help learners acquire five content types: procedures, concepts, facts, processes and principles.

For example, if your course goal is to teach procedures, you will want to use representational and transformational graphics to illustrate how to apply steps to the objects or equipment involved in the procedure. The representation graphic communicates to the learner what the object the step involves looks like – a drop-down list in a software application, a piece of equipment, or a tool to be used to complete the task. Use representation graphics also to communicate what the object looks like when the task is completed incorrectly. The transformational graphic, which shows changes over space and time, can illustrate the object before, during, and after the task is completed. You may want to use animations of the step-action-consequence cycle for each step or stage.

In Figure 9 below, for example, an HIV lesson uses a series of animations to illustrate how HIV infects and replicates itself using the DNA of human cells.

Roch Pharmaceutical HIV infection animation

Figure 9: A transformational graphic of drug interaction on the progression of cell infection. Cred: Image reproduced by permission of Roche Basel, Switzerland

Phase V: Apply principles of psychological instructional events to visual design decisions

Assess your graphic to make sure it supports the six key instructional events of learning. These include ways to use graphics and graphic treatments to help learners: focus attention, activate prior knowledge in memory, minimize cognitive load, build new mental models, maximize transfer of learning and support motivation in ways that do not disrupt learning.

For example, suppose you decided on an animation to illustrate a procedure for a western audience. During the animation, focus attention by using sequence and visual cues to draw the learner’s eye to the parts of the illustration being discussed. Animations can easily result in cognitive overload. Activate prior knowledge by using objects (screens or equipment) with which the learners have some familiarity, perhaps even that which you have built in previous topics. To help manage cognitive load, limit the number of steps demonstrated according to the 7+-2 rule (“Human working memory has a capacity of seven ‘chunks’ of information, plus or minus two). Provide explanations via audio narration, rather than having lengthy text explanations appearing onscreen, causing the learner to try to read and watch the animation at the same time. To support learner control, which sometimes helps manage cognitive load, insert a pause and replay button. To minimize the extra load, follow the reading conventions of the audience. For western audiences, build your animation as we noted previously, from left to right, top to bottom, or in a clockwise arrangement. The closer that arrangement mirrors the objects in “real-life,” the better the transfer of learning.

Again, when you lay out your screens, also apply these guidelines to make sure explanatory content is kept with related graphics, that appropriate techniques are used to reduce distracting elements, and that cues are used to direct attention.


If the instructional designer who created the screen in Figure 1 had followed a systematic approach to planning her graphics, her design might have looked like the one in Figure 10. This graphic design puts the focus on the tasks to be learned. The topic heading – Search, Filter, and Select – is now grounded by being displayed in conjunction with software screens through which the tasks are performed.

As Ruth said in the first article in this series, to choose the best graphic for learning purposes requires consideration of your instructional goals, the learning landscape, and the learners who will participate. We believe that these factors are best considered through the lens of a systematic visual design model, such as the one I have presented here.

Eye Candy Redesign of Weak Design

Figure 10; A redesign of Figure 1, using graphics to support learning

horizontal divider

© 2011 Chopeta Lyons - Originally published September 2003, The eLearning Developers’ Journal

» Ten Tips for Talking to Artists -- How to communicate your graphic ideas 2/8/06
» Crossing Over and Evaluating Training -- How to evaluate training materials 9/0/99
» Picture Perfect: Selecting Graphics for Instruction -- What makes a graphic effective? 2/16/09
» Avoiding Shovelware - How to escape the wall of words syndrome 2001
» Good Screen Design Basics - Arranging screen elements to maximize learning 1994
» More Than Just Eye Candy - Graphics for e-Learning