Animation was once thought of as just decoration. But as technology advances and internet connections accelerate, designers are embracing the practical benefits. In this article, we’ll focus on one particular benefits of animation — marketing animation or animations that sell. Despite the fact that such animation isn’t intended to improve usability, it can impress the user, and give them some context for the subject.
The proof of this is its use for many purposes, including advertising. It has helped many companies already, and can be a very effective tool for start-up businesses, as well.
But, how exactly can we use animation for marketing? How do we boost sales with animation?
Here are the main ways, for this task:
1. Demonstrate superb craftsmanship
People do notice the details. Attention to animations can make the experience feel crafted. When apps/sites create a visually stimulating experience it brings a level of excitement to the user.
Loading animation is one of the oldest uses of animation which suppose to distract the user from loading times. But even this type of animation can demonstrate that your product is great. For example, when a user launches Uber app they immediately notice an animated drop that is turning into the pin on a map. This animation isn’t purely delightful, it also influences a user’s eyes and control where users should focus. This quick opening moment makes a clean first impression and entices the user to interact further.
Some companies go even further and use animation as a distinctive feature of the brand. MailChimp is one of the companies that use animation in such way. The company fulfils a fairly technical niche, creating and sending email campaign, but using animation it transforms this dry task into an inviting experience.The service adds small and delightful surprises throughout the user journey and makes sending e-mails a lot more fun.
2. Better deliver a key message
Animated effects help get your message across more clearly. Using animation you can take complex ideas or processes and make them easily digestible in a fun and graphic way.
Animation is able to highlight a product’s strengths. Bellroy is a company that sells wallets. They say that strive to create a slim design to reduce pocket bulk. In the example below, you can see how animation used in Bellroy clearly indicates a product’s behaviour and demonstrates its benefits.
Hover animations are very practical for delivering additional information about your products. This type of animation makes the revelation less jarring and provides an opportunity to add some delightful character to your site.
The storytelling potential of animations can add an emotional connection to an otherwise dull interface. Some common examples of story-telling are pages that will show off a new product by “assembling” it before your eyes. For example, the page dedicated to the Mac Pro on Apple’s website shows you exactly what’s under the hood as you scroll down:
Story-telling animations can also breathe life and fun into the long scroll. Instead of the parallax animations which is very common, opt for something subtler. Consider breaking up your site into scrollable “chunks.” Within each chunk, you can introduce the content through animations. Animations in the example below from Le Mugs website make the content “come alive” by animating simple art illustrations.
3. Engage users to take further steps
The use of animation will influence the eyes of your users, and it can control where they focus their attention on your page. A human eye is naturally attracted to motion and this makes animation the perfect tool for controlling your visual hierarchy.
Direct user attention
Moving elements are a powerful tool to attract users’ attention. If the goal is to draw the user’s attention to a single element out of several or to alert the user to updated information then an animation will do the trick. As long as there are not many other competing elements on the screen, even the slightest bit of motion will grab attention. Seattle’s Space Needle site takes advantage of this subtlety. The site draws attention to the instructions with a minor — but effective — animation in the up arrows.
Encourage user to act
Fine animation and interactive effects encourage users to click. Look at the design used for the “Chekhov is Alive” site below. The design begs you to click to find your character.
Other examples of animation in digital marketing
You already have enough information to begin your journey to a successful animation video. You are sure that it will be the move that will enable your audience to pay more attention to your online business and start making purchases.
Many other sites have used different types of animation for marketing purposes, and this strategy has been very beneficial. Here are some of examples:
Webflow — this is another website that has successfully incorporated animated design into its navigation. The amazing outcomes can be seen when a visitor scrolls down on the marketing homepage. They will notice screenshots that zoom and then fade in. One additional benefit of this effect is that it enables pages to load faster than they normally would.
Apple — the success that this website has received is quite impressive; however, this does not mean that they do not need to follow the trend of adding animation in web design, in order to further develop and gain more success. On the Apple.com webpage, the visitor will notice that, when they click on any option in the menu, a variety of products will slide across the screen at varying rates.
Humaan — this website has incorporated some simple but effective features on their website that can be considered very good examples of animation for digital marketing purposes. A visitor on the page will notice that, when they hover over a certain logo, it will automatically bring up an option that will direct them straight to the homepage.
Rollpark — this website is focused on innovative temporary and semi-permanent parking solutions. You’ll notice that, as you scroll down the page, there is more to see: the animated block with newly opening images and text blocks on the left. These are simply images to which they have added some extra movements.
Brodericksbrothers — Barry and Bernard Broderick are brothers from Ireland who are bar crafting experts. Their website is focused on fantastic new products like bars, cakes, and other sweet organic treats. You can notice how the animation blocks and detailed representation of heroes turn the pages into a funhouse. With good UX, the site leads customers to a great experience. How interesting is the animation that appears as you click on the elevator, or as you scroll the mouse? Here, they used animations in a way that simulates motion on any number of components.
Grammarly — Grammarly helps to correct tons of grammar mistakes, along with catching contextual mistakes, while widening your lexicon and recommending style enhancements. The animation block on the landing page shows how the grammar service works, and how it helps to check and polish your content to keep your writing clear, error-free, and efficient.
The use of animations to make explicit gestures can be used on any website and will result in a better navigation experience, which is key to its success.
Things To Consider
Animation is a double-edged sword. Incorrectly used, it can ruin user experience.
Avoid distracting animation
Avoid animation which distracts the user from their task. In the world of online sales and marketing, distraction can be death. Animation in example below is distracting and don’t help conversions.
Pay attention to the frequency
A very important aspect to consider when designing an animation is the frequency with which it would likely occur within a single user session. The animation might be nice the first time user sees it, but after 100th attempt, it can get annoying, especially when it has no purpose other than being “fun”.
There is plenty of UI elements you could animate in both fun and down-to-business way. But remember one thing, if you want to create marketing animation you should set a goal of creating an animation which has both style and purpose.