Animations can enhance the experience by improving feedback, aid in orientation, direct attention, show causality, and express your brand’s personality.
- Reduce cognitive load, better to understand
- Establish spatial relationships
People were shown animated shapes, and people were emotionally connected to the shapes that they made a story of why they are moving a certain way (even when there is no story)
Provide consistency: even when layout might change in diff platforms, if the individual elements still animate the same way, then it unifies the experience
- consider UI choreography
- has to match brand personality, eg apples sleek image doesn’t fit its bouncing animations (fun/immature)
- similar UI elements should animate in similar ways
12 rules of animating:
- Remember time and spacing, what is natural for a physical object? Easy ease
- Follow-through: not everything in motion comes to a stop at once. Use Cubic Bezier curve
- Overlapping action and offsets: character doesn’t wait for one action to be completely finished before starting the next
- Anticipation: Small movement in preparation for the large action to that is about to take place
- Secondary action: additional motion that compliments and support the primary motion
- Arcs: movements are NOT straight lines. Most movements are curved.
- Squash and Stretch: deformation happens due to motion. Ball bounce etc. Represents rigidity of object.
- Exaggeration: Making the animation more apparent and real
- Transitions shouldn’t take too long, shouldn’t come between the user and the task
- Good animations are flexible like a good conversation; depending on what the user’s input is (click/svroll/swipe), animation should be responsive. - If user realize input is being skipped or ignored, trust is lost. - Animation that ignores input while it’s active is a blocking animation
- Small UI: 200-350ms
- Large motion: 400-500ms
Ive always known that you have to make sure animations and transitions have to be unified throughout the app/website but I like how they used the word “choreography”. It really reminds me that the elements have to work together in giving the user an unified experience.