10 tips on using good design to deliver more effective eLearning

Creating eLearning courses can sometimes seem like being asked to perform an enormous magic trick. You have to develop educational strategies and write content, and then you are also expected to deliver the most appealing and striking presentation. And that’s not easy, especially if you’ve had little experience with graphic design so far. This article therefore reviews the 10 key fundamentals of online course design, which will ensure you pull off your magic trick without a hitch.

10 tips for designing eLearning courses

1. A clear, visual hierarchy

The elements we first notice on a screen and those elements we perceive as belonging together are not a matter of chance – on the contrary. Our perception follows clear principles, known as the Gestalt laws. Below is an overview of the key Gestalt laws and principles of perception for eLearning.

Law of Proximity

Elements that are positioned close together are perceived as belonging together. So this law is important when you need to establish a connection between elements – for example, an image and a text. If elements are not close enough to each other, we find it difficult to see the connection between them. This results in confusion, which makes us perceive content as demanding or difficult to understand – the opposite of what you want to achieve with an eLearning course.

Conversely, you should also ensure there is enough separation between elements that have no causal connection.

Law of Similarity

Elements that have a similar style, color, shape, size or texture are attributed similar characteristics and functions. When applied to the design of your eLearning courses, this law means, for example, that similar functions such as buttons leading to the next chapter should always have the same design.

Conversely, it also means that features of different hierarchies must be sufficiently differentiated to enable the hierarchies to be distinguished from each other. In simple terms, headlines must differ enough from sublines to indicate to learners where they are in the chapter.

Law of Closure

The law of closure states that we perceive closed forms as separate objects – even if their complete form is only hinted at. Subconsciously, we fill in the gaps and complete the image. However, this requires the appropriate cognitive skills, which – in the context of learning – are primarily used to understand and process new knowledge. So make sure to position shapes in the right places or to make it as easy as possible to recognize shapes – for example, by arranging a combination of image, text and two buttons in such a way that, if were to you draw around all of them with a pen, you would create a rectangle.

Reading Direction

In our culture, we have learned to read from left to right – so our eyes attempt to orient everything from left to right in other situations. When you are combining images and text, therefore, always position the image on the left and the text on the right. If you were to place the image on the right, the eye would be drawn to the image first because information is captured more quickly from images than text, but this would disrupt comprehension because our eyes are in fact inclined to read from left to right.

2. Handle white space confidently

White space is the logical consequence of the Gestalt laws explained above: It is the part of a layout that is not filled with text, images, or other graphic elements. White space can be used to direct the eyes; in an overcrowded layout, the eye does not know where to look first. White space also ensures greater awareness of content – it makes it appear more authoritative and credible.

Providing sufficient white space also ensures information is easier to read and relaxes the eyes. As a rule of thumb, about half of your layout should consist of white space. For eLearning, this means that around 50% of every single “slide” or screen should be free of text and graphic elements.

3. Consistency based on corporate design

Whether it’s continuous text, headings, button shapes, navigation, ... features with the same functions must always be designed in the same style for easy recognition. The same applies to the use of graphics: if you provide four illustrations a particular topic, all four images should be of the same type and in the same style – for example, four photos with similar brightness or four icons with the same line thickness or four gifs at the same speed...

Design decisions become easier if you take your corporate design as a basis. This does not mean you will not need to adjust or extend your corporate design to fit the specifics of eLearning, but it provides a good framework and – most importantly – guarantees recognition and credibility from your employees as they learn, as well as enabling them to identify their courses.

Tip: Knowledgeworker Create allows you to create templates where you can define groups of features. This means you can save a lot of time while creating your courses, and maintain a consistent look and feel.

Try it out

Banner authoring tool "Knowledgeworker create"

Test Knowledgeworker Create free of charge for 30 days

GDPR compliant. Fully responsive. Barrier-free. Clever AI integration.

Easily build dynamic, interactive & modern online courses via drag & drop. Thanks to integrated task, review and translation management, you can work collaboratively and speed up your course creation process.

Test free of charge

4. Use a variety of media

In an eLearning environment, the rule is the more variety, the better. The greater the number of media you use (text is also a medium), the more learning types you will appeal to. In addition, images, graphics and videos can of course also be grasped much more quickly than text, so learners will often remember illustrations for much longer.

5. Intuitive navigation

The main purpose of navigation is to guide learners safely through content and help them orient themselves at all times. So make sure navigation is always visible and indicates learners’ “whereabouts” and, where possible, their progress.

As navigation features are always visible, do not use fancy design techniques that will distract from actual content.

6. Responsive design

The essential feature of any web application is that it can be displayed and used on any device. Particularly for eLearning, which is often no longer solely desktop-based, but may be undertaken on the daily commute by the train or on the couch at home, it is important that content can always be viewed and understood. However, it is often not enough to align individual sections: Tables must be formatted, graphics and text must be enlarged, etc.

Tip: Knowledgeworker Create is designed to be 100% responsive, so there is no need for you to make any adjustments in order to ensure content will play on smartphones and tablets.

7. Limited, impactful color palette

If your colors are predetermined by your corporate design, you will have little room for maneuver. Otherwise, you might feel tempted to use many different colors or colors that supposedly add “pep”. However, it is also true that where colors are concerned, less is more. Accent colors are of course important for highlighting functions such as buttons or to support your visual hierarchy. Unlike landing pages, eLearning courses, on which you spend a long time and where your eyes should be as relaxed as possible, do not unnecessarily need provocative “hard” color contrasts. There is thus no need for complementary contrasts in eLearning content. Instead, choose a cohesive palette with 2-3 soft accent colors, contrasting between warms and colds or other qualities, for example.

Tip: The Adobe Color Wheel is free and will help you choose the right color palette.

8. Ensure readability

Ensuring optimal readability is actually the biggest challenge with typography, as it is influenced by so many factors. We could easily write an entire article about font readability on the web, so we have limited ourselves to the most important points.

Orientation

Since in European culture we read from left to right, texts that are left-aligned are easiest for us to read. You should only deviate from this principle in exceptional cases and if the texts in question are very short. With both centered and right-aligned text, reading becomes difficult very quickly because the lines start at different places on the left and our eyes find it much more difficult to identify the start of each line.

It is actually possible to calculate the optimal size for font on the basis of the average distance a device is from the eye and the anatomy of the respective font – a task that can be confidently left to UX designers. Over time, a font size of 15-16 pixels has become the norm for continuous text on the web.

Line Length

The optimal line length for text on desktop screens is 55 - 80 characters – otherwise reading will become too strenuous. Lines that are too short disrupt reading because the eyes have to jump back and forth far too quickly. If, on the other hand, lines are too long, the eyes become disorientated and cannot identify where the next line is. On smartphones, this problem is eliminated by orienting the screen.

Font selection

The ease with which a font can be read is determined by its readability and legibility. Readability refers to how passages of text are read, while legibility relates to how well individual letters can be distinguished.

Readability: Serif fonts are very popular in print, as serifs allow our eyes to “connect” letters more quickly, enabling us to read faster and more fluently. Screens, however, have at least 50% lower resolution than printed matter, causing serifs to look blurry or pixelated. The smaller a font, the more noticeable this effect becomes. So for eLearning you should always choose a sans-serif font for continuous text.

Legibility: A font is easier to read if letters are differentiated from one another as clearly as possible. If you look very closely, you will also see slight differences in the shapes of similar letters in the font used for our blog. So even when trying to optimize legibility, you should not use geometric fonts such as Futura, Arial, Century Gothic or Avenir, whose letters are all based on the same basic geometric shapes. In a geometric font, for example, “o”, “q” and “a” have the same, even identical circular format, while “u” and “n” are merely reflections of each other. These kinds of fonts are a lot of work to read, while words written in more differentiated letters can be easily recognized on the basis of the typeface alone, without any conscious effort.

Line spacing

Although line spacing of 1 to 1.2 is more than appropriate for printed text, a much larger distance between lines is required for texts to be readable on the web. So depending on your font, select line spacing of 1.3 to 1.6. Generally speaking, the larger the text, the smaller the line spacing can be (for example headings), and the smaller the text, the larger the line spacing should be (for example continuous text).

Manual breaks

Avoid inserting manual breaks, even if this leads to unsightly hyphenations in the desktop version. Otherwise, the separations will be carried over into the tablet and smartphone views, where the breaks may be positioned in inappropriate places, disrupting entire sections.

9. Digital accessibility

The best design is of no use if people cannot fully take it in. We are not talking here about the more obvious physical limitations, but about those that often remain hidden. For example, did you know that 9% of all men and 0.8% of women have red-green color blindness? Or that 16 million people in Germany are hard of hearing?* Incidentally, 96% of all disabilities are the result of illness, accidents or simply old age, when hearing and vision gradually become more impaired. However, there are many ways to adapt the design of eLearning courses to enable them to be fully accessible to those with visual, hearing, motor, cognitive and/or age-related limitations. Of course, digital accessibility is most effective if it is taken into account from the outset and does not have to be implemented at a later stage.

10. Beta test with test group

Independently of content-based tests, be sure to plan to test your design with a small selected test group before you roll out your course. Our article on review processes provides lots of tips on how to incorporate design into the process and how you can help your beta group provide constructive and concrete feedback.

Service

We help you develop your online courses!

The Knowledgeworker team at chemmedia AG not only provides you with intuitive eLearning software, they also offer comprehensive online course creation services.

Our service

The bottom line.

Design is key to learning outcomes for online courses. The design of a course determines the cognitive resources learners have to deploy to absorb content; it also ensures that your employees do not lose the desire to learn. Learning takes a lot of effort – a confusing design that is hard to navigate will ensure high dropout rates. A good design, on the other hand, directs learners’ focus exactly where you want it: toward the new knowledge that will help your employees and thus your company to advance.