Motion in UX Design
by Nick Babich
Motion is essential part of the language that designers use to communicate with users. It is used to describe spatial relationships between states and functionality of individual elements. Thoughtful motion in design can enhance the user’s experience.
Let’s talk about the fundamentals of motion design, why and when you would want to use it in your UI, and how it can help you make your UX better.
Motion-based design
Motion tells stories about our products — it shows how an app is organized and what users can do in it. Motion drives user journey — it defines navigation and creates a more natural experience by adding a level of depth to the interaction design.
Why Does Motion Matter?
When users interact with your product, they might ask following questions:
- “What’s most important on this screen?”
- “What can I do next?”
- “Did I completed my task?”
Questions like this might reveal opportunities to use motion to enhance the experience. Motion help designers create better UX :
- It drives user’s attention to particular object and hints at what will happen on tap.
- It provides guided focus between views.
- It provides a visual feedback.
Besides that, motion-based design brings another important thing into UX: delight. We all appreciate the value of humane, delightful products. That’s why designers should experiment and find solutions that feel more natural and evoke an emotional connection.
Motion Language
Motion-based design elements can be seen in a variety of forms, including transitions, animations and even moving textures that mimic 3D depth. Here are some places for integrating motion-design in the UX workflow:
Driving Users’ Attention
Motions can draw user’s attention to a specific area. Good motion design makes UI more predictable and easier to navigate — it puts emphasis on the right elements at the right moment of time.
Motion design also gives the viewer a clue as to what’s about to happen. A few elements can work together to create a clue.
Makes UI Spatially Logical
State changes in many products involve hard cuts by default, which can make them difficult to follow. In cognitive science this phenomenon is called change blindness — when sudden change in visual stimulus is introduced and the user does not notice it. This usually happens when a new page loads. Users need to understand where things come from and where they can find them again so that the new state doesn’t feel like hard-cut for them.
Motion design can help designers to fill the comprehension gap by defining the spatial relationships between screens and individual elements. It helps people orient themselves within the interface and establish visual relationships. In example below, during the transition, the user is guided to the next view and the surface transforms from one state to another:
Confirming Actions
Motion reinforces the actions a user is preforming. Visual response can increase user engagement and even delight the user. For example, lets look at how animation can help when entering a wrong password in iOS:
Upon first glance, a shake animation on incorrect password entry seems unnecessary. Why to create an animation when I can show a small error badge? However, in reality, a user might spend a couple seconds trying to read an error message and understand what went wrong. But when the same users notice the animation, they instantly understand the problem. This animation is so recognizable it has become the primary feedback to confirm the action.
Brings Delight
Motion can make your user experience truly delightful and memorable. By injecting subtle motion into design, you can make users feel like they are interacting with something that’s has a personality. A simple attention to detail is often what signals to the people that we’re thinking about them.
Delightful details help add a tactile element to interactions because they make users forget that they just tapping a piece of glass and instead makes them feel like they’re interacting with real tangible objects on the screen.
But don’t forget that the main challenge with motion is making it something that doesn’t distract users from the thing they’re trying to do.
Tools for creating animation and motion
Here is a collection of tools you can use to create any animated effect mentioned in this article:
Conclusion
Motion language can help us create a more natural way of interacting with things and it’s absolutely critical to the design of the future. We need to say goodbye to static user interfaces and create interfaces which much more dynamic and feel alive.
Thank you!
Follow UX Planet: Twitter | Facebook
Related articles:
Originally published at babich.biz
Learn how to design better products
Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.
