Transitions are a powerful way to communicate a change in a user interface. They can be used in apps to help offload a lot of the cognitive work into the visual cortex: they help transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy. They are an essential element of interaction design.
How do you define a good transition? Successful animated transition possesses the following five characteristics:
State changes in UI often involve hard cuts by default, which can make them difficult to follow. In the real world, most things don’t just appear or disappear immediately. When something has two or more states, then changes between states will be much easier for users to understand if the transitions are animated instead of being instantaneous. Let’s look at an example below where the user selects an item in a list to zoom into its detailed view. During expansion, the small card moves in an arc towards its destination as it expands into a larger card. This movement is inspired by the real world forces.
A well-staged animated transition guides your user’s attention and clarifies change states. This characteristic is directly related to the user focus and continuity. A good transition helps direct user’s focus to the right spot at the right time, it puts emphasis on the right elements depending on what the objective is. In the example below, the floating action button (FAB) transforms into header navigation elements comprised of three buttons. The first-time user cannot really predict an interaction that is about to happen, but properly animated transition helps the user stay oriented and not feel that content has suddenly changed. This transition helps guide the user to the next step of an interaction.
Transitions should illustrate how elements are connected. Good transitions associate newly created surfaces to the element or action that creates them. The logic behind associative connection is to help the user comprehend the change that has just happened in the view’s layout and what has triggered the change.
Below you can see two examples of a layer transition. In the first example, new layer appears far away from the touch point that triggered it, which breaks its relationship with the input method.
In second example new layer appears right from the touch point. This tying the element to the point of touch.
Another example can be found in Mac OS which uses an animated transition when minimising a window. This animation connects the first state with the second state.
If there’s only one principle of animation you ever cared about it would definitely be timing. Timing is arguably one of the most important considerations when designing transitions. The animations should be quick and precise, with little or no lag time between the user’s initiating action and the beginning of the animation. Also, a user doesn’t have to wait for the animation to finish. In example below, slow animation creates unnecessary lag and lengthen the duration.
When elements move between states, the movement should be fast enough that it doesn’t cause waiting, but slow enough that the transition can be understood. For an animation to effectively convey a cause-and-effect relationship between UI elements, the effect must begin within 0.1 seconds of the initial user action (this 0.1-second response time maintains the feeling of direct manipulation). Try to keep animation duration at or under 300ms (fast transitions waste less of the users’ time). Test it with your users to see what’s tolerable.
It’s a common mistake to overload UIs with animations or to create too complex interactions. Too much change in a user interface can leave a user disoriented and it takes a time to recover from. Remember that every motion on the screen attracts attention, so too much animation at the same time creates chaos. The later can be seen in the example below — it’s absolutely impractical transition.
Transitions should avoid doing too much at once because they can get confusing when multiple items need to move in different directions. Remember, less is more with regard to animation and transitions in particular. Anything that if removed would make a cleaner UI is almost certainly a good idea. When surface changes shape and size, you have to maintain a clear path to the next view. Complex transitions should keep a single element visible. This helps keep the user oriented.
Since transitions are about visual communication they by default are not accessible by users with visual impairments. You should provide alternate content for this group of users. Webacessibility.com’s best practices for animation offers suggestions on when to provide alternate content for assistive technology.
When designing transitions focus only on practical things they do for the user. Whether your app or site is fun and playful or serious and straightforward, using meaningful transitions can help you provide a clear and quick cohesive experience.
Animation credits: Google Material Design, Apple, Anton Aheichanka for InVision