Principles

Animations can enhance the relationship between the user and the product, reducing frustrations and giving a sense of control, efficiency, and direct manipulation.

This section delves into the main principles of Wanda's motion system and its two animation styles. Below are the four essential features to keep in mind while designing any animation within Wonderflow's products ecosystem.

Discreet

The motion should be valuable but subtle to avoid distracting the user. In this sense, the effectiveness of animation is determined by its:

• Purpose: Is it necessary?
• Value: Does it help the user?
• Efficiency: Could it hurt the performance of the product?

In this context, choosing the right transition time can make the difference. The animation should be fast and agile so the user would never feel stuck, waiting for the animation to end.

Draw the user's attention only when it is the purpose of the communication, like when showing an alert message.

Assistive

In no case the task of conveying information should be entrusted solely to the animation. Motion's purpose is only to support and enhance the message.

Use animations to hint that a component is interactive or provide immediate response feedback.

Intuitive

Interface movements should mimic the behaviors of objects in the real world, such as acceleration, gravity, and volume, to achieve a natural feel.

Recalling familiar interaction patterns and creating a sense of direct manipulation made it easy to educate users to understand and navigate the app.

This principle is especially true for mobile, where the user interacts with the interface through a touch screen.

Playful but self-aware

Indirectly, animations could reflect Wonderflow core values. It is essential to distinguish the occasions in which it is appropriate to show the brand personality through jolly animations and when it is not.

Avoid playful animations when communicating serious or important news so you won't risk to deliver an ambiguous message.

Accessibility

It would help if you always avoided large, sudden movements or multiple objects moving simultaneously in different directions as a rule of thumb. Users that have epilepsy or vestibular disorders could be susceptible to motion.

When designing for web applications, respect users that selected the Reduce motion mode on their devices and excluded them from potentially dangerous animations.

Whenever you design an animation, take these precautions into account to create the most inclusive motion possible:

• elements that can be dragged should move 1:1 with the user's finger
• don't exaggerate in changing the depth of a component along the z-axis
• don't animate elements in or out of the blur effect
• where possible, replace the slide effect with fade
• prevent autoplay or, at least, provide controls to videos and visual effects
• avoid blinking or flashing elements