You are here: Ideas and Issues in E-Learning --> Supplemental Resources for the Book Designing E-Learning --> Chapter 9 --> Tips for Communicating Visually Online

Tips for Communicating Visually Online

1. Visually Represent Numeric Data

• To show relationships of parts to a whole, use a pie chart. Developers often use pie charts to show how budgets are spent, or time is used.
• To show relationships among data over a period of time, use a histogram (used to compare a single item over several time periods) or a bar chart (usually used to compare several items over a several time periods). Developers often use histograms and pie charts to track sales, manufacturing output, economic growth, and similar measures over a period of time.

Some issues to remember when preparing visuals with numbers:

• Label the two axes. Indicate what type of information is tracked. Also label the units of measurement. (For example, each point represents $US 1 million or 1 year.
• Provide a legend, especially in bar charts. Use different colors or shading to differentiate among items. For example, if you are plotting the sales of regular and decaf coffee, the bar for regular might be coffee colored and the bar for decaf might be mint green.

2. Visually Represent Concepts

Concepts refers to non-numerical data. Some concepts are concrete, such as machines, furniture, and geography. Some concepts are abstract, such as processes and symbols.

To present conceptual data visually, you might use these types of visuals:

• What things look like or where they are located, such as the appearance of a new car or the location of the power switch on a computer.
• For content that is primarily intended to sell learners, use photographs.
• For content that is primarily intended to show learners where information is, or how to operate something, use line drawings.
• How things work. Use an animated sequence. Course developers typically base the animations on line drawings rather than photographs.
• Procedures. A flow chart. You can present a flow chart in one of these ways:
• A single graphic with a series of boxes and arrows showing how the different phases work together. This is a type of line drawing.
• A technical graphic, using official flow-chart symbols. For example, computer programmers use certain symbols on flowcharts to represent certain types of steps in a process. A rectangle represents a step. A diamond represents a decision. An oval represents the end. Engineers and architects also have specialized notation to show technical content.
• An illustrated graphic, which shows little graphics for each step in the procedure. For example, for a flowchart illustrating how a bill becomes a law, a course developer might show a picture of a house to show the legislative process and a court to show a legal challenge.
• An animated sequence, which takes any of the other types of drawings and animates its presentation, so learners see one step at a time.
• Relationships. Different types of charts show different types of relationships.
• Organization chart, which shows the formally established relationships in an organization in hierarchical order.

President | ____________________________________________ |                      |                      | Vice-President        Vice-President        Vice-President | ________________ |               | Director     Director

• Target chart, which shows relationships in a social order, with those who hold the most social influence placed in the center and others placed further from the center.
• Concepts. Symbols communicate concepts. In some instances, the symbols are already well-known, such as a red octagon, which represents stop. In other instances, you can create your own symbol.

When using visual images to communicate conceptual data, consider these issues:

• Label all illustrations and relevant details. Although an old saying suggests that “a picture is worth a thousand words,” learners do not always “get” the point of the image. Captions explain the purpose of these visuals. Labels direct learners to key reference points on the image. (These labels are also called callouts because they call out key information.)
• Avoid using photographs when you need to teach people how to locate something. Studies suggest that the extraneous details in photographs distract learners. Also, photographs date themselves quickly as fashions change, and learners pay more attention to irrelevant, out-of-date items than to the technical content.
• When cost is an issue, use line drawings. They are generally less expensive to use than custom photography. If you want to add color, use shading.
• Remove extraneous details from photographs and illustrations. When removing them from photographs, you cut out the irrelevant parts through a process called cropping. Most photo finishing programs explain how to crop a photograph. Avoid irrelevant details in a line drawing by not including them in the initial drawing.

3. Call Attention to Text

In addition to communicating ideas visually, you can also use visual devices to call attention to specific passages of text. These visual devices can help build learners’ interest in the content, differentiate must-know from nice-to-know material, and help learners easily find specific content.

To draw attention to a specific passage, use one of the following:

• Some sort of box, either shaded or bordered.
• A pulled quote, in which you pull one of the most provocative quotes in the passage and place it in a box nearby and in a much larger type font. Learners see the quote and are seduced into reading the text.

Sample of a pulled quote:

Contrary to common belief, students in e-learning courses have more contact with instructors than those in classroom courses.

• A sidebar, in which less important text is put in a box near the main text. The box is usually shaded and the text placed in a smaller type size so readers can distinguish this material as nice-to-know, rather than must-know content.

INSERT FIGURE

• Circles and arrows, which direct readers to specific passages.

INSERT FIGURE

To help readers easily scan content, place it in charts and lists. Some issues to consider when you use lists and charts:

• Make sure that lists and charts begin with a lead-in sentence.
• When using lists, use the right type of list. Only use numbered lists when the items must be considered in a specific sequence, such as a procedure. Otherwise, use bullets.

4. Consider These Issues When Using Graphics

Although graphics can effectively communicate ideas, keeping certain issues in mind as you develop the graphics can ensure that yours are as effective as possible.

Use Graphics for Practical Purposes, Not Adornment: Each graphic should support the learning process by showing something relevant to the content. Otherwise, visuals distract learners and complicate the learning process.

Avoid Unnecessary Detail. This unnecessary detail is called clutter, because it clutters up the image and creates difficulty in discerning the purpose of the graphic.

Place the Visual Immediately after Its Reference in Text. Try to avoid showing the graphic in a pop-up screen unless necessary. Separated from the text, learners forget the purpose of the image.

Carefully Use Stock Images (Clip Art). Specificallly, consider these issues:

• If you are developing materials about a product or service from your company, chances are that someone has already produced the graphics in the engineering, graphics, marketing, or communications departments. Check with them.
• If you are developing other types of materials, you can find stock images in clip art libraries and on CDs with stock photos.
• Even if you paid for it, do not assume that you have blanket permission to use graphics and photos from clip art libraries, photo CDs, and other departments in your organization. Many clip art libraries have copyright restrictions and require that you pay a royalty before using them. Similarly, most custom graphics and photography firms provide material for one-time use; organizations must pay royalties for additional uses. For information on the policy with the clip art, check the documentation that comes with it or contact its publisher. For restrictions on using work prepared for another department in your organization, contact the graphics firm or photographer who created the image.

Keep the Size of Graphics Files as Small as Possible. Online learners expect information to appear on the screen immediately, but because they can require the transfer of thousands of bytes of information, graphics do not always appear immediately on the screen. To avoid this problem, do the following:

• Use graphics with as little detail as needed, which minimizes the amount of information that must be transferred. Line drawings are typically smaller than photographs.
• Use the JPG format for photographs, whose file sizes are smaller than other formats.
• For each graphic, insert a message that appears in its space that describes the graphic, so learners get the sense that the loading of the material has begun and that they are not waiting indefinitely.

General Resources on Designing E-Learning | Supplemental Resources for the book Designing E-Learning | Chapter 9 | Links | Glossary
(c) Copyright. 2002. Saul Carliner. All rights reserved.