Have you experienced this?
You get to a website, and right off the bat you feel like there’s something really cool about it. It’s beautifully designed. It’s impressive. You’ve just uncovered something awesome you can’t wait to explore.
And then, you scroll. And as you scroll it seems like every animation ever flies into view.
Whoa there!
You forget you’re on a website, or what it’s for. The website screams for help: “Can’t…bear…the…weight…” it gasps. “Help me…” it whispers as it takes its final breath and your browser crashes.
Well, maybe it’s not that dramatic. But it can be quite frustrating. And more importantly, it can turn away those precious website visitors.
Let’s face it, animations are cool.
And when you’re creating a website, you want to put your best foot forward. I’ve been there. It’s very tempting to include every animation under the sun to impress your clients (and yourself!). And especially nowadays, there’s no shortage of Javascript effects or CSS3 animations to choose from. A quick google search will produce thousands of options.
The question is, should you use them?
In designing conversion-oriented websites, I’ve found that more times than not, loading up your site with JS effects kills conversions. And conversions = clients = growth. So we don’t want to do that, do we?
With that said, if you use them the right way, not only can they enhance the user experience of the websites you’re creating and encourage users to take action, your clients will absolutely love it and sing your praises, too.
Because let’s face it, clients love fancy sh*t like that. (Excuse my French ;-))
In this post, I’m going to go over some of the best JS and CSS3 animations I’ve found that do just that – where usability through great site structure, navigation, and content is the focus, and animation plays a powerful supporting role.
The 5 rules of choosing animations that enhance UX, while increasing conversions.
1. Does the animation distract from the content?
When you view the animation in the context of your website, do you notice the animation more than you notice the content itself? Is it hogging the spotlight, drawing all the attention to itself? If the answer’s yes, cross it off your list.
If your users are distracted, and don’t focus on the content of your site and what it’s all about, they’re a lot less likely to take the action you want them to take.
The only reason to use animations on your website is if they make your users more engaged and involved with your content and offerings. Otherwise, it defeats the purpose of having a website in the first place.Ask yourself: does the animation make the reading experiencing more pleasurable? Does it make the content, imagery, and visual elements more easy to digest and interact with? Is it supporting the message of the brand and the website?
This is a big one. I can’t tell you how many websites I’ve come across that use so many effects (insane amounts of parallax, hamburger menu on desktop, text fading in and out, sliders, and more) that I become completely disoriented and can’t figure out where I presently am in relation to the website as a whole.Being on a website with confusing animations is like being in a fun house: you have no idea where you are or how to get to where you want to go. When users don’t know how to get to where they want to go, you know what they do? They click that little “x” at the top of the page, leave, then breathe a sigh of relief when they get to a site that presents the information to them in a clear way they can understand and take in.
Another downside of many Javascript effects and CSS3 animations is that they are very heavy and slow down your site. If you run a website speed test on the Google page speed test site, you’ll be able to see if this is the case and what impact the animations are having on your users’ loading experience. The more animations you have, the slower the site will load for a larger number of users.When a user gets to your website, you have a very short time window to capture their attention and keep them on your site. If your site has trouble loading because it’s overloaded with animations, users will get impatient, and just hit that back button. Make sure your site loads quickly and efficiently for as many users as possible.
Be selective when choosing your animations. Many of the scripts out there are not properly coded and have an array of strange bugs and glitches. Others are very experimental and only work in the most modern, capable devices. If you’re going to use a certain script, make sure to test it thoroughly on a multitude of browsers and devices. You can also ask for help. Ask your friends and peers to test the animations on their devices to ensure it’s working properly.If an animation doesn’t pass this test, keep searching for one that does.Now that we’ve got our checklist down, let’s move on to our list of awesome animations that will wow your clients while boosting conversions.
Animation 1: Make your headline gradually fade in
The headline is arguably the most important element of a website. It will immediately tell the user if they’re in the right place and if they should keep reading and engaging with the content (by the way, for some great tips on writing headlines, check out our recent article, Headline Formulas that Sell Design and Marketing Services (Like Crazy)).
A fade in animation is a great way to draw even more attention to the headline and sub-headline, and keep the user’s focus where you want it.
In this scenario, the headline would fade in first, the sub-headline right after, and finally a call to action button right beneath that. Because these are the only elements that have movement on the page, the user’s attention will be even more focused on the headline, and ultimately, on whatever action it is that you want them to take on the site. This makes for powerful user experience design.
Animation 2: Page elements animate in on scroll
Along the lines of your headline fading in, you could also have your content animate in as you scroll down the page.
There are a lot of different options for this, from a simple fade in, to content flying in all over the place. I highly recommend sticking with the subtler options. This goes back to rules #1 and #2 in our checklist. Is the animation distracting from the content or enhancing the content?
I find that the subtler animation options create a nice feeling of movement and interaction as you’re scrolling through a site making you feel like each piece of content is new and exciting. This keeps your users more attentive and engaged.
In fact, content fading in on scroll is one of the top purchased upgrades here at Reliable when we code websites for clients.
Animation 3: Progressive page load
You may have seen websites that have a beautiful loading screen that animates while you wait for all the elements on the site to load. Loading screens have become more and more elaborate since they first came out. But the fact of the matter is, no matter how pretty or cool a loading screen is, it still requires the user to sit and wait, twiddling their thumbs while the website loads.
The thing is, users don’t like to wait. They have a million things going on in their heads and if your site doesn’t load instantly, they’re much more likely to give up and go elsewhere. So what do you do?
Introduce progressive page load.
Maybe you’ve seen it on your Facebook feed. All the surrounding elements instantly appear, while a spinning progress wheel loads the news feed content in gradually. This gives the user the feeling that something is actually happening and progressing while they’re waiting, which takes the edge off, and gives them other things to focus on while they wait.
The website Medium does a great job of loading content in this way on their pages. You can see the elements that instantly load, while things like images, and the sidebar gradually come in to view. You can also see the green progress bar at the very top of the page, indicating that progress is happening.
Animation 4: Navigation menu appears on scroll up
A sticky menu is an awesome effect to add to a project, but in some cases, its constant presence can distract from the content, breaking our rule #1. For example, let’s say you’re writing a really awesome blog post, and really want the content to be the star. No distractions. Or let’s say you have a long landing page, and again you want the user to focus on the features you’re outlining without making them think about visiting other pages on the site.
A “back to top” button is an optional solution for this, but I don’t find it to be the best one as it doesn’t instantly give you what you’re looking for – the nav bar.
That’s where this fantastic effect comes in. When a user starts scrolling up, it triggers the navigation menu to appear. If they keep scrolling down, the navigation menu disappears again.
The reason this animation is so intuitive is because when a user begins to scrolls up, 9/10 times they’re basically telling you – “Ok, I’ve scrolled enough, I want to check out other pages. Where’s the navigation?”
With this effect, you’re giving them exactly what their actions are asking for, right there on the spot. A great UX design solution.
This is something we use right here on the Reliable site. Scroll up a bit, you’ll instantly see the nav bar show up!
Animation 5: Button animations that show progress
Next up are button animations that serve a purpose. For example, the “submit” button on your contact form, or a progress bar on a file upload, can animate into a checkmark after the user submits the form to show them that it’s been sent.
This isn’t just a great animation that makes the user think “Wow, cool!” It also enhances their experience with your website. Little details like these make the user feel accomplished, like they did something successfully. It evokes the same feeling of getting an A on a test.
Animation 6: Go wild: button animations that make you want to click
This is probably one of the easiest types of animations to implement without worry, and the only place I’ll tell you to go wild (as long as you’re sticking to the checklist, of course!). This is because button animations are only activated on hover, when the user moves their mouse over the button.
This means that these animations are very controlled, and are most likely not going to detract from an overall positive experience with your site.
The user’s experience with these animations is also usually very brief, as they only see it for a moment before clicking the button. And in most cases, the animation makes the button appear very exciting, and encourages the user to click it even more.
Here are a few of my favorite button animation examples to use for projects:
Animation 7: Animate in email opt-in when user reaches certain point on page
The last item on our list for today is a really great way to use animation to trigger certain events you want to happen that encourage the user to take action.
For example, you can choose the exact moment through the user’s experience on the site when you want an email opt-in to trigger and animate in. Maybe you’d like it to be right when they’re done reading a few of your testimonials, or after some features you outline. Maybe it’s when they’ve read up to a certain point on a blog post you’ve published.
Being able to select the exact moment a pop up appears and “disrupts” the user’s attention to get them to take some sort of action is extremely powerful if you use it in the right way. Here are 2 examples:
Example 1: If a user has scrolled halfway through a blog post – you can hypothesize that they like the content and would like more. That’s a great point to hit them with a chance to subscribe.
Example 2: If a user has scrolled deep into a testimonials page – you can hypothesize that social proof elements greatly influence their buying decisions, which means an opt-in offer of an in-depth case study would pique their interest.
What do you think?
Further reading:If you’d like some further reading on animations and conversions, we published a great case study of an experiment we conducted on our own Reliable website. Click here to read 2 Simple Changes to Our Website that Dramatically Boost Sales.
What is Reliable PSD?
Are you looking for someone to convert a PSD design to WordPress? We would love to help you! Reliable PSD, created by a digital creative agency, is a reliable coding partner for hundreds of different digital agencies all around the world. As an agency ourselves, we really “get” what other agencies need and we provide these solutions with diligence and care. At first glance, we may merely look like a simple PSD to WP conversion service. However, after using our services for a while, you will find that we are a source of real trust and confidence for our clients. With Reliable PSD you can be sure that everything will be done right and on time. When we send you back a completed project for verification, it is either 100% done or very close, and we will continue to work until we get it absolutely right.
