Why is motion design so important to user experience?
Last November, my team and I attended Craig Dehner’s talk at the Shiftseven event in Buenos Aires, which got me thinking about the implications that motion can have on the user experience of our digital products.
He spoke about how animation can help on transitions, affordance, loading time and give character to the user interface:
“It’s very trendy right now to create some really cool button animations and transitions, and that’s considered motion design, but motion design can run much deeper than that”.
How can motion design improve the experience we are offering to the users of our products?
Great UX is all about creating a cohesive experience and telling a good story. That’s why we shouldn’t work on UI animation without keeping the UX in mind, especially after a design is final. Usually, we design separate screens and are not used to think about the transitions between all the states of the experience. Also, how the elements are going to move, usually thinking “it’s just a cool thing to add if we have time”, which makes our experience often feel dissociated.
Incorporating motion to improve the user experience and thinking how the elements are going to move and react to the user interaction is a must from the beginning: movement provides personality, content and can improve usability.
Reflect your brand personality
At the same time, our motion design needs to work in tune with our brand personality. If our brand is playful, the animation should be the same, but if our brand is serious it can’t “jump” as a playful kid. As an example, when you see someone walking who looks sad, you probably see a person with their shoulders down and taking heavy steps, yet when you see someone who looks proud while walking, their movement will be completely different and more secure, his or her chest will be inflated, and their chin will be looking up.
Thinking in motion offers an amazing dimension to explore and work to show how the brand and product are. A great example on reflecting brand personality through motion is Skype, that reflects a playful and flexible movement within the whole app.
http://www.appanimations.com/app/skype
Learn from animation’s masters
Speaking of motion design, a nice way to start learning is studying the “12 Animation Principles” set by Disney animators Ollie Johnston and Frank Thomas in their 1981 book “The Illusion of Life: Disney Animation”. Here is a quick look for all of them:
SQUASH & STRETCH
ANTICIPATION
STAGING
STRAIGHT AHEAD & POSE TO POSE
FOLLOW THROUGH & OVERLAPPING
SLOW IN & SLOW OUT
ARCHS
SECONDARY ACTION
TIMING
EXAGGERATION
SOLID DRAWINGS
APPEAL
Use motion to improve user experience
Yet animation can not only give personality to our digital product it can also improve usability. It provides affordance and connects all the states in the app (even extreme states) while providing context.
It can provide feedback and visibility of the system status. As an example, it can’t only inform the user of the waiting time but also how long something is going to take or even provide information about what’s happening. All loading animations are great but we have to think which communicate the best in our project, maybe the user will need more feedback than just seeing a wheel rotating in a funny way. When uploading, an animation that informs the user of the percentage is always a great way to engage. Another way motion can help the user understand that the app is loading is to animate how the elements appear while they load. How? By providing help not using obvious wheels that sometimes confuse users with bad functioning of the app or the phone. Facebook uses this kind of animation when loading the news feed.
With motion you can also improve the recognition of the actions applied to the object, and the options available rather than recall. A specific CTA button can move to engage the user to tap on it, or an arrow can move letting the user know there’s more info on the left, for example.
When animating error messages, if a password is wrong, moving the blank space to the the left and right like saying “no” can work as a great metaphor. But something we have to take notice is when using metaphors, cultural differences appear. In india for example, moving your head to the right and left is paying attention to the speaker. Craig Dehner showed us how Apple solved this issue by making letters fall from the text field when the password is wrong. So it’s very important to do a profound research of the cultural dimension of the users of our apps when using metaphorical motion resources.
It’s also important to never forget the user control and freedom. An animation should never impede the user to interact with the UI. Motion design is never an ornamental thing: it’s there to improve the user’s understanding of the interface, and it should be a very smart decision that integrates the whole experience. Also, as we have standard fonts colors or icons when we design an app, we should follow the same standards for how the objects are going to move in the app or on the web; consistency is really important. If a loading screens moves up after loading, all loading screens should do the same. Also we have to take notice how motion patterns are working on each OS, and test with users if we are proposing a different animation that is not standard within the system.
Animation is one of the two pillars along with the gestures of mobile design, they complete the “illusion” and provide meaning. However, like user experience, it’s all about teamwork and every member should be engaged in this process from day one in a project. Finally, the designer needs to be in constant communication with the development team to understand and help with the execution of animations.
