The Nielsen Norman Group, a longtime leader in user experience, has published an article regarding accessibility and animation best practices entitled, “Executing UX Animations: Duration and Motion Characteristics.”
While interactivity can be used to great effect in making things noticeable on mobile and web, defining a purpose to your animations is paramount. The author, Page Laubheimer, describes the various ways you can disorient and (at worst) cause seizures or sickness when animations are done without consideration given to all audiences.
Animations usually begin with a trigger, whether it’s a tap, gesture, page load, or click. Laubheimer provides wonderful examples that show nuanced interactions such as hovering over a button, tapping on an icon, or even scrubbing a timeline that indicates helpful affordances for the user.
Speed and timing are also discussed and harken to the 12 Disney Animation Principles, with overly exaggerated stop sliders and adjusted length of time so as not to disorient the user. Some of the examples refer to Google’s Material Design library as well.
The author determines appropriateness for things like duration — specifically when screens change like when a modal window comes into view. The recommendations are prescriptive (200-300ms for a modal appearing, then 100ms less to disappear for example). When it comes to easing in and out, many software programs handle it differently, which means the design to production handoff should be coordinated to ensure both teams are speaking the same language.
The ultimate takeaway is that animation is a visual language in and of itself, requiring a more nuanced approach to design. Milliseconds and easing can make a huge difference. All the more reason to create design standards for your own team to ensure you’re considering all facets of communication.
Be sure to check out this and other articles like it on the Neilsen Norman Group website and sign up for their newsletter.