Designing visuals for effective learning

When you think about a graphic designer, what do you imagine? Perhaps a quirky creative with colourful clothes and hair? An artistic, free spirit?

As a graphic designer, I often feel like there is a big difference between what I do and how my work is perceived. 

Although graphic design involves creative thinking, it also requires careful problem solving and analytical thinking. A good designer will get in the heads of users and think about how to encourage them to engage with the content in an optimal way. This is especially true when designing visuals for a learning experience. We rely on some key design principles to help users engage with content and get the most out of a course.

When we design interactions for learners, (such as quizzes, hotspots & other activities) we have a few goals in mind:

• to keep them engaged;
• to aid understanding; and
• to remove barriers to learning.
  ‍

Let’s take a look at how we can achieve these goals.

Example of a hotspot interaction

Keeping users engaged

This can sometimes be challenging because learning itself is hard and online learning presents its own unique set of challenges. In a classroom with a teacher or with a textbook, it can be easier to avoid distractions. However, the internet has millions of distractions just a click away (I say this with about 20 tabs open on my browser).

So how do we overcome this challenge? By creating interactions that cause us to pause, reflect, and take action. Interactions that can improve a user’s attention span, rather than detract from it. When designing course interactions: 

• we try to reduce click and scroll fatigue by alternating between them; 
• we create predictability by using consistent layouts, buttons, interaction styling and sections within a course and between a series of modules, that makes each course easy to use; 
• we use a variety of interaction types to avoid it feeling repetitive; and
• use multimedia such as video, supporting imagery, and a variety of interactions to help the learner remain engaged.

Video supports learning by using visual and audio cues to aid understanding and increasing engagement

Aiding understanding

Many of us will say “I am a visual learner” or “I am an auditory learner”, however, this is widely considered to be a myth. Research has shown that, although we might have learning preferences, everyone learns better when given content in a variety of modes, or what is sometimes called a multimodal approach. This is where graphic design can play a vital role in developing greater understanding for learners. When coupled with text, video, or audio - clear graphs, infographics and demonstrative imagery will provide far greater clarity.

An image, in conjunction with written information, allows greater understanding of the topic.

Here we created an on scroll animation to explain a very complex process around cyber security

Making it easy … sort of

Easy doesn’t mean the content is easy, it means the UI design doesn’t get in the way. This is a key function of UI design principles. For example, where do you place a button on a mobile UI so you can easily reach it with your thumb? Is the text too hard to read? Is it easy to miss content or is it just not clear what I’m supposed to do next? Good design will explain what you need to do. With great design you know without being told - it speaks for itself.

Thumb reach for mobile UI design

Conclusion

Graphic design often feels like the icing on the cake for many projects, however, it’s an important ingredient in online courses that provides an additional mode of learning that is not just decorative. Good design increases understanding, supports learning, and improves engagement. It really is a vital part of a well rounded, well designed, multi-modal course.