UI Animation for people who don't know UI Animation

Everything you always wanted to ask about the animation visual language.

Author

Claudio Postinghel

17 Sep 2020

My biggest challenge is getting my users to communicate with the systems I design.

I combine shapes, text, colors together to create interfaces that speak clearly, but often there is something missing, as if some words are missing.

My toolbox lacked animations and there are so many things that can only be said with this tool. I wrote this article to better orient myself between the various techniques.

What does UI Animation mean?

To understand what UI Animation means we must first understand the two terms it is made of:

  • “UI”,
  • “Animation”.

UI

With UI we mean the user interface, a man-machine interface, that is, what stands between a machine and a user, allowing mutual interaction.

0 - Circles

Animation

Animation is instead a technique that produces the illusion of movement using a series of images in succession1. Here, the key term is “movement”.

Thus, we can define UI Animation as the branch of UI that uses movement to communicate.

Inside or outside the scene

An animation can take place in two ways: intra-scene and inter-scene.

Intra-scene

The interface communicates through movement while remaining within the same scene. For example the entry of a toast, as in a project we have recently made.

Video 1 - The toast of the supplier creation in Domustudio

Through the movement the event takes time, rather than being instantaneous. This increases the perception for the user and therefore makes the event more evident.

Similarly, by choosing how an object accelerates and decelerates we can communicate information about its origin. This phenomenon is called easing and is explained in a few paragraphs.

The toast in the example above comes from outside, so:

  1. it will enter the scene at full speed
  2. it will slow down at the end of its motion

Video 2 - Just like a beer in the bar! 🍻 From the TV series ”Cheers (cheers)

Inter-scene

The interface communicates continuity between different scenes, making the transition.

Video 3.A - Navigando tra una vista e l’altra si compiono dei salti discreti

When using a software, the user navigates between one view and another, making leaps within the information architecture and functionalities. Without animation, the transition from one state to another occurs in discrete jumps that break the experience.

Video 3.B - With animation, the transition becomes continuous

We can work around this problem through animation, giving the experience a sense of continuity.

Video 4 - An animation in Beacon Adventure, an app that we designed and built

For example, in Beacon Adventure, a project of an app for the exploration of tourist points of interest we have worked on in the past, we go from the “list of adventures” scene to the “detail of adventures” scene. An instant change of sight would be abrupt, impactful. We therefore opted for a shared transition, animating the elements in common between the two scenes, in order to make the transition seamless.

Why animate?

“Okay, I understand what UI Animation is, but why should I use it?”

UI Animation is one of the many tools you have at your disposal as a designer and as such follows the most general rules of good design.

Why should I use a certain design tool?

❌ Because I like it
❌ Because it’s cute and I saw it on Dribbble
❌ Why… Why… Why?
✅ Because I have clearly identified a problem and adopting this solution allows me to solve it

The UI Animation follows the same rules: it is not something to add because it is the fashion of the moment, but a tool to be consciously chosen to achieve a purpose.

That said, to understand why (and when) to use animation, and therefore what purposes it helps us to achieve, it is really usefull the distinction2 between:

  • Delightful
  • Functional Animation.

Delightful Animation

The delightful animations, such as the name suggests, are those animations that delight the user.

Video 5.A - A promotion website about clean energy created by Tubik

Video 5.B - A beautiful landing created by Studio VOR

Video 5.C - A very complex interaction with simulated physics green chameleon

Video 5.D - The parallax effect on our footer

Video 5.E - Me trying to be nice in my old portfolio (no, I didn’t have such a long mustache!)

These are important animations and have many advantages:

  • They make navigation and user experience more pleasant
  • Strengthen the brand identity
  • They are effective from an emotional point of view

But they do not add a functional contribution.

Functional Animation

The functional contribution we find instead in Functional Animation, which improve the usability of the products we make.

They manage to do it on four fronts:

  • Expectation
  • Continuity
  • Narration
  • Relationship

Expectation

Animation answers two questions about the elements of an interface:

  1. What is this object?
  2. How does this item?

Animations can suggest the nature of an object, minimizing the gap between what the user expects and what they experience.

Continuity

As we have seen above, animations can take place:

  • Within the same scene (intra-continuity)
  • Between different scenes (inter-continuity)

Narration

The animation explains the linear progression of the events in the user experience, connects discrete moments and events together. For example: it helps the user to better understand the progression of a flow.

Relationship

Explains the relationships between elements of an interface. These can be spatial, temporal and hierarchical. By defining the link between the various objects, animations guide the user’s understanding and decision-making process.

How to animate?

“Ok, but so, how do I animate?” 🤔

To understand how to animate it is very useful to retrace the 12 principles of UI Animation, explained in the article Creating Usability with Motion: The UX in Motion Manifesto.

Easing

📚 Definition

It concerns how elements change their velocity and motion. Helps move interface objects in a similar way to real world objects3.

Linear motion is a constant motion over time, without variations in speed.

Video 6.A - Linear motion

Instead, a more natural motion for an object has accelerations and decelerations.

Video 6.B - Easing

That’s well described by easings.net, saying that “objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.”4

Example

  1. ✅ The door of our office

Video 6.C - An example of easing: the sliding door of our office!

The movement of our door is soft and sprung! If a sliding door started at full speed as soon as we touch it and stopped just as fast at the end, it would be very unnatural. And we want our interfaces to feel familiar and natural.

Offset & Delay

📚 Definition

When introducing new elements and scenes, the animation defines the relationships and hierarchies between objects, telling us something about them.

Example

✅ The elements of a list

An excellent example canbe found in The ultimate guide to proper use of animation in UX.

In fact, the appearance of the elements of a list in sequence, with a slight delay between one element and another, suggests that it is indeed a list.

Video 7.A - It looks (and behaves) like a list

Taking instead appearing the elements all together we still recognize the list, but in a less clear way.

Video 7.B - It looks like a list, but a little less

❌ A negative example

Looking at this entry animation we immediately and intuitively notice that something is wrong.

Video 8.A - Original animation

In fact, we see nine objects consisting of an icon and a name, those that fall into the red rectangles.

Video 8.B - Here’s how they are visually grouped

But the animation tells us something else: icons (blue rectangles) and names (red rectangles) are grouped respectively as separate objects.

Video 8.C - And here is how they are grouped by the animation

Parenting

📚 Definition

Parenting creates hierarchical, spatial and temporal relationships when interacting with multiple objects.

Example

✅ The Instagram color picker

Video 9 - The color picker of Instagram

When we create an Instagram story we can pick a color directly from the photo, for example to match the new text with the color of the logo.

When we move the color picker (blue arrow), the object that tells us which color we are selecting (green arrow) moves in unison with the picker, communicating a relationship between the two.

Video 10 - The color picker of Figma

The behavior is often different. For example, in Figma the feedback on the color we are selecting (indicated by the red arrow) is not found in correspondence with the picker (which moves in the red box).

In the Figma example it is clear that the two objects are separate elements. However, when the two objects move together, the effect is so strong that they are perceived as a single object, as happens in the example of Instagram.

Transformation & Masking

📚 Definition

The transformation gives continuity to the narrative flow when the function of the object changes.

Masking, on the other hand, creates continuity in an object when utility is determined by which side it is revealed or hidden.

An example

✅ My old portfolio

A good example of using these two principles can be found in my old portfolio.

Here we can see the case study list, which contains the various projects such as CityBikes (highlighted in red) filled by the cover of the item (highlighted in yellow).

Video 11.A - The list of case studies of my old portfolio

While in the open case study shows the entire page (highlighted in red) and the page header (highlighted in yellow), followed by the rest of the content.

Video 11.B - Opening animation of a case study

Usually a simple redirect is used: clicking on the case study loads its page. But I wanted the transition between the main page with the list of case studies and the single case study to be as “smooth” as possible. So I used a transition instead of a redirect to another page.

The element of the list is transformed (transformation) throughout the page, creating a continuous state of narrative flow. At the same time, the cover becomes the page header. This changes which part is revealed or hidden within the element, thus creating a sense of continuity.

Video 11.C - The two states of the animation compared

Value Change

📚 Definition

By showing the variation of a datum, dynamism and change are transmitted.

Example

❌ The foundation date

Video 12.A - Anno di fondazione di Foundation year of Fatture in Cloud

For example, in the website of a company it makes little sense to animate the year of foundation, as it is a value that does not change over time.

✅ Data that changes for the better

Video 12.B - Statistics of Fatture in Cloud

It makes sense to animate values ​​such as the valuation on the stores or the number of documents created per month, implicitly suggesting that they will go up further.

Overlay

📚 Definition

The overlay consists of making one element on top of another. In this way a spatial relationship is communicated between the animated element and the rest of the interface

👆 Practical example

✅ The detail of an element of a list on Domustudio

Video 13 - The detail of one of the condominiums in the condominium administrator’s address book

In Domustudio, the detail of an element of a list enters the scene by scrolling on the interface, positioning itself above the main view. In this way it communicates a spatial relationship with the rest of the interface. The side modal stands on top of the rest and is closer to the user because it is more relevant.

Cloning

📚 Definition

When objects originate from other objects, continuity, relationship and narrative are created.

Examples

❌ Sending a message on Whatsapp:

Video 14.A - Conversation on Whatsapp In WhatsApp when we send a message, the sent message appears simply, breaking the narrative. In the real world, objects don’t behave this way.

✅ Sending a message on iMessage:

Video 14.B - Conversation on iMessage

In iMessage when we send a message, the sent message originates from the text field. When the “send” button is pressed, the words scroll disappearing upwards, it almost seems that they flow from the message written in the message sent.

✅ Another chat:

Video 14.C - Chat animation by Jakub Antalik

This effect is even more evident in the animation used in this example, in which the message literally tears away from where it originated. It’s a bit extreme, but it explains the principle well.

Parallax

Parallax is that effect for which the observer sees subject and background moving at different speeds: if we move in the real world, objects move at different speeds based on how far the plane they belong to is .

Video 15.A - The planes move at different speeds based on the distance from the observer

Frontally, we will see something like this:

Video 15.B - How it is perceived from the front

Using parallax in our design consists in moving objects on the interface in the same way, so that to transmit this distance.

This tells us the importance of objects, for example by clearly distinguishing what is only background from what is contained.

16 - Dog

Image 16 - Bokeh effect on a dog Original photo by Matthew Henry

A great example of a photographic equivalent of parallax is the Bokeh effect. This technique allows you to give greater importance to the foreground subject (placed on a plane near us), blurring the background in the background (placed on a plane further away from us).

Obscuration

📚 Definition

Allows you to orient yourself spatially in relation to objects or scenes not present in the primary visual hierarchy.

👆 Practical examples

✅ The Domustudio column customization modal

Video 17 - The column customization modal on Domustudio

When in Domustudio we open the modal to customize which columns to display, it appears in front of the main interface, which is slightly obscured.

This allows you to separate this view from the main one, while maintaining context and spatial continuity.

✅ The iOS application switcher

We could take many other examples of iPhone, Apple takes particular care of this kind of detail. One of them is the application switcher.

Video 18.A - The iPhone app switcher

When opened, the rest of the interface behaves as it does for opening folders, staying where it is.

Video 18.B - The OnePlus app switcher

Instead on my OnePlus 6, once called up, the rest of the launcher is completely darkened, breaking the spatial continuity.

Dimensionality

📚 Definition

Dimensionality overcomes the flat world of user interfaces and provides a spatial narrative as new objects enter or leave the scene.

👆 Practical examples

✅ Progressive disclosure of Stripe

Video 19 - The animation for progressive disclosure in Stripe from the video Designing Meaningful Animation by Val Head

In Stripe’s checkout when the mobile phone number entry form is shown, it tilts or flattens, like the sun visor of the car.

What this type of animation communicates to us is similar to the parasol: the object exists even if you don’t see it, but it appears when needed.

This is a classic case of progressive disclosure.

✅ The iOS application switcher (yes, still it!)

Video 20 - The dimensionality of the app switcher on iOS

The app switcher on the iPhone is studied in detail. The applications move in three dimensions, in a soft and realistic way. They almost look like a deck of cards where the ones at the top of the pile move faster than the ones at the bottom.

✅ Instagram stories

Video 21 - Dimensionality in the stories of Instagram

Instagram also uses this effect to switch between the stories of one follower and the other. This effect helps the user to understand how the information is structured and arranged. Each group of stories, although you can see one at a time, is represented in a specific point of the space, which in this case is literally around the corner!

Dolly & Zoom

📚 Definition

The dolly and the zoom are two effects taken from the world of cinema.

Zooming enlarges a portion of the view, as happens when we enlarge a photo. In the dolly, on the other hand, there is a real shift in the point of view of the observer’s position or of the objects surrounding him.

👆 Practical examples

✅ The iOS unlock animation

Video 22 - The iOS unlock animation

Again, Apple shows a great example of this effect. When we unlock the iPhone, applications fall on the home screen from behind the user’s point of view.

Notes

Author

Claudio Postinghel

Keep in touch with us!

We like to share what we learn. You can get our discoveries in your inbox subscribing to our newsletter.

Subscribing you accept to receive our newsletter. We will use your email address to send you our articles.
Read the privacy policy here.