Visual design tips for elearning

Posted by Greten on 16 Jan 2020 under Tips

When you develop elearning modules, it's not enough to just throw text, images, and media to your slides. It is also not sufficient that you know the various tools within elearning authoring applications such as Captivate, Storyline, and ActivePresenter. It would help if you also considered how the learners would see and hear the information in your elearning.

This entry will provide essential visual design tips for elearning lessons. The focus will be on the legibility of onscreen text and avoiding things that can distract from learning.

Ensure legibility

You must ensure the legibility of text in your elearning lessons. Even if your elearning comes with audio narration, you should not put your learners in a position where they have to struggle reading the onscreen text. The onscreen text should help the learners grasp the concepts, processes, or information you are teaching through elearning.

  • Use font faces that are easy to read. Avoid the design fonts whenever possible and stick to the typical serifs or sans serif fonts. Use design fonts only for letters that are more of design elements rather than for display of information.
    An elearning slide showing information about not serving drink to minors. The informational text boxes use sans serif font, but the name of the bar in neon lights uses a design font.
  • Ensure that there is sufficient contrast between the text and its background. If you have doubts if the contrast is adequate or not, get a screen capture of your slide and convert it to grayscale. If the text is still easy for you to read, then the contrast is sufficient.Leftmost: a blue lorem ipsum textbox with a darker blue letters. Left-center: the grayscaled version of the blue textbox; the text are still readable. Right-center: a dark yellow lorem ipsum textbox with red letters. Rightmost: the grayscaled version of the yellow textbox; the text are barely readable.
  • You may use a photograph as a background of a text box. If some or all of the text becomes difficult to read, you can decrease the alpha or opacity of the image. Other options are putting a semitransparent shape between the photograph and the text, or configure the object that contains the text to have a semitransparent background.

Avoid distractions

In some cases, different elements on the elearning, such as graphics, animations, and text, can be a distraction to learning. One object draws attention away from the other, or a text box blocks another text box or an important diagram.

Arrangement of textboxes

When there are several text boxes on the slide, make it clear which one the learners should read first. Static reading materials such as hardcopy books and PDF learning guides rely on proper positioning of text boxes. Elearning developers have another dimension they can use to ensure sequential reading of text boxes, time.

Do not make several text boxes appear at the same time. If you do, consider the following:

  • All text boxes are already displayed at the beginning of the slide. Ensure that the learner has sufficient time to read them all before transitioning to the next slide by including audio narration. You may also include a button, link, or some other interactive element that prevents the transition to the next slide until the learner accessed it.
  • The positions of the text boxes should indicate the order of which the learner must read them. For example, do not arrange four text boxes in a 2 x 2 matrix on the slide.
    Left: four text boxes arranged in a 2x2 matrix. Center: the 2x2 text boxes with light blue horizontal divider separating the upper and lower text boxes. Right: the 2x2 text boxes with light blue vertical divider separating the left and right text boxes.
    In the image above on the left, it is not clear which slide should they read second and third. You can remedy this by putting a vertical or horizontal divider, just like in the center and right image above. The text in images came from an earlier discussion on spreadsheets.
  • Only one of the text boxes are meant for reading at a time. If there are other less important onscreen text at the moment, ensure that the one meant for reading stands out. For example, if you have a text box explaining a part of the lesson about conflict resolution, design it differently from the speech bubbles of two quarreling characters. The exact content of the speech bubbles, in this case, is not important, only that it indicates that there is an on-going conflict.

Text box and images

Text and images are two of the most common elements found in an elearning lesson. They should complement instead of being distractions to each other.

  • Images should not block any of the onscreen text.
  • Text boxes should not block parts of the images that are important to the topic. For example, a text describing a tree should not block a tree but may block other parts of the image, such as the mountains and the Sun. Another example, if you show a picture of what you clearly labeled or referred to as a 12-pin transistor, do not position any of the text boxes such that some of these pins are blocked from the view.

Avoid distracting animations

Black and white: eye on a slide.Do not use animation effects for text boxes that contain a sentence or more. Stick to simple animations such as simple appear, fade in, fly in, or stretch. Whenever possible, avoid more complicated animations such as rotate or swivel.

  • If you cannot decide whether an animation is simple or too complicated, ask: did the animation ends when the text box reach the size and position where it is easiest to read?
  • In deciding whether you might want to use a complicated animation in a textbox, if it's safe for you to use fancy design fonts in the text box (based on what was outlined in the previous section), then it is also safe to use complicated animations.

Legibility and focus are important in the learning process. In developing learning modules, ensure that the learners do not need to exert much effort reading the text and struggling to avoid distractions.


Last updated on 17 Jan 2020.

Share your thoughts

* Required. Your email will never be displayed in public.

Instructional design and educational technology for effective learning