Do you struggle with high bounce rates on your website pages? If so, you’re losing potential customers before you even get a chance to make an impression. You only have a precious few seconds to capture your website visitor's attention and keep them moving towards a conversion.
There are two primary culprits when it comes to this problem: slow speed and low engagement. As you can imagine, the two often go hand-in-hand. The longer you make your user wait, the less interested they are in what you have to say. Luckily, there is a fairly simple solution to both issues: animation.
When done right, animation can be a powerful addition to your user experience. But when done wrong, it can detract from your website experience, so it’s important to know what works and what doesn’t.
There are a few simple animation techniques to consider implementing as innovative marketing ideas to improve your website's user experience and delight the customers you've worked so hard to get through inbound marketing.
For more creative marketing ideas, check out our top 10 ideas for 2021.
Maybe you’ve tried everything to improve your page speed, but it’s still too slow. This is critically important, because research shows that even a one-second increase in load time can equal a 7% loss in conversions. Don’t despair! Adding a simple load screen that covers the entire screen and disappears once the page has fully loaded can keep the user engaged so that they perceive the load time to be shorter.
Here's a super simple load screen example.
// HTML //
[ div class="loader" style="height: 200px; width: 200px; max-width: 100%; background-color: #434343; display: flex; justify-content: center; align-items: center;"][ i class="fa fa-spinner rotating" style="color: white;" aria-hidden="true" ][/i][/div]
// CSS //
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
A lot of content on a page can be overwhelming, even if that content is valuable and necessary. So how can we give users all of that information in a way that they perceive to be less cognitive work? One way is scroll-triggered animation. This is an excellent way to present more information as the user engages more by scrolling down the page. You can also use it to nudge the user’s attention to conversion opportunities.
To accomplish this, we suggest a lightweight JavaScript plugin like ScrollReveal. You may need a developer to get it set up, but the effects are easily applied across your site.
Need a developer? Talk to us about web development or HIVEHub.
As users move through your website towards your conversion goals, they need context for the information they are viewing. Animation can be used to transition between points of interest on your site and provide context to actions that the user is taking.
For example, if a user clicks on an anchor link, does the page just jump to that location? Or does it move smoothly like this? How does the user know they are still on the same page? An animated in-page menu or sticky header can be used to indicate exactly where the user is and where they can go.
There is definitely such a thing as overkill even with the most creative marketing ideas, so let’s talk about how to know when you should pump the brakes on your animations.
Remember, animation commands attention. So animating everything all the time creates a crisis of attention for the user and becomes problematic. Similarly, animating things that are unrelated to the user journey can be counterproductive. Make sure that your animations are leading the user towards your conversion goals rather than just looking cool.
As with all new marketing ideas, and especially those in web and user experience design, you never know if it truly works for your specific audience until you test it on them. It’s important to remember that statistics mean nothing to the individual. In other words, you can’t make assumptions about your users based on anything other than testing your methods out on them. To validate your assumptions, you’ll need solid data from A/B, multivariate testing, or behavioral tracking like heat maps and click maps.
HIVE’s Growth Driven Design methodology focuses on exactly this type of website user data collection and analysis to form new marketing ideas for your business. Through research-based strategies and continual testing, GDD transforms your website from a static brochure to a dynamic asset driving conversions, leads, and results for your business. Talk to us today about how you can revolutionize your website with our innovative marketing ideas.