Back to Learning Center
Subscribe
Join 40,000+ sales and marketing pros who receive our weekly insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer

What is <span>They Ask, You Answer</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
Free Courses & Certifications

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
Website Design

6 Distraction-Free Ways to Use Web Animation (& Guide the Eye)

By Christine Austin

6 Distraction-Free Ways to Use Web Animation (& Guide the Eye) Blog Feature

Web animation; A technique that may remind you of early 2000 flash websites and GIFs.  

I mean who didn’t love looking at pages like the one below?

web-animations-old-giphy.gif

Fortunately, we’ve come quite far from those days. Today, we use animation more strategically; as a way to draw attention, cue, or delight depending on the experience we’re trying to achieve.

The key to getting it right, however, is recognizing the right situations to use it, and of course, only in moderation.

For example, subtle animations can draw the eye to key focus areas of your pages, while more robust and complex animations can create entirely new experiences or tell stories.

While adding web animations isn’t a priority, and normally shouldn’t be, understanding pages and points where it can be used effectively can help improve your user experience and increase conversions. The key word here is effectively; They must serve a purpose and they should never distract from your overall message.

Incorporating web animations can be somewhat difficult to strategize, especially if you just don’t know where to utilize them. So, to help you identify these areas, here are six ways you can incorporate animation into your website without distracting or driving your users crazy.

1. Directional Arrows/Cues

Using web animation to communicate how to use your website can sometimes aid in introducing new experiences or guiding your users to other areas of the page or site. It can also help highlight conversion points that some users may otherwise ignore.

While static elements can direct users or draw attention as well, this can sometimes be confusing. Users might struggle to understand whether or not these unanimated elements are actually part of the content or represent decoration. For instance, if you have a image with dots on certain areas that you want users to hover over, a subtle pulse will help them recognize they have action to them.

Web animation in these cues can make the world of difference,  notifying the user of an action they should perform.

For example, Zest uses a small mouse icon with a moving scroll wheel to show the content continues below the hero area. This way users don’t think the page has ended before it’s even begun.

zest-gif.gif

Directional cues can also be used to highlight calls-to-action. While the example below is another way to demonstrate and initiate scrolling, it could also be repurposed and used as a cue, pointing to a button to draw further attention.

Dripping-Down-Arrow.gif

2. Text Animations

With the overload of content we tend to put in front of our users’ faces, it’s no wonder they skip over some value propositions or ignore critical content.  

While it can be overwhelming to animate every bit of text, there are ways to bring attention to specific sentences, or even paragraphs as a whole.

For instance, consider animating your value proposition. One technique I’ve come across many sites implementing is “fill-in-the-blank” web animation, where one word of the header is typed in, deleted, and changed to a different word.

This not only brings more visual hierarchy to your value prop, but also makes it dynamic, fitting more content it otherwise couldn’t. HubSpot used to have this functionality on their website back in 2015.

hubspot-2015.gif

If you are looking to use animation throughout your page, fade-in effects on content sections can add a delicate visual cue.

For example, check out how Avocode used this on their 2017 design report to bring attention to the content first before fading in the image. This makes it clear that the content is more important than the image and is the first thing you should look at when arriving at the section.

 avocode-gif.gif

3. Cinematography Backgrounds

In recent years, many companies have rushed to use background videos on their sites as a way to bring life to their pages. Unfortunately, many reviews claim it actually can distract users from reading the content and act as a barrier that hinders conversions.

One of the newest techniques to come out of this discovery is cinemagraphs; A visual thats a photo with incredibly subtle movement to it. They tend to act more as eye-candy and help bring life to the website without overwhelming it.

Glendevon's hero area below utilizes it to give the appearance of the car driving while also drawing visitor’s eyes straight to the page’s value proposition.

GM-Cinemagraph.gif

Another fantastic benefit to using a cinemagraph over a video is its smaller file size. These files can normally be exported as GIFs and are much shorter, saving your website's load time overall.

4. Form Cues  

A well-designed and optimized form can make the difference between your user converting or bouncing off the page, and many of us tend to forget this.  

In some cases, slight animations can act as signals to make the submissions process more delightful or indicate something needs attention.  

On Groupon's registration form, the company animates the placeholder text by transforming them into small labels that sit higher up in the text field. This reminds users of the content that needs to go into the boxes while conserving page space that might have been lost if regular labels were used.

groupon.gif

Animations can also be excellent warning signals for those who are entering information incorrectly into certain fields. This shake animation, for example, is similar to the one that’s used when logging into Apple computers with an incorrect password and helps users realize their mistake.

form-wiggle.gif

This animation tends to get recognized quicker than red error text since it more in-you-face and acts as a more immediate response.

5. Graphic Animations

One of the most time consuming, but noteworthy, types of web animation many of us tend to gravitate towards are animated graphics. They can be a huge win in the delight category or act as fantastic ways to explain images and processes.

Take Simpliciy’s site, for example. They incorporate a simple animation on their small hero graphic to act as a way to entertain the eye, similar to that of the cinemagraph.

simplicity-animation.gif

Zendesk took graphic animation a step further, using it to showcase how their software looks. Also, the scrolling effect helps bring that much more realism to the look and functionality of the product.

zendesk.gif

Unfortunately, graphic animations tend to be the one that people abuse the most and lack a reason to use.

Don’t fall into this trap.

Before using animated images, always ask yourself what purpose it serves, how it will impact the user's journey, and what negative effects it may possibly propose before working on one.  

6. Button Animations

(No, this does not mean animating all buttons to change into every color within the rainbow.)

Like form animations, button animations can also give users visual feedback based on an action they are about to or have already completed. This verification helps users subconsciously understand what they can expect to happen, without the use of additional text.

Stripe uses button animations on their payment submit button so users are able to visually understand if their payments have been accepted. This cue would otherwise need to be delivered in a text response, which only adds more content the user needs to read.

stripe-payment-submit.gif

In another example below from CodeDrops, the buttons trigger two different types of animations.

The left uses color cues, indicating whether or not the notifications are on or disabled, while the right button triggers a form to appear, removing multi-page friction barriers and creating a more seamless step-by-step signup experience.

notification-gif.gif

Key Takeaways

Web animations are an incredible way to add character to your website, distinguish its experience from your competitors, and add personality to your website, but depending on the scale, they can take a significant amount of time to incorporate and may not be worth it if the ROI isn’t there.
The next time you consider adding effects such as the ones above, make sure that your ideas align with your user's journey and either helps or delights them along the way to the task you want them to complete.  

Topics:

Website Design
Published on March 16, 2017

Recent Articles

9 Crucial Elements Every Homepage Should Have [+Video]

By Ramona Sukhraj on October 21, 2021
6 min read

5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)

By John Becker on October 14, 2021
7 min read

Google shares new tools to audit website user experience

By Paul D. Grant on August 12, 2021
3 min read

New HubSpot CMS Hub starter tier released for growing businesses

By Paul D. Grant on August 6, 2021
4 min read

They Ask, You Answer and diversity, equity, and inclusion (Content Lab, Ep. 55)

By Liz Moorehead on July 29, 2021
2 min read

ICYMI: Digital marketing news update for July 26, 2021

By Liz Moorehead on July 26, 2021
6 min read

ICYMI: Digital marketing news update for July 19, 2021

By Liz Moorehead on July 19, 2021
6 min read

What the heck is going on with all the Google updates? (Content Lab, Ep. 54)

By Liz Moorehead on July 15, 2021
1 min read

8 best business website designs (updated for 2021)

By Sam Lauron on July 15, 2021
5 min read

ICYMI: Digital marketing news update for July 12, 2021

By Liz Moorehead on July 12, 2021
5 min read

Too many internal links in content can confuse Google about site structure

By Liz Moorehead on July 9, 2021
5 min read

Google July 2021 core update rolling out over next 2 weeks

By Liz Moorehead on July 2, 2021
4 min read

6 tips for building a great diversity and inclusion page (+examples)

By Ramona Sukhraj on June 29, 2021
7 min read

Google punts third-party cookie ban to 2023 for 'responsible planning'

By Liz Moorehead on June 25, 2021
6 min read

Finally, Google page experience core update is rolling out

By Liz Moorehead on June 18, 2021
3 min read

8 business blog design examples that keep readers engaged

By Steve Polito on June 16, 2021
6 min read

What is a featured snippet? [Definition + Examples]

By Kevin Church on June 10, 2021
4 min read

Google June 2021 core update live, July core update coming

By Liz Moorehead on June 4, 2021
3 min read

Google's June page experience core update will be mobile first, then desktop

By Liz Moorehead on May 21, 2021
3 min read

Why is growth-driven website design so freaking expensive?

By Daniel Escardo on April 14, 2021
5 min read

Strategy-driven website redesign: 5 IMPACT-built websites that solve client challenges

By John Becker on April 7, 2021
4 min read

10 Google Analytics metrics you absolutely must track (updated)

By Magdalena Day on March 29, 2021
5 min read

29 Best Contact Us Page Examples To Inspire Yours [Updated for 2021]

By Melissa Smith on March 25, 2021
17 min read

Website Performance Mastery: A better redesign process for your business website

By John Becker on March 24, 2021
6 min read

How much does a website design or redesign cost in 2021?

By Vin Gaeta on March 23, 2021
9 min read