Use Background Images or Videos Efficiently

E-Learning courses don’t have the same goals and users as web pages do, but e-learning modules do need to apply some UI/UX best practices, such as the special formatting for web texts, as I commented in a previous post. One characteristic of some minimalist web pages is the use of large background images or videos. This trend is expanding rapidly to e-learning design and is becoming a natural characteristic of HTML5-based online courses:

example of background image
Image from

While the use of this feature might keep the course for looking too boring or stark, an abuse of this characteristic might severely affect learning. This emerging trend reminds me of the first times of PowerPoint: I’ve seen some kitsch presentations where the whole catalogue of animations was used not only in the same presentations but even in one single slide.

Eliminate Extraneous Elements

An e-learning course has one goal: to allow users to incorporate new information into their existing knowledge. The top priority of a course should be its cognitive appealing. Of course, it is important that the course is visually attractive, and there are different techniques to achieve it, such as writing short texts, applying a layer-cake pattern to texts, or achieving empty space.  The following example displays the use of empty or white space in an e-learning course:

example white space
Image from

But the principal reason for avoiding the use of large background images or videos is that they violate an extensively tested multimedia learning principle: the coherence principle, which states that adding extra material can hurt learning.

The idea that adding interesting elements in an e-lesson produces more engagement and therefore increases learner’s motivation underlies the arousal theory, which is not supported by current learning theories. A very expressive concept for this approach is the expression “chocolate-covered broccoli”.

Golden Rule: Don’t Hurt Learning

So, what if you still want to add a background image or a video to your e-learning course? As always, apply common sense. Before you use a  background photo or video with your course design, ask yourself the following questions:

  1. Do the images or videos serve a real purpose or help learners understand the content? If the answer is not, they’ll just distract learners. A background image or video won’t cause much damage in the title section, but how about a knowledge check question?
  2. Is the text both legible and readable? Legibility is the extent to which users can distinguish individual letters. Readability is how well they can process words, phrases, and scan the text. If still, you want to use a background photo or video, add a semi-transparent layer between it and the text to facilitate legibility.
  3. Can heavy images and videos impact performance? Think mobile first and make sure mobile learners won’t have to wait for the image to load.

Consult a Learning Specialist

Before making any decision about your e-learning course, be sure that you are assessed by a professional learning specialist. It’s very easy to jump into the apparently logical trend of spicing up the materials and of creating jazzier products.

Leave a Reply