Skip to content

Mayer's Principles Interactive Comparison

Run the Mayer's Principles Comparison Fullscreen

Sample iframe reference

1
2
3
4
<iframe
   src="https://dmccreary.github.io/infographics/sims/mayers-principles-comparison/main.html"
   width="100%" height="520" scrolling="no">
</iframe>

About This MicroSim

This interactive comparison demonstrates three of Richard Mayer's multimedia learning principles — signaling, segmenting, and spatial contiguity — applied to a sample anatomy infographic. By toggling each principle on and off independently, learners can see how each one improves (or degrades) the design quality of an interactive infographic.

What Are Mayer's Multimedia Learning Principles?

Richard Mayer's research on multimedia learning identified a set of evidence-based principles that guide how instructional materials should be designed to support human cognition. Three of the most directly applicable principles for interactive infographic design are:

  • Signaling Principle: People learn better when cues are added to highlight essential information. In this demo, enabling signaling adds color-coded regions, numbered indicators, and bold hover labels.
  • Segmenting Principle: People learn better when material is presented in learner-paced segments rather than all at once. Enabling segmenting hides the dense text block and reveals information one region at a time on hover.
  • Spatial Contiguity Principle: People learn better when corresponding text and visuals are presented near each other rather than far apart. Enabling contiguity moves the description infobox adjacent to the hovered region with a connecting arrow, instead of placing it in a distant sidebar.

Why This MicroSim Matters

Interactive infographic designers must make decisions about how to present information, handle hover interactions, and position labels and descriptions. These decisions directly affect learning outcomes. This MicroSim lets designers experience the difference each principle makes, building practical judgment about when and how to apply them.

The Design Quality Score provides immediate feedback: starting at 25/100 with all principles off, and rising to 95/100 when all three are enabled. This reinforces the cumulative benefit of applying multiple principles together.

Lesson Plan

Learning Objective

Apply Mayer's signaling, segmenting, and spatial contiguity principles by toggling each principle on and off in a sample infographic and observing how design quality changes.

Activities

  1. Start with all toggles off. Hover over the organ regions and note the experience.
  2. Enable Signaling only. Observe how color coding and numbered indicators help identify regions.
  3. Enable Segmenting only. Compare the hover-to-reveal approach vs. the dense text block.
  4. Enable Spatial Contiguity only. Notice where descriptions appear relative to the organ regions.
  5. Click Best Practice to enable all three. Compare the overall experience to the starting state.
  6. Discuss: Which single principle made the biggest difference? Why?

References