Using Images

When adding images to courses, make thoughtful choices. Choose images that are visually compelling, match your course content, and help enhance understanding of the target learning content (DeBell, 2020):

  • Don’t add an image just because you see a blank space. Images should be selected deliberately, for a purpose. They should support the content and add to the learning experience.
  • Each image should be thoughtfully selected and cropped to a specific size to fit the slide layout.
  • Avoid images that are use clipart, are overused online, or feel old and outdated. 

 

What Images Should I Use?

The strategic use of images appropriate to your material can enhance learning by tapping into the brain's propensity to learn visually. Choosing the right graphics is fundamental because those with no purpose can actually make learning harder. A great way to access the appropriateness of an image is by asking the question: does it serve a specific goal?

Categories of Visuals (Gutierrez, 2013) Examples
Decorative

While this type of graphic adds aesthetic appeal and humor to a material, you should sparing use them in your eLearning materials. Decorative pictures are completely ignored by learners. They don’t serve any instructional purpose. Used excessively, such as when theming your course, they can depress learning rather than facilitate or improve it.  

 Random clip-art graphics, images that don't reinforce attention to the target material
Representational 

This type is commonly found in training materials. As the name suggests, it’s intended to depict a lifelike image of an object. They usually have a strong connection with the text on the screen - they reflect and reinforce it. You can appropriately use them when showing factual information and concrete concepts. 

 Photographs of people undertaking tasks, photos of equipment, and screen captures
Organizational

Want to guide learners through course content? Or perhaps visually orient them to the sequence of a lesson? Organizational graphics are your best choice. These images can be very helpful to the learner because they help to build mental models and to organize the knowledge in ‘scaffolds’. By showing overviews of the content, they’ll help walk students through the main ideas of your eLearning material. 

 Geometric visuals such as process flowcharts, Venn diagrams, or site maps
Relational

While organizational graphics show the qualitative relationship of your material’s contents, relational graphics depict their quantitative relationship. They’re powerful visuals that make easily digestible content out of numbers.

 Line graphs, pie charts
Transformational

Transformational graphics are often combined with other types of visuals to show changes in an object over time.

Tip: Procedural instructional goals work best with a combination of transformational and representative visuals to demonstrate procedures.

 Animation is the most commonly used form, but you can also use before and after photographs or illustrations to demonstrate how something is affected by a process
Interpretative

This type of graphics will help learners better understand abstract ideas. They illustrate a theory or principle and help learners understand them conceptually.

 Simulations, diagrams of equipment working, series of graphics showing something working, animations or even simple line drawings to explain scientific laws and theories

 

Choosing the best images for your course starts with determining your instructional goals. Chose one or two categories of graphics that align with each of your goals. For instance, course materials heavy on processes can benefit a lot from a combination of transformational and interpretive graphics. Those made of multiple facts can benefit from relational and organizational graphics.

 

How Should I Display Images?

When adding images there are a couple of ways of presenting them, which link to the emphasis you wish to place on the image. Consider the order of priority when aligning images on a page.

Primary Images

In the example below, the image is emphasized with a descriptive caption below it, which enhances a key point in your content. This is an effective strategy for elements such as a diagram, graph, or other representation of important ideas.

Study shows users retain illustrated lectures significantly more than written or spoken lectures

 

 

 

 

 

 

 

 

 

 

 

Visuals are more likely to be stored in our long-term memory, leading to better retention.

Source: Mani, B. (2021). The Power of Visual Learning Links to an external site..

 

Secondary Images

edge-alignment-220x300.jpeg

For images that do not need to be displayed larger (i.e. no detailed information, or data) but help to visually communicate concepts, you can choose to right- or left-align them in proximity to the related text. By default there is no way to provide captions linked to the image, so using in-text references to the images is best.

Including an image, chart or graph in proximity to the text helps learners make connections to learning materials and to process the learning using another mode.  Left-aligned or centred images can be disrupt the flow of reading depending on the size of the image and/or screen the user is viewing it on. Keeping images right-aligned is a safer and simpler way to include images on the Canvas page. 

Note: Keep in mind that text flow and images may vary based on the device the Canvas page is displayed on. For example alignment might work on mobile or smaller screens as intended, but leave a large gap of white space on larger screens.

 

What Accessibility Guidelines Should I Follow When Using Images?

Image Alt Text

When adding images, an important accessibility consideration is the use of Alt Text. This provides a description of the image which can benefit learners who are visually impaired or learners with limited internet access to load images. 

How to edit alt text when uploading an image

 

 

 

 

 

 

 

 

 

 

 

When uploading an image to Canvas, the Alt Text field appears directly beneath the image.  

 

Good: "User retention graph"

Better: "Study shows users retain illustrated lectures significantly more than written or spoken lectures"

 

The rule of thumb for Alt Text is to use language describing what is happening in the image, instead of generic language that could be applied to any image. Imagine you are describing an image to a colleague who cannot see it on their screen - be as brief and descriptive as possible.


Cultural Considerations

It's important to consider how images may be interpreted (or not) based on the cultural background of the learners. For example selecting an image with cowboy on a horse riding into the sunset to signify the course conclusion, may leave some students confused. The thumbs-up emoji, for example signifies agreement in Western cultures, in other cultures it is an offensive gesture. 

 

Emojis

Use of emojis (characters that express emotions or emotional reactions) is very common in day-to-day online discourse, so using them within the context of Canvas can work in specific cases. As you can see from the following paragraph, overuse can not only be visually distracting, but also makes for a disruptive screen reader experience. Screen readers will read out the name of the emoji, this can be confusing especially if the description is not inline with the context. 

Emojis can be used anywhere text is present, including module headings (use a  ✅ a  ➜ to mark current modules), rubrics (for assessment criteria levels - 🙁 < 😑 < 🙂 < 😃), etc. They can be used to draw attention to important text.

 

References