Motion graphics play a large role in application development.
Animation is less of a visual luxury and more of a functional need that users expect.
Animation solves a lot of functional problems and makes interfaces feel alive and responsive to the user.
How Animation Adds Value
Animation is functional:
- Optimizes user experience
- Drives user’s attention
- Provides visual feedback
- Guides focus between views
- Distracts from what’s happening behind the scenes (like fetching content or loading the next view)
Animation is material:
- Builds upon a consistent information architecture and material user interface model
- Defines the spatial relationships between screens and elements
- Makes the user interface more predictable and easier to navigate
Animation is delightful:
- Adds emotion and fun
- Makes the experience feel unique and stand out from the crowd
- Entertains users and helps them relate to the product
Guidelines for When to Use Animation
Before creating an animation, ask yourself:
- What am I trying to accomplish with this animation?
- Does my animation match the brand or personality of the app?
- How long should the user have to wait for feedback from this action?
- Does my animation make it clear to the user what is happening in the app?
- Does my animation add value to the user experience?
Consult with your software developer before changing or removing animations.
In some cases, the code may depend on the existence of particular animations.
Animation Tips and Tricks
Do NOT set animation markers at Frame 0, as there is a difference between ‘object loaded’ and ‘animation started.’
You.i TV recommends starting animations at one second into the timeline to make things easier to coordinate between animations.
Also, keep in mind the following items:
- Animations can play forwards and reverse.
- If an animation has a reverse (for example, AnimateUp and AnimateDown) and they are symmetrical, consider only having one, and notifying the developer involved to play the one in reverse.
Keep in mind easing and curves when playing timelines in reverse.
If a timeline has easing, playing the animation in reverse may not provide the desired visual effect.
- Layer animations can be asynchronous.
Each layer has its own timeline that can play independently of each other.
- Nested animations can be played independently of other compositions.
- Markers must have spaces between timelines.
For example, a marker must not run into or overlap with another marker.
- It’s possible for a timeline to jump to the last or first frame of a marker.
Best practices indicate you should set an initial and end keyframe for every transformation property that is animated.
This helps prevent any mismatched states.
- Try to use whole pixels, fractions can lead to pixel shading.
- Feedback animations should be kept short (button press, focus in/out, and so on).
- Always use easing to make animations feel smoother.
Avoid ‘linear’ animations.
- Use composition markers to indicate multiple animation states on a single timeline.
- If the timeline contains only one key-frame, a warning is displayed during AE export.