The importance of motion for UX design
Motion in software is becoming an increasingly important aspect of modern day human-computer interaction. Partly due to the increasing computing capability of devices, designers can count on the smooth execution of complex animations. But with great power comes great responsibility, and though most designers understand this and don’t just soak their interaction designs in loads of fanciful vivification, it’s still a question of where, when and how to responsibly, efficiently and successfully use motion in interaction designs.
Guidelines
One way to nudge designers towards using motion responsibly and consistently is for domineering players in the discipline to, like for many other aspects of design, set up guidelines.
Unlike Apple, who have a short write-up of animation guidelines listed under the visual design section of their Human Interface Guidelines (implying animations in iOS are mostly visually/aesthetically pleasing rather than important for UX), Google has a more comprehensive section, write-ups and talks on the subject, stressing the importance.
They try to set a standard for motion for designers to use in the apps they design for Google’s Android platform — following four main principles, namely: Responsive, Natural, Aware and Intentional.
Within those basic principles they have a number of guidelines and suggestions on how to use motion in Material Design. They coin a variety of terms, such as Material Response, Point of Origin, Delightful Details and more. These are essentially best practices respecting the aforementioned principles.
The main vision of Material Design is to honour rules of three-dimensional space, and giving objects and characters appropriate dimensionality through visualisation of volume and weight.
A while ago, skeuomorphism was a very popular trend in design. Although not very popular anymore, in motion it is still there in a certain way; mimicking the laws of physics to help the user understand the movement of elements, where certain things live in a 3D space, and the consequences of user actions.
Remarks
While these are some great guidelines thought up by some very bright people in Silicon Valley, they’re still only guidelines — and there are some remarks. For instance, there are people who specifically disagree with certain thoughts adapted in Material Design, like the fact that Google thinks that items that are going out of the screen need to gradually accelerate, but not slow down. Since, to put it in the words of Google’s Material Motion Lead John Schlemmer, “we don’t really care where it stops,” (source).
Of course opinions may vary, but I reckon it would help you sleep at night knowing whether that thing you swiped out of the screen ever stops moving.
Another important remark on simply adhering to Google’s Principles is that if everyone did so, it would make it very hard to be creative or stand out in use of motion in your app. If the motion is the same for every app, could you ever make a user value your app over the competition, using motion?
Other Principles
Not only the ‘giants’ are creating guidelines. In his article, Issara Willenskomer coins ‘12 Principles of UX in Motion’. Based on general animation principles like Disney’s, and his 15 years of experience. He coins several rules of thumb to keep in mind when designing motion.
You should probably read his article, but just as a random example that quite struck me: after stating the difference between ‘UI Animations’ and motion for UX, and why it is important to distinguish between them, he for example notes the difference between realtime and non-realtime interactions, and how to work differently with motion on both of these.
From a UX design perspective it is important to think about these differences and what they mean to the user. This is relevant for the feedback loop you design for your user.
So regardless of how Google would like you to design the motion of that certain interaction, I think it is important to understand why Google would like you to design it that way. What’s the theory behind it? Why does certain motion work so well with certain interactions? Why would you even use motion in the first place — since “good design is as little design as possible”?
This goes back to using your powers as a motion designer responsibly. If you don’t know what you’re doing, you’re probably better off not doing motion at all.
This example above shows icons moving into the viewport in in three rows. However, each button is it’s own separate entity and does a different thing — so it would be more logical if they move individually. The motion contradicts the behaviour, and thus the mental model of the user. These are details, and easily overlooked, but very important for the overall UX flow. Principles like the ones in Willenskomer’s article help to think about what you’re designing and how your elements should move.
The consequences of wrongly using or overdoing motion in your app can be quite serious. Overdoing motion can cause frustration with users, unnecessarily (re)directing their attention, and their mental model can be challenged by wrongly applied spatial patterns, or inconsistent motion. It can also negatively influence your tone of voice: whereas a mindfulness or meditation app can get away with motion that is a lot slower (it might even help the user to calm down), a productivity app should probably be snappier; people want to get things done fast.
However, a subtle and logical animation let’s the user understand where certain elements are coming form and this helps confirm their mental model. It creates a calm and relaxed feeling — the user has the idea that he has control over the situation and that he knows what is going on.
Note: In this example the pattern for assigning the stars is arguably not be the best choice (traditional stars in a row would probably comply better with the user’s mental model of assigning stars) but the motion is clear.
This goes to show that motion can be a very powerful choice to solve UX problems, in some cases arguably even the best design choice.
Shortening perceived loading times
An example of motion (most probably) being the best choice to solve a UX problem that I’d like to address, is the combination with time. Loading screens for example can be perceived to be quicker by the user if there are animations, whether or not funny or celebratory (like Lifesum’s loading animations). This is based on the theory that time perception is a subjective experience (source) This is an article that elaborates on time in the context of UI & UX design that I found quite intriguing.
Tools
As motion is becoming more and more common in applications, we see many tools arise to prototype and test motion in apps, like Principle, and more recently, Airbnb’s Lottie, which makes it a lot easier to get your After Effects animations straight into app/web.
Tools like these are lowering the bar for designers to step in and play around with animations and motion in their app designs, which makes it more and more important for designers to know at least a little about best practices, principles and guidelines for motion design.
Summary
In short: anno 2018 it is important for UX designers to have understanding of motion design, develop a feeling for how and where to apply it based on core principles/guidelines, and especially when not to apply it. There are several cases where motion is a great if not the best solution to a UX problem, one of which is shortening perceived loading times. Tools for designers to get started with motion are more readily available than ever, which stresses the importance of having a basic feeling, responsibility and knowledge to applying it in your UX designs.
Sources & Further Reading:
- “3 Types Of Animations That Improve User Experience” by Roman Kalina https://plat4m.com/blog/3-types-of-animations-that-improve-user-experience
- “Creating Usability with Motion: The UX in Motion Manifesto” by Issara Willenskomer
https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc - “The Airbnb Tool That’s Changing UI Design” by Mark Wilson
https://www.fastcodesign.com/90137495/the-airbnb-tool-thats-changing-ui-design - “Speaking Volumes” by Joshua To https://design.google/library/speaking-volumes/
- “Jedi Principles of UI Animation” by Kit Oliynyk https://medium.com/@adaptivepath/jedi-principles-of-ui-animation-2b88423b1dac
- Google: Motion — Material Motion https://material.io/guidelines/motion/material-motion.html#
- “The Illusion of Time” by Adrian Zumbrunnen
https://medium.com/swlh/the-illusion-of-time-8f321fa2f191 - “The Principles of UX Choreography” by Rebecca Ussai Henderson https://medium.freecodecamp.org/the-principles-of-ux-choreography-69c91c2cbc2a
- “The Crystal Goblet or, Printing Should Be Invisible” by Beatrice Warde http://www.arts.ucsb.edu/faculty/reese/classes/artistsbooks/Beatrice%20Warde,%20The%20Crystal%20Goblet.pdf
- “Spatial Interfaces” by Pasquale D’Silva
https://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9 - “Bringing Mobile Apps to Life Through Motion” by Nick Babich
https://uxplanet.org/bringing-mobile-apps-to-life-through-motion-9472d259b58e - “Motion And Meaning Podcast” by Val Head and Cennydd Bowles http://motionandmeaning.io/
- “UI Animation and UX: A Not-So-Secret Friendship” by Val Head https://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship
- “How To Integrate Motion Design In The UX Workflow” by Mark Di Sciullo https://www.smashingmagazine.com/2016/03/integrate-motion-design-animation-ux-workflow/
About me
My name is Joost Reus, 22, I’m a designer at Triple in Alkmaar and a student at CMD Amsterdam. I’m also a musician, sound designer and audio geek.
