1. Multimedia Principles
for Optimum Learning
After viewing this presentation, you will be able to:
• Explain what is meant by Active Learning
• Explain the two Contiguity Principles
• Identify effective examples and violations of the Contiguity Principles
This presentation covers Multimedia Principles for Optimum Learning.
Instructional Objectives:
After viewing this presentation, you will be able to:
• Explain what is meant by Active Learning
• Explain the two Contiguity Principles
• Identify effective examples and violations of the Contiguity Principles
1

2. Combining well designed visuals with text
improves learning
Text label
Leader
Team Member Team Member Team Member
Text label Text label
Related
Concept
Process Process Related Related
Step Step Concept Concept
Main
Concept
Process Related Related
Step Concept Concept
Combining well designed visuals with text improves learning. This is particularly true
for learners who have limited experience with the subject matter. This perspective,
which is based on both cognitive theory and research evidence, results in the
recommendation that eLearning courses include both words and graphics, rather
than words alone.
2

3. If learners engage in active learning,
they are more likely to understand the material.
Integrating
Organizing
Attending
The reason for this approach is that if learners engage in active learning they are
more likely to understand the material. Active learning means a) paying attention to
the material, b) mentally organizing it to make meaning of it and c) integrating the
new information with one's existing knowledge. This is sometimes referred to as
deep learning, where the learner “connects the dots” and the learning “sticks.” Using
words alone may result in shallow learning, that is, not connecting new information
with other knowledge.
3

4. Visualize how the instructional message can be
presented using both words and relevant media.
More effective
organizational
graphics
interpretative
graphics
transformational
visuals
graphics with
a single object
decorative
graphics
Less effective
To successfully promote deep learning, you need to visualize how the instructional
message can be presented using both words and relevant media. The first rule of
thumb is to minimize decorative graphics and graphics that simply portray a single
object (e.g.., a single screen capture, a picture of a machine, etc.).
Conversely, try to maximize graphics that help the learner really understand the
material, e.g., transformational visuals that illustrate changes over time, interpretive
graphics that make intangible phenomena visible and concrete or organizational
graphics, such as a table, a concept map or diagram.
4

5. Graphics and text must work together.
Integrated text,
graphics and
narration
Separate text
Separate graphics
Separate narration
Graphics and text must work together. This supports the dual channels principle
which indicates that human beings have separate channels for processing visual
material and auditory material. If the graphics and text are not integrated effectively,
or conflict in some way, the brain must work harder to makes sense of the material.
This causes cognitive overload, which is a waste of brainpower.
5

6. Graphics can be useful for explaining:
Facts Unique, isolated information
Concepts A group of related objects, events or
symbols identified by a single name
Processes A description of how something works
Procedures A series of steps to complete a task
Principles Guidelines that result in completion of a task
Why use graphics? Graphics can be useful when explaining:
• Facts (unique, isolated information)
• Concepts (a group of related objects, events or symbols identified by a single
name)
• Processes (a description of how something works
• Procedures (series of steps to complete a task
• Principles (guidelines that result in completion of a task)
6

7. Learning is the active process of
making sense of something.
new Active Learning
info
new
info
existing
info
new new
info info
new
info
The knowledge construction theory explains that learning is the active process of
making sense of something, and teaching is the attempt to foster the appropriate
cognitive processing in the learner. Since the learner must connect the new pieces
of information with their existing understanding, constructing pictorial and verbal
representations of the material and mentally connecting them is more likely to
happen with multimedia lessons that contain words and corresponding pictures that
depict the same content.
7

8. Related words and graphics must be contiguous.
Adjoining
(touching each other physically)
stern bow
The front of the
Neighboring boat is called the
(situated next to each other) bow. The back is
called the stern.
Continuous
(connected together to form an
unbroken sequence in time or an
uninterrupted expanse in space)
The bow of the boat cuts through the waves.
As explained earlier, people experience significant gains in learning when text and
graphics are integrated. There is a reduced need to try and match up which graphic
or part of a graphic goes with which words. More specifically, related words and
graphics must be contiguous, that is they must be adjoining (touching each other
physically), neighboring (situated next to each other), continuous (connected
together so as to form an unbroken sequence in time or an uninterrupted expanse
in space). This explanation is from the Encarta Dictionary.
8

9. Two Contiguity Principles
• Contiguity Principle #1
Connect
– Place printed words to printer
near corresponding graphics
• Contiguity Principle #2
– Synchronize spoken words
with corresponding graphics
Narration associated
with this graphic
This idea of contiguity is found in two principles.
Contiguity Principle #1 –
Place printed words near corresponding graphics
Contiguity Principle #2 –
Synchronize spoken words with corresponding graphics
Let's look at Principle #1 in more detail.
9

10. Principle #1.
Place printed words near corresponding graphics
radio waves
receiver where
waves are collected
waves
converted into
electro signals
Contiguity Principle #1 - Place printed words near corresponding graphics
Embed printed words near the graphic that they describe. This will result in the
contiguity of printed words and graphics on the screen. In other words,
corresponding graphics and printed words should be placed near each other,
contiguous in space.
10

11. How to coordinate printed words and graphics
This text describes the graphic.
This text describes the graphic.
handlebars This text describes the graphic.
This text describes the graphic.
seat This text describes the graphic.
This text describes the graphic.
This text describes the graphic.
This text describes the graphic.
This text describes the graphic.
This text describes the graphic.
This text describes the graphic.
This text describes the graphic.
Pop-up
with
more
pedal info
1. 2. 3.
a smooth ride obstacle in the way lose control
The following scenarios explain how to coordinate printed words and graphics.
•When a graphic is a diagram showing parts of an object, the printed names of the
parts should be placed near the corresponding parts of the diagram. (Use a line to
connect the name to the part).
•When using still frames, make sure the text describing an action (or state) is placed
near the corresponding part of the graphic (Again, use a line to connect the text with
the graphic).
•When there is too much text to fit on the screen, the text describing each action or
state can appear as a small pop-up message that appears when the mouse touches
that portion of the graphic. (This is called a mouse-over or rollover).
11

12. Contiguity Principle #1 - Violations
This text describes
the graphic. Here is 1. Text and graphics
more info about the
graphic… separated on scrolling
screens.
2. Feedback displayed Screen 1. Screen 2.
on separate screen from The Question Feedback
the practice or question.
Lesson 3. Covering lesson screens
appears on
this screen.
with linked windows.
4. Exercise directions Screen 1. Screen 2.
separated from the The directions The exercise
exercise.
5. Captions at the
Text, text, text, text, text,
bottom of screens
text, text, text, text, text. 2.
1. 3.
6. Legend appears
below key parts 1. wheel
2. body
of a graphic. 3. handles
Contiguity Principle #1 - Violations
1. Text and graphics separated on scrolling screens. As the user scrolls to view the
graphic, the text is no longer visible. Solution: use a fixed screen display and
place text boxes over the graphic near the element being described. Or, use text
boxes that pop up over graphics when the graphic is touched by the cursor.
2. Feedback is displayed on a separate screen from the practice or question. The
learner must page back and forth in order to compare his/her answer with the
correct one. Solution: include the correct answer in close proximity to the original
practice item or question.
3. Covering lesson screens with linked windows, e.g., where a job aid is presented
on top of the application screen to which it refers. Or, a link leading to an online
reference opens a second browser window that covers the related information
on the initial window. Solution: link to a window that is small, can be moved
around, and/or can be printed.
4. Exercise directions separated from the exercise. Directions are placed on a
separate screen from the application screen to which they refer. Solution: put
step by step directions in a box that can be minimized on the application screen.
5. Captions at the bottom of screens. The learner must scan back and forth
between the words and the part of the graphic they describe. Solution: relocate
the text closer to the visual and insert lines to connect the text to the visual.
6. Legend appears below key parts of a graphic. When the legend is at the bottom
of the screen, the learner must scan between the number and the legend.
Solution: place the name and description in a separate box near the
corresponding part on the visual. Or, the text could be placed in a rollover box or
in a fixed display on the screen. 12

13. Contiguity Principle #2
Synchronize spoken words with corresponding graphics
“A flat surface “You need to watch “Driving over rocks
provides a nice, out for obstacles can make you lose
smooth ride.” in your path.” control of your bike.”
1. 2. 3.
a smooth ride obstacle in the way lose control
Contiguity Principle #2 - Synchronize spoken words with corresponding
graphics
Coordinate spoken words and images so the learner can view the part of the
graphic that is being described by the spoken words. The learner should be able to
concurrently listen to narration while viewing the corresponding material in a
graphic. This represents contiguity of words and graphics in time.
Here are two examples of how to coordinate spoken words and graphics.
•Spoken words (narration) should play at the same time as the graphic, animation or
video that is depicting the event.
•When corresponding graphics and spoken words are presented at the same time,
they are contiguous (next to each other, in time).
13

14. Contiguity Principle #2 - Violations
1. Separating graphics and
Listen View
narration through icons. to audio the video
The Roman leaders
met to discuss the
2. Separating graphics proposed law. They
debated for hours, with
and narration in a most of the members
continuous presentation. speaking against the
Screen 1. Text and narration Screen 2. The video.
Contiguity Principle #2 – Violations
1. Separating graphics and narration through icons, e.g., a link to audio is indicated
by one icon and a link to the video by another icon. The learner must hold
relevant words in working memory and then match up each segment with the
corresponding animation, which is played after the narration. This results in
extraneous processing – mental load that does not contribute to learning. In fact,
it likely detracts from learning!
2. Separating graphics and narration in a continuous presentation, e.g., a narrated
introduction is followed by the animation or video. The narration should be
presented at the same time the static frames are presented. Otherwise, it
causes cognitive overload because the learner must mentally hold the words in
working memory until the graphic appears. Again, this results in extraneous
cognitive processing. When narration and static frames are presented
simultaneously, the learner can more easily make mental connections between
corresponding words and graphics.
14

15. Humans try to see the meaningful relationships
between words and pictures.
narration
text Owww!
graphics
text + graphics
text + narration
Ahhh!
narration + graphics
Summary - Psychological Reasons for the Contiguity Principle
In summary, humans are not machines that merely record information. Humans
make sense of input by trying to see the meaningful relationships between words
and pictures. When text and graphics, or narration and graphics, are separated, the
human mind must use its available cognitive resources to match them up. This
separation results in extraneous processing, which takes some of the brain's
processing power away from the most important task at hand, learning. Only when
the human mind can fully attend to the message and the graphics in a holistic,
integrated fashion, can the deepest, most effective learning take place.
15

16. Knowledge Check
• Can you explain what is meant by Active Learning?
• How does combining well designed visuals with text
improve learning?
• Explain Contiguity Principle #1 and provide some
examples.
• Explain Contiguity Principle #2 and provide some
examples.
16