Motion Design and User Experience: why are animations important when interacting with an interface?
Motion design has emerged as a powerful tool to elevate user experiences. When combined with UX principles, it becomes a potent duo that captivates users and keeps them engaged.
Motion design goes beyond aesthetics; it has a practical purpose in reducing user stress during waiting moments, like loading screens or progress indicators. Additionally, it guides users through more intuitive interactions by using motion cues and visual feedback.
Two exceptional design studios demonstrate how motion design, integrated with UX principles, creates delightful and user-friendly digital experiences:
Our speakers:
Filippo Cipriani — Head of the Studio @ Adoratorio
Giovanna Crise — Brand Strategist @ Illo
A the heart of Motion Design: Micro-interactions — Filippo Cipriani
“Microinteractions can be defined from an academic perspective as contained product moments, representing concrete and exclusive little events triggered by user actions.“ F. Cipriani
Micro-interactions are the subtle animations and responsive elements that occur during user interactions with a digital product. From a playful loading spinner to a satisfying “like” animation, micro-interactions add a touch of delight that keeps users interested and invested in the product.
Microinteractions can be categorized into two flavours:
- Blanket micro-interactions, such as over effects and mouse pointers;
- Tailored micro-interactions, designed for specific projects or brands to create a memorable user experience.
Blanket micro-interactions are widely applicable in various projects, an example are the different versions of “buy now” buttons that change shades and sizes to indicate interactive elements. Drag effects are used to guide users or suggest actions without explicitly stating them. Transitions in webpages, displaying different pictures to indicate user directions, are also part of blanket micro-interactions.
On the other hand, tailored micro-interactions are more closely associated with a specific project or brand, becoming a part of its identity. For example, the Gucci website features an interactive button that must be pressed to initiate the experience, representing a unique brand identifier. Tailored micro-interactions can utilize sound or facial recognition to modify user interactions, creating a customized experience. One such example is a project designed for a sound-based company, where facial expressions modify the sound output.
To illustrate micro-interactions' significance, Filippo showcased a case study from an enterprise operating in the gold industry, where tailored micro-interactions were used to deliver essential data about the precious metal, its value, and its historical significance.
Discover more about Adoratorio’s projects here.
Richer digital experiences with inclusive and animated Illustration Systems — Giovanna Crise
“Motion can help improve the UX by making interfaces more usable intuitive and enjoyable for the user” G. Crise
Motion design and illustration systems combined can create animated illustration systems that have the power to transform digital products in fun and enjoyable user experiences. An illustration System is a set of illustrations and sometimes animations that have the purpose of enhancing a digital product. The primary goal is to empower and guide users seamlessly through their digital journey, with the added benefit of maintaining consistency with the brand image.
An illustration system needs to be scalable and reusable for the brand. It needs to be designed to fit various digital different touchpoints, ranging from apps and websites to operating systems. Its purpose goes beyond mere aesthetics; it aims to make interactions more intuitive, fun, and user-friendly.
Inclusivity in animated illustration systems ensures that all users feel represented, engaged, and catered to, fostering a deeper sense of connection and enjoyment during their digital interactions.
Giovanna showcased the project done by Illo for Google, the focus was on crafting hand gestures, device illustrations, in light and dark modes. The team provided users with a comprehensive kit, guiding them through intuitive motions and gestures to enhance the user experience.
In conclusion, integrating inclusive motion design enhances usability, captures attention, and provides valuable feedback. By combining motion design with user-focused illustration systems, designers unlock the full potential of digital interactions.
See the Google case study here.
These lectures were held during the 32nd UX Talk organized for the students of the Master in User Experience Psychology by Politecnico di Milano & Università Cattolica del Sacro Cuore and of the Higher Education Course in User Experience Design by POLI.design. Follow us on LinkedIn and Instagram to be updated about the upcoming UX Talks, always open to the public.
Curated by Alice Paracolli
