Digital Sales & Marketing
Digital Sales & Marketing
Close

Free digital sales and marketing courses

Immediately start seeing better digital sales and marketing results with dozens (and counting) of free online courses inside IMPACT+.

View all free coursesView all free courses

Digital Sales & Marketing World 2021

The premier, hybrid event for growth-focused business leaders, digital marketers, and sales pros. Virtual passes are free for IMPACT+ Pro members. In-person passes on sale soon.

Learn moreLearn more Watch past events on demandWatch past events on demand

Digital sales and marketing services

Discover the full array of IMPACT services, including inbound marketing training, web design, paid media management, and more.

Learn moreLearn more
They Ask, You Answer
They Ask, You Answer
Close

Free They Ask, You Answer course

Learn the principles of the They Ask, You Answer by taking our most popular course, taught by Marcus Sheridan himself.

Take the course nowTake the course now

Hire a coach

Turn your company into a high-performing digital organization with our flagship coaching program, Digital Sales and Marketing Mastery.

Learn moreLearn more

Case studies

See dozens of examples of companies succeeding with Digital Sales and Marketing Mastery and They Ask, You Answer.

View case studiesView case studies

They Ask, You Answer, the book

“One of the 11 Marketing Books every CMO should read.” — Forbes

Learn moreLearn more Buy the bookBuy the book
Virtual Selling
Virtual Selling
Close

Virtual Selling Mastery

Equip your sales team with proven methods to connect with today’s buyer, shorten the sales cycle, and close more deals, faster.

Learn moreLearn more

Virtual Selling Summit 2021

Your one-day virtual selling crash course! Today, sales reps are struggling to sell remotely. Learn how to close more deals in a virtual world.

Register NowRegister Now
Video
Video
Close

Free video sales and marketing strategy course

Zach Basner teaches you the fundamentals of making video for sales and marketing work inside your organization.

Take the course nowTake the course now

Video Sales and Marketing World 2021

Video Sales & Marketing World 2021 is in the works. In the meantime, enjoy the 2020 event on-demand - free for IMPACT+ Pro Members.

Watch past events on demandWatch past events on demand

The Visual Sale, the book

Learn how to use video to ignite sales, accelerate marketing, and grow your business in a virtual world in this book from Marcus Sheridan and Vidyard’s Tyler Lessard.

Learn moreLearn more Buy the bookBuy the book

Master video inside your organization

Video is a critical component of any high-performing digital sales and marketing program, and is a key part of Digital Sales and Marketing Mastery.

Learn moreLearn more
HubSpot
HubSpot
Close

Free HubSpot sales and marketing courses

Taught by Carina Duffy, IMPACT’s lead HubSpot trainer.

Marketing automation mastery (with HubSpot workflows)Marketing automation mastery (with HubSpot workflows) Inbound lead generation and conversion optimizationInbound lead generation and conversion optimization Getting started with sales technologyGetting started with sales technology

HubSpot Training Day

Following INBOUND 2020, IMPACT and HubSpot co-hosted a full-day of deep dive sessions to help HubSpot users get the most out of the new features fast! On-demand access is free for IMPACT+ Pro Members.

Watch on-demandWatch on-demand

HubSpot training and implementation

Maximize your investment in HubSpot's marketing, sales, or service platforms with guided training and implementation services.

Learn moreLearn more
Web Design
Web Design
Close

Website Optimization Summit

Learn how you may be unwittingly undermining the money-making potential of your website and how to fix it! Watch the opening keynote for free on-demand inside IMPACT+.

Watch on-demandWatch on-demand

Website design and strategy services

Get a beautiful, user-friendly HubSpot or Wordpress website that is easy to update, consistently generates leads and revenue, and grows with you.

Learn moreLearn more

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

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

Christine Austin

Creative Lead, 7+ Years of Web Design and Development Experience

March 16th, 2017 min read

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.  

FREE On-Demand: The Website Optimization Summit Opening Keynote

Watch Liz Moorehead’s takeaway-filled opening keynote from the Website Optimization Summit for FREE inside IMPACT+.

Your business website should be your most profitable virtual employee -- closing deals left and right. Yet, business leaders and digital marketers just like you are unwittingly undermining the money-making potential of your website. 

Let Liz Moorehead show you the simple and powerful ways you can immediately increase the revenue potential of your business website, no matter what industry you’re in, in this information packed keynote.

Watch Free On-demand

Watch Liz Moorehead’s opening keynote from the Website Optimization Summit, FREE on-demand inside IMPACT+. Learn how you may be unwittingly undermining the money-making potential of your website and how to fix it!
Watch Free On-Demand
Here Are Some Related Articles You May Find Interesting

Want to Contribute Content to impactplus.com? Click Here.

IMPACT+ Sign Up
A FREE online learning community with on-demand courses, hundreds of expert-led sessions, thousands of your peers ready to support you, and much more.
Check it out
FREE On-Demand: Watch Liz Moorehead’s Website Optimization Summit opening keynote now!
Watch Free On-demand
FREE On-Demand: Watch Liz Moorehead’s Website Optimization Summit opening keynote now!