Animation is a powerful tool to enhance your mobile design, but it can also be tricky to get right. How do you choose the best animation styles and durations for your app or website? In this article, we'll cover some basic principles and tips to help you create engaging and effective animations for your mobile users.
Animation can be a valuable tool in your mobile design, helping to attract attention and provide feedback, as well as communicate transitions and changes. It can also enhance usability and accessibility, and create a consistent brand identity. However, it is important to consider the potential drawbacks of animation, such as being overused, distracting, or confusing. For this reason, you should weigh the benefits and drawbacks carefully and use animation strategically and sparingly.
Animation is a wonderful tool to enhance and expand good design. Good animation should be used with an awareness of the user. For instance, in the framework of a typical user journey it can be used to draw attention to new features and functionality. It can be used to reinforce positive feedback for achievements or actions thus encouraging user behavior to repeat. When overused, animation becomes a distraction that can ruin the entire experience.
animation can be a valuable asset in mobile design, serving multiple purposes from enhancing usability to reinforcing brand identity. It has the potential to elevate the user experience, making interactions more engaging and intuitive. However, like any design element, moderation and careful consideration are essential. Overusing animation, or implementing it without a clear purpose, can indeed backfire and lead to distraction and confusion. Striking the right balance is crucial.
When selecting an animation style for your mobile design, there are several options to consider. Fade transitions the opacity of an element from 0% to 100%, and is useful for showing or hiding content. Scale changes the size of an element, and is great for emphasizing or de-emphasizing content. Slide moves an element along a horizontal or vertical axis, and is great for revealing or concealing content. Rotate rotates an element around a fixed point or axis, and is ideal for creating a dynamic effect or indicating direction. Flip flips an element over a horizontal or vertical axis, and is useful for showing a different side of an element. Lastly, Bounce makes an element move up and down or left and right along a curved path, perfect for creating a lively effect or indicating an action. When choosing an animation style, consider its purpose and context, the content and layout of the element, as well as the mood and tone of the design.
The animation of an experience should reinforce the aesthetic of the experience and/or brand. You wouldn't give a high end luxury watch brand a bouncy CTA button on rollover, you would use elegant and soft movements to reinforce the vibe of the experience.
The duration of an animation is the time it takes for an element to complete its movement or transformation, which can have an effect on the user experience. There is no definitive rule for choosing an animation duration, but there are some general guidelines. For example, simple or subtle animations, such as fades, scales, or slides should be between 0.1 and 0.5 seconds long, while complex or dramatic animations, such as rotates, flips, or bounces should be between 0.5 and 1.5 seconds long. Additionally, similar or related animations should have consistent durations to create a sense of rhythm and harmony in the design, while different or unrelated animations should have variable durations to create a sense of variety and interest. When deciding on an animation duration, you should also take into account factors like the speed and performance of the device and the expectation and attention of the user.
The duration of any given animation should be enough to achieve its goal and not become a distraction to the goal of the user (unless its an advertisement which is meant to distract). Good animation in UI design in particular feels just right for every rollover, transaction, and reward. If at any point the user is waiting, its too long.
Once you have chosen your animation style and duration, you need to test and refine your animation to make sure it works well and meets your design goals. To do this, you can use different methods and tools such as prototyping, user testing, and iteration. Prototyping tools such as Figma, Adobe XD, or Keynote can be used to create a mockup or demo of your animation. User testing tools such as UserTesting, UsabilityHub, or Lookback can be used to collect feedback and data from real or potential users. Iteration tools such as Google Analytics, Firebase, or Mixpanel can be used to measure and monitor your animation performance. By testing and refining your animation, you can ensure that it is clear and understandable, relevant and useful, consistent and coherent, and smooth and seamless on the device and screen size.
If you want to learn more about animation, there are a variety of resources and sources available. Books such as The Animator's Survival Kit by Richard Williams, Animation for Beginners by Morr Meroz, or Designing Interface Animation by Val Head can provide you with the theory and practice of animation. Additionally, blogs like UX Planet, CSS-Tricks, or Smashing Magazine can provide tips and examples. You can also take online courses such as UI Animation Fundamentals by Issara Willenskomer, Motion Design for iOS by Meng To, or Animating React by Scott Tolinski to learn how to create and implement animation. Additionally, podcasts like Motion and Meaning by Cennydd Bowles and Val Head, Design Details by Brian Lovin and Bryn Jackson, or UI Breakfast by Jane Portman can discuss and interview experts on animation. Animation is a skill that you can learn and improve with practice and experimentation; applying the principles and tips in this article can help you create animations that enhance your mobile design and delight your users.
Learning the basic principles of opacity, scale, movement and duration are a good start. Looking to the real world is a great way to reference timing and interaction. When you press an elevator button, how long do you hold your finger and what happens during and after the press to inform you that you've successfully sent yourself to the right floor? The button usually glows and you get rewarded with a chime or ding when you arrive at your desired floor.
One thing to consider when adding animation is adding the element of surprise and delight (sparingly). Most people animate with opacity, scale or movement (left/right/up/down). Sometimes we forget we can create a sense of depth by using scale to add dimensionality to make something that was just a rectangle now a full never ending box that goes back into the device.