Thinking of animating parts of your website to make it more engaging? Tread carefully.
You want to redesign your website, and you’re looking around for some inspiration. You come across a new, trendy looking site with a lot of cool, interactive elements and you think: yes! How modern! This is what I want for my website!
Well, as creative and fun as those animated elements may be, they often cause more trouble than they’re worth. Animations are one of the top elements people add to their websites just because they look cool, even if they don’t serve any real purpose. So, while you can add animated elements in a way that is attractive, tasteful, and even supportive of a good user experience, it’s important to first take a step back and understand what they’re for and how they can go wrong.
Why use website animation?
If you’re going to add animated elements to your website, you should be able to tie them to a specific purpose. A thoughtfully incorporated animation to achieve one of three things:
1. It attracts interest.
You want your users to notice an element on your page. Maybe it’s an interactive map, or a buyer’s guide. You don’t to overwhelm your user with so much animation that it distracts from the rest of the page, but a small animation can let your users know that there’s more to this page element than meets the eye.
2. It responds to an action.
Animations are a useful way to send feedback to a user about their actions. When you like a photo on social media, a subtle animated element can let you know the action has been completed. Or maybe you’ve sent a message, and the animation is letting you know it was delivered successfully. Where would we be without the MailChimp monkey to let us know our emails went out?
3. It sends a notification.
Finally, short animations can alert us to something important happening within an interface. Did you forget to fill in an important element on a form? Has a new message arrived in your inbox? When used subtly, notification animations can help prevent user error.
That said, despite the good things website animations can accomplish for user experience, it’s far too common for websites to overuse these effects to the extent that they become bloated and dysfunctional. Before you start adding them to your site, here’s a few questions you should ask yourself.
Does your animation serve a purpose?
This should be the gold standard of ever design decision you make for your website. Does it serve a purpose? If you’re doing a thing “just because,” the overall feel of your site will be less compelling and goal-driven. Abide by good editing principles and cut out the chaff that will only contribute to confusion and long load times.
Does your animation get in the way of user experience?
Ever had to wait for an animation to get out of the way before you could click on a link or read the information you wanted? It’s a frustrating experience, but it’s becoming all too common. Websites will use elaborate animations to transition between pages, and while the effect may be cool the first time, it soon wears off. Sometimes users just want to get to what they’re looking for. Stand back and keep your animations out of their way.
Will your animation cause accessibility problems?
Even worse than an animation that impedes user experience is one that makes it impossible for some users to access your site. Unfortunately, this can be a significant problem for users with screen readers, or for those who rely on keyboard navigation. If your website animations are disrupting the way these accessibility tools function, it’s better to leave them off the site.
Have you tested your animation across a wide range browsers and devices?
Another common pitfall of website animations is that they are yet another element that must incorporate a certain way on other devices—not just across browsers, but across smartphones, tablets, and even televisions. Designers already work hard to ensure their websites display correctly on these various platforms in normal conditions. Add animation to the mix, and they frequently throw a wrench into an otherwise functional Michigan web design.
Does your website break your site?
Finally, website animations can often lead to unexpected malfunctions. If a crucial element fails to load properly, users may be stuck with nothing to do but bounce. Or, if animations slow your site down so much that it prevents users on mobile devices or with slower internet connections from accessing, you’re not only eating up their data, you’re also blocking them out of your site.
Website animations should not be your default. Use them sparingly.
The point of this isn’t to say that you should never use website animations. As we said, they can be valuable ways to indicate an action, attract interest, and deliver user feedback. And yes: they can also be fun, interesting ways to enhance the user experience on your site.
But if you find yourself in a position where you’re trying to animate every action, then you’re probably overdoing it. There’s no need for your navigation menu to include an elaborate animation as you hover over items. Nor do you need each section of text to animate as your users scroll down the page—especially not if the animations respond poorly when the user scrolls back up.
Instead, think of animations like salt: a little goes a long way, and the fasted way to ruin a dish is by dumping it on without testing first.