FIU Online’s monthly Instructor Webinar series explores relevant instructional strategies and effective ways to use technology in an online classroom. The “Cozy up Your Course” webinar provided instructors with best practices and common pitfalls of boosting the visual elements of the Canvas classroom. You can catch the full recording here.
Instant Replay: Non-Designer’s Guide to Visual Elements for Online Teaching
Online instructors face the dual challenge of providing engaging learning experiences and creating an effective learning environment. So how can they boost the look and feel of their online course to enhance learner focus all while maintaining accessibility standards?
Less is More: The Coherence Principle
People learn better when extraneous material is excluded rather than included.Mayer, R. (2009). Multimedia Learning. New York: Cambridge University Press
The coherence principle focuses on reducing extraneous processing. As a best practice, instructors should only include relevant information in their multimedia. Content that is used solely for the purpose of aesthetics could distract from key learning goals.
Draw in Your Learner’s Attention: White Space
Padding your multimedia with white space draws learner attention to key information and can balance out a busy design. Don’t be afraid of white space, if used correctly, it can play a key role in what your learner takes away from your content.
Keep it Tight: Spatial Contiguity
Students learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen.Mayer, R. (2009). Multimedia Learning. New York: Cambridge University Press
Spatial contiguity suggests that related text, such as labels and captions, should be placed close to the graphics they describe. Doing so minimizes cognitive efforts for the learner and allows them to focus on the content rather than spending time scanning the screen to draw connections between text and your multimedia.
Strengthening the Connection: Balance and Proximity
Visual balance provides stability for the leaner. There are three different types of symmetry that can be used to provide balance:
- Symmetry: Made up of exactly similar parts facing each other or around an axis
- Asymmetry: A lack of equality or equivalence between parts or aspects
- Radial Symmetry: Defined as symmetry around a central axis
When balancing your content, consider offsetting larger objects with smaller objects and brighter bolder colors with darker neutral colors.
Proximity creates relationships between objects while alignment creates structure and organization. Essentially, when presenting content, unrelated items should be apart, while related items should be grouped together. This is crucial to learners drawing connections between your multimedia and your content.
Draw Attention: Signaling Principle
People learn better when cues that highlight the organization of the essential material are added.Mayer, R. (2009). Multimedia Learning. New York: Cambridge University Press
When featuring multiple pieces of information at a time, instructors should add visual cues that direct learners to where they are in their presentation.
Size Matters: Emphasis and Hierarchy
Hierarchy applies to the visual size and weight of content. Using hierarchy to emphasize a specific topic shows learners the importance and order of your content. Achieving hierarchy and balance can be done with size, color, and placement of your content. In text format this can be done with bold or italic font. One of the easiest ways to create emphasis is through contrasting color by playing with your contents background and foreground. When choosing contrasting colors, instructors should consider specific tones that ensure the highest level of contrast for legibility, such as white and black.
Putting Design Principles into Practice in Your Online Course
Investing time and resources into creating more visually compelling presentations and courses will result in more engaging content, easier-to-understand lessons and better content-retention from your audience.Mia Almaguer, FIU Online Visual Design Manager
Visual Elements for Online Teaching- Additional Things to Consider
- Type: Fonts used in learning environments should be easy to read. Font size for screens should be at least 14pt.
- Images: Consider using PNG formats over JPEGs as they provide transparent backgrounds. High definition screen resolution is achieved at 1920 x 1080 pixels. The larger a file size, the better the quality.
- Canva.com allows you to create slides or graphics from design templates.
- Genial.ly is geared more toward education and allows you to create interactive and animated graphics from design templates.
- Flaticon.com can be used to source free icons as transparent PNG files.
- Pixabay.com can be used to source free high resolution stock imagery.
Keeping Accessibility in Mind
So how can I apply these design principles while maintaining accessibility standards for my students? If a design element itself becomes inaccessible, consider providing accessible alternatives. Doing so allows you to boost the look and feel of an online course to enhance learner focus all while maintaining accessibility standards through alternative formats.
Additional Accessibility Resources
Insider Instructor Webinar Series
Missed a webinar? No worries, all recordings and recaps for past webinars can be found here.
If you have any ideas for future webinar topics, we can’t wait to hear them. Contact Christina Schettini (firstname.lastname@example.org) to share your ideas for future webinar topics.