eLearning development

Reducing visual stress in eLearning


Profile Post Image

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 – related to perception, not vision. Therefore, it can’t be corrected by prescription glasses.

What are the symptoms of Visual Stress?

Visual Stress can have a variety of effects, such as:
  • difficulty judging distances
  • problems driving at night
  • light sensitivity
  • headaches
  • difficulty looking at a computer screen
The final point is most relevant for us, as it heightens the likelihood of visual stress in eLearning.
VS may take several forms and varies from person to person. Typical distortions are; text jumping around on screen, swirling effects, and double vision, fading or blurring of text
The British Dyslexia Association use this image as an example of the effects:

How can we overcome Visual Stress?

There’s nothing that can be done to correct VS. But, we can help by making simple design changes. For example, we can change the background coloure in our eLearning course to reduce the effects of visual stress.
One way of doing this is using cream or pastel colours on your slide background. 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 coloured 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 360 courses.

How to add optional coloured layers to your course

Step 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

Step 2:

Create several states for the rectangle. Each with a fill of a different pastel colour. (These could be different tints of an image if you don’t want to lose your designs). Then create a text variable called “Background”. 

Step 3:

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 colour

Step 4:

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

Step 5:

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 colour. Then create triggers to set the variable to equal the user’s choice, e.g.  set Background equal to Blue when the user clicks Blue
The slide will change colour when the user makes a selection and will keep that colour until they make a different choice. Top tip: don’t forget to include a “Return to default” option.
We hope this helps you understand the importance of reducing visual stress in eLearning, and has given you food for thought.
Editor’s note: This blog was originally published in September 2016, but has been updated for clarity and includes fresh new content.