Sorry to say getting tricked by the “wow” factor of animation could damage your message, strategy and ultimately negative affect you reaching your goals.
Over the years I’ve mainly used subtle animation when building websites. You scroll down to a certain point and the image or text fades in nicely. With frameworks including animation with almost all builders, it’s made super simple to implement. I recently added some subtle animation with the Canberra Dentures website I built during July 2024. While the affect is subtle it does little to appeal to the ideal audience and achieve the goals of the website. This was an upgrade from an old SquareSpace website where animation was included to fade in elements so we though it needed a little bit more to be considered more “modern”. The fact of the matter is animation is still considered modern despite it being around since the early days of Flash in the 90s.
Usually though animation in the past has been implemented utilising JavaScript and other frameworks that can be included and heavy, resulting in slowing down your website. with HTML5 and CSS3 animation is far easier to do without the need of these libraries. Unless, of course you’re working on a site with what’s called Lottie animations.
Below I go through the main reasons why animation fails:
Lack of Purpose: Most animations on websites, including those enabled by Lottie or built into themes like SquareSpace, are often added without a strategic reason. The primary goal of any website is to communicate a message, sell a product, or provide information efficiently. When animations are introduced simply because they are visually appealing or trendy, they tend to detract from these goals rather than support them.
Distraction Over Utility: Animations can easily become a distraction, pulling the user’s attention away from the key content. Instead of focusing on the message or product, users might wait for a slick transition or getting distracted by a looping animation. This diversion can reduce the effectiveness of the site, leading to lower conversion rates or missed key messages.
SquareSpace and Theme Overuse: Platforms like SquareSpace and popular WordPress themes make it incredibly easy to add animations, often with just a click of a button. While this accessibility is great for non-developers, it also means that animations are frequently overused. Users might add animations thinking they are enhancing their site, but in reality, these animations can clutter the interface, slow download times, and create a disjointed user experience. This is problematic in themes that emphasise flashy visuals over practical, user-centered design.
Unnecessary Bandwidth and Load Times: Every animation, including lightweight ones like Lottie, adds to the website’s load time. In an era where users expect sites to load in under three seconds, even a minor delay caused by animations can lead to increased bounce rates. For businesses, this could mean losing potential customers simply because they opted for aesthetics over functionality.
Kevin Geary’s Perspective: I’m a big fan of Kevin and all of his products. Kevin often criticises the overuse of animations, arguing that they should only be used when they serve a clear and functional purpose. If an animation doesn’t enhance usability or communicate important information more effectively, it’s usually better left out. His philosophy emphasises clean, fast, and user-friendly design that prioritises the user’s needs over visual gimmicks.
- Does it meet or contribute to the goal?
- Is it accessible?
- Is it a performance burdan?
- Is it “Best Practice”?
A geeks perspective
Most geeks love regardless of if they’re a developer or an IT type person they love functionality and animation is just something they love to use. Having an IT background myself I can usually tell if a website has been built by them purely on the over-animated design.
My final word
So regardless if your website is being built by Get Leads or by another designer, always consider if the animation contributes to your goals. If you’re another web designer or developer, consider focusing on clean, functional, and accessible design, your website can stand out for the right reasons, ensuring it serves its purpose effectively without unnecessary distractions. This approach aligns with the best practices advocated by web design experts like Kevin Geary. Here’s a link to his free web design course on building quality websites.
