Web animations have been around for nearly 40 years, but throughout that time, their purpose and functionality have drastically evolved. Today, the implementation and user experience of web animation is a popular topic of debate among designers and developers. While some argue animations are a crucial part of providing a delightful user experience, others contend that animations distract users and disrupt their journey. Both sides make compelling arguments, and in fact, both are correct. Like any design element, web animations can be overused. To be effective, they must be implemented with purpose and an understanding of how users will absorb and interact with motion.
A Brief History of Web Animation
Web animations began in the late 80s with the introduction of the graphics interchange format, what we commonly call a GIF. While these are frequently used today in text messages and social media, the first gifs were created by companies to draw attention to their logos, often by using very simple rotation animation to give the perception of 3D space.
The release of Flash soon followed, inspiring an inundation of motion across the web. While Flash was a revolutionary technology, its implementation had to be limited because even a seconds-long Flash animation would dramatically slow down sites and often required large amounts of space. Today, most web animations are created in-code through CSS and Javascript. This ability to implement lightweight micro-animations has led to a transformation of the purpose of web animations and sparked countless debates over their intent and execution.
The Role of Web Animation Today
Animation has been one of the top UX design trends over the past few years. As web designers have turned from strict containers and large blocks of content to minimalism and out-of-the-box layouts, web animations have similarly adopted a more subtle, integrated role. While the first web animations were used primarily to grab attention with flashy movement or loud colors, animations today have an integral part to play in user experience and material design. Some examples of applications for animations include
- Providing feedback to users
- Prompting user flow navigation
- Create natural awareness in material design
- Delighting users
Providing User Feedback
One of the most important uses of web animation is to provide users with positive or negative feedback. These can include signifying state change (active, hover, and focused states) or providing an affirmative prompt (a visual cue confirming an action like a click). For example, a simple hover effect on a button informs users that the element is clickable and may encourage them to take action. Form submissions often include a subtle shake motion to inform users that a submission did not go through because information is missing. Loading bars and infinite spinning animations are also common uses of animation, letting users know content will be accessible shortly.
Prompting User Flow Navigation
As websites have evolved from basic informational pieces to interactive user journeys, web animation has likewise adapted to guide users by highlighting content and providing direction. Subtle motion animations, such as fading, sliding, zooming, or even bouncing are linear motions commonly used to bring content in and out of view. For example, content that creates a narrative or that is an important step in a user pathway may use a gradual fade-in animation to encourage users to continue reading and stay engaged. A multi-step journey such as a checkout process may take advantage of a sliding motion to imply that each step a user takes is moving them forward to completion.
Creating Natural Awareness in Material Design
Material design is a term coined by Google to describe the balance between organic and abstract concepts to construct modern digital interfaces. This includes user interface (UI) structure and layout as well as more traditional design concepts such as color, hierarchy, and white space. Motion has a key part to play in material design, not only to provide spatial awareness (for example, an element that animates on-screen on top of another element instinctively creates the perception of depth) but also to imply natural movement. Achieving natural or “authentic” movement can become as intricate as accounting for the element’s size and matching the speed fluctuation, ease, and direction to fit the element’s perceived mass. For example, a basic slide animation that slides in and out of frame at a static speed may come across as more mechanical than a slide animation that is eased in and out of frame by controlling its acceleration and deceleration (similar to how someone approaching you slows down as they come closer). While this may seem extremely meticulous, the resulting motion can have a large impact on how users interact with and respond to a well-designed user interface.
Delighting Users
Of course, animation can still be used to delight users. While original web animations attempted to do this through flashy movements, these animations often seemed out of place and obtrusive. Today, delighting users with animation is more about restraint and moderation than emphasis. To delight users, animations must be carefully considered and purposefully designed to positively impact user experience. For example, you might incorporate parallax, add scrolling animations, or use the typewriter effect to gradually reveal a heading.
Web Animation Applications
As the number of web animations continues to grow, the urge to incorporate more and more motion will likewise increase. So, how do we know when we’ve reached the point of too much motion and crossed over into overstimulation and distraction? In 1990, shortly after the introduction of the first web motion, Jakob Nielsen and Rolf Molich released a study that was hailed as the industry standard for usability best practices. The study covered everything from user attention span to basic human perception. While there are still no hard and fast rules for just how much motion is too much, these insights into how users absorb and interact with content and motion can help you decide when and where animation is necessary.
The primary purpose of motion should always be to help and guide users to interact with content in an intuitive way. Web animation can play an important role in creating an environment that feels comfortable and natural to the user. When implementing animation, it is critical to consider its purpose and impact and, as with all things design, practice moderation. Thoughtful use of web animation will positively impact user experience and create a lasting impression.
