Material Design’s meaningful transition animations and details that impress users

For ordinary users, it is often difficult to choose whether to focus on an application itself or the process of the elements of the application changing from point A to point B. Carefully arranged animations can effectively guide users' attention in multi-step operations, avoid confusion when the layout changes or elements are reorganized, and improve the overall aesthetic of the user experience. Animation design should not only be beautiful, but also serve the function.

Visual continuity

The transition between two visually different pages should be smooth, brisk, and more importantly, clear rather than confusing. A good transition can make a big difference by letting users clearly understand where they should focus. Each transition should include the following three elements:

• Incoming elements: Completely new elements require new user guidance, and elements that are transformed from existing scenes need to be re-identified.
• Outgoing elements: Elements that are not relevant to the current scene should be removed in an appropriate manner
• Shared elements: These are elements that do not change from the beginning to the end of a transition. They can be as subtle as a single icon or as prominent as an image that takes up the entire screen.

Points to think about

When designing animations, you can start by considering the following points:

• How should the user's attention be directed? What elements and animations can help achieve this goal? How should new elements, fading elements, and common elements be emphasized or de-emphasized in this transition?
• Consider transitions when designing scenes, and try to create visual connections between different scene transitions through color and common elements.
• Add animations carefully, and think about how to move a specific element to make the transition clear and pleasing.

Use paper overlays when appropriate. Generally, new paper elements should slide into view. The exception is ink elements, which should fade in. Full-screen fade-in and fade-out is not recommended, but it is better than instant screen switching.

Avoid hard cuts. Hard cuts are too abrupt and make it difficult for users to understand the transition.

Hierarchical timing

When creating transitions, think carefully about the order and timing of the movement of elements. Make sure the animation creates a sense of hierarchy in the presentation of information. That is, it directs the user's attention and delivers the most important content to the user.

However, this doesn’t mean that the most important things should move first and the least important things should move last. The timing of element transitions should be smooth and avoid any sense of disjointedness.

Use sequential animations to direct the user's attention.

If all elements are moving at the same time, it will prevent the important content from being highlighted. If all elements are equally important (and you are sure this will happen), consider using a higher-level animation to display these elements as a group.

Coherent arrangement

Since transition elements move across the entire screen, they need to move in a coordinated manner. Elements that guide visual focus need to move in a meaningful and orderly manner. Random animations are distracting. A well-choreographed app also provides users with learning opportunities. If all elements of the transition are well coordinated, users will have a better understanding of the app. They "understand" the app and are not confused by the animations.

***practice

• Unless the animation is constrained to a single axis or is moving in coordination with other elements from/to a point, avoid linear paths.
• Make sure the direction of the element's movement is consistent throughout the transition. Avoid conflicting movements and overlapping motion paths.
• Consider the deeper meaning: What is moving underneath what, and why?
• If all moving elements follow a path across the screen, does it look neat and tidy? Does it make it clear to the user where to look?
• The spatial relationship is expressed through the animation of the continuity of new and old elements
• Direct the user’s attention with harmonious and consistent animations
• Avoid chaotic and incoherent animations, where elements leave or enter in random directions, etc., which can confuse users.

Details that impress users

Animation can exist in all components and extensions of an application, from small icons to core scene transitions and actions, all elements work together to build an application with a seamless experience, beautiful and powerful.

The most basic use case for animation is transition effects, but even the most basic animations, as long as they are just right and good enough, can also impress users. For example, a menu icon turns into an arrow or a play control button. This seamless switch between services not only allows users to perceive it, but also fills your app with the finest details and exquisite design. Users really feel these small details.

Original: Meaningful Transitions Translation: Jingsha Proofreading: Ajiu (Siton)