Animation: Users with cyber sickness’ worst nightmare

Published in

Shark Bytes

5 min readJul 11, 2018

You’ve probably gotten an assignment to make a modern and flashy website from a client or an employer, and you’ve probably either had an idea on how to do it or gone online to see what’s hip these days.

I’ve been working as a web designer and web developer for over a year and through the time of exploring various web sites and designs, I’ve seen a trend of adding animation. Sure, that’s the future — but what if the animation doesn’t serve a purpose? What if it’s only there to make a page pop, but gives the users nothing?

I would like to talk about a general problem with modern websites — overuse of animation and how this is affecting the users. To start off with, we need to understand the problem.

What is cyber sickness?

According to the Oxford dictionary, motion sickness is:

Nausea caused by motion, especially by travelling in a vehicle.

Now you’re probably thinking, I thought I was going to read about cyber sickness, and you will, because there’s a parallel here.

According to The Telegraph, it’s said that motion sickness […] affects up to 80 percent [of] the [British] population. If up to 80 % of users suffer from motion sickness, imagine how many users are possibly suffering from cyber sickness.

Cyber sickness generally has the same result as motion sickness; nausea caused by motion. However, instead of being affected by motion in a vehicle, the user gets affected by the motion used on a website, app or game.

Now, as we know, animation on websites can be very helpful especially when they use something I will call storytelling animation.

Storytelling animation

Plainly, storytelling animation is animation that tells a story to the user and contributes to better usability and user experience. For example, if you want to send an e-mail, wouldn’t it be nice with a feedback that once you press the button it instantly shows that the e-mail is being sent and then that it has been sent?

Users like feedback, and animation is a very good way to go to help users with understanding what is happening.

Now, these types of animations are usually controlled by the user and don’t randomly occur, but what about animations that are beyond our control?

Accessibility

To talk about animation beyond our control, we need to talk about accessibility. Accessibility is the idea that all users no matter the handicap or disability can use a product. What I mean by product is that when making a website, app or a physical object or building, the users should be able to use it no matter what.

UKHomeOffice have a lot of nice posters for the various users out there and even I contributed with my own suggested poster for cyber sickness. The point of the matter is in this day and age, we need to make products that work for everyone. Some groups are represented more than others and some not.

Not all animation is good

Here’s where animation beyond our control and cyber sickness comes in. Users with cyber sickness should also be included when thinking about accessibility.

Imagine going onto a so-called modern website and the first thing you see are some animations that don’t really give you anything, it’s just to make the website look flashy. And sure enough, it is flashy and it isn’t good, neither for a person with cyber sickness, such as myself, nor a person with epilepsy.

Moving on, you decide to scroll on this modern website and every time you scroll, elements are popping up on your screen either fading in or suddenly appearing. You lose your focus as you’re constantly seeing things change, and you don’t know where to look. You continue to scroll until you feel like you’re on a boat that has just hit a storm (this is an exaggeration, since people with motion sickness can get nauseous on a lot smaller things than this), but for the sake of argument, you’re feeling really nauseous and through the whole time you’ve been scrolling, you still haven’t grasped what the website was trying to inform you on.

In the end, your user experience was that you tried to figure out something and got distracted by unhelpful animation, and you ended up feeling quite unwell. Is this really how you want a user to feel? It’s interesting to me that users without cyber sickness can get through a page like this, don’t they get distracted as well even though they don’t feel unwell after the experience?

Solution

The solution to the problem is actually quite straight forward — don’t use uncontrollable animation and generally don’t use animations that aren’t helpful to users or use reduced motion media queries to let the user decide. Your website isn’t a PowerPoint presentation (and yes, some users become unwell of too flashy PowerPoint presentation as well, so please, don’t overuse animations).

For users with cyber sickness, the best website is a static one, but to come to a compromise; only use animation that the users can control, and that can give them useful feedback. Maybe even have an option on your webpage that allows users to switch off the animation?

You can check out my cyber sickness poster suggestion for UKHomeOffice here!

Also, apparently you can write cyber sickness and cybersickness, but since motion sickness are two words, I’ve deliberately written cyber sickness as such.

Sources

Anglia Ruskin University, (n.d). Harvard System. [online] Available at: <https://libweb.anglia.ac.uk/referencing/harvard.htm> [Accessed 18 May 2018].

Bailey, Eric, 2017. An introduction to the reduced motion media query. [online] Available at: <https://css-tricks.com/introduction-reduced-motion-media-query/> [Accessed 22 May 2018].

Independent, 2015. Cyber sickness: Does surfing on your smartphone make you woozy?. [online] Available at: <https://www.independent.co.uk/life-style/gadgets-and-tech/cyber-sickness-does-surfing-on-your-smartphone-make-you-feel-woozy-a6758141.html> [Accessed 18 May 2018].

Kim, Kyo, 2017. Bringing Delightful Micro-Interaction and UI Animation to Life Through Develop-Designer Collaborations. [online] Available at: <https://medium.com/capitalonedesign/bringing-delightful-micro-interaction-and-ui-animation-to-life-through-developer-designer-7d5ef2d2147b> [Accessed 23 May 2018].

Oxford Living Dictionary, (n.d.). Motion sickness. [online] Available at: <https://en.oxforddictionaries.com/definition/motion_sickness> [Accessed 18 May 2018].

The Telegraph, 2015. Cybersickness: The new ‘illness’ sweeping the nation. [online] Available at: <https://www.telegraph.co.uk/news/health/news/12001743/Cybersickness-The-new-illness-sweeping-the-nation.html> [Accessed 18 May 2018].

UK Home Office, (n.d). Poster. [online] Available at: <https://github.com/UKHomeOffice/posters> [Accessed 18 May 2018].

Université du Québec en Outaouais, (n.d.). Cybersickness. [online] Available at: <http://w3.uqo.ca/cyberpsy/en/cyberma_en.htm> [Accessed 18 May 2018].