Nowadays, animation has a relevant importance in Interface Design as one of the tools to build successful interactions. Through animation it is possible to make the product simple, direct and user-centred, providing a positive experience.
“Are You Ready?” by Jardson Almeida
All interactive elements may (must!) have some kind of movement at the time of the interaction, such as hovers, which indicate to the user that the elements have an associated action. These animations may be obvious or subtle, according to the creative approach of the project and the intended use. On clickable elements, such as menus, an expanding animation from element can guide the user through the navigation.
Motion in digital interactions facilitates the user experience and makes it more immersive. A static layout does not provide the experience that an organic layout, which functions as a living organism, provides, as the organic layout reacts to interaction. The animation should always be planned, taking into account the User Journey in order to guarantee maximum effectiveness in usability, utility and desire for the product, thus ensuring the most accurate decisions for the user. Following the planning of the animations, it is necessary to identify the elements that will interact with the user and those that will not.
Buttons should change on hover and have an associated click result to identify their different states. Elements such as scroll arrows may have a subtle movement to indicate the corresponding action to the user. The page transitions, according to the planning, must respect the movement direction in order to maintain the logic: a slide to the right will bring the new elements coming from the left. When using visually richer backgrounds, these should be subtly animated so that they do not collide with the other graphic elements of the layout.
A strong feature in interface animation is the possibility of working on the visual hierarchy, allowing the user to understand the navigation without much effort.
Another crucial element when thinking about Motion in Digital Interaction is velocity: this is directly associated with a good visual and user experience. In an interface, all elements of interaction should be reactionary, meaning that for any touch or click there is a reaction), so the speed at which an element responds to the user’s input is fundamental. It’s important that the user doesn’t get bored in the navigation — animated interactions that do not respect this are doomed to failure.
“iOS App Transition Experiment” by Ramotion
Real-world interactions, such as gravity and friction, are the main guidelines to follow in digital interactions. Objects do not come to abrupt stops nor gain speed instantly, so, following this rationale, we get natural-looking movements.
Replicating the essence of interactions that exist in the real world helps us to relate the user to the product and to the world: these natural interactions do not require so much cognitive perception and turn the interface into an easy and seamless experience. When you push a button, drag an element or move between pages, the movements must feel natural and not forced.
The perfect balance between utility/usability and emotions/aesthetics provides a good experience and satisfaction with the product.
Micro-animations are the way to make interactions fast and direct to the user, such as pressing buttons. They become “invisible” when they’re being used properly, but their importance is easily perceived when they are not. Animations are usually discrete and small, but it requires a lot of creative time and effort to make them simple and to improve the usability of the product. They are critical to a positive user experience. For example: when you click a “like” button, it changes the counter and the colour immediately, informing you that your action has been completed. Also, a “pull-down to refresh” interaction informs you that new content is being loaded. These animations can be used to include some visual elements of the brand, thus increasing brand awareness. When animated in an unique way, these interactions can even become something that users share and talk about.
“Mothers app” by Johny vino
There are some types of animation that can be identified in digital interactions:
Progress
Several types of loading bars that show progress and give the users a real estimation of the time needed to get the results of their action, such as the opening of a page, a login or any kind of transition.
Explanatory
Explanatory animations help the user by drawing attention to relevant actions or areas of the interface. It is regularly present in the first use of a platform, in order to explain its basic steps.
Decorative
Through decorative animations you can visually highlight the design of the interface and connect with the user. Sometimes, it is used on the brands’ logos, in order to highlight the brand itself.
Reactive
The users need to know that their actions have taken effect: reactive animations allow them to follow their interactions with the interface and providing a positive and effective navigation experience. Animated buttons and other interactive elements inform the user quickly, by taking advantage of visual perception.
“Facebook Reactions” by Seth Eckert
Informative
It’s important to make sure that the users know how to progress in their journey, so that they won’t miss crucial steps. Progress bars, animated timelines or other dynamic elements help to guide the users through the whole experience.
It’s paramount to take into account some key points to ensure the good operation of the product, such as the allocation of traffic for loading data — if the animations are too heavy they can result in higher waiting time and thus in a negative and annoying experience. Also, too much animation can have the opposite effect and, therefore, you really shouldn’t overdo it: if everything is moving, the user will quickly become tired with too much information and your bounce rates will go up.
Sound effects also help to increment the universe that you want to create around the user, although you need to take some precautions — it mustn’t overlap everything else. Subtle and responsive sounds can create an immersive experience, but having a visible option to turn off the sound is key.
More than Motion
To animate for digital interactions, understanding the best way to structure a file for the planned animations is one of the main priorities. It’s important to keep in mind that the whole animation process is developed in an animation software, such as After Effects, but that everything ends with code. Consequently, when animating an interface, Motion Designers should always be in communication with the Designers and Developers. Only this teamwork can assure a successful digital interaction!
