The solution that sets ideas in motion: Motion design
Motion in the visual world has existed perhaps since the first time it was understood that two photographs could come one after another to form a meaningful pattern. Today, the understanding and applications of motion design in digital products, are becoming indispensable for usability, accessibility, and user loyalty.
Probably everyone has liked, even though not so eagerly, a tweet that says: “Like this tweet to see how the button changes”. Or, for example, has noticed the animated touch that campaigns on a special day like the Academy Awards add to Twitter… This effort to see the small interaction on the Like button is a good summary of the impact of motion design in digital products on user loyalty and interaction. More than just providing visual appeal and aesthetic pleasure, motion design also increases usability in digital products today.
In this blog post, Digital Panorama, a company that develops digital content for brands using technologies such as animation, computer-generated imagery (CGI), and innovative approaches from idea to design, will focus on the concept of “motion design”, which has recently attracted the attention of the user experience (UX) community. First, we will answer the question: “What is motion design?” and then we will explain how this design policy affects the user experience.
What is motion design?
The concept of motion design is based on motion graphic design or motion graphics and defines the application of motion to graphic design in the simplest sense. Motion designers use a combination of graphic design elements and animation techniques to give motion to static images.
From a broad perspective, the first examples of motion design can be traced back to the early days of the invention of animation, with flip books and analog animation devices produced in the 1800s. Experimental artists such as abstract animation artist Oskar Fischinger and animation artist Norman McLaren can be considered among the pioneers of motion design. Especially the Fischinger film “An Optical Poem”, in which two-dimensional geometric shapes create a moving composition in harmony with the music, can be considered among the first examples of the motion design techniques we use today. Disney’s animators who produced Pinocchio, Bambi, and Fantasia are among the founders of modern animation, a trend that has shaped the user experience today.
As digitalization has accelerated and mobile applications have found their place in the centre of our lives, motion design has recently been introduced with the concept of user experience.
Motion design and user experience
When we talk about the relationship between motion design and user experience, we should remember Issara Willenskomer, a mentor and experience designer who is the founder of UX in Motion. The biggest distinction made by Willenskomer, who set out the principles on how to use user experience in UX, is that motion design in digital product design is not only about giving motion to user interface (UI) elements. Suggesting that designers mostly view UI animation as something that makes the user experience more enjoyable and fun, the designer argues that it is not of great value in terms of usability and experience.
Whereas UI animation is viewed as a cosmetic addition that has almost no effect except for making UI elements slightly more attractive, motion design goes beyond furnishing and becomes a behavior. When considered from this perspective, motion design is positioned as an element that directly affects the character and identity of the application, as it has the potential to leave an effect on the user which is similar to the effect of details such as information hierarchy, typography selection, and use of colour in digital application design.
How motion design improves usability in digital products
Willenskomer’s manifesto, which outlines 12 principles of using motion design in UX design, divides interaction types into two as real-time and non-real-time. Real-time interactions provide immediate feedback when users change interface elements on the screen, while non-real-time interactions occur after the user’s action. This gives users the opportunity to pause briefly and understand the resulting motion behavior before continuing. Having established that motion design imposes still elements a behavior beyond elegance, we can now consider how this concept affects usability.
How motion design supports usability and experience can be analyzed from four perspectives, which are expectation, continuity, description, and correlation.
- Expectation: What motion do users want to see when they interact with UI elements? Do the presented motion and the applied motion design meet the expectation? For example, when we click on a check-box, we don’t expect it to flicker in place, we expect it to shrink and grow for a very short time, collapse inward, and then return to its original size within a few milliseconds.
- Continuity: Do interactions produce consistent motions throughout the user experience? For example, the feeling sensed and the behaviour seen when scrolling a screen are expected in our other actions, too.
- Description: Do the interactions and the motions they trigger, offer a logical flow, a description, and a narrative? Do they guide the user on what to do next? For example, does the motion that is intended to show that the other party is continuing to type, encourage the user to stay on the screen?
- Correlation: How are the spatial, aesthetic, and hierarchical qualities of UI elements are correlated? How do they affect the user’s decision-making process? How does motion affect the correlation of existing elements?
Eric Henry, one of the designers of the Google Photos App, argues that motion design should go beyond looking natural, and above all, guide the user by providing the right information at the right time. This comment and the titles above also suggest that motion design, which gives meaning to digital product designs and turns interface elements into living beings, serves as a guide for the users to find their way through the application.
Get Digital Panorama’s stories in your inbox
Join Medium for free to get updates from this writer.
The 12 principles of using motion design in user experience design
Issara Willenskomer’s 12 principles, which she published as a manifesto inspired by the principles published by Disney, guide user experience designers, product designers, and product managers today. Digital Panorama provides a brief summary of these 12 principles as follows:
Principle 1 | Motion acceleration: All interface objects that exhibit temporal behavior move at a rate that supports natural user experiences. When objects behave as users expect, this creates a sense of continuity.
Principle 2 | Offset and delay: This principle defines object relations and hierarchies when introducing new elements and scenes. This principle tells the user about the nature of the objects in the interface and prepares the user for “success”. In other words, the user can infer from an experience that is guided by this principle which element is essential to achieve the desired action.
Principle 3 | Parenting: Creates spatial and temporal hierarchical relationships when interacting with multiple objects. This principle defines the connection of object properties with other object properties.
Principle 4 | Transformation: This principle, which serves to keep the narrative flow continuous when the use of object changes, can be explained by the example of a “Submit” button that turns into a progress bar when clicked and into a checkmark when the action is complete.
Principle 5 | Change of value: It serves to create a dynamic and continuous narrative relationship when the value changes. The continuous exchange of text and numbers is common in many applications.
Principle 6 | Masking: Familiar to designers from static design, this motion design principle enables seamless transitions through the exposed and masked regions of an object.
Principle 7 | Overlay: This principle allows users to overcome the lack of hierarchy and designers to position objects in order of importance in non-3D spaces.
Principle 8 | Cloning: The transformation of one element into multiple elements serves to establish continuity, relationship, and narrative.
Principle 9 | Hiding/dimming: Similar to masking, but unlike masking, this principle makes it possible for the secondary element to appear on the screen in a transparent and less visible form.
Principle 10 | Parallax: This principle makes it easier for the user to focus on primary actions and content while maintaining design integrity.
Principle 11 | Dimensionality: When an element disappears in a 2-D design space, for example by folding back and creating a brief 3-D illusion, a narrative framework is created.
Principle 12 | Dolly and zoom: Inspired by cinema, this principle ensures the fluidity of motion from long-shot to close-up and vice versa.
Meet Digital Panorama
As a design studio that offers impressive solutions from ideas to visuals and animation, we offer both physical and digital product design services, making it possible to get the right result with the right strategy. With our competence in CGI and animation technologies, we design and animate timeless content suitable for digital touch-points. In doing so, we adopt the trends and principles closely followed by the user experience community. Visit our website to learn more about us.
