Why animation-heavy websites can hurt user experience
My last few clients all mentioned it without me bringing it up first. I also ran a few polls across Instagram and Threads to get an idea of how other service providers felt about animation-heavy website, and the responses were not far off being unanimous:
landing on a website full to the brim with animations feels overwhelming, and it puts people who might be your ideal clients off exploring your services further.
So why does it feel like excessive animations have become synonymous with having a great user experience on your website?
I don’t have the answer to that specifically, but I do have a few reasons why it doesn’t automatically equal a great user experience.
Overstimulation kills focus
It feels like every other website you look at nowadays, movement is thrown in our faces - boxes, text and images flying in across screens, spinning icons following you, scrolling banners and videos autoplaying. People are massively overstimulated!
While animations can be used as a means to add delight and fun to a website experience, when they go overboard you don’t know what to look at first, so you end up not really reading anything at all. This can be especially true for neurodivergent folks, as unexpected animations can completely derail their focus and turn what might’ve been a quick browsing experience into a frustrating time.
Yes, having a fun experience plays a part in the magic of creating a great website, but its main purpose should be to guide website visitors from A to B, not to overwhelm to the point of visual fatigue.
Before I add any animations to a client’s website, the first question I ask is will this distract from anything important? If the answer is yes, I skip adding the animation.
Excessive animations = accessibility barriers galore
A lot of animation-heavy websites don’t give you a way to reduce or stop the movement. No pause button, no reduced motion options, nothing. This is a core issue for anyone impacted by motion sensitivity issues such as vestibular (inner ear) disorders, chronic migraines, ADHD, and photosensitive epilepsy which, according to this article from Archives of Physiotherapy, is reportedly 28.4% of the population. It’s one of the biggest accessibility barriers that gets overlooked when the focus is purely on aesthetics and not how a website functions.
Some of the biggest design trends that can trigger motion sensitivity include:
Parallax scrolling
Autoplay videos without a pause button
Scroll-jacking (where the natural scroll speed or direction of the browser is manipulated. It tends to be when websites scroll horizontally instead of vertically and has become more of a design trend over recent years).
It reminds me of the early days of the internet when every website had music autoplaying and you couldn’t turn it off unless you aggressively closed the tab shudder.
When animation is used in a way that’s natural and smooth without causing frustration or discomfort, it can elevate the look and feel of a website, making it more fun to browse. But when it’s used as a design crutch for every single element on a page, that’s when it starts to become an unwelcome distraction.
Are animations used to hide a lack of content?
I’m definitely not saying that if a website is full of animation, then the copy must be rubbish. But it’s worth asking whether heavy animations are being used as a means of distraction because of a lack of substance within the content.
Good copy and design doesn’t need to be dressed up with distraction. When the substance is there, the content should ultimately speak for itself.
For what it’s worth I’m not against maximalist design, and I’m not saying you can’t use any animations whatsoever. If that’s your style, you do you! But there comes a point where it can become a real barrier for a multitude of reasons, and that’s worth talking about and acknowledging openly.
What I’m really curious about is why this has become such a massive trend within the small business space and what purpose it’s actually serving.
Some other thoughts I had about this were:
Does it come down to conflating having a big personality online with using bold, vibrant visuals? Big personalities can be expressed without any of that.
Is it driven by a subconscious desire for validation from other designers and peers?
Are these heavy animations used primarily as a personal creative outlet, rather than something that serves a client’s actual needs?
At the heart of UX is a pretty simple question:
what does someone actually need to see, feel, and think in order to take the next step?
When design becomes about expressing a personal style rather than answering that question, it can easily start working against the very people you’re trying to reach (unless it’s for a personal project or a bit of fun!)
Animation is a tool and like any tool, it’s useful if it’s doing something purposeful and executed in the right way. Otherwise it risks becoming a frustrating distraction that takes people away from the information they may genuinely need.
Showing restraint is important when it comes to deciding what’s included or not when designing a website, and acknowledging/respecting the browsing experiences of others (especially with regards to accessibility) is a skill that I feel can get lost within all of these design trend cycles. The details matter when it comes to providing a great user experience, and it’s always worth paying attention to how we can actively integrate inclusive practices into our creations.
If you’d love someone to review your website to see where any accessibility or design issues may be affecting your ideal clients, that’s exactly what my Website Audits are for. Or if you want a designer’s help to refresh specific areas of your website, a Squarespace Design Day gives you an expedited experience to get your website to-do list done and dusted.
Why does it feel like excessive animations have become synonymous with having a great user experience on your website? I don’t have the answer to that specifically, but I do have a few reasons why you might want to think twice before overloading your website with animations.