Presenting system status When users trigger interface behavior through interaction, they want to see a visual response-the whole interactive system should clearly show that it has received the request and processed it.
The following are several common situations in which dynamic feedback benefits users: confirm user behavior.
After receiving the user's feedback, the system informs the user that the feedback has been received through dynamic effects.
Visual feedback prevents the user from doing anything more.
Inform users of the results of their interaction.
Drop-down refresh update content.
The visual feedback represented by the load indicator informs the user that the system has started processing the previous request.
Subtle animation can help users understand what is happening.
Play an animation while waiting for the content to load.
Pretending is not necessarily boring.
Now almost all apps will use subtle animations to organize users to leave when loading.
The visual feedback of loading animation to users is "information is being loaded step by step", so users will feel that time is not as fast as it actually is.
Connecting different steps in multi-step with dynamic effects Sometimes, users need to complete the operation through a series of steps, and the steps need to be connected. With the help of animation, users can connect various processes in series and successfully complete the whole process.
The following case shows how animation can connect linear events in series.
Designers can use animation to create progressive forms of presentation.
Progressive presentation can reduce the amount of information displayed at one time and make the interface smoother and easier to learn.
The following is a case of presenting information step by step: introducing new elements When we want to introduce new elements or controls on the page, we will try our best to guide users' attention to specific objects and tell them why new things come in.
When introducing new elements, dynamic effects can help you define the relationship between this element and other elements, as well as the hierarchy.
Positioning the animation feeling for users can help users build a better sense of space.
It is especially important for mobile users, because the interaction of users on small screens is very sensitive, and it is easy to get lost without a sense of space.
We can use dynamic effects to guide users, which helps to explain the "spatial changes" of interfaces, and can also better explain the switching or changes between interfaces, and prevent users from getting lost by providing relevant information to users.
In the following case, the floating operation button (FAB) will become a header, and the dynamic effect in the middle will show the change process and explain the relationship between them.
Animation can help you build relationships between elements.
Reduce cognitive load When users need to spend energy to understand something, this cognitive load is very heavy.
Generally speaking, the more worry-free the product, the lower the cognitive load.
If a product has a heavy cognitive load, it is difficult for users to understand it without spending energy.
As designers, our goal should be to create an easy-to-use interface. If properly designed, animation can help users reduce cognitive load.
In almost any APP, users need to fill in some forms, and placeholders of many forms often exist as labels.
When the user clicks, the placeholder will disappear.
If the user didn't see it clearly before and can't see it now, it is naturally difficult to figure out what this field is.
If this field can float when you click Fill, users will not be confused.
When the user needs to input information, don't expect the user's memory, and the key information should be visible.