Skip to content
FREE WEBSITE EVALUATION: Immediately grade your website and get tips to improve.
x
Buzzy-chat
Ask AI Buzzy
close chat
fullscreen chat
Buzzy-chat

Buzzy AI Assistant

Human Chat
Buzzy-chat

I'm HIVE's AI assistant and I'm here to add a dash of nectar-sweet fun to your day! Whether you're navigating just for information or looking for a partner with your marketing needs, I'll be your guide on this whimsical journey. So let's make a beeline to adventure and turn your experience into the bee's knees! 🐝✨

Today
- AI: Hi there! I'm Buzzy!
- AI: How can I help you today?
Buzzy-chat
buzzin for answers
How would you like to interact with Buzzy?
Speak
Text
microphone ai
Speaking to Buzzy Sending message Buzzy is responding
** Buzzy might make mistakes occasionally. It's always a good idea to double-check important information with HIVE.
close chat
Let Buzzy ...
Innovative Marketing Ideas You'll Love: Simple Animations to Boost UX

Innovative Marketing Ideas You'll Love: Simple Animations to Boost UX


Erin Wiggers
July 19, 2021

Trying to decide which CMS is right for your website?

View CMS Comparison
Read Time:
Don't have time? Download Now as a PDF

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.

Website Animations You Can Use to Improve User Experience

Animated Load Screens Can Counteract Slow Page Loads

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.

Click here to see how it's done.
// 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); } }


Hide the Code

Scroll Animations Can Direct Users’ Attention Gradually

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.

Navigation Animation Helps Users Know Where They Are and Where to Go

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.

How to Know When It's Too Much Website Animation

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.

Is Your Website Animation Confusing or Distracting?

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.

How Can You Know If You Did It Right?

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.

Conversion Rate and User Experience Optimization

 

Latest Blog Posts

AI Marketing Strategies: Essential Dos and Don'ts
Apr 10, 2024

AI Marketing Strategies: Essential Dos and Don'ts

Evan Burns
Marketing Strategy

Artificial intelligence (AI) is turning digital marketing upside down, promising to totally remake how brands interact with customers. In today's world, AI's ability to improve customer experiences and streamline operations is unmatched. For any...

Is HubSpot worth it? Man thinking.
Mar 27, 2024

Is HubSpot Worth It? [Updated]

Jill Schneider
HubSpot

HubSpot is a comprehensive software platform for Marketing, Sales, Customer Service, Operations, and Content Management Systems. Each Hub comes with a plethora of tools and features you can start using right out of the box, which is why HubSpot...

HIVE Hexagon
HIVE Hexagon
HIVE Hexagon
HIVE Hexagon
HIVE Hexagon
HIVE Hexagon