Published on | Prototyping: From UX to Front End — Medium Taras Brizitsky

Disney’s famous 12 principles of animation don’t work for UI design.
They never did.
Unfortunately, this myth is still alive and fed by people’s laziness and inability to read a few pages of written text.

The Principles of Animation

We don’t know the name of the first genius who discovered “The Illusion of Life” and skipped directly to page 47 where these principles are listed. What we do know is that not willing to read the rest of the book (or at least the rest of the chapter) made this person think that he’d found a magic bullet for interface animation.

As a result, many modern designs look and feel like a 1930 cartoon:

Menu Interaction by Barthelemy ChalvetPizza order process + iBeacon by Cuberto<a href="https://medium.com/media/72668a8ad4f9f13fad11f5dbff0ac3b7/href">https://medium.com/media/72668a8ad4f9f13fad11f5dbff0ac3b7/href</a>

This craze has already gotten out of hand. And now even Apple’s own designers are turning elegant interfaces into a wobbling mess.

I won’t teach you the basics of motion design.
And I won’t give you a nice bulleted list of steps that would turn you into a great motion designer in just 7 <s>days</s> minutes.

But I can help you with a basic way of inventing, describing and self-checking UI animations that proved to be working just fine for both novice and pro users.

For years I’ve been successfully using analogies between our world and a virtual one for describing and proofreading interfaces.

Here’s how it works (extra details for my Russian readers):

You describe your UI in real-world terms by applying virtual materials to them.
For example, a form may be described as a “plastic card”.
Build interactions based on these properties.
A “plastic card” may flip or bend, but cannot stretch.
Refine these properties if necessary.
Use them for explaining your UI to developers, self-checking or inventing new interactions.

Sounds familiar? Sure. Google uses similar analogies in their Material Design language.

Material Design Button by Vadim Gromov

The buttons are just rectangles with a shadow. But instead of trying to describe them in terms of shadow parameters you may say that the buttons are raised to a different height.

Voilá, your interface is no longer a set of boxes on a flat screen, it has meaningful dimensions.

For example, you may lower the level of the rectangle when it’s pressed. The analogy is known to everyone, it’s a physical button.

Photo by Scott Webb on Unsplash

DaisyDisk’s dynamic sunburst diagram was originally described as a “flower” with sectors as “petals”. So it’s natural to see the flower “bloom” and to tear off the “petals” when removing data.

Good luck trying to animate something like that as a coloured multi-level pie chart.

<a href="https://medium.com/media/8289606f17194528d387b06bd5357305/href">https://medium.com/media/8289606f17194528d387b06bd5357305/href</a>

Once we’ve discarded skeuomorphic details in favour of a minimalistic look (well, let’s admit it, we’re just using wireframes as final graphics) motion has become our most important bridge between virtual and physical worlds.

Photo by Aziz Acharki on Unsplash

Life around us is full of motion.

We walk, run and fall, and things around us move in (usually) predictable ways because they have a certain shape and mass, not because they “anticipate” and “squash”.

A leaf is moved because it’s blown away by the wind, notebook pages flip because we move them… Wheels turn, rain drops make beautiful circles on the lake, birds fly.

These are relatively simple motions you may use without messing up your interface.

Move, flip, rotate. It’s natural.

Scale (moving closer or further), pan (moving your head), even fade (less light), blur (focus) and opacity changes (some sorts of glass) may easily be found around.

Morphing is relatively rare.
We may change the shape of clay, paper or thin wires, but the majority of our surroundings are solid.

Photo by SwapnIl Dwivedi on Unsplash

And excessive deformation and motion is often a sign of wear or low quality.

Photo by Oumaima Ben Chebtit on Unsplash

Wobbling doors, unstable chairs (bean bags, anyone?), loose screws, mashed delivery boxes do not feel safe and reliable.

We don’t expect the door on the picture to close silently and smoothly, it should either be fixed or thrown away.

Complex animations with a lot of deformations also don’t make your UI feel serious and should be avoided unless you’re making a childrens’ app.

And, please, don’t forget about timing.

<a href="https://medium.com/media/da55ffbace4c610821a57018e8d1e96f/href">https://medium.com/media/da55ffbace4c610821a57018e8d1e96f/href</a>

Standing in front of a massive, beautifully moving door for a few extra minutes is not worth the wait unless it protects you from a nuclear blast.

So, in short:

Describe UI elements in terms of properties, not behaviour.
You may refine the details later, but starting with behaviour first would likely lead you to a mess.
Unless you absolutely know what you’re doing, use basic animations for each object.
Each animation should have a reason.
Use morph animation with care.
Forget about wobbling cartoon-like animations, they will likely do no good.
Excessive motion and deformation are often a sign of low quality.
If you think that a certain animation is “cool”, it’s likely too long or out of place.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

UI animation and the material world around us was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

UI animation and the material world around us

Cool stuff, every week

More Articles