A few tips to make UI animations even better

The original link

This article was translated from Pablo Stanley’s Good to Great UI Animation Tips.

How can UI animation go from being simply good to better? I will give some examples here. It only takes a few tweaks to make the animation look better.

The interactions listed below show continuity between states, relationships between shared elements, and how to get users to focus where you want them to focus.

To create these animations, I followed The guiding Principles of Material Motion, IBM’s Animation Principles, and The UX in Motion Manifesto.

All interactions are handled using earlier accessible versions of InVision Studio.

The TAB to switch

• Good animation allows content to fade in and out of one state to another.

• Great animation shows continuity of transitions by moving content between states.

When designing an interaction such as a TAB or pop-up menu, try to position the content relative to the action of opening it. This way, you can animate not only visibility for content, but also location for content. You can also add sliding gestures to move from one content to another.

Join shared elements

• Good animations use transitions such as pushing left or swiping up to display content on the detail page.

• Great animations create a connection between two states by animating shared content.

When animating between different states, see if there are any shared elements between them, and if so, consider connecting them through some kind of animation. With InVision Studio, components that repeat between the two screens are automatically wired when creating a Motion transition. This makes prototype animation a breeze.

Check out the Motion Manifesto to see what types of animations you can use. The example above combines Masking, Transformation, Parenting, and Easing animation effects.

Cascading effect

• Good animation changes the position and opacity of content as it enters the screen.

• Good animation staggers the appearance of each group or element.

To achieve waterfall effects, try using delay effects for each piece of content or for each group of content. Keep the same slow time and duration for consistency. However, don’t layer each detail element — instead animate the content group. Keep the animation fast and lively. Google recommends no more than 20 milliseconds between elements. See choreography in Material Motion for more examples.

Let content push away other elements

• Good animation moves and displays elements in context.

• Great animation shows the effect of an element on its surroundings as it changes.

Make the elements in the content aware of their surroundings. This means that content can be made to attract or repel surrounding elements. For more examples, see Aware motion principles in Material Design.

Cool menu display

• Good animated menus allow content to appear from the direction of the button that opens the menu.

• Excellent animated menus emerge from the action of creating them, expanding from a touch perspective.

Use opportunely button

• Good interaction displays events next to buttons.

• Great interaction using the buttons themselves to display different states.

Try using button containers to provide visual feedback on the state. For example, you can replace the CTA with a spinner or load an animation. Or you can add an animation to the background to show progress. The solution is up to you, and the idea is to leverage the space that users already interact with. Bonus points if you use button color changes to confirm success status.

focus

• Good design uses color, size, and location to highlight important actions that users need to notice or take.

• Good design uses animation to draw attention to this important action without causing damage.

When users need to take action on something important, try animating to get their attention. Start with subtle animations and increase the intensity (variations in size, color, and speed) depending on the importance of the action. Use it only for critical operations — the more times you use this effect, the less it will affect you, and it will also bother the user 😱.

conclusion

Hopefully, these examples will help you make better decisions when adding animations to your interactions. With new animation and prototyping tools like InVision Studio, expect us to start seeing a Renaissance in creative interaction soon.

Let’s use animations to explain state changes, draw attention to necessary actions, establish relationships between elements, and add a little fun and character to our product. By following these principles, we’ll take the animation from good to great.

— End —

Source: UX Collective Translated by Pablo Stanley: Slow and busy