📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more
Viewpoint

Enhance Your User Experience with Animated Transitions

Posted 7 years ago by Davey Heuser
Enhance Your User Experience with Animated Transitions

Providing users with a seamless experience while using your interface is a popular goal when building digital products. Modern-day devices and software enable complex animated transitions between elements on your screen, and as designers, we should embrace this development for a better user experience. But how do you define good animated transitions?

"Good animation is invisible. You shouldn’t notice that you’re looking at animation." - Pasquale D'Silva

"Good animation is invisible. You shouldn’t notice that you’re looking at animation."

Animation and User Experience

In order to define a good transition, understanding the relation between animation and the User Experience is key.

Animation maintains context

Our digital products enable us to do the unimaginable these days, like ordering a cab from your wrist or preparing a meal without having to think. Subsequently, it means our job as interface designers is crucial for a successful product. With all these complex interactions and possibilities, users can quickly lose context and orientation within the product. If elements on your screen are suddenly (re)moved, you can lose an understanding of the interface. It’s not peculiar to use animations and sound effects in movies when someone goes through a time machine, so it’s only natural to use this in your interface as well.

Animation provides feedback

Using animation can provide the user with valuable feedback without cluttering your interface or overwhelming the user with information. A great example is the Camera app in iOS when trying to focus on an object. The crosshair fades in and shrinks to mimic focus, when it grabs the correct focus and exposure it blinks twice and it fades out to inform the user they’re ready to snap the photo. These types of animations offer very specific information without overwhelming the user.

"Using animation can provide the user with valuable feedback without cluttering your interface"

Several animations help clarify what’s happening during shooting.

Several animations help clarify what’s happening during shooting.

Animations gives focus

If an interface features a lot of elements, it can be desirable to shift the attention of the user to a specific element on the screen. Using animation enables the designer to play with position, scale and opacity to grab the users’ attention. Another trick is to use an asynchrone timeline of animations to pull focus on the element that animates last.

"If you disable animations, the flow should feel broken; if it is not, this might mean your animations are superfluous." — Michaël Villar

Animations don’t fix user flows

Animations can definitely help to improve the feeling of using an interface, but are merely a small part of the user interaction. The animation can help a user to understand the path they’re walking on, but you need to make sure the path leads to the right destination and expectation.

“If you disable animations the flow should feel broken; if it's not it might mean your animations are superfluous”

Animated Transitions in Interaction Design

Animation can improve the user experience in your digital product, but not every animation is suitable for your product. Nokia did research in 2010 in which they concluded that users have mixed feelings about animations as part of a transition. By using different speeds and animation curves they were able to determine which was the ideal animation.

Easing

Computer generated animations are linear by nature, while animations that make use of easing are generally experienced as more pleasing and natural. Nokia discovered that animations progressing from slow-to-fast are generally experienced as slow products, most likely because the product provides feedback slower than expected.

"The faster you show progress the quicker your user is hooked."

The feedback a product provides should be as quick as possible to convey the message the product is responsive and fast, even if the path to the destination is slower in the end. Users generally are more likely to wait for something if you’ve already shown progress, so the faster you show progress the quicker your user is hooked. Just make sure your loading times are fast, and don’t show consistent progress and switch to this:

feedback-time

Credits: xkcd.com

Examples of great animated transitions

We have collected a few examples in User Interfaces that enhance the user experience without being obtrusive or annoying.

Calendar on iOS

To ensure a user understands where they are in terms of time, they provide a zoom and scale animation to keep context alive when transitioning between screens. Because of the zoom animation the user is presented with an invisible layer-system where years are on the bottom and months are on top.

Facebook on iOS

Another great example of using animation to improve a transition is when opening and closing photos in the Facebook app. Tap on any photo and it will present a full screen view of that photo. To improve the experience, the photo on which you tap stays in the screen and zooms in, while the interface behind and around it fades in. Closing the photo puts it back in its place in the timeline. It’s really easy to track what is happening with your interface with these little animations.

Manipulate elements you tap on to keep it clear.

Manipulate elements you tap on to keep it clear.

Iconjar

These animations are not limited to mobile devices. For example on the Iconjar website when you click a link to open a dropdown it will reveal in a seamless fashion. Because the dropdown grows and fades in, the user understands it originates from the link you’ve clicked.

Growing animations help to know the origin.

Growing animations help to know the origin.

Summary

Animations don’t only offer aesthetically pleasing goodies, but can be real user experience enhancers too. It’s key too find the right balance between fun and function and make sure your user flow is great without animations too. A good transition is one that is not obtrusive, enhances the user experience and is fun at the same time.

To wrap things up, here are a few links with inspiration for great looking animated transitions and animations and additional resources:

This post was originally published on YummyGum's Medium profile by Davey Heuser.

Further reading:

Design and prototyping for everyone

Design and prototyping for everyone

Thousands of individuals and teams use Marvel to design and prototype ideas.

Get Started, it's Free!

Product designer at Awkward and working on Iconjar in my spare time. Previously at Bundle and Yummygum. Follow me on Twitter.

Related Posts

Making good component design decisions in react when it’s hard to see how an existing component can still be reused

Disney’s 12 Principles of Animation is one of the inestimable guides when traditional animations are considered. It was put forth by Ollie Johnston and Frank Thomas in their book – The Illusion of Life. These principles were originally designed for traditional animations like character animations. However, these principles can still be applied in designing interface animations. So, this is just… Read More →

Design is no longer subjective. Data rules our world now. We’re told all design decisions must be validated by user feedback or business success metrics. Analytics are measuring the design effectiveness of every tweak and change we make. If it can’t be proven to work in a prototype, A/B test, or MVP, it’s not worth trying at all. In this… Read More →

Categories