Although it seems incredible, the UX world has much in common with … Disney!
The animation is a determining factor in the experience that the user has with any digital product since it is an added value that takes the design of the product to a higher level. In fact, next May, from 7th to 9th , Disney organizes a Customer Experience event. You can find more information here. Today we will talk about just that, about principles of animation in digital products.
For the moment, three Disney principles are pure Customer Experience:
- Create a common structural proposal
- Understand the users in their entirety
- See exceptional service as an economic asset instead of an expense
And two principles of animation that are also found in the UX motion world, and that we explain in this same post:
- Slow in and slow out (easing)
- Follow through and overlapping (overlay)
What differentiates the Disney animation from the UI animation is that, while the former seeks to approach more real movements, the latter seeks a better usability.
Before getting into the subject and knowing the principles of animation, we will explain the four pillars of any principle of animation:
- Expectation: this pillar is based on the perception of the object by the user, as well as its behavior. The closer we get to what the user expects from these two aspects, the better.
- Narrative: it is the progression that takes place during the experience, both temporally and spatially, in other words, the scenes..(and their relationship between them) that are presented on the way to an objective.
- Continuity: it is directly related to the narrative, since thanks to the continuity, it has greater fluidity and facilitates its understanding. The connection between scenes is continuity.
- Relationship: we refer to the relationship between the objects of the interface that facilitates the understanding and decision making of the user.
And now, we present the principles of animation UI.
EASING
Easing is the first principle of animation because it is the most basic one. It is based on the pillar of expectation, since it is very close to the reaction of an element when interacting with it. As we have advanced in the introduction, Disney also shares this principle.
Invision projects by Charles Patterson Photo viewer interaction by Divan Ra
OFFSET & DELAY
Offset & delay is one of the animations that comes closest to the human attitude, and is that it helps the user to find more naturalness in the interaction of the elements (that is why it is based on expectation). Like the previous one, this principle is also shared in the Disney animation.
Hotel App reviews by Alex Kruchkov Job board interaction by Catalin Vasile
MASKING
Masking is the change of form (or mask, that is, the container that contains it) through which an element passes during the interaction. This microinteraction gives continuity and narrative to usability.
Event cards iOS interaction by Divan Raj Search animation by Julián Muñoz
PARENTING
Parenting is a type of animation that generates a dependency between the user’s interaction and the result that is displayed. We can see an example in our introduction, in which as it scores better, the heart regenerates. The relationship is the pillar on which this animation is based.
Xore – Solar system by Anton Skvortsov Feedback Emoji Animation by Prateek gupta
OVERLAY
The overlay animation is the one with which the element can discover other hidden functions as a result of interacting with it. This animation gives continuity and narrative to the experience.
Swipe & delete interaction by Divan Raj Microinteract. for to-do list by Jakub Antalík
TRANSFORMATION
La transformación es de los principios más obvios cuando hablamos de animación: la mejor manera de reflejar la progresión de un elemento a otro es la transformación, ya que ubica al usuario y le ayuda a entender cómo ha llegado ahí. En el segundo ejemplo también podemos ver otro principio: el cambio de valor.
The transformation is one of the most obvious principles when we talk about animation: the best way to reflect the progression from one element to another is the transformation, since it locates the user and helps him to understand how he has gotten there. In the second example we can also see another principle: the change of value.
Open & Close by Adip Nayak GIF for the Timeline App by Sergey Valiukh
OBSCURATION
Obscuration is used a lot when, in the same screen, you want to ‘stop time‘, that is, perform an action in parallel that can either change the state of what was being done, or go to another section. That is why it is based on spatial continuity, because the user knows where he is and knows where he is going.
Mobile Blog Search Concept by Vinny Tran Travel app – rating by 7ninjas
PARALLAX
La animación parallax es muy común, sobre todo en páginas web, ya que ofrece la visualización del contenido de un modo distinto al tradicional scroll, y da la oportunidad de una experiencia visual muy buena si se juega con los elementos y su superposición.
The parallax animation is very common, especially in web pages, as it offers the visualization of the content in a different way to the traditional scroll, and gives the opportunity of a very good visual experience if you play with the elements and their superposition.
Exploring The North Face por Eddie Lobanovskiy Why Slack motion por Gene Ross
Como veis, hay diversos principios de animación con los que poder nutrir nuestros productos de una mejor usabilidad. Hemos mencionado los que, para nosotros, son los más importantes, pero hay otros, como clonar, cambio de valor o Dolly&Zoom. Sin embargo, no olvidéis que ‘Menos es más’, como dijo un tal Van der Rohe.
As you can see, there are different animation principles with which to be able to nourish our products with better usability. We have mentioned the ones that, for us, are the most important, but there are others, such as cloning, change of value or Dolly & Zoom. However, do not forget that ‘Less is more’, as Van der Rohe said.
Our SlashGirl Laura González, UX Specialist, is the author of this post.
