How to enhance UX with Animation

Arisa Furumoto AD

As a UX developer, animation is something I pay great attention to as it enhances a site’s usability and make the user experience interactive and enjoyable, yet it is often overlooked during the design process. Whether it is a video, GIF or CSS, people love websites with playful movements and today we are seeing an increase in its usage. However, animation in websites is not just a trend. Movement is something innately fundamental to how humans experience the world.

So why are we not designing with animation in mind? The answer might be at the initial stages of the design process where we are using tools like Photoshop to design as a static image which is limiting us from thinking dynamically. Or it simply may be because we still see animation as decoration, not something we must have.

"Animation is no longer a novelty for web designers … it’s becoming the basis of effective interaction design”—Web Designer Depot"

Now is the best time to focus on web animation. The technology has improved substantially in the recent years and even large-scale animations can be achievable with a lightweight outcome, using CSS and SVG. We finally can develop websites that are fun to use just like we used to with good-old Flash, but in a faster, cleaner way. So why don’t we turn lifeless sites into something that gives every user that “wow” experience?

However, animations can be overwhelming, depending on how they are used. Throwing meaningless movements everywhere on a site would only distract our users. To avoid certain pitfalls, before I create any animation, these are the questions I ask myself:

  • What is the purpose of this animation?

    Animations are eye-catching. However, whether it has a positive or negative effect is based on the purpose it's serving. Animations can bring value only when it’s used purposefully. For instance, hover animations communicate to the user that an element is interactive. Promotional elements with a unique animation can quickly draw the user's attention.

  • Is it worth adding? Is it accessible?

    Depending on its implementation, animations can be quite complex and heavy even with the current technology. No matter how impressive your animation is, it’s not worth adding if it’s inaccessible or significantly slows down the user experience.

  • Does it feel natural? Is it consistent with the rest of the site?

    It is important that every detail of your animation matches the personality of your site and the movement naturally flows because even a small speed change can make your user feel uneasy. Keep in mind that great animation is subtle, and yet captivating.

Now that we know what to consider, here are 4 types of commonly used web animation and its examples:

Directing the user's eye

It is possibly the most common and functional way to use animation. Not only does it give you a spark of joy after every interaction but it also controls the visual journey of a site. As human eyes are attracted to movements, we can navigate a site and imply the next expected action with UI animations. It could be a simple call-to-action, mobile navigation, or even a whole online shopping experience.

Form with animation

Credit: Heyllow Lab

Online shopping animation

Credit: Google

Waiting animation

The “loading spinner” is one of the oldest animations that we still use today. It adds a bit of entertainment during the “dead time” and it also gives the user feedback that a process is occurring and the wheels are in motion.

Download button's loading animation

Credit: Oleg Frolov

Animation can also make the loading time feel faster with techniques such as a skeleton screen. Instead of staring at a spinner, users can instantly become familiar with the website’s layout while the actual content is still loading.

Skeleton screen animation

Credit: Mark Disciullo

Promotional animation

It may not give you a lot of information, but it immediately catches your eyes and leaves a strong impression. As tempting as it sounds, it is not the best solution for every website especially when your users need more than just pretty pictures and animations. Full-screen carousel and slideshows are the common use-case for this type of animation.

The Law of The Jungle - Animation example site

Credit: The Law of The Jungle

Storytelling animation

Instead of compressing every bit of information into a single article, you can tell a story step by step, action by action with animated graphics. Animations can take up the entire screen as if you’re watching a cartoon, or it can be a series of subtle animations of text and pictures which get triggered by the user's action.

Make Your Money Matter - Animation example site

Credit: Make Your Money Matter

Navigating Responsibly - Animation example site

Credit: Navigating Responsibly

In summary

Animations have so much value to offer us. To delight our users serves a powerful emotional function. Animation is not just a trend. Trends come and go, but animation is the future of interactive design. This is a field where UX developers can explore and innovate. While web animations were considered heavy in the past, there are now more appropriate ways to create lightweight animations. Motion in the web industry will only keep moving forward, so let’s not get left behind and take advantage of this opportunity.

Learn more about Adelphi Digital