Motion is an often overlooked aspect of design that can have a significant impact on the user experience. There are some challenges with motion design, so it is important to limit its usage. When used effectively, motion can help guide the user’s attention, provide feedback, and enhance the overall feeling of interactivity and polish in a user interface.
How Motion Design Can Help
Motion can be used to guide the user’s attention by animating elements in the user interface. This can help draw the user’s eye to specific areas of the screen, such as important information or calls to action. An example of this is a button that pulsates or grows in size to make it more prominent and encourage the user to take action.
Motion can provide feedback to the user by animating or changing in response to an action. This can be as simple as a button animating or changing color when clicked, or a notification popping up on the screen. This type of feedback helps the user feel more confident that their actions are being recognized and creates a sense of fluidity in the user interface.
Motion can enhance interactivity and polish in a user interface by animating elements smoothly and naturally. This can make the user feel like they are interacting with a more sophisticated and well-designed product, especially on mobile devices where motion can compensate for the smaller screen size and limited real estate.
3 Broad Examples of Motion Design
Spotify: Spotify uses motion in a number of ways to improve the user experience. For example, when a user hovers over a song in their playlist, the album art will start to animate and spin. This creates a sense of interactivity and makes it more engaging for the user to browse their music.
Airbnb: Airbnb uses motion to help users visualize what it would be like to stay in a particular rental property. When a user scrolls over a listing, they are treated to a short video that shows the property and its surroundings. This helps to give users a better sense of the space and helps to make the booking process more immersive.
YouTube: YouTube uses motion to improve the user experience by displaying thumbnail previews and animating videos to help users navigate the site and find content among other ways. This makes the site more engaging and interactive, improving the user experience.
It’s About Telling a Story
Effective motion design should be about telling a story visually, rather than just adding flashy or unnecessary animations for the sake of it. While it can be tempting to include a lot of fancy animations and transitions, it’s important to remember that too much motion can actually distract from the user experience and make it feel cluttered or overwhelming.
Instead of trying to cram as many animations as possible into a user interface, it’s better to focus on creating a few key animations that serve a specific purpose and add value to the user experience. This could include things like highlighting important information, guiding the user’s attention, or providing feedback on user actions. By keeping the motion design simple and focused, you can help create a more cohesive and enjoyable user experience.
In short, when it comes to motion design, it’s important to remember that less is often more. By telling a story visually and using motion to enhance the user experience in a meaningful way, you can create a user interface that is engaging and effective.
Bad Motion Design Can Make People Sick
It’s important to note that motion design can sometimes cause motion sickness in certain people, particularly if it is used excessively or in a way that feels disorienting or jarring. This can be a particular issue on mobile devices, where the small screen size and close proximity to the user’s face can exacerbate the effects of motion sickness.
One example of this is the parallax effect on the Apple iPhone’s home screen, which causes the background image to move at a different speed than the app icons when the phone is tilted. While this can be a visually appealing effect, it has been known to cause motion sickness in some users. (You can find more information about this issue and how to disable the parallax effect on the iPhone here: https://support.apple.com/guide/iphone/motion-iph0b691d3ed/ios).
It’s important for designers to be mindful of the potential for motion sickness and to consider the needs of all users when creating motion designs. While motion can be a powerful tool for enhancing the user experience, it’s important to use it in a way that is appropriate and respectful of the user’s comfort and well-being.
Final Thoughts
Overall, motion is a powerful way to improve the user experience. By guiding the user’s attention, providing feedback, and enhancing the overall feeling of interactivity and polish, motion can help to create a more engaging and enjoyable user interface. Above all focus efforts on telling a story. If you aren’t telling a story with motion then reassess how motion design is being implemented.
This is the first in a series discussing motion design.
Simon is a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.
