Skip to content
THE STATE OF MARKETING INBOUND24 Edition
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

Understanding Breeze: Intelligence, Agents, and Copilot Explained
Nov 14, 2024

Understanding Breeze: Intelligence, Agents, and Copilot Explained

Desiree Landa
HubSpot, AI

Unveiled at INBOUND24, HubSpot's new AI suite, Breeze, has generated plenty of buzz—and plenty of questions. With three powerful components—Breeze Intelligence, Breeze Agents, and Breeze Copilot—this suite aims to streamline customer engagement,...

How HB21-1110 Impacts Website Accessibility for K-12 Schools
Nov 11, 2024

How HB21-1110 Impacts Website Accessibility for K-12 Schools

Desiree Landa
Enrollment Marketing, Website Accessibility

In today’s world, the phrase “just Google it” applies to just about everything. But what if “just Google it” wasn’t an option? For the over 84 million disabled internet users in the U.S., the digital world can feel like it’s behind a locked door...

Why Content and SEO Are Still Vital in the Age of AI
Nov 8, 2024

Why Content and SEO Are Still Vital in the Age of AI

Mallory Fetchu
SEO, Content Marketing, AI

Lately, I’ve been hearing a growing concern from clients: “Is content even relevant anymore? Everyone’s using AI like ChatGPT for research, so doesn’t that make Google – and by extension, SEO – obsolete?”It’s a great question and speaks to the...

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