We design online content to be compatible with how people learn.
Here we turn to the work of cognitive psychologist Richard Mayer, and his cognitive theory of multimedia learning (Multimedia Learning, 2009):
As depicted in the visual above, we possess two channels for processing information in working memory:
Importantly, each channel has limited processing capacity. This means that when designing online learning material, we need to make sure that we are not overloading one channel at the expense of the other (causing information traffic jams, or, in Mayer’s words, cognitive overload). To help learners learn efficiently, it is best to engage the visual and verbal channels simultaneously.
Helping learners process information efficiently is an important starting point when designing online learning material. But it’s only a start. In order for meaningful learning to occur, Mayer tells us that learners need to actively process material in each channel. They do this by
selecting relevant info
organizing it into a coherent representation
integrating it with other knowledge
Engaging in these processes helps learners to construct a coherent schema or model, which allows them to construct meaning. To encourage meaningful learning, therefore, we design online content to facilitate the cognitive processes of selecting, organizing, and integrating information.
...instructional design involves not just presenting information, but also presenting it in a way that encourages learners to engage in appropriate cognitive processing.(Mayer, Multimedia Learning, p. 168)
First of all, we use multimedia (defined as words paired with pictures):
Presenting an explanation with words and pictures results in better learning than presenting words alone. (Mayer, Multimedia Learning, p. 239)
So, our starting place in designing content for online learning is that multimedia helps learners learn. But only if done right. Here are three things that make it right, according to the work of Mayer and his colleagues:
There are 4 principles we can follow when designing online content to minimize distraction:
Unnecessary words, sounds, and pictures are considered "seductive details" - they interfere with knowledge construction because they direct learners' attention away from relevant material and towards non-essential material, which may disrupt learners' ability to build an appropriate mental model.
...adding extraneous info gets in the way of [the] structure-building process(Mayer, Multimedia Learning, p. 106)
Make something consciously cute where the cuteness is extraneous, irrelevant to the task, and you get frustration, irritation, and resentment.(Norman, Emotional Design, p. 111)
A few examples of coherent design follow. In each example, you’ll notice well-structured content that uses lots of white space, does a great job of depicting spatial relationships, and only uses images when they contribute to the experience of reading the text.
Cues help learners select and organize key material. These cues may include verbal (e.g., headings, outlines, vocal emphasis) or visual (e.g., arrows, colours, pointing gestures, graying out).
Note: Signaling is most effective when used sparingly.
Printed words compete with images in the visual channel, risking cognitive overload.
It's better to use pictures with words:
...the most efficient way to present verbal material is through the verbal channel - that is, as spoken text only - because in this way it does not compete with pictures for cognitive resources in the visual channel.(Mayer, Multimedia Learning, p. 124)
Learners presented with printed text and narration may try to reconcile the printed text with the narration, wasting cognitive resources that could be better used to construct meaning. There's a great example of this from Fox News.
Take a moment to watch it.
Did you find yourself trying to read the on-screen text, AND listen to the narration at the same time? You probably didn’t end up doing either very well. Why not? Well, first of all, your visual channel was overloaded, trying to process both the image of Bill O’Reilly and the on-screen text. But more importantly, you were probably trying to reconcile the on-screen text with the narration, and used your working memory capacity to do this work rather than try to construct meaning from what O’Reilly was saying. This is clearly not an efficient use of your working memory. As Ayers points out, when two sources of information contain the same information, “unnecessary working memory processing takes place trying to integrate the two sources” (Ayers, p.632).
A much better way to present video content is to pair narration with pictures rather than text, making use of both the visual and verbal channels. Here’s an excellent example of video designed with this principle in mind:
There are, however, certain conditions under which text can be paired with narration, and learning isn't negatively impacted.
Recent research further suggests that redundancy may not affect learning when the subject matter is not theoretical (Ozdemir, Izmirli, Sahin-Izmirli, 2016). For example, Ozdemir and colleagues (2016) found that redundancy did not negatively affect learning when participants in their study were learning how to use Adobe Flash (an applied subject).
There are also conditions under which printed text is preferable to narration — see the reverse modality effect in the Modality Principle section below.
Spatial contiguity refers to the spatial placement of text in relation to pictures: when text and pictures are not integrated, learners' attention is split (Ayres, 2015), resulting in extraneous cognitive load. Integration design is the goal. Here's an example:
Learning is further improved when learners are allowed to place the text next to the relevant parts of an image themselves, rather than seeing them already labelled. This kind of interactivity actively engages learners in cognitive processing. (See Foster Generative Processing below.)
Temporal contiguity refers to the temporal placement of text in relation to pictures: they should be presented simultaneously rather than successively:
The following video from CHE 102 provides a good example of both temporal and spatial contiguity:
Eliminating the things that cause extraneous cognitive overload is the first step in designing online content that is pedagogically useful. However, we still need to deal with the cognitive overload that arises when essential material is cognitively demanding or complex, or when learners are novices. Mayer calls this essential processing overload.
There are 3 principles we can follow to help learners avoid this kind of overload, and to help them better process essential material:
This principle is fairly intuitive: intellectually, it is MUCH easier to digest shorter lecture segments than a long, continuous presentations of material (Mayer, p. 177), both for text- and video-based lectures. The bigger question is, "How small is small enough?" Opinion varies on this front. Guo (2013), in his research on Massive Open Online Courses (MOOCs), found that video-based lecture viewing dropped off after 9 minutes (among certificate-earning learners):
Peters (2014) is a little more generous, citing Scott Klemmer’s Stanford Human-Computer Interaction course on Coursera as a good model for video-based lectures. In Klemmer's course, lectures are segmented into topic chunks of 10-20 minutes each (Peters, p. 190).
For slide-based presentations, learning material can be further segmented by restricting the presentation of content to one important concept per screen (Gutierrez, 2016).
For text-based learning material, use paragraphs and subtitles to segment. Walls of text can quickly overwhelm learners — use white space to provide “a visual breather”(Gutierrez, 2016).
Pre-training involves introducing learners to the names and characteristics of the main concepts to be covered in a lesson. It is designed to instill prior knowledge of key concepts, and, as Mayer explains, it works by "off-load[ing] some of the essential processing [from the lecture] onto the pre-training episode" (pp. 192-3). This increases learners' available cognitive capacity during the lecture, and allows them to devote more cognitive resources to understanding the material, which makes deeper learning possible.
In an online learning context, the “pre-training episode” can be delivered on the module page, before learners access the lesson content. In this example from PSYCH 101, for instance, learners are introduced to “New Terms and Concepts” before they access the lecture material:
Simply put, this principle states that pictures paired with spoken words generate deeper learning than pictures paired with printed words.
...the best way to present words and pictures in a computer-based environment seems to be as a concise narrated graphic.(Mayer, Multimedia Learning, p. 219)
This seems counter-intuitive for those of us out there (and I'm sure there are many!) who prefer to learn by reading printed material. We may well ask, "What is the rationale for this principle?" The answer echoes the rationale for pre-training — it's all about managing cognitive processing. In short, presenting words as narration "off-load[s] some of the essential cognitive processing from the visual channel to the [verbal] channel" (Mayer, p. 203).
The following video from PSYCH 213 provides a good example of the modality principle:
Is this always the case?
No. Very few things in life come without conditions. In terms of the modality principle,
To mitigate the reverse modality effect, we recommend segmenting narration into bite-sized chunks (see Segmenting Principle), and, where possible, supplementing it with a permanent written record, which can be provided to learners as an alternate format.
The big take-away in terms of helping learners to manage essential processing, then, is to design online instruction in ways that are congruent with the dual-channel, limited capacity way our brains process information. All of the principles outlined on this page become common-sense when we understand how our brain processes information.
Now that we've eliminated potential distractors from learning and helped learners better process essential material, we need to turn our attention towards helping learners to construct a model or schema of the material. This is what Mayer calls "fostering generative processing" — it essentially means helping learners organize and integrate visual and verbal representations of the material, and then integrate this new material with relevant prior knowledge.
Learners who engage in generative processing of this may seem to be passive (that is, they are not engaging in behavioural activity — they are not visibly "doing" anything), but cognitively, they are active. Mayer is very clear on this point:
...well-designed multimedia instructional messages can promote active cognitive processing in learners even when they seem to be behaviorally inactive.(Mayer, Multimedia Learning, p. 22)
There are 3 principles we can follow to help learners organize material and integrate it with prior knowledge:
Mayer describes this principle as "the most fundamental principle of multimedia design" (p. 240); it is so fundamental that it bears quoting him at length:
a deeper kind of learning occurs when learners are able to integrate pictorial and verbal representations of the same [instructional] message. This deeper processing can be called generative processing. Rather than adding information to memory, learners are actively constructing pictorial and verbal mental models and trying to understand how they are related to one another.(Mayer, Multimedia Learning, p. 240)
Presenting words with graphics is crucial because it helps learners to engage in active cognitive processing. However, not all graphics are created equal - not, at least, in pedagogical terms. Mayer (p. 236) identifies four types of graphics used in instructional material:
these are added to generate interest or entertain the learner
these portray a single element rather than relationships between elements; while related to the instructional message, they do not add further explanatory power to the text;
these depict relationships among elements (e.g., graphic organizers and infographics);
these explain how a system (e.g., the water cycle) works.
It should be noted that decorative visuals can be further broken down into three subcategories – seductive, conducive-emotional, and conducive-metacognitive (Schneider, Nebel, & Rey):
do not enhance the instructional message.
Conducive - Emotional
these images can have a positive effect on learning when positive emotions are evoked.
In EARTH 121, the course author uses the following image to engage students in an activity designed to help them take notice of their environment in a different way than ever before. This particular image was selected to prompt students to carefully observe, track, and interpret hidden clues in the landscape. The activity provides opportunities for students to actively construct ideas, a process further enhanced through the positive affect created by the image.
Conducive - Metacognitive
these are images that can have a positive effect on learning by acting as a retrieval cue for learners when placed in proximity to a course concept.
The following visual of an American flag in inverted colours acts as a retrieval cue for the concept of trichromatic theory, which is explained in the text that immediately precedes the image in a PSYCH 101 module on visual perception.
Research suggests that only organizational, explanative, and conducive decorative visuals promote learning. In order to design useful online content, therefore, use these types of visuals, and use decorative visuals (even conducive ones!) sparingly.
We revisit conducive images and discuss the importance of emotional design in more detail on the Desirable page.
Here's an example of an organizational visual in a technical writing course (explaining how a technical work-term report bridges work terms with academic terms):
Under what conditions does the multimedia principle hold true?
Online learning can be viewed as an implied conversation between the learner and the instructor: picture a learner sitting alone at her computer, "listening" to the instructor through her computer speakers or headphones. Given this, it makes sense to address your learners as you would in a conversation. Communicating in a conversational style increases learners' feelings of social presence (sense of relationship with the instructor), which, in turn, increases learners' motivational commitment to make sense of the conversation (Mayer, p. 244).
Personalization can also involve including stories and/or examples that allow learners to relate to the content and instructor. The following video provides a great example of this:
Of course, too much of a good thing can be a bad thing: extraneous conversational strategies can be distracting too (Mayer, p. 254). In other words, don't go overboard — don't let it ALL hang loose, dude!
Simply adding an instructor's image (e.g., a "talking head") to the screen has not been shown to promote learning (Mayer, p. 260). In fact, it is potentially distracting (Fiorella & Mayer, 2015). However, human demonstration, — in particular, showing an instructor's hands drawing an explanative or organizational visual, does promote learning:
...observing the instructor make drawings while orally explaining a topic can promote student learning, and further, that there may be unique [e.g., motivational] benefits associated with the presence of a human instructor's hand during the lesson.(Fiorella & Mayer, "Effects of observing the instructor draw diagrams on learning from multimedia messages", p. 14)
It is important to note that other approaches, such as drawing out a concept without instructor presence or presenting a video in which the instructor points to a static image to highlight key points, do not improve learning outcomes to the same degree as human demonstration (Fiorella & Mayer, 2015). Only one study addresses this effect, as this area of research is fairly new.
Here are a few examples of human movement being used to promote student learning:
Providing learners with worked examples has been found to be particularly effective for novices (Ayres, 2015), whereas experienced learners have been found to benefit most from answering open-ended questions with supporting arguments (Leppink, Broers, Imbos, van der Vleuten, & Berger, 2012). Worked examples scaffold learning by making problem-solving techniques visible, thus reducing cognitive load. Here’s an example of a worked example in which a sentence in the passive voice is transformed into active voice:
And here’s a math example, where students are shown matrix-vector multiplication by rows: