We all remember the internet in the 90s, where every website was proudly decorated with those awful animations. Back then it was a novelty trend, but looking back at them now they look tacky and outdated, and the load speed? Awful.
Thanks to technological advances over the past few years, we can now create sophisticated and realistic-looking animations which, when used properly, can enhance the whole look and feel of a website, providing a more interactive experience to the user.
However, a lot of people overdo it, trying to make their website look super high-tech and sophisticated, and often overlook the key purpose of a website – to gain conversions. Your site may look beautiful, but if your use of motion makes your site hard to navigate and takes ages to load, it’s not going to help you achieve your business goals.
In this article, I’m going to explore a few key things to consider in order to use motion to your advantage.
What You Need to Consider & Why
User Experience
The main perk to using motion on your website is that it provides your user with a more interactive user experience. Movement catches people’s attention more than a paragraph of text, meaning they will engage more with your site and stay on there for longer. A great example of this is the loading animation you often see when sites are taking a while to load. The purpose of the animation is to distract the user from their wait so it is more likely that they wait a little longer for your site to load.
Depending on what you are selling, motion can sometimes speak louder than words. If you have a website that is selling a really energetic and fun activity, (such as a water park or paintballing), what better way is there to express what your product is about and give the user a feel for what they can expect than with motion?
Navigation
Motion can also play a really big part in highlighting navigational elements on the site. A hover animation is a great way to highlight to the user what elements of the site are clickable. Without motion, an image link would probably go unnoticed and your user may miss out on an important piece of information.
Speaking of missing out on important information, what is going to attract a user to sign up to your newsletter or download your PDF more than a pop-up? Motion can be used to literally throw your proposition in front of your user, grabbing their attention far more than a brightly coloured box buried amongst your content.
Site Speed
Despite having a lot of benefits, motion also has a downside in that it makes your site quite hefty, which will primarily slow down your load speed.
Load speed is the gatekeeper to your website. We live in an age where the average user will wait less than 2 seconds for your website to load and the majority of web users access websites on mobile devices with possibly a poor connection. It doesn’t matter how amazingly interactive your site is, if your use of motion takes you over that 2-second mark, you won’t have any users to experience it.
Anybody that knows anything about SEO will know that Google has a set of rules, and if you break those rules, you may be punished with a penalty. This penalty will have a huge impact on where you appear in the search engine results pages and in turn have a massive effect on your site traffic and conversions. Google does now penalise in regards to site speed, so my recommendation would be that if your use of motion slows down your site’s load time, simply scrap it!
Another thing to consider is that Google won’t recognise animated elements of your website as elements unless they all have authentic values as a static element would have. This could have negative effects on your SEO as Google may view the elements as hidden content.
Conclusion
Overall, motion is a great tool, you simply need to know where to draw the line. Like with everything in design, it is there to solve a problem and less is more. Don’t use motion unless it has a purpose and you can explain why it is there. It is there as a tool to enhance your user’s experience, not to hinder it.
