The Designer’s Guide to Adding Animation in UX Design

If there is anything most apparent in the rich and long history of animation, it’s that moving graphics and images have always been captivating to audiences. Far from being a novelty, animation is now used for other purposes besides entertainment. In fact, one way to use it is to take full advantage of its timeless appeal and versatility to create a positive and engaging experience for website users.

But not all pieces of animation are created equal, especially from the standpoint of user experience (UX) design. Some end up creating, instead of solving, problems. Well-intentioned but misguided animation can distract users from their goals, clutter an interface, or slow down a website. Designers must have a clear understanding of not just the benefits, but also the principles of incorporating animation into UX design.

This article discusses the principles of using animation in UX design, including the top rules for maximizing the benefits moving designs can deliver to brands.

More than just moving pictures

For many designers, the animated elements of a website or app are simply optional add-ons for extra appeal. But when used wisely, animation can become much more than that, offering key benefits to the site and contributing to excellent UX design. Below are some of the ways animations improve UX.

Animation and storytelling

One of the most powerful ways animation contributes to UX design is by creating emotions that users can readily understand. Emotions are known to have a considerable influence over consumer behavior, so using animated elements is a potentially effective way to ensure a positive response from users.

To understand how animation creates emotions, you need to see how animation can tell stories. In one study, subjects were shown a video of animated circles and triangles. By watching how the geometrical shapes moved, the subjects were able to comprehend a narrative. This imagined story became their basis for determining the “emotions” of the polygons on the screen. Movement, therefore, is necessary for telling stories. From stories, people can perceive emotions.

User experiences are stories. Designers deliver these stories when they work on a website or an app. Users go through these narratives every time they use it, whether it’s to make an online purchase, upload a selfie, or share any type of content. The goal is to ensure that every story is delivered seamlessly and efficiently.

Use animated elements to tell the story better and, thus, create an emotional connection with users. These include:

• Changing button colors indicate which steps users can take throughout the journey.
• The parallax effect creates a sense of continuity among the different points of the experience.

Even small movements on the interface can improve users’ experience as they use a product. By carefully choosing which animated elements to incorporate, designers can spark lasting emotional impressions and responses from users, all of which can benefit their website or app in the long run.

Animation as a functional element

It’s important to keep in mind that animated elements take up space. It is, therefore, necessary to make them count. What this means is that animation should not be added to impress an audience. Rather, it must be added to perform a specific role or function. Here are some clever ways to use animation.

Take the boredom out of a loading screen

Users are willing to wait just two seconds for a website or app to load – any second of delay can cause many to leave in favor of faster resources. Animated loading screens can be used to keep users entertained and engaged as they wait for content to appear on a site or app.

Image Credit: Thomas Bogner (https://cdn-images-1.medium.com/max/800/1*rGbFrxz7MPmJFrUcM5stWg.gif)

Give users a clue or two

Designers can use animation to provide users with context on what they can do on the site or app. For instance, making a list of posts slide up as they appear on the screen – instead of simply making them appear – tells users they can slide up if they want to see more.

Image Credit: EveryInteraction.com (https://www.everyinteraction.com/wp-content/uploads/2018/01/1-TF1_VOGweFH_G1NqrXRYNA.gif)

Provide real-time visual feedback

To prevent confusion, web designers can incorporate animated elements that provide instant visual feedback for every action they take on the app or website. For instance, a button may be made to change colors or light up when clicked or pressed.

Image Credit: EveryInteraction.com (https://www.everyinteraction.com/wp-content/uploads/2018/01/1-Xfunnzi7oqLFar2cRXfznw-1.gif)

Animation as a branding tool

The ability of animated elements to evoke emotions within users makes them effective tools for branding. Moving graphics can elicit joy, anticipation, excitement, curiosity, and even sympathy the moment users open a website or app. By evoking the right emotions, you can induce a sense of loyalty and strengthen consumers’ attachment to a particular brand.

Image Credit: Whizzly (https://cdn-images-1.medium.com/max/800/1*Jj799s3EEUwg_FuN_VGWQQ.gif)

In using animation as a branding tool, it is important that the moving elements do not take away from the story being told. Rather, the animated elements must support the overall continuity of the experience. They must meld well with the overall narrative while highlighting the values and the strength of the brand and its products.

Things to keep in mind when using animation

As mentioned above, incorporating animated elements into your product is not without drawbacks. To ensure that an app or website enjoys the full benefits of using animation, you must remember the following:

Animation merely supports the experience

Users visit a website or app for the content, products, services, and experience it offers. Unless in very specific circumstances, they do not visit a website to gawk at its animated buttons, transitions, or sliders. Animated elements should never be the centerpiece; rather, they should improve the overall experience.

Image Credit: EveryInteraction.com (https://www.everyinteraction.com/wp-content/uploads/2018/01/1-hf-9eVk2u0s4jJO3PMhU9Q.gif)

Always exercise restraint in incorporating animation into your design. Instead of trying to impress the audience with flashy embellishments, make sure that the animated elements are consistent with the visuals and branding. More importantly, animation should support users’ interaction with the product’s elements.

You don’t need to animate everything

As the saying goes, “just because you can doesn’t mean you should.” As stated above, restraint is an important quality when designing great experiences. In this case, just because it’s possible or easy to animate an element doesn’t mean doing so will benefit the user. If animating an element doesn’t add anything to users’ experience, it’s best to leave it plain and motionless.

This doesn’t mean you cannot be quirky or adventurous with you concepts. In fact, being able to use animation to turn a tired and tried concept into something fresh that will resonate with users, can be a great idea. Animating for user interaction and sticking to simple movements help users stay focused and can create a better experience.

Keep it natural

Apps and websites, as well as their visual elements, do not have any actual physical presence in the real world. They are not governed by the rules of physics, but web designers need to design them as if they are.

For example, it is understandable that an animated list responds at the same speed that users interact with it. This is because users ascertain their interactions with digital elements based on familiar rules in the real world. The elements of an interface need to conform to the expectations of users, otherwise, the narrative is disrupted.

Image Credit: EveryInteraction.com (https://www.everyinteraction.com/wp-content/uploads/2018/01/1-J3CkO4OiKaIJqW2_DnmU0w.gif)

To succeed in this area, always be conscious of the “material” and the “weight” of the elements of their app or website. Those that “feel” weightless understandably move fast while those that “feel” heavy need to behave as if they really weigh a lot. You must have both imagination and a solid grasp of physical rules and how they affect objects in real life.

Always test with actual users

Manufacturing companies consider testing a compulsory requirement before any product is launched. This approach needs to be applied to digital products as well to ensure that all elements, including the animation, are aligned with the brand’s original goals and that they actually meet intended results. Needless to say, the test needs to involve actual users.

Testing may seem like an extra requirement but it can actually save designers from a lot of work. By seeing how actual users respond to the website or app, designers can determine which elements need to be modified to optimize the user experience and make their end-result accessible to all. What’s more, they can do this before anything is finalized and becomes much harder to change. At the end of the day, testing enables both brands and designers to avoid costly mistakes.

Next Steps

If a picture is worth a thousand words, how much more is a picture that moves? The potential of animation as a tool for telling a brand’s unique story, as well as creating positive interactions with users is massive. There is much to gain from incorporating it into products, but it also can be less than helpful when used haphazardly.

To get the most out of a website’s animated elements, you need to get to know the brand, as well as the intended audience, as well as you can. The goal, after all, is to tell a story that highlights the strengths and good qualities of the brand while ensuring a positive and engaging experience for the readers.