previous short article about gratuitous animation really
struck a chord with people. The response has been phenomenal and it’s been awesome reading others’ frustrations
with overly animated UIs.
To be clear,
I’m not anti motion design for UIs. Far from it. I have a
problem with animation that serves only to get in the way of the end user.
One of the clearest signs of a competent UI designer is
restraint. It’s about knowing the capabilities of your chosen platform and then not using them (until the perfect
Rather than just bemoaning the use of unnecessary
animation, I’ll do my best to suggest scenarios that would benefit from considered use of animation.
I look forward to hearing your comments and suggestions
about this topic.
A Contrived Example
The following is a quick, contrived example that I came
up with to demonstrate the Disneyfication of UI motion design. Although this is an exaggerated example, in truth
there are many UIs out in the wild that exhibit this kind of garish motion.
It’s almost like we’ve abandoned visual skeuomorphism
and replaced it with behavioral skeuomorphism in which our digital objects act as though they are made from jelly, or
dangling from invisible rubber bands.
Stop Wanton Animation
Animation is like cursing. If you overuse it, it loses
all its impact.
I’ve heard some UI designers suggest Disney’s
animation principles as required reading for UI designers. Unfortunately this helps to promote the idea of UI as
entertainment, which invariably leads to a UI that slows the user down.
Many UI motion designers seem to treat their user
interfaces like animation portfolios. Unless you’re hoping to get picked up by Pixar, you can probably steer clear
of animation easing like “Bounce” or “Ease-in-Out”.
What is an Interface?
In computing, an interface is a shared
boundary across which two separate components of a computer system exchange information.
It’s the interface’s responsibility to
mediate an information exchange which makes it so important. The challenge for designers is to determine when their
design gets in the way of this central UI tenet.
Motion in UI Design
Here are some simple principles that have worked well
for me and which I recommend:
Be able to justify the use of each animation in terms
of benefit to the user. “It looks pretty” doesn’t qualify.
Keep animation duration at or under 300ms
Avoid Linear animation easing. It makes motion look
slow, uninteresting and mechanical.
99% of animations should use a simple “Ease-In”
or “Ease-Out” animation easing.
You only rarely need more exotic animation easing
such as Spring, Bounce etc.
Some UI Examples
Please feel free to criticize/pick apart these examples. Your comments and
suggestions often help refine my own thinking on these matters.
A simple animation that only lasts for 300ms. There is a
very subtle layering effect whereby the message is faded in 100ms after the red card’s animation starts. The use of
motion in this example does enhance the users experience of the app because it helps draw the user’s eye to an
important notice that can’t be ignored.
That Escalated Quickly
The demo above uses animation that escalates in
On the first click the notice fades in
On the second click the label shakes
If the user continues to click the button then an
optional modal overlay could be used to draw the user’s attention to the issue.
Additionally the button itself could change color to
indicate a failure on subsequent failed tries.
This is one of those simple, yet very effective
implementations of a card view which is commonly used on mobile. I really like this interaction because it allows the
user to maintain context. Even though our view of the list is obscured, we know it’s sitting right there behind the
I’ve purposely slightly delayed showing the close icon
for the card and I’ve used a transition that animates both position and opacity. This draws the user’s eye to an
important UI element which the user will need to be aware of to be able to dismiss the card.
Hierarchy of Importance
As designers and developers one of the most important
things we do is to decide which elements of our UI are more important than others. We do this in a number of ways
By using headings
Underlining, or making text bold
Use of color
Use of shapes and images
You wouldn’t make every sentence of a document into a
heading. The same principle applies to animation. Consider every animated element in your UI to be the equivalent of
a heading in a written document. It should be used to signal the importance of an element. Overusing it simply
flattens out your hierarchy and dilutes the message you are trying to communicate.
Functional vs Aesthetic Animation
Programmers often talk about code in terms of ‘code
smell’. This refers to features of programming code that may not be outright bad, but which do set off a seasoned
programmer’s spidey sense to potentially poor code.
If you begin to hear team members talk of UI animation
using terms such as ‘delighting’ the user, your ‘design smell’ alarm bells should probably start going off.
Animation for animation’s sake is (almost always) poor design.
Remember, less is more with regard to animation.
Functional always trumps
purely aesthetic animation.
Don’t let your animations get in your user’s
way. There’s a reason why an airplane’s navigational UI doesn’t use any animation. Adding an unnecessary 300ms
your UI probably won’t kill anyone, but it will annoy your users far more
than it will ‘delight’ them!
By all means use animation in your UI. Use it as a
high-bandwidth way to quickly communicate important information. Favor functional over purely aesthetic animation,
and value those precious milliseconds your users are devoting to your UI.