5 April

Visual Design in eLearning – The Bridge between Information and Understanding

In our blog How Learning Analytics & Data-Driven Design are creating user-centred digital learning, we discussed the importance of data-driven design and learner analytics in creating eLearning that is tailored to your learners. In this article, we are switching the focus to how your eLearning content looks and how Visual Design is vital for improving usability and understanding.

Talking about design can be confusing as it is such a broad category with many different subgenres. The most relevant ones in the L&D industry are Instructional Design and Visual Design.

What is Instructional Design?

Instructional Design is the structure and format of your eLearning, its primary focus being content, learning goals and performance. When thinking about Instructional Design, one needs to consider issues like the following:

  •       Learning objectives and goals
  •       Learners’ needs and environment
  •       What success looks like
  •       How competent learners must be

Instructional Design also looks at the way in which content is presented. The use of games, polls or simulations, are all decisions for Instructional Designers.

What is Visual Design?

Visual Design is how eLearning content might look in terms of colour, typeface, layout and navigation. Thinking about how the user interacts with content through the appearance of buttons and other interactive elements is also the job of the Visual Designer.

To use a metaphor, let’s think about a flatpack chest of drawers. The Instructional Design (the instructions, in this case) tell how you assemble it step by step while the learning outcome is an assembled chest of drawers that is ready to be used.

The Visual Design is how the finished assembled product is displayed on the box – and this is what encourages you to buy and open the box in the first place. It is also the font used in the instructions and how they are laid out. Are they presented in a way that is easy to read and understand? Are there accompanying diagrams? 

All these elements are part of the visual presentation (or design) of the instructions.

We could debate about how good instructions in flatpack furniture are. The unsuccessful assembly of flatpack could come down to bad visual design or issues with learner competency – often it might be both! 

The Difference Between Crap Design and C.R.A.P. Design

Sometimes we intuitively know the appropriate design. For example when writing, we usually use bold headlines to show the hierarchy of information. But as you understand more about design principles, you will see the improvement that basic design theory can make to your eLearning content.

Even if you are not a designer you can improve your ability for visual design by learning basic principles. In The Non-Designer’s Design Book (Williams, 2014), Robin Williams introduces four principles of design, or as they are called, C.R.A.P:

Contrast. Repetition. Alignment. Proximity.

Contrast

‘Say what you’re going to say, say it; then tell them what you’ve said.’ 

This quote is often given to people who are about to embark on public speaking, and it highlights the importance of repetition to communicate and make yourself understood.

The same principle can be applied to Visual Design: repetition and consistency can help reinforce learning. By using similar layouts, fonts and button designs you can ensure a consistent experience for learners and aid recall of key points.

Alignment

Alignment is one of those areas that, if it is done well, you won’t notice. Text and imagery will flow from one screen to another in a harmonious design. Alignment isn’t just for text; it is also important that you have even spaces between icons and images. Most tools and grids have alignment markers that can help you create a design that is properly placed and has no jarring elements.

Proximity

Grouping elements visually can help them stay connected in the minds of your learners. It can also suggest categories and units of information which can be easier to digest and recall.

Example of using C.R.A.P. principles

Here is an example to see how some basic design principles can quickly improve Visual Design.

Before

The screen is information-heavy without many contrasting elements. The font is small and difficult to read.

After

The information is grouped into three clear sections. The contrasting background colour highlights text boxes. Visual images give additional information and aid recall. (Kilar, 2022)

Why Do We Need Visual Design?

By using the C.R.A.P. principles you can break down text-heavy information and make it easier to learn and absorb. Using design principles to sort, organise and present information to your users will not only make your learning more visually appealing but also give it more educational value, promote understanding and recall, and combat learner fatigue and cognitive overload.

Visual designers’ skills encompass elements of graphic design and user interface design. They must understand the elements of clever design, like colour theory, balance and consistency. They also need to understand how elements work together and how learners interact with interfaces. Creating icons and infographics, pairing typefaces, and selecting colour palettes are all tasks for the Visual Designer. (Hogle, 2017)

Visual Design is also crucial for learners. We process information visually, and better visuals make better understanding:

  • Our brains process visuals 60,000 times faster than text
  • 40% of people respond better to visuals than plain text
  • 80% of what you see is retained while you might only remember 20% of what you read (Kilar, 2022)

Visual Design then is not just about making things look better, it is actually key to how our brains process and retain information.

Why Not Just Have ‘Design’?

Instructional and Visual Design work together, and often both are completed by the same person, so you might be wondering, why separate them into two distinct entities? And why don’t we just talk about design?

If your eLearning material is not performing as well as you had hoped, it is helpful to separate out the areas of Instructional Design and Visual Design to diagnose the issue. This poses the question, ‘is it a content issue or a presentation issue?’. Instructional Design and Visual Design require distinct and different skills, even if it is one designer doing both parts.

There is a need to look at the learning and what it aims to achieve, but also how the information can be presented visually in the best way to enhance user experience and performance.

Conclusion

Instructional Design and Visual Design work together and one cannot compensate for the other. It is no good having beautifully-designed learning content if there is no structure and users are confused about how to navigate through modules. Likewise, your Instructional Design will fail if it is not visually appealing and is presented as too information-heavy and difficult to access.

“Design is not just what it looks like and feels like. Design is how it works.” Steve Jobs, co-founder of Apple, Inc.

Design is crucial for high-performing eLearning, and design contains the symbiotic elements of Instructional and Visual Design. Understanding more about the principles of Visual Design will make your eLearning more visually appealing, but will also make it work better as it will enhance the experience of your learners and help them to understand your learning content better, faster and with more ease. 

If you want to learn more about the importance of Visual Design, join our webinar next Tuesday, 12th April. Eva Kilar, DLI Course Director, will host the session and talk about Visual Design in eLearning. Click here to register.

References