Using animations on your website could be a fun, interactive way to do just about anything on your website. They could guide visitors to the next step of the journey, provide notifications to the visitor while on your site, pull attention to a specific area, etc. The purpose of them is really up to you.
Let's talk about some of the pros and cons of using animation on your website and the best practices.
"Animation is not the art of drawings that move but the art of movements that are drawn."
- Norman McLaren
A guide down the user journey
I write a lot about journey driven design; where you map out different paths for the user to enter your site and ultimately convert. To measure your success, you'll want to take a look at your user data and see how they are interacting with your site.
I mention this because I think one benefit of using animations could be to serve as a gentle nudge in the right direction. This could be a simple notification or hint that pops up when the visitor needs to fill something out, page transitions, or anything that will keep the users attention on the next step.
Imagine you've created a user journey that starts at your home page. It then moves to a how your product/service works page, and then to a request a quote page. Some issues could occur during that during that journey. Maybe navigation isn't clear or maybe visitors aren't getting enticed by your content; but for some reason, they aren't making it to that contact us page.
One way of using animation is to draw focus to a specific area. How can you use this to your advantage? If visitors are having a difficult time moving down the path, you could guide them so they don't get lost.
I don't mean distracting them from your content. I'd try experimenting with some kind of trigger based on time on page, scrolling, hovering, etc.
Humans naturally process images much faster than the text you see on a site; in fact, we can identify an image in as quick as 50 milliseconds. It makes sense why we see images and icons so much nowadays.
So what does this mean?
It means that the visual elements are the first things your visitors will see, especially if you have an animation moving around on the screen.
The benefit of this is that you can choose the first things your visitors will see. You can guide there vision to a specific area on that page using an animation before they actually read any of the text.
Using animations on an error page
I've seen a lot of really cool animations on loading screens and error pages. Typically, if I land on a 404 page and wasn't that interested in the site to begin with, I'd probably just leave, but I think using an animation could be a great way to keep the user engaged to some degree.
When you click a link hoping to find some useful content but it lands on an error page, the thought process is broken and theres a huge obstacle in the way of awesome UX. With a well designed error page and an animation pulling the visitors attention to a link that will get them back on their journey.
Distraction from the journey
The only real problem I can come up with is the potential to derail the buyer's journey if done incorrectly. Imagine if you spent all of this money adding an animation to your site because it looked really great, but engagement and conversions go down. What the heck?
Let's think of the 3 stages of the buyer funnel:
- Awareness - People are looking for information, resources, and answers
- Consideration - People are aware of a problem they have and are doing research into solutions that can help them
- Decision - People are ready to buy and figuring out what it would take to become a customer
When people are doing research, they want to skip through all of the noise and find their answers as quick as possible. It's like, if you ask google for some information and the first source that comes up has an animation that's pulling your attention from the content you arrived to find.
If done incorrectly, animations can distract your visitors from the ultimate goal. But on the flip side, if done properly, you're adding a nice touch to buyer path. Whether or not you hurt your UX will probably depend on the animation's purpose.
The best practices
When it comes to animations, there's a lot of good to be seen if done correctly. Not only can they bring life to your website, but you can use them to bounce back from an error on your site, you can use them to redirect attention, and you can use them to nudge them down the buyer's journey.
Keep in mind, you've created your site with a goal and any additional feature you include should have a purpose in helping you get closer to your goal. If including some animations will do that, then yeah, go for it. But if an animation won't have any real effect on your UX, it's just an unnecessary cost for you.
If you decide to use them, consider these tips:
- Make sure there it has a purpose
- Use user engagement data to support using them, improving them, or removing them
- Keep the code lean
- Keep them smooth and tasteful
- Slow down your site with animations
- Forget to optimize them for mobile
- Let them pull the user off of the buyer journey
- Add them for no reason
If you want to learn more about designing for your user's journey, click the image below.