Reducing visual stress in eLearning

Reducing visual stress in eLearning

Visual Stress (VS) affects the way you perceive whatever it is you are looking at. There is currently no proven scientific explanation for the phenomenon, however experts agree   the problem stems from the visual cortex of the brain  and as it related to perception, not vision, and can’t be corrected by prescription glasses.

VS can have a variety of effects, such as; difficulty judging distances, problems driving at night, light sensitivity, headaches and, particularly relevant for us, difficulty looking at a computer screen, which heightens the likelihood of visual stress in eLearning.

Altered visual perception may take several forms and varies from person to person. Typical distortions are:

  • Text jumping around on screen
  • Swirling effects or shimmering colors
  • “White Rivers” where the background becomes more prominent than the text
  • Double vision, fading or blurring of text

The   British Dyslexia Association  use this image as an example of the effects:


There’s nothing that can be done to correct VS, but simple design steps such as changing the background colors in your eLearning course can significantly reduce the effects of visual stress.

One way of doing this is using cream or pastel colors on your slide background, but, I’m sure some of you are already saying “That doesn’t fit our brand guidelines…” That may be the case, however, from an employee health perspective there’s surely a negotiation to be had?

Often sufferers will use colored filters to overlay their screens to help reduce the effects; but with some simple states and variables you can easily create a technical solution within your Articulate Storyline 2 courses.

How to:

  1. Place a simple rectangle shape across your slide master. If your standard slide has a design or gradient across is this rectangle can have no fill
  2. Create several states for the rectangle, each with a fill of a different pastel color, i.e. Blue States, Green State, Yellow State etc. These could be different tints of an image if you don’t want to lose your designs
  3. Create a text variable called “Background”
  4. Set triggers on the slide master to change the state of the rectangle when the variable changes:
    • Change state of Rectangle 1 to Blue when Background changes if Background is equal to Blue
    • … repeat for each color
  5. Set triggers on the slide master to change the state of the rectangle when the timeline starts for the slide based on the content of the variable:
    • Change state of Rectangle 1 to Blue when the timeline starts if Background is equal to Blue
    • … repeat for each state
  6. Somewhere at the beginning of your course (a lightbox slide linked to the player can be a good choice if you don’t want it in the main course navigation) allow the users to choose their preferred background color
  7. Create triggers to set the variable to equal the user’s choice:
    • Set Background equal to Blue when the user clicks Blue

The slide will change color when the user makes a selection and will keep that color until they make a different choice. Top tip: don’t forget to include a “Return to default” option that sets the variable back to its default value and changes the state of the background back to its normal state.

Want to see it in action? Check it out,   here.   We hope this helps you understand the importance of reducing visual stress in eLearning, and has given you food for thought.