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 transitions between elements on your screen, and as designers we should embrace this development for a better user experience. But how do you define a good transition?
Good animation is invisible. You shouldn’t notice that you’re looking at animation. — Pasquale D’Silva
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.
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.
Animation in Interaction Design
Animation can improve the user experience in your digital product, but not every animation is suitable for your product. Nokia did a 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 lineair 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 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:
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.
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.
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 transitions and animations:
- Gif UX on Instagram
- Capptivate
- UX Archive — Animated
This article is a rewrite from a dutch essay “Transities in User Interfaces” written by me for a school assignment. Thanks to Vince from Yummygum for helping me with the images and translation to English.
Sources
- Nokia Research Center, & VTT Technical Research Centre of Finland. (April 10, 2010). Animated UI Transitions and Perception of Time — a User Study on Animated Effects on a Mobile Screen. http://dmrussell.net/ CHI2010/docs/p1339.pdf
- Stern, M. User Interface Design for iOS 7 Apps [Video]. https://developer.apple.com/tech-talks/videos/?id=2
- D’Silva, P. Transitional Interfaces. https://medium.com/ @pasql/transitional-interfaces-926eb80d64e3
- Villar, M. Improve the payment experience with animations. https://medium.com/@michaelvillar/improve-the-payment-experience- with-animations-3d1b0a9b810e
- D’Silva, P. (November 18, 2013). Pasquale D’Silva — Designing with animation [Video]. https://www.youtube.com/watch?v=TMe0WnkF1Lc
