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!