How to make good UI-animation excellent

In the material, the translation of which we publish today, designer Pablo Stanley offers several recommendations for animating micro-interactions in the user interface. In each example shown here, two versions of animations are considered. The first option is good, the second, in the author's opinion, is simply excellent. Improving animations is due to small changes, which, in the end, can significantly improve the perception of interfaces by users.
How to make good UI-animation excellent

The animations to be discussed demonstrate the relationship of various interface states, indicate the interaction between common elements present in different states, unobtrusively draw the user's attention to what they must necessarily notice. In the course of the work the author of the article followed the ideas from the manuals Material Motion , Animation Principles and The UX in Motion Manifesto . Examples were created using InVision Studio . Download files with the source code of these examples can be here .
Motion Manifesto in order to find out which animations can be used in the described situation. So, the above example applies a combination of the Masking, Transformation, Parenting, and Easing principles discussed in this material.

The waterfall effect is



The cards on the left appear on the screen, moving up from the bottom up and smoothly appearing. The cards on the right are animated in a similar way, but before each occurrence there is a small delay

Good animation involves changing the position and transparency of the materials when they appear on the screen.
Excellent animation highlights the appearance of each group or element.
In order to achieve the "waterfall effect", try to make each piece of content appear with a slight delay. The same applies to the appearance of groups of elements. Maintain the same dynamics of the animation and its duration in order for the event to be perceived as a uniform process. Do not apply this effect to every small element - animate the content groups. Make the animation fast and clear. Google recommends that the delay between the appearance of elements does not exceed 20 ms.
For more examples, see here .

Effect of ejecting unnecessary content from the screen



Animation on the left demonstrates overlapping with the necessary contents of the content of the unnecessary. The animation on the right shifts unnecessary content as the size of the element of interest to the user

A good animation is moving the element and saving the context.
Excellent animation demonstrates the effect of an element of interest to the user on the surrounding elements as it changes.
When designing animation, try to make the content elements "know" what surrounds them, "pushing" or "pulling" other elements. Here is additional examples.

A menu that takes into account the location of the button that calls it



On the right is shown how the menu leaves the side of the button that calls it. The left menu appears from the button

A good animation is when the menu leaves the button that causes it.
A great animation of the menu means its emergence from the calling element, in particular, from the point of touch of this element.

Creative use of buttons



On the left, after clicking on the button, below it appears text that tells the user what is happening. On the right, the button is used as a container, it changes the form and becomes an indicator itself, indicating the course of the action caused by pressing this button

Good interaction is the display of information about the result of pressing a button near it.
Excellent interaction uses the button itself, which changes the appearance and informs the user about the results or the progress of the action caused by this button.
Try using the button as a container to tell users what happened after you click this button. For example, a button that previously performs the role of an element that calls a user to an action can be replaced with a rotating indicator or an animation of the boot process or the progress of some other operation. You can animate, for example, only the background of a button. How to proceed - it's up to you, the main idea here is to use the space with which the user already interacts. Even better, when the color of the button and the text placed on it are used to confirm the success of some operation.

Unobtrusive attracting the attention of the user



The left element is made noticeable due to its color and location on the page. In the example to the right, an easy animation
is used to attract the user's attention.

A good design uses color, size, and position to highlight an important action that the user should see or interact with.
Excellent design, to attract the attention of the user, provides for unobtrusive animation.
When a user needs to perform something important, try animate the corresponding element to attract attention to it. Start with light animation and increase its intensity (change in size, color, speed), depending on how important the expected action is. Use this approach only in exceptional cases. Frequent use of such an animation makes it less visible and annoying users.

Results of

I hope that the examples given in this material will help you in making the right decisions when animating interfaces. I can assume that thanks to the new tools for creating animations and prototyping, like InVision Studio, very soon we will enter into something like a "revival era" of creative ways of interacting with the user. Perhaps the most important thing to remember when applying animation is that it is a great force, and you need to use it responsibly.
I propose to apply animation to explain changes in states, to draw attention to necessary actions, to point out the interaction between elements, and to make interfaces more interesting and memorable.
Dear readers! How do you animate user interface elements?

Add comment