This gives interactions a more memorable experience and builds character for your brand. If your animation makes a user widen their eyes, turn the corners of their lips, or give a light chuckle, you’ve made an appealing interaction. The primary movement of the My Collection category being selected and moved to the top is reinforced by the rest of the screen’s upward movement. It’s a subtle and sometimes unnoticeable nudge of affirmation.
It reiterates the main action so the user can be sure of what’s happening. When it comes to transitions, if it’s too fast or abrupt of a movement it’s easy to leave users confused secondary animation makes sure that doesn’t happen. Exaggeration directs focus and makes it clear that the user should pay attention.Įxaggeration can emphasize both confirmation and error states. This can manifest in a shaking notification bell, or in response to an interaction error. ExaggerationĮxaggeration is exactly what it sounds like: making something more dramatic in order to call attention to something or to make a point. The submit button only appearing after the user has started typing the review sets the stage for what action they should take next. This helps establish hierarchy and clarifies the action flow for the user. As they transition through screens, staging animations bring focus to what should be addressed next, or call attention to potential interactions that could be initiated. In the case of interfaces, good motion design leads the eye to the important content. Staging is all about setting the scene for what’s about to happen. Straight lines of motion keep this app clean and professional, while addition of the soft easing make the movement feel more natural. Whether you want your product to be received as technical, goofy, or graceful, altering the arced motion can make it feel true to the brand’s character. Typically only mechanical objects move in perfectly straight lines, while objects with more organic qualities move in arcs. The direction in which an object moves is telling of the type of object it is. When objects abide by natural law, where they belong and where they are going is more intuitive to users, and just plain feels better.Īs panels are interacted with, the shadows, layers, and speed change according to the laws of physics. All objects maintain a set weight and volume and are subject to forces such as gravity, friction, and inertia, so any result of movement should reflect this. Using the concept of solid drawing is crucial to developing spatial relationships between panels or information. Solid drawing refers to treating shapes as if they are solid objects, and are therefore subject to the natural laws of physics. This principle is more or less the basis of Material Design. Related: Improving UX with Pixar’s 22 rules of storytellingīy looking deeper into these principles, we can pull out valuable information about how each can be used functionally to create a better experience for our users: Solid drawing Using them as a guide, we can give feedback and provide clarity in order to more effectively communicate with our users.
While motion designers know these principles well, looking at them through the lens of user interfaces allows us to add an aspect to the principles that weren’t there before: function. These principles are meant as a guide to creating the illusion of natural movement in character animation. One of the most commonly referenced resources for animation techniques is Disney’s 12 Principles of Animation, introduced by Frank Thomas and Ollie Johnston in the 1980s. “Motion is no longer merely a way to delight the people using our products, but a functional tool that makes experiences easy and fun.”
What we can do is develop a usable motion library by studying traditional animation principles and learning how to apply them to abstract shapes and patterns such as those we see in digital interfaces. There are little to no resources to teach best practices for page transitions or show common patterns for loading screens. Establish hierarchy and spatial relationships between objectsĪnimation in the context of user interfaces is still a very new field.Well, motion can help us tell that story in less time and with more clarity. Most of us have heard the time-old (and still true) saying that good design is about telling a story.
Motion is no longer merely a way to delight the people using our products, but a functional tool that makes experiences easy and fun. More and more frequently, designers are acknowledging the importance of motion design in the context of user experience.