Creating Usability with Motion
Insight into the value and impact of motion in web experiences based on mental models and UX best practices.
Impact of motion:
Many associate the notion of animation and motion as adding flair and delight with movement, but motion design plays a crucial role in supporting users’ interactions and in delivering a seamless and intuitive experience on the web. Motion and animation can be helpful and communicate purpose and feedback.
- Help align the experience to our expected mental models on how an interaction should behave.
- Be used to better communicate to the user where to focus, what to do next, or what is most important on a page
- Guide how users perceive what an object is, and how it behaves.
- Be a powerful addition to visual storytelling– it can guide a user through a sequence or along a specific action.
Motion helps make a UI expressive and easy to use.
Motion & Mental Models
Mental models derive from human perceptions. It is our understanding of how something should function based on previous encounters and expectations. Individuals apply impressions about how things work and thus form their mental models. This guides our understanding of how certain interactions should occur.
Envision yourself buying something online. What are you imagining? The “add to cart” and “checkout” process. The picture you paint in your mind— that established pattern—is your mental model. It may be trained by past experiences– or driven by intuition. If your mental model matches the way a user interface actually functions, that interface is intuitive. One might say, “The users get it before they’ve even experienced it.”
When those expectations are broken and don’t align with the mental model that can create a huge disconnect in the experience. Whatever gap exists between the mental model and what the user actually experiences results in additional cognitive load, disappointment, and even disengagement.
When the user interacts with an element on the page, there is an expectation of what is to come and a visual response to follow. Imagine these two examples without the transition state and how jarring it would be between frames:
Motion is often necessary to align the expected interaction for an intuitive and seamless experience. Being aware of these mental models keeps us mindful of the opportunities motion can help shape the experiences we build.
Without it, our expected visual response is broken. Motion isn’t just about fancy animation and elements of delight or flare. When we don’t use motion in these important instances– we break that mental model and the user’s experience ultimately suffers.