Motion design use can enhance usability in many ways. However, when used carelessly, it can easily create the opposite effect. In this post, we will discuss what motion design is, why it’s helpful (and potentially detrimental), some references designers use for guidance, and product implementation best practices.
What is motion design?
An article I found on Adobe’s website captures it best:
“Motion design is a discipline that applies graphic design principles to digital products through the use of animation and visual effects.” - Adobe
Discipline is one word that stands out in this definition because it alludes to careful, thoughtful, and deliberate planning and execution. Well-designed motion requires exactly this, and it should result in a more intuitive and informative UI. Humans naturally have a high sensitivity to motion, due to survival instincts, so motion has a high likeliness of capturing users’ attention. Designers can take advantage of this by implementing it at the right moments of interaction. However, for this same reason, it can distract the user at inopportune times and make their experience less pleasant. We will discuss some specific examples later in this article.
When motion design is an afterthought or something that is carelessly slapped on at the end of a project, it can damage usability, overall product experience, and brand perception. Humans’ natural sensitivity to motion means that motion can become overly distracting to user goals and draw attention when/where it is not needed or desired.
Why is motion design important in UX?
To dive a bit deeper, most use cases for motion design in UX can be organized under two categories (with some overlap); feedback and state change.
Feedback assures users that their actions have been acknowledged by the interface. Have you ever clicked on something and wondered if the system “did anything”? This is a concept called change blindness. Motion design as a mechanism for user feedback can help prevent that. For example, an animated loading bar may assure the user that a recent click has been recognized and that the next page will be visible shortly. A lack of feedback can leave the user clueless, potentially causing multiple submissions or even an early exit.
State change refers to letting the user know that the interface has switched to a different state. For example, read-only switching to edit mode or a page that is loading switching to one that is ready for user input. Another example is a state change from one page to another in navigation. When an iOS application zooms into its own icon upon a user tap and then zooms back out to the main screen when exiting, this can create a sense of hierarchy and spatial recognition in the navigation. Further, motion design can give users clues about how to interact with a product. Think about a downward arrow flashing at the bottom of a page, which hints at the user to scroll down.
Motion Design Principles
If you’ve ever taken an introductory course on motion design or animation, you probably learned about Disney’s 12 Principles of Animation. Heralded by some as “the Bible of animation”, this set of animation guidelines were created in 1981 as an effort to produce realistic animations that adhere to physics.
Disney’s 12 Principles of Animation:
- Squash and stretch
- Straight-ahead action and pose-to-pose
- Follow through and overlapping action
- Slow in and slow out
- Secondary action
- Solid drawing
The fact that these guidelines were designed for animated films/entertainment purposes has not stopped motion designers in other fields (like UX) from referencing them and adopting them in their work. This same fact, however, is a reason that the 12 motion principles are not ideal as a single source of truth for motion design work in UX. What we’ve seen emerge today are company-specific guidelines pertaining to animation and motion.
These guidelines address the delta between motion for efficient UI and motion for entertainment purposes. They also reflect voice and tone for their respective companies. Some examples are Google’s Material Design, and Apple’s Human Interface Guidelines. As the field becomes more mature, we are also seeing thought leaders in the UX space share their own guidelines and supporting research via books, blogs, articles, videos, conferences, and even tutorials. Some examples are NN/g, Adobe, and UX in Motion.
UX designers use many different tools to design for motion. Let’s look at 3 of the most popular tools and how they compare.
- Figma is the most popular tool for UX designers and using the same tool for motion design eliminates stakeholders from having to learn another tool, including viewing the design, consuming its design specs, and transferring files.
- Fairly easy to create simple animations, which are suitable for UI.
- Creating multi-layered animations (where 1 user interaction requires multiple components to animate, and each component requires unique animation specifications) is a convoluted process compared to other tools.
- Creating multi-layered animations is a simple process. Principle makes this easy due to its “timeline” functionality.
- A proprietary file type can make handoff of design files and specifications complicated; The software (Mac only) is required for anyone to open the file and view the animation specifications.
- Design specifications require more manual extraction than other tools (finding in the software and writing down, rather than copying/pasting).
- Most suitable for multi-layered, complex animations.
- Lottiefiles extension (a downloadable add-on to After Effects) makes developer handoff easy by automatically generating code developers can copy/paste.
- Steep learning curve
- May be overkill for UX; and more suitable for marketing/branding purposes.
There are many other UI motion design tools used by designers such as Framer, Axure, and even Apple’s Keynote. I won’t be doing a comparison of all, but hopefully the aforementioned three provide an idea of how different software offers unique strengths and weaknesses, depending on use cases and team structures. I encourage exploring the different options, trying out demos, and working with your design and/or product team to determine the best tool for your situation.
Now that we’ve discussed the role of motion design in UX, references designers use, and tools, let’s talk about some best practices.
- As with other aspects of design, it’s important to discuss motion design opportunities as early as possible with your design and product team. This will allow adequate time and attention for prioritization, planning, and execution.
- Include all relevant stakeholders when discussing motion design plans. This includes your design team; perhaps there are existing processes or learnings that can be used to your advantage. This also includes members of your product team to discuss handoff and review.
- Gather existing resources pertaining to company or product specific motion guidelines. If none exist, brand guidance related to voice and tone can be helpful in making motion design decisions that adhere your company’s aesthetic.
- Include animations in user testing and/or design critique sessions.
- As with other aspects of design, keep accessibility as a requirement; for example, keep animation at the point of focus (remember, humans are highly distracted by animations in their peripheral), test everything with a screen reader, and consider including an option to reduce motion.
Motion design is becoming increasingly important in parallel with the rapid rise of technology and humans’ dependence on interfaces for daily tasks. Hopefully this article has provided you with high level information on why motion design in UX is important, resources, tools, and helpful implementation practices. Ideally, it will help and inspire you to identify new opportunities for motion design, prioritize it, dive deeper, and contribute to the growth in research and practice pertaining to this UX specialization.