Animated interfaces

by Jeffrey Mok
29 Jun 2015
15min read
Share this article:


animation (animātiō)
[an-uh-mey-shuh n]

  • 1 A simulation of movement created by displaying a series of pictures, or frames.
  • 2 Liveliness; vivacity; spirit; motion; activity.
  • 3 (Latin)"the act of bringing to life"

So animation is essentially movement is life. In the industry, the different states are called Keyframes, and everything that is between the states is called Inbetweening.

Steamboat Willie by Disney

It all started off with the grandmasters at Disney. This here is their first feature film "Steamboat Willie” in 1928. So you might be wondering what in the world has cartoons got to do with us and interfaces?

Nature from Mat. on Vimeo

Animation is a simulation of what we recognise in the real world and it’s what we’re used to. So it’s the weight, physics, how things flow and move in real life.

As humans we’re actually very observant creatures and very good at picking out what doesn’t feel right. We may not always be able to articulate it, but we can sense it. The reason being is because in real life we see it every day.

It’s the way we move our hands, to the way a tree subtly sways in the wind, to the way a leaf slowly floats and flips when it falls. It all has weight, physics, and direction, nothing in real life just turns on and off. There is always movement even the most subtle way, something is always happening

Why Animation?

Card Interaction by Javi Pérez

Animation is a visual language. A lot of the times we don’t actually need to use text or instructions to explain how interfaces work. We can use animation as cues and feedback to show the user progress, what is about to happen and what can’t work. It can actually makes the experience feels more seamless and intuitive. 

Coder by Miriam Palopoli

Animation can be used as a tool and they are layers of information. In the recent favour for the more flat and simpler designs, it is things like these that make animations even more valuable to our interfaces.

The goal of animations should not solely be entertaining the user, but rather,
they should be helping the user better understand what’s going on and how to use your product most effectively.
- Michaël Villar

Impossible Bottles by Rafael Varona

We’re not robots, we are sensitive to change and form and we notice things organically. It needs to make sense to humans, needs to feel natural.

Deltas & Delays by VeracityColab

Good animation is invisible much like good design is. It can be used for emotive purposes to delight, amuse, humour, inform and alert. Static interfaces are fine, but animations add an extra layer of design and depth.

Static design doesn't provide context between states.
- Pasquale D’Silva

Material Design by Jokūbas

We’re creating interactive experiences, so there should be a greater need to bring movement in our designs, and not just static experiences. But of course animations should be meaningful and provide context.

Interactivity should always be paired with animations as the experience is constantly changing. So we don’t need to re-invent animation, it already exists it just needs to be applied effectively.

 Animation leverages an overlooked dimension - time! An invisible fabric which stitches space together.
- Pasquale D’Silva

Space Capsule by David Urbinati

Seeing time as a dimension is a very interesting point in relation to animation. We live in a world where time exists and for things to happen there needs to be transition points from one to another.

Business Guy Walk Cycle by Fraser Davidson

We should make it make sense too. It’s like watching a cartoon animation and you see a character walk from point A to B, but you only see the start and end point and nothing inbetween.

By filling those inbetween gaps, we save our user all the guess work and let them focus on what’s more important in the experience.

Dresses by ASOS

Just think when you’re buying products in the real world. We all look for certain things before we purchase them.

Not only is it functionality but we often look for form and style as well. To the quality of materials, how comfortable they feel when we wear them and the style and aesthetics of the clothing.

A6 by Audi

How smooth and powerful they perform, to how enjoyable they are when we use them.

Portugieser Yacht Club Chronograph by IWC

All the way to the finer details of the weight, size, the feeling of the push of the button or the smooth twist of the crown.

When all these details are considered they make the user feel special and it adds value to their purchase.

IWC Watches - Collections by Ehsan Rahimi

Speaking of watches, this is how the product could reflect in an interface. See how everything is minimal, elegant, smooth and seamless.

iOS - New Gestures by Javi Pérez

In reality all mobile devices and OS’s now deeply integrate animations, people use them every day and they may not specifically recognise or understand it. But I can guarantee they know and feel it.

Just imagine if all the animations and transitions are stripped away from your phone, tablet, and computer OS’s. Being thrown one screen or state after another. It would feel odd like something was missing in your life that you’ve grown accustom to.

So it’s also about keeping up to standard, make the user feel like they’re having a seamless transition from their current mobile experiences to the experiences we provide them.


The Illusion of Life by Disney

Way back when the Disney grandmasters first created the principles of animation. They made this old school book to help guide people to understand what is was all about.

Luckily someone has gone and made a charming modern version of it in video, explaining it all for us below.

The illusion of life from cento lodigiani


Here’s a recap of all the principles. So every time we consider animation, it’ll be good for us to have a basic understanding them all.

OBLIVION GFX Montage from GMUNK on Vimeo

Even when you watch movies these days, more and more designers are getting involved to create interfaces as if it were real.

I’ve seen a lot of the behind the scenes for these sequences, and they go through a lot of research to make data look beautiful, functional and real, as if someone actually has to use them.

So they have to consider all these small details and motions that are contextually relevant to the scene and world. Even though these are all futuristic looking interfaces, they are all created in mind to make sense.


iOS 7 & 8 by Apple

Apple were one of the first to mainstream animations across all their interfaces. I’m sure all of you are used to iOS7 & 8 now and you might notice that they put a lot of subtly and detail in their interface animations.

Like how the call button transforms into the hang up button. The way you punch the keypad and they become hollow and reveal the blurred background. As you slide power off it fades into darkness as if like a shutdown sequence. When you see in the calendar switching on events menu re-adjust and squashes all the elements to fit. Even just to browsing around calendar the view zooms in and out, pans and shifts. All of it gives context to your position in the calendar.

Apple Watch by Apple

Now with the Apple Watch animations are even more thoughtful and expressive. With such a small space, these tiny details are now even more important to deliver a visually engaging and quality product.

It’s not just what it looks like and feels like. Design is how it works.
- Steve Jobs

Material design: Motion by Google

So Google too are following suit and now have a motion philosophy and they like to call it Material Design. As a result they’re deeply considering animations as a part of their core focus design.

Material design: Motion by Google

So they were describing how we can use the physics and motion principles of the real world. As it can create a less mechanical environment and something more free flowing and organic.

Notice how the lines and movement are showing a mixture of curves and arcs, and that creates a more natural motion.

Material design: Motion by Google

Movement can bring clarity to spaces and show the relationships in how elements interact with each other. Animation should be responsive and fast, to sync and complement the user and not hold them back by waiting for an animation to finish, as that will bog down the whole experience.

See how each of the boxes are moving really fluidly almost like water or wind blowing leaves in the air. Also the way how each box feels independent it shows how this grid is flexible to change.

Material design: Motion by Google

It’s about the craftsmanship too, putting in the small details that will delight the user.

Just see how in the sequence how the album art is connecting the transitions from one to another allowing continuity from each state. Also as our eyes are focused on the album art, it shows relationship and connections to its space.

Material design: Motion by Google

Also about first impressions, when we present it in such an awesome, thoughtful and polished way we set the tone of the experience from that moment. Notice how each icon has its own animation and it really gives it more character and life.

This is an Instagram concept, taking the inspiration and philosophy's from Material Design.


Clock by ILLO

Gives time for the user to digest the information. When you make your users feel comfortable, your interface will become natural and intuitive.

Great customer service animated icon by Fede Cook

Complements the design and UX and makes it look and feel responsive. The more attention to detail we give means we care about the product and user

It’s a bit like customer service. Good companies will go the extra length to provide more care to their customers. Over time they will develop brand trust, and because they are making them feel good and from the experiences they provide they will naturally come back for more.

Likewise we too should convey those same feelings from the experiences we provide.

Ideas by David Stanfield

It helps give ease on the eyes, and can deliver information at the appropriate time. With the right animations, you can make clearer user connections from their actions.

It gives the user a sense of progress that things are working, playing out and processing in the background, because nothing is instant.

Makes every micro interaction rewarding with delightful details!

Things to consider

Its never too late.. by Seth Eckert

Like good and bad design, there is also good and bad animation. Good timing is very important and bad timing can make things look overwhelming and clumsy. Also abrupt change can leave users disorientated.

Animation can be abused and if not carefully considered can confuse the user with strange and mixed metaphors like bouncing ball physics applied to navigation. So we need to understand the animation principles first, otherwise it can lead to bad animation.

Flat Preloaders by Pixel Buddha

As humans we generally don’t like to wait too long, there needs a balance of timing and flow. If animations are too quick it feels too sporadic and may overwhelm user. Too slow and it doesn’t feel responsive and sluggish. We should be layering animations and not segmenting them apart too much.

Scientist by R A D I O

In terms of timing, you can’t rely on a number to set all your transitions. It makes sense from a consistency point of view. But every element animated should be seen as individual, and every element should have their own timing. It’s a mixture of the consistency of numbers and ways the emotions the animations convey.

So it’s a matter of running and testing the animation multiple times and tweaking numbers, direction, subtle movements, easing until it all starts to feel right.

Much like when we do our designs, it’s a question of does it belong, does it match the personality of the experience? It pretty much is like an art + science

Takes time for experiments, variations, tweaks much like how design works when we have revisions. Just because you implement it doesn’t mean it’ll apply to that design context.

Also we have to make sure we optimise animations, do real world tests on a variety of machines and devices.

Storyboarding by Chris Bramford

Designers definitely need to supply the different states from A > B > C (similar to storyboarding) or provide examples and references of the animation style.

If we only provide the major states it can be entirely open up to interpretation as you can animate it in a million different ways. That way the client has a clear understanding of the style and gives enough information for the animator to realise the intended direction.

Motion Layout by VeracityColab

Animations should add to the experience, not take it away. It’s not the one transition or animation that will make it amazing, but everything as a whole experience that will make it amazing.

Think of ways we can we use animation to improve UX. The most effective way is to think about it from the beginning and not just something tacked on late in the process.


Good examples

Prototype by Marcus Eckert

This is a prototype of some experimental user interactions. See how everything has weight to the animations, panels move and fade fluidly. Notice how each interaction has a response and effect.

Scorekeeper by Matt Rix

This is a really slick app and simple app for scorekeeping. It’s around 3-4yrs old but I think with its minimal design and polished execution it still holds up really well.

All the animations are fast and responsive, the tap of each button has a ripple effect and sound. You can hold the + - and the animation accelerates over time which is helpful to the user when the finger is covering the hit area.

Below are more examples of apps with animations done well.

This is a campaign to promote the iPhone 5c. But through pure animation and sound simple things like circles can represent so many different things and emotions

Here are some web interface examples, click/tap on the images to see the demos.


Not so good examples…

In these examples you’ll see abrupt, overly exaggerated and unnecessary motions. Awkward to forced animations, and strange physics or odd timings. Also an example of the lack of transitions which can result in jarring the users’ eyes.

Click/tap on the images to see the demos.



ISO-100 by Down the Street Designs

Do we design + build to the bare minimum or push for better experiences?


Avengers by Robin Davey

Animation gives personality.

Mountain Graph by Seth Eckert

Helps the user connect the dots.

Homeward Bound by R A D I O

Engages the audience.

Never Ending Stories by Raoul Alpkut

Tells better stories.

Structure Animated by Fraser Davidson

Enhances the experience.

Ballicons by Creativedash

Brings the design to life.

POW! by Fraser Davidson

Animations can be powerful.

Because I'm happppppy by R A D I O

So be happy and animate :)


Share this article: