Functional animation UX design — Create excellent transitions

Functional animation is a microanimation with a clear and reasonable goal. It reduces cognitive load, prevents change blindness and creates better spatial relationships. In addition, animation makes the user interface more life-like.

By combining and dividing, changing shape and size, animation can make an interface come alive. You can use functional animations to smoothly guide the user through navigation content, explain changes in the arrangement of screen elements, emphasize element hierarchies, and so on.

Successful animation design has the following six characteristics:

1 responsiveness

Visual feedback is extremely important in UI design because it caters to the user’s natural need for confirmation responses. In real life, objects such as buttons and remote controls respond to our actions, reflecting our expectations of things.

Interfaces should respond quickly to user input, precisely as soon as the user triggers them, showing the relationship between the new interfaces and the elements and actions that trigger them. It’s nice to tap in the app and know exactly what’s happening and what’s causing the new event to happen.

2 relevance

Associate newly generated interfaces with the elements or operations that trigger them. The logic behind the correlation helps users understand what has just changed and what has caused the change in the layout of the interface.

In the image below, you can see two menu transitions. In the first example, the menu appears far away from the touch point that triggered it, breaking the connection with the input method.

In the second example, the menu expands from the touch point. This associates menu elements with touch points.

Another example is that an action button can change its function in certain situations. The Play and pause buttons are perhaps the most common examples of toggle buttons. The playback can be changed to pause to show that the two are related, clicking on one will show you the other. We should animate the transitions between states so that they look smooth and uninterrupted.

3 natural

Avoid unexpected transitions. All actions should follow forces in the real world. In reality, an object accelerates and decelerates due to the forces of gravity and surface friction. Similarly, in good interface design, starting and stopping doesn’t happen instantly.

A good example can be seen in the figure below, where the user selects an item from the list and expands it into the details view. In the unfolding process, the small card moves in an arc to a target position and unfolds into a larger card.

4 purpose

Guide your eyes to the right place at the right time. Animation is inherently the highest level of prominence, and neither text paragraphs nor still images come close. A good transition should lead the user to the next step in the interaction.

The first time a user can’t predict the outcome of an action trigger, but proper animation keeps the user oriented and doesn’t feel a sudden change.

Mac OS uses a functional animation to link the two states when minimizing Windows.

Another example is the parent-child transition, where the user selects a list item or card element and zooms into the details view. This allows the user to understand the context transition.

5 quick

When elements move between different positions and states, make sure they move fast enough not to make people wait; But not too fast. Make the transition easy to understand.

Don’t make slow animation because it creates unnecessary pauses and lengthens the duration.

Do not interlace and slow down the motion of multiple elements.

Finish the animation quickly and the user doesn’t have to wait for the animation to finish.

Keep transition animations short, as users will see them frequently. Control animation duration in 300ms or less.

6 clear

Transition effects should avoid doing too much at once, as it can be confusing if many objects move in different directions or follow different paths.

The transition effect should be clear, concise, coherent and clear. Remember, less is more when it comes to animation. We should only focus on the real value that animation can bring to the user.

conclusion

To sum up, animation is not arbitrary. There is a purpose behind every operation. Animations guide the user and highlight important content. Whether your app is humorous or serious, the principles of animation will help you provide a clear, fast, and consistent user experience.

Design carefully. Paying attention to every detail is the key to creating a successful human-computer interaction.

Xiaobian tips:


We do not design animation for the purpose of designing animation, the existence value of functional animation lies in the word “function”, and how to reflect the function still needs a careful design.

Via:
uxplanet

Qr code of this article