Increasing Engagement with Web Animation

 

When you see something move, your brain is hardwired to notice it. Our ability to react to movement that we see in the corner of our eye could mean the difference between life and death in the bush. The fight or flight response that naturally kicks in also sends adrenaline to your brain, energizing you and focusing your attention.

People working in marketing know this and they use movement to encourage you to pay attention to their messages. Moving images grace billboards, the sides of buses, and advertisements around the world. Our eye is drawn to them and our mind follows.

Website Animation and Engagement

Website animation comes from the same idea: if you draw a visitor’s eye, their attention will follow and they will have a more engaged, focused and memorable experience. You can see why website designers have had such an interest in creating dynamic, animated websites since nearly the beginning of the world wide web. Here’s what you should know about website animation and a few examples of how you can use animation to increase user engagement on your business’s website. But first, let’s consider whether animation is a good idea for your site.

Is animation right for your site?

Before committing to adding animation to your website, ask yourself these two questions:

1. 1. 1 – Does animation align with the broader goals of my website?

Not all websites benefit from animation. In certain B2B industries, animation might seem out of place, for instance. Here are some important questions we like to ask with clients before we go all-in on animation:

1. 1. • What aspect(s) of your business offering will the animation emphasize? I.e. If you are a luxury brand, maybe a slick animation will prove your unique identity and illustrate the type of experience a customer could expect. If you’re an architect, your website animation could show off your design vision and turn your projects into an experience for web visitors. If you can’t easily answer this question, take some time with it before you commit to using animation on your site.
      • How will the animation be integrated into the broader website experience? Will animation be focused on a single page, or will it be integrated into the basic functionality of the site?
   2. 2 – How will I address the extra technical needs that animation brings?

For all its benefits, animation can also slow a website down, make it inaccessible to some users, and/or cause it to malfunction on some screens. Adding animation to a website means addressing extra resources (CPU and bandwidth) that it takes, and it also means committing to a longer process of testing and quality assurance during the development process as well as maintenance once the site launches. Be sure you have the resources to support animation on a website before you decide to go in that direction.

Where to Start – Five Common Types of Website Animation

Once you decide that website animation is right for your business, there are many ways to approach it. The following are five common types of web animation that will be helpful in deciding what approach to take.

1. 1. 1. 1. 1 – Flexible Header

Headers are where a lot of important information resides. Navigation menus, search functions, coordinates and phone numbers, contact links, etc. The problem is that if your header is full of important information and links, then it can take up too much space on the page. A flexible header is one that gets smaller when the user scrolls down the page, and larger when the user moves the mouse over the header area.

Peterson Wealth, a financial consulting business whose site we just launched, features a flexible header in action!

 

1. 1. 1. 1. 2 – Loading screen

As much as you try to make your website as fast as possible, some functions might be impossible to speed up to your liking. Perhaps it is requesting a user’s account information or some other on-demand data that is just too much to load in less than 3 seconds. For this, you might consider a loading screen animation. This is an animation that “plays” while the data is loading. This used to be as simple as a loading bar showing progress. But you can’t get away with that anymore, and now a loading animation should be part of your brand identity. Luckily, there is ample evidence that if you use a loading animation you can keep more visitors from bouncing while they wait.

Slack, the internal messaging site, has approached loading screens in a novel way – they have populated their loading screens with a revolving set of quotes, and your team can add their own quotes. This way, you always have something to read and ponder while you wait.

 

1. 1. 1. 1. 3 – Fade in content

A simple way to keep your readers engaged is to fade or slide content in as they scroll. These subtle animations can keep readers interested by giving the static content a more dynamic quality. You can also use fades and slides to illustrate information hierarchies and entice your visitors to explore the site further.

Here’s an example of a SaaS website we recently launched that fades in content to increase the dynamism and engagement of the otherwise text-heavy home page. Check it out.

 

1. 1. 1. 1. 4 – Parallax

The parallax technique in web design brings a 3-D effect to scrolling. Essentially, different parts of the screen scroll at different rates to give the effect that some elements are further away and some are closer. It is a captivating effect when used right, and it can greatly enhance the website experience for your visitors, encouraging them to explore and engage, and giving them a more memorable experience.

A great example of parallax is this digital advertising site we built.

 

1. 1. 1. 1. 5 – Video

Some of the most effective animations on websites are the most straightforward. Videos can be a very effective tool to bring dynamic movement to a website, illustrating your value proposition and bringing a healthy dose of brand identity. Soundless videos that play on short loops are the best idea here. And make sure that it loads lightning-fast or else your video will be turning visitors away. But if you can create the right video it can bring an added impact to the visitor experience.

We recently built a site for a compliance business that makes a great use of video to express its luxury appeal. Even better: the footage is of our hometown of Chicago. Check it out!

 

 

Let’s Get Started Animating

Now that you have some ideas about how and why to use animation on your website, you can begin to imagine how animation will help communicate your unique business goals and value proposition. If you want to talk through the options, get in touch with Millennial Web Development. We love imagining how the tools and techniques of the web can help introduce unique and visionary companies to the world. Get in touch!