Visual design

Keep calm and carry on

Some design features which may seem like an nice touch may in fact have a negative impact on some users mental and physical health. Below we talk about things to be mindful of particularly when using animation and interactions:

avoid flashing or flickering content

avoid automatic starts on videos and animations

where non-essential motion is used, consider a toggle to turn it off

provide animation controls

Avoid flashing or flickering content

There are over 600,000 people in the UK with a known diagnosis of epilepsy and flashing content is a common trigger for seizures. Not only this but everyone can find flashing content distressing at times.

If we think about MSM specifically it’s probably the opposite of the calming effect we’re trying to achieve so it’s best to avoid where possible. If you must use content that flashes or flickers then refer to the standards set out by WCAG for determining whether content flashes or flickers at an unsafe level. In general, if content flashes more than three times per second, it is unsafe.

For more information see WCAG Guidelines 2.3.1: Three Flashes or Below Threshold

Use motion effects cautiously

Similar to the above, motion effects can be distracting for users. And it can even cause nausea and sickness for those with vestibular disorder (dizziness and vertigo). Therefore we must be mindful when we use motion effects and transitions.

WCAG states that all non-essential motion animations should be avoided. The difference between essential and non-essential? A normal scroll is an animation which must happen in order for the user to retrieve the rest of the content and is therefore essential. Parallax scrolling however is non-essential and merely adds an aesthetic appeal to some users.

We appreciate sometimes it’s nice to add in motion effects and interactions to add aesthetic appeal therefore it’s advised that if you plan to use non-essential motion effects then consider providing users with the option to turn them off.

Avoid animations starting abruptly

Videos and Flash animations that automatically start on a website can be frustrating and even distressing for users with cognitive impairments, impeding their ability to concentrate when reading the content they’re actually interested in.

The noise from autoplaying videos and animations can also interfere with screen readers. Having two sounds playing over one another makes it impossible for the user to navigate around the page and it becomes increasingly difficult for them to find the ‘stop’ button to stop the noise and continue on their journey. Understandably, a lot of users in this instance leave the page entirely.

When relating back to MSMG there’s no instances that would need an autoplay function and therefore it’s best to avoid. Where you think it’s essential, consider the Pause, Stop, Hide guidance set out by WCAG.

Provide animation controls

When featuring animation or video ensure users have the necessary tools to control the animation e.g. pause, play, rewind.

For more information see WCAG Guidelines 2.3.3: Animation from Interactions