Blog Post

Articles
3 MIN READ

Contiguity Principle: Keep Graphics & Related Text Together

CommunityTeam's avatar
11 years ago

In the article Multimedia Principle: Adding Graphics to Words Improves Learning we talked about how the research Mayer and Clark present in their book E-Learning and the Science of Instruction shows that mixing words and graphics can be beneficial to learners. But that’s just the tip of the iceberg! They also provide ideas on how to position graphics and related text for best results, which is what we’re going to take a close look at in this article.

What Is the Contiguity Principle?

Mayer’s research says that learning improves when images and related text are kept together—or contiguous (hence the name contiguity principle). The same goes for descriptive audio. For effective learning, any narration that describes graphics on the screen should be synchronized with the appearance of those graphics. The evidence outlined in the book shows that learning improves 68 percent when words and the visuals they describe are presented near one another.

Makes sense, right? If the words are separated from the relevant graphics, learners have to work harder to make the connection than they would if they were combined.

Applying the Contiguity Principle

So what does this look like in practice? Let’s walk through a concrete example:

The graphic above doesn’t follow the best practices outlined in the contiguity principle. While it might look neat when it’s arranged this way, putting the labels so far away from the parts of the diagram they correspond to requires learners to work harder to match them up. Since working memory is limited, this extra effort takes away from their ability to learn the material itself. Now let’s look at that same diagram with integrated labels:

The image above follows the rules outlined in the contiguity principle: the labels appear next to the relevant parts of the diagram. This version allows learners to identify the parts of the diagram in a glance, allowing them to focus on understanding the material instead of on matching the labels with the corresponding parts.

Sometimes following these guidelines is easier said than done, like, for example, when screen space is limited or the text interferes with your graphic. One strategy for situations like these is to use markers to position the related text near a graphic without overloading the screen—or your learners. Here’s an example of what that could look like, using the same graphic as above:

Click to view the interactive version created in Rise 360.

This way the related text is right where it needs to be but doesn’t clutter up the screen. It’s the best of both worlds!

This all seems pretty logical, right? And it is! But even so, many of us are guilty of not applying it in our courses. In addition to labeling graphics directly instead of using keys or legends, check out this list of do’s and don’ts to avoid making some of the most common mistakes in regards to the contiguity principle.

Do

Don’t

Integrate any descriptive text or labels into your animations directly.

Place text on one side of the screen and animated graphics on the other side of the screen.

Make sure the quiz question and learner responses are still visible when giving feedback.

Put quiz feedback on a separate screen, making it impossible for learners to refer back to the question and/or the answers they chose. 

Make sure instructions are visible when learners need them.

Put instructions on a separate screen, making them unavailable when the learner needs to apply them.

 

Are you guilty of any of these common mistakes? If so, you’re not alone! The key is to start thinking about these “don’ts” when creating new courses so you can do the right thing moving forward.

More Resources

If you’d like to dig deeper into this and other evidence-based best practices for e-learning design, be sure to check out the book that inspired this article: E-Learning and the Science of Instruction by Ruth Clark and Richard Mayer.

Short on time? Check out these articles where we’ve summarized a few of the other key points presented in their book:

Like this article? Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter)

Published 11 years ago
Version 1.0
  • NickLeffler's avatar
    NickLeffler
    Community Member
    @Simon While keeping the content uncluttered is extremely important, I think the emphasis is more on keeping the content close to the action or item.

    Notice on the piston example where text is separated how your eyes have to jet around the screen to connect all the parts. Very quickly your eyes get tired and in my case I stopped looking. The one on the right it was easy to connect the description to the item and my my eyes did not get exhausted.

    I guess doing this also encourages using a bit more white space because if you tried to cram too much text on the screen then the illustration would be unreadable.
  • SimonPerkins's avatar
    SimonPerkins
    Community Member
    Hmm, that's a good one. I guess the emphasis is again on keeping the content uncluttered therefore allowing space for the image(s) and text to breathe.

    Having said that, I think there are occasions when it's necessary to squeeze more content on the slide because it illustrates collectively the bigger picture. The example I have in mind is an interactive floor plan I did for an exhibition. The plan had a heck of a lot of detail which needed to be displayed in manageable chunks AND as an all-in-one kind of snapshot.

    Will bear this more in mind from now on.
  • SimonPerkins's avatar
    SimonPerkins
    Community Member
    You're right Nick, I didn't do a particularly eloquent job of getting my point across :)

    What I meant to emphasise was the need to give the content a "togetherness", therefore, like you say, enabling the learner to interpret the visual elements more clearly.

    I call it "preventing brain flicker"!
  • NickLeffler's avatar
    NickLeffler
    Community Member
    I like that term. It kind of feels like a brain flicker when you have to look back and forth. My brains starts to get tired and my eyes just give up.
  • JohnWagner's avatar
    JohnWagner
    Community Member
    I wasn't sure of the point you were making at first; until I saw the piston example. What an awesome way to drive home a point! I could totally see how my eyes felt different when looking at each example! Unfortunately, the example with the car parts seemed to illustrate the exact opposite of your congruity principle. It moved the information even further away than the left piston example. The information was ultimately close to the item after clicking, but I had to read what I had to do first, then click on each part. It was more interactive, but did not seem at all to support the congruity idea.