Little details in animations worked on the UI (user interface) of the real app, gave a completely different experience from the first one that we experienced. This feature is known as Motion Design.
What is Motion Design in UX?
The term Motion Design is used to refer to all graphic production in motion. That is, we can mention infographic videos, effects in movies and, in our case, thinking of UX, in the animations that we find when interacting with different interfaces. We can use this for different cases in our projects, depending on the purpose we want to achieve.
Enhancing Motion Experience
The concern with user experience in developing interfaces has evolved in such a way that from time to time, motion has become an essential part of this process. This is because there is no interaction with the real world without movement. Therefore, there is no complete experience without movement.
Imagine an application that aims to read digital books. The moment we turn the page, we unconsciously expect a certain kind of movement. If the cut is dry without any kind of transition, the experience will be drastically impaired.
We could list a number of motion applicability in user experience optimization, but these days something caught my eye. The 4 commonly used motion types to enhance the user experience are: Transition, feedback, shifting focus and delight.
Transition is what happens between an initial state and an end state. If we go back to the digital book example in some reading application, when we turn a page we expect there to be a transition from page A to page B. Maybe a basic page-turn animation. Something that informs the user that in fact the page has been turned.
There are other examples of transitions such as popup, overlay, expansion, contraction, etc. What is important is to keep in mind that transition is every kind of movement that relates an earlier state to a later one.
Feedback is the visual response the user receives when taking action.It’s a fairly common type of movement. The most classic example is a button. When we click, the animation that simulates the sinking and returning surface is a type of feedback. It’s something that tells the user that that button was actually tight.Try to click a button and receive no response. Perhaps the first thing that will come in your head is if the mouse failed.
We are so accustomed to waiting for feedback that a certain action has been taken, that when this does not occur, it creates a certain strangeness. This is why feedback is considered one of the most important motion types in the interfaces.
3. Shifting Focus
It is widely used to draw the attention of the user with the intention of communicating something. Usually to show the user that there exists a possible interaction. A good example of this are those animations that are teaching us step by step where we should click and why. Another example is the “drag to confirm”, with that animated little arrow pointing to where we should slide the finger.
These are animated interactions that have only one intention: to make emotional connection with the user. Of course, we all want something that is functional and that meets our needs. But our requirement as users does not stop there. We are emotional beings, we like to enjoy pleasure in using a particular product. A good example can be that handsome loader that is able to turn a tedious waiting moment into something fun.
Motion Design and the 4 pillars of usability
The behavior of objects in an interface are essential to create an unforgettable experience. That is indisputable.
Many of us are accustomed to creating expectations. When we expect something to happen in a certain way and it happens differently, we find it strange.When interacting with the parts of an interface, the user expects a certain type of behavior. The big challenge is to try to minimize the gap between what the user expects to happen and what actually happens.
Continuity involves the “Flow” and the “Consistency” of the user experience. Intra-continuity, which would be the continuity that exists within a scene, for example Zoom-In and Zoom-Out in a mosaic of photos, or the Ease-In and Ease-Out of an object’s movement. Inter-continuity is the continuity of several scenes that make up the experience as a whole.
Narrative is nothing more than the story told through all stages of the experience.Every product tells a story. In the case of an application, think about all the choices that the user makes when interacting with the interface, bringing up a series of steps, forming an experience composed of scenes very well connected between them.Narrative is also found in the details, in the chain of small events of an interaction.
At the first moment you type, then press the button to send the message. This, in turn, disconnects from the typing box and installs itself in the chat area. Soon animated dots give us feedback that the other party is typing. And so, it goes.
The relationship refers to the spatial, temporal and hierarchical representations between the objects of an interface that guide the user to understand something or make a decision.
Reinforcing the idea
When we think of motion design for UI, we are specifically talking about animations that offer a functional and intuitive sense, such as guiding or facilitating user comprehension, making the hierarchy of the elements on the page, informing a change of state, or even enhance the brand. There are several possibilities to include animations in your UI, highlighting some functionality or simply adding small details that make your system much lighter and more pleasant to interact with.
From understanding these four areas where Motion can raise the level of user experience through usability, begin analyzing the interfaces that pass in front of you. When you experience a very positive feeling about a particular interface, try to understand why.
Author: Angela Joseph
Angela Joseph is a digital analyst and technical writer. Currently she`s working in Digital Gravity, a web design agency in Dubai and trying to improve herself in the blogging career.