Limit durations
Designers often make the mistake of letting animations run too long, causing the user to
wait needlessly. Never let UI flourishes slow down the apparent speed of your page. If you
have a lot of content fading into view within a larger animation sequence, ensure that the
total duration across the entire sequence is short.
Similarly, if there’s a part of your UI—a profile image, for instance—that transitions
into or out of view on a frequent basis due to the way users interact with your page, be
extra careful not to allow protracted durations. Seeing a piece of motion design unfold is
nice the first time, but seeing it unfold a dozen times every time a user interacts with an
app becomes burdensome very quickly—especially if the user feels that repeatedly
waiting for the animation to play out is significantly increasing the overall UI wait time.
Since it’s difficult to judge the appropriateness of your animation durations after seeing
them play out dozens of times during testing, a good rule of thumb is to speed up all
animations by 25 percent before you push a site live to production. This will help ensure
that they always lean toward the faster side. (See Chapter 4, “Animation Workflow” for
tips on how to quickly time-shift your animations.)
Limit animations
If removing an animation altogether doesn’t detract from the user’s understanding of your
interface, consider dropping it and using an instant styling change in its place. The more
animation you have throughout your UI, the more the user will get used to seeing them.
The more she gets used to seeing them, the less attention she’ll pay to them, and the less
likely she’ll be able to differentiate between the different types of motion design and what
each signifies.
The vast majority of your motion design should be subtle—minor color changes on
hovers, for example—so the few instances of grandiose motion design that do exist should
pop to convey their intended message.