The Profile Picture: The Multimedia and Contiguity Principles

     Throughout this week in Module Two of ELRC 7505, we read, reviewed, and discussed a critical aspect of the rapidly evolving landscape of educational technology: designing effective digital learning materials requires a deep understanding of how the human brain processes information. Rather than simply throwing text and images onto a screen, educators must intentionally structure digital content to maximize comprehension and minimize cognitive overload. Two foundational frameworks that guide this intentional design are Richard Mayer’s Multimedia Principle and Contiguity Principle. When applied correctly in the classroom, these principles transform passive viewing into active, meaningful learning.

Understanding the Core Principles

     The Multimedia Principle is extremely simple: people learn better from words and pictures combined than from words alone. This principle is rooted in the understanding that the brain processes visual and auditory information through separate channels. When an instructor presents a concept using both text and a corresponding image, it allows the learner to build mental representations in both channels simultaneously. However, this does not mean adding decorative clip art or generic stock photos. The visuals must be strictly instructional, directly mapping to the text to help the brain cross-reference and solidify the new information. In the event the multimedia used is simply decorative and not an addition to the learning experience, this process of utilizing that multimedia does a disservice to the reader, reducing cognitive retention of the information.

     While the multimedia principle advocates for what elements to include, the Contiguity Principle dictates where and when to place them. Specifically, the Contiguity Principle states that learners process information more effectively when corresponding words and pictures are presented near each other on the screen rather than far apart. When text is placed at the top of a page and the related graphic is buried at the bottom or hidden on a separate slide, the learner is forced to engage in visual scanning. This unnecessary eye movement burns precious mental energy trying to connect the dots, which inherently reduces cognitive retention of information. By placing the text directly inside, next to, or integrated with the graphic, the brain can immediately process them as a single cohesive concept. In essence, the easier the text and graphic mesh, allows for minimum cognitive delay between text and graphic, allowing for quick connection of information, and increasing cognitive retention over time.

Application: The Moodle Profile Picture Slideshow

     To demonstrate these concepts in a practical classroom context, I developed a basic instructional slideshow mapping out the step-by-step process of adding a profile picture to a user’s Moodle account. Although uploading a profile picture is not an intricate or inherently difficult technical process, the simplicity of the task serves as a perfect testing ground for clean instructional design. Because the task is straightforward, any friction the learner experiences would be a direct result of poor layout choices rather than the complexity of Moodle itself.

     In alignment with the Multimedia Principle, every slide in the presentation pairs a concrete action step with a direct screenshot of the Moodle interface. Instead of just reading "Click on the user menu," the student immediately sees the visual location of that menu. The text explains the action, while the graphic provides the context in the digital space, allowing both processing channels to work in tandem.

The core focus of the slideshow, however, was the deliberate application of the Contiguity Principle, with an emphasis not only on intertwining media and text but also on highlighting how-to guidance for increasing learner understanding. In typical, poorly designed tutorials, a user might see a large, numbered list of steps on one side of a slide and a giant cluster of screenshots on the other, forcing the eye to dart back and forth to match Step 1 with Picture 1. To eliminate this issue, I structured each slide so that the instructional text and its corresponding graphic are physically paired in tight proximity. The reader does not have to move their eyes far to scan between the written directions and the visual cues. Furthermore, callout boxes or text indicators are placed directly adjacent to the specific buttons in the Moodle screenshot.

Conclusion

     By minimizing the physical distance between the text and the imagery, the presentation successfully reduces extraneous cognitive load. The learner's brain doesn't have to work to connect the words to the visual; the layout does that work for them. Ultimately, this slideshow demonstrates that even the simplest classroom instructions benefit immensely from intentional formatting. By respecting the multimedia and contiguity principles, we ensure that digital information clarifies, rather than confuses, the learning process.

(Student Text with edits from Grammarly and Gemeni 3.0)