Motion Ui Design Principles
This blog is a quick look at some simple Ui motion design principles. There isn’t too much documented about this area of mobile ui design and I thought there would be some value in expressing my views. From what is documented already I urge anyone interested in ui motion to check out Pasquale D’Silva http://psql.me/ and Johannes Tonollo’s meaningful transitions http://www.ui-transitions.com/#home.
Also make sure you bookmark http://littlebigdetails.com and http://capptivate.co. (A special thank you to Capptivate.co who allowed me to use their captures below).
These basic principles I’ve outlined focus more on the what and why, rather than the how to of motion / animation. With the increasing emphasis on motion (largely thanks to the more paired back design of iOS 7) its important that it is implemented with the same integrity and purpose as all the other aspects of Ui design. With the exclusion of skeuomorphic design there is now a freedom for content to behave in an unrestricted manner. Gone are the awkward and sometimes absurd transitions that appeared to break all laws of their pre-defined physical environment. Now the space has opened for there to be a much richer identity and defined language or landscape to mobile Ui and motion is very much an integral part of that.
Personality.
The most obvious principle is that any motion or animation should be of the highest standard possible. Apps should look at going beyond “out of the box” motion solutions and making something bespoke and truly engaging. Within the app the motion should convey a distinct character, whilst keeping a clear consistency throughout. Behaving in an expected manner will help maintain a stable relationship with the user keeping them engaged with experience.
http://capptivate.co. https://twitter.com/CapptivateCo
Paper Makes use of a scale overshoot through out the app, giving it a clear and distinct character.
http://capptivate.co. https://twitter.com/CapptivateCo
Dots carries through a very relaxing inertia which is prevalent through all aspects of the Ui. Again making it definable against other apps.
Orientation.
Motion should help ease the user through the experience. It should establish the “physical space” of the app by the way objects come on and off the screen or into focus. It should aid the flow of actions, giving clear guidance before, during and after. It should serve as a guide, keeping the user orientated and preventing them from feeling lost, reducing the need for additional graphics explaining where they are or have been.
http://capptivate.co. https://twitter.com/CapptivateCo
Yelp shows a great example of drawing focus with a intelligent and well crafted animation.
Making keeps the user orientated when drilling down into a category with a simply elegant transition.
National Geographic keeps the user aware of where they are and have been with a good use of 3d perspective.
Context.
Motion should give context to the content on screen by detailing the physical state of those assets and the environment they reside in. Without the restrictions of skeuomorphism the ui is free to behave in any manner with out seeming contradictory to its pre defined environment. Adding a stretch or deform to an object or applying inertia to a simple list scroll can make the experience much more playful and engaging.
http://capptivate.co. https://twitter.com/CapptivateCo
Responsive.
Motion should be responsive and intuitive. It should react in a way that reassures the user, rather than surprises or confusess them. The reaction of the ui, to a users actions, should be complementary and comprehensible.
http://capptivate.co. https://twitter.com/CapptivateCo
Emotive
It should evoke a positive emotional response, whether that be comfort from a smooth scroll or excitement because of a well executed animation transition.
http://capptivate.co. https://twitter.com/CapptivateCo
Restraint.
Steer clear of distracting or even confusing the user with too much animation, Subtlety is key. It should be used to maintain or help focus. Not take it away. Also don’t over elaborate aspects such as screen transitions. This becomes increasingly frustrating to the user over time. Or if they are simply left waiting for what seems like “forever”. (there are no examples of this as its a not to do - and i’m not in the habit of kicking peoples work in the nuts)