Blog

Making Good Use of Animation

Published:03/03/2015

Web animation has come a long way over the years. From the somewhat recent days of flash to the more modern CSS animations we see today,  designers and developers alike have been using animation to “spice” up their work for better or for worse.

Simply making things move across the screen does not enhance a website or application on its own, but an approach must be thought out and well executed in order for the animation to be beneficial to the project overall. By using animation correctly, a website can create positive emotions, enable fluid transitions and interactions, show relationships between items on a page, and  control the user’s attention.

They say you only have a few seconds to capture a person’s attention before they leave your site, which means you have to have the information they want, and you have to be engaging. One way to possibly engage a user is by implementing certain animation techniques. This could be a poignant and interesting illustration that contains subtle movements, or user interface components that instruct the user to navigate through a series of slides. The point is to attract the user, so they interact more with the site and ultimately get them to the final destination or goal of the site.

Sometimes it is hard for the user to know exactly how to use a site. Animations can assist in showing a user how to work certain components, and how pieces on a site relate to each other. For example, if a button is clicked on the bottom-left portion of the site, and something else appears in the top-right, it could easily be missed if there are no visual cues. However, if the appearing content would slide down the page, or it would fade in after the rest of the page is promptly shifted upwards, a user would be able to recognize the button’s functionality of adding or showing additional content on the page. The animations are able to guide the user’s eyesight and work similar to the way things operate in the real world, thus creating a more intuitive site to connect with.

In the real world, everything is connected in some shape or form, but the web is not always like that. Some sites are completely static, and page refreshes are a slap in the face to let the user know they are on a different page. Animation in junction with other modern technologies, can allow for a seamless and a well-polished experience as a site is navigated. Now, sites can feel like a single organism, and not a choppy ride. Tabs can function smoothly as a user would expect, and pages can be delivered one after another with smooth transitions in between to signify diving deeper into information, or transitioning from one section to another. Single-page website are much more user-friendly when the scroll is visually shown, rather than an abrupt page jump. Having the feeling of one solid application or site, rather than multiple separate pieces, makes for a better user experience and better comprehension of how to navigate.

One thing that is often overlooked in web design and development is the user’s actual experience and emotions as they would progress through a certain site. Yes, we care about how a site looks and functions, but have we considered the emotional responses user’s might have to what is presented to them? Animations can go a long way in producing positive emotions and reactions to a site or application, and a user is more likely to interact with and revisit a fun site that they personally enjoy. A site can be fun and engaging without animation, but animation can really take an enjoyable site to the next level.

Not all sites have to be about fun interactions and dynamic illustrations, but they can be subtle as well, using simple and well-polished animations to make frequent breaks less noticeable. The key with animation is to decide when to use them, and their purpose on the site. When a proper balance is struck with animation, that is when a website truly shines.

Enjoy what you’re reading? Sign up for the AYC Media newsletter and receive updates on our posts.