Add a poster for cyber sickness

[beeccy]

I have an idea for a new poster. As a web designer and developer myself, I suffer from cyber sickness. This means I have issues using websites, apps and even games with excessive motion/animation.

Good use of animation:

Example: https://www.flinto.com/ Explanation: This is good use of animation due to the fact that the animation shows how to use the product presented. Yes, it might bother the user to the degree that the animations happen without a user starting them, but since it's minimal, I as a user can scroll through this the first page without any issue.

Example: https://getacquainted.co/ Explanation: This is good use of animation because it's extremely subtle and I barely noticed it, though it doesn't improve the user experience. The animation just exists and doesn't have a purpose apart from looking flashy.

Moderate use of animation:

Example: https://runcloud.io/ Explanation: This is moderate use of animation, and by moderate I mean I don't get as easily nauseous being on this page, though I do still get a little nauseous. They could've avoided adding all the ease-in animation since it isn't really necessary. The top animation was subtle and therefore not an eyesore for me.

Bad use of animation

(ironically found on https://www.webdesign-inspiration.com/web-designs/style/modern: with the headline "Find the best Modern web designs inspirations")

Example: http://www.carmanfriend.com/ Explanation: This is bad use of animation because the scroll animation doesn't really do anything to the webpage apart from making one nauseous. Sadly, I can't really scroll on this page for too long due to the overuse of animation and therefore the information on the page is utterly useless to me since I can't focus on the content when there's too much animation everywhere. The hover animation is okay, because as a user the action happens as the mouse hovers over a certain elements and it is sort of expected that something should happen on hovering over elements.

Example: http://irava.net/ Explanation: This is bad use of animation because it seems the majority of elements have animation. Pretty much the same issue as http://www.carmanfriend.com/.

Example: https://www.cloudbooksapp.com/ Explanation: This is bad use of animation. There's too much animation on too many elements and that makes one's focus go everywhere. Pretty much the same issue as http://www.carmanfriend.com/.

As a person with cyber sickness, the biggest issue is animation that you can't control like in the CarmanFriend example. Due to overuse of animation, this leads to the user feeling very nauseous and having to stop using the website or app.

Suggestion

Designing for users with cyber sickness

Do...	Don't...
use subtle and few animations if there are elements that need to be highlighted	overuse animation on many elements
use storytelling animation on actions the user can control	use animation that doesn't give anything to users
use subtle animation primarily on elements users can click such as input fields, search bars and buttons to give feedback to every action	use jumpy, "noisy" or unexpected animation
allow users to have control over their scrolling	hijack the scroll causing lagging or jumpy display of content

These are just suggestions I could think of. Primarily, the issue is unnecessary use of animation. If I were to use a website with too much animation, they should at least have an alternative for users to turn it off. For users with cyber sickness, the best website or/and app is a static one, but the suggestion above is more of a "if the animation helps the usability and user experience, then go for it".

I hope this is helpful and if I'm unclear on something, just ask!

Best regards!

P.S. I love these posters, keep up the good work!

[Ryuno-Ki]

Thank you for sharing this insights, @beeccy.

I can really imagine they would have an impact, if you would approach @chriscoyier from CSS-Tricks, Jeffrey @zeldman from A List Apart or @vitalyfriedman from Smashing Magazine.

They care for inclusive design and have a great reach on the people who build those sites. I would be very grateful if you could bring up the courage to approach them. They don't bite ,-)

[karypun]

@beeccy we have a template in Sketch if you'd like to create a poster for cyber sickness. We're not creating any additional ones on our side for now but would love to see what others come up with! https://github.com/UKHomeOffice/posters/tree/master/accessibility/dos-donts/posters_en-UK

[beeccy]

Thank you for your patience, here's the suggested chart with the template suggested by karypun.

https://github.com/beeccy/cyber-sickness

Cyber sickness poster

[beeccy]

Thank you for the suggestion @Ryuno-Ki . If they would be interested in this, I would gladly speak with them!