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.
- 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
- 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
- Create a text variable called “Background”
- 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
- 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
- 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
- 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. And, because we’re feeling really generous, you can download the Articulate Storyline 2 source file, below.
We hope this helps you understand the importance of reducing visual stress in eLearning, and has given you food for thought.