Five Principles for Effective Animation in UX

Animation is a crucial part of digital experiences. The interactivity of software and websites is brought to life by animations. They differentiate digital as non-static, fluid experiences.

Animation is a material of the digital – it can be considered one of the key materials a UX designer works with. Learning how to manipulate this material, and design appropriate animations, will elevate the end result for users.

via GIPHY

Flipbooks are a method for creating animation. 

Animation usually involves some kind of motion. Often we understand and parse motion in relation to what we know about movement in the real world. Animation makes it look like something is moving. You may have made or seen a basic form of this in flipbooks.

Animation has a long history, and long before there were websites and apps, there were animated films and title sequences. A classic of animation is Disney’s 12 principles of animation, and these are still relevant in UX today.

In more recent times, the Google Material Design guidelines have created renewed interest in animation principles and how to consistently apply a set for good UX. The guidelines specify how to create motion that feels real, the ways in which elements should respond to input, transition design, and the power of animation in creating delight.  

Let’s take a look at five principles for using animation effectively when designing digital experiences.

1. Delight

The Snapchat ghosts add a whimsical touch to the user experience of the app.

As the Google guidelines point out, animation can be fun! The quality and tone of animations in an interface add to the personality. By its nature, animation, well, animates the experience. It provides an opportunity to move from static and dry toward active and playful. Animations create moments of delight and engagement when done well. The Google doodle often uses animations to this effect. It is important to think about brand tone and voice when designing animation, as these should fit in with the overall feel of an experience.

2.Providing feedback

WaitCursor-300p

Source: Wikipedia

The spinning rainbow wheel provides feedback that something is happening.

One of the key usability heuristics, ‘visibility of system status’, is about providing feedback. Animation is a great way to do this. We are all familiar with the spinning rainbow wheel, loading spinners, and for some older users, we remember one of the first animations we saw as the hourglass. While these animations can be irritating and are associated with waiting, they do us the favour of letting us know that something is happening – a process is going on in the background.

The same idea applied to progress bars – the animations communicate that the system is working. Animations also provide feedback when we interact with elements on a page – a button appears to depress downwards, or a menu drawer slides out.

3. Connecting gesture and result

Swipe to delete uses animation to provide feedback between a gesture and action.

Animations are a crucial part of touch screen, gestural interfaces. When a user swipes on the native iOS mail app, the sliding animation reveals the ‘more’, ‘flag’ and ‘trash’ options as cards that pull out from behind each other, and as the gesture is elongated, the ‘trash’ option takes over the row. The connection and feedback between the gesture and the animation in the interface are crucial to providing an understandable user experience. When designing any interface elements that will be interacted with on a touch screen, it is crucial to consider how they will respond, and how the animation will communicate that.

menueffect

The now ubiquitous pull to refresh is an example of connecting a gesture and the resulting animation.

In many cases there is a logical connection between the direction of the gesture and the resulting animation. This is to do with modelling interfaces on our expectations of how things behave in the real world, in ways that mimic the laws of physics.

4. Providing spatial cues

The way an interface is animated helps to provide spatial cues to the user about where something went. For example, an anchor link in a menu that uses an animated scroll down to the appropriate part of the page helps the user to understand what just happened, rather than jumping abruptly to somewhere else with no context for what just happened.

The scroll animation when using the navigation of a one page website helps to orient users.

We are attracted to look at things that are moving, and as a result, animations are a key way to direct user attention on a page. They give clues as to where to focus.

5. Accessibility

As with all design elements, accessibility is a key consideration for UX designers. Animation needs to be treated with care, as the results can be off-putting for users. The WCAG 2.0 standards include guidelines for animation, which state that web pages should not have any content that flashes more than three times in a one second time frame. Moving, flashing and blinking content can cause severe distraction for users, and at worst, seizures. While for most web experiences, the risk of causing a photoelectric seizure is very low, it is worth being aware of the guidelines.

There are also guidelines for moving, blinking or scrolling information, which require the user to have control over pausing or stopping or hiding the content. A common scenario where this is relevant is an auto-rotating carousel.

A more common issue can be that of animations causing nausea or headaches for users. Parallax scrolling effects have been found to induce motion sickness for some users. As with everything, context is king, and parallax may be more appropriate when used for lighthearted or fun sites, rather than those where an important task needs to be completed.

Motion matters

To sum up, animation can be a powerful UX tool. Using it wisely, at the right times and in the right ways, will guide your users through and experience and may even provide moments of delight. Be sure to come up with some principles to guide the animations in your experience, pay attention to usability best practices, and think about accessibility. This will make sure the animations help, not hinder.

Get Started

Free TrialInspired by what you've read? Kick off your next project with Dreamweaver. It's part of Creative Cloud. Download a trial for free!

Share your thoughts

Your email address will not be published. Required fields are marked *

*