Integrating usability cues and action feedback into your animation and interactive experiences can dramatically improve the audience experience. Below, our design lab offers a few examples and considerations for how animation and motion can be applied to enhance the usability and effectiveness of rich media creatives:
1. Start with the basics
Consider how standard properties such as opacity, scale, color, shape, blur, and rotation can be used to enhance the impact of an animation. Map out visual enhancements by breaking down the basic components required to develop an animated element (e.g. “The heading text can fade in with increased opacity and a color change”.)
2. Be mindful of timing and duration
It is recommended to keep animation durations within a range of 100-400 ms depending on complexity. Animation transition speeds that move too quickly or slowly can be difficult to see. Longer durations should be used for objects entering the frame, while shorter durations can be applied to small feedback animations. In general, all creatives that run animations automatically must be confined to a maximum length of 30s as specified by IAB guidelines.
3. Communicate changes to your audience
Short animations are an excellent way to communicate feedback or a change of state when a user-initiated action has been performed. For example, a visual page flip informs the user that content has turned over, or a color change on a navigation arrow press indicates that it was activated.
4. Make motion natural
A movement path will have an influence on how realistic and natural an animation will appear. Consider rounded paths (such as an arc or wave) over something more jagged (such as a zig-zag or diagonal line). It is also important to incorporate easing into animation to create natural movement. Common eases include: Ease-In (animation begins slowly, then speeds up), Ease-Out (animation begins quickly, then slows down), and Ease-In-Out (where the beginning and end of the animation is slower than the middle).
5. Keep things subtle
While animations can be used to enhance the visual appeal of your creative, less is often more. Aim for animations that offer enough motion to catch the eye while still remaining unobtrusive. Something as simple as the shimmer of a button or a soft fade may be all the animation you need.
6. Apply thoughtful animations to guide the user journey
Animations can be an effective way to guide users through an interactive experience. For example, you may begin by pulling attention with animated text or imagery, and then incentivizing engagement with animated navigation or gamification controls, and finally encouraging conversion by directing focus to a call-to-action button.