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.
Designers can utilize this type of animation in following ways:
People do notice the details. Attention to animation 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 is supposed 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 fulfills 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.
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 behavior 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.