Reduce concurrency
To some extent, users are always trying to make sense of your UI. Consciously or
subconsciously, they ascribe meaning to every design and motion design choice you make.
So, if you present the user with extended animation sequences consisting of many
elements animating into view concurrently, you’ll compromise her ability to parse the
meaning of all the movements taking place.
In short, if you’re using motion design to indicate something important, make sure
you’re not indicating many different things at once. If you are, consider breaking
animations into steps or reducing the total animation count.
Reduce variety
Related to the best practice of reducing concurrency is the concept of limiting animation
variety: the fewer animation variations you have, the more reassured the user will feel that
she’s fully abreast of what each animation in your UI connotes. For example, if you use
one type of animation for bringing big images into view, but a different type for bringing
small images into view, consider consolidating them into one. If the differentiation
between them was merely for aesthetic purposes rather than for improving usability,
you’ve successfully eliminated unnecessary complexity from your UI, and reinforced
behavioral consistency in the process. Consistency leads to pattern recognition and
understanding. Understanding leads to increased user confidence.
Mirror animations
A tangential aspect of limiting animation variety is consistency in your choice of
animation property and option combinations. For example, if you have a modal that
animates into view by transitioning opacity and scale, ensure that the modal
animates out of view with these two properties reverting to their original values. Don’t
change properties for the two sides of the same coin. Doing so will make the user question
what prompted the differentiation, and needlessly raised questions are the hallmark of a
bad user experience.
When working with properties that affect translation (for example, translateX,
left, marginLeft in CSS), mirroring applies literally: if a modal animates into view
by sliding down from the top of the page, have it animate out of view by sliding back up
toward the top of the page. Conversely, if you were to have the modal animate out of view
by further sliding down off the page, you’d be indicating to the user that the modal has
been sent somewhere new as opposed to having gone back where it came from. Typically,
you want to imply that the modal dialog has gone back where it came from now that the
user is done, say, changing account settings. If the user were instead sending an email,
then having the modal animate down off the page would be contextually appropriate
because it reinforces the idea that the email is being sent from its origin (the user) to a new
location (the recipient).