Animation Meaningful Transitions
This document is a preview.

Google ©

Privacy & Terms

Meaningful Transitions

It can sometimes be difficult for a user to know where to focus their attention in an app or how an app element got from point A to point B. Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a process or procedure; avoid confusion when layouts change or elements are rearranged; and improve the overall beauty of the experience. Motion design should not only be beautiful, but serve a functional purpose.

Examples Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Examples

 

Visual Continuity Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Transitioning between two visual states should be smooth, appear effortless, and above all, provide clarity to the user, not confusion. A well-designed transition does the heavy lifting and enables the user to clearly understand where their attention should be focused. A transition has three categories of elements:

  • Incoming elements. Whether newly generated or translated into the scene, these items need to be introduced or re-established.
  • Outgoing elements. Elements that are no longer relevant to the new context must be removed from the scene in an appropriate manner.
  • Shared elements. Elements that persist from the starting to the ending state of a transition. They can be as subtle as a single icon or as dominant as a gallery image that grows to fit the screen.

Considerations

When you design your animations, consider the following:
  • Think about how the users attention should be directed. What elements and motions support that goal? How should incoming, outgoing, and shared elements be emphasized or de-emphasized through the transition?
  • Consider transitions when designing screens and find opportunities to create visual connections between transition states through color and persisting elements.
  • Add motion judiciously: consider how moving a certain element adds clarity and delight to a transition.

Examples

Layer paper where appropriate. In general, incoming paper elements may slide into view, but ink elements don’t; they should fade in. Fullscreen cross-fades are not desirable, but are preferred over cuts.
Avoid hard cuts. Hard cuts are jarring and make the user work too hard to understand the transition.

Hierarchical Timing Expand and collapse content An arrow that points down when collapsed and points up when expanded.

When building a transition, consider both the order in which elements move and the timing of their movement. Ensure that motion supports the information hierarchy; that is, it conveys to the user what content is most important by creating a path for the eye to follow.

However, it’s not a simple formula in which the most important thing moves first and the least important last. The timing of transition elements should flow smoothly and avoid feeling disjointed.

Examples

 
Use overlapping motion to direct user attention.
Concurrent timing for all elements provides no indication of what is important. If all elements have equal importance, consider larger-scale motion to introduce them as a group.

Consistent Choreography Expand and collapse content An arrow that points down when collapsed and points up when expanded.

As transitioning elements move around the screen, they should behave in a coordinated manner. The paths elements travel along should all make sense and be orderly. Haphazard motion is distracting. A well-choreographed app also provides teachable moments for the user. When transitioning elements are coordinated, the user’s understanding of the app grows. They “get” the app; they don’t feel disoriented by the animation.

Best Practices

  • Avoid linear spatial paths, except when movement is constrained to an axis or moving towards/away from a specific point in concert with other elements.
  • Make sure that the direction in which elements move is cohesive across the transition. Avoid conflicting movements and overlapping paths.
  • Consider the depth story: what moves under what, and why?
  • If all moving elements traced their paths on screen, would it look beautiful and organized? Does it create a clear picture of where to look?
  • Support spatial relationships through consistent motions for incoming and outgoing elements.

Examples

 
Direct the user's attention with coordinated, orderly motion.
Avoid confusing users with inconsistent or disorderly motion and objects leaving/entering in seemingly random directions.