There is a lot of talk recently about motion principles and how they relate to UXUI and opinions are all over the board. One of the sites that I stumbled across lately is http://www.ui-transitions.com/#home, where you can find a good amount of motion categories laid out for you. Also one of my favorite websites is http://capptivate.co/. Although the site can be heavy for your browser, it captures some of the most beautiful uses of motion in gif format. With the popularity of flat design and the slow death of skeuomorphism, interfaces now have more freedom to put motion principles to work without the experience feeling awkward or broken to the user.
Character
Any half-done animation design can drastically change the user’s perception of the quality or care put into a product and disregard it completely. Building user loyalty is a key component to the creation of any product and the last thing you want is for an animation to be thrown into the mix that acts like a grenade for the entire experience. The right motion principles consistently built into a product can greatly improve it’s character and personality. And can have a positive impact on the overall user experience. 
Dots is one of my favorite games and it has a clean aesthetic mixed with fun motion. This motion is consistent throughout the entire app, helping it stand out and create a unique character and personality.
Orientation
Orientation describes the way in which a logical connection can be created and visualized between objects and object’s states. Often used animations in this category are directional motions. They give an impression of the location and the structure of information. Orientation describes the object’s environment and therefore the system’s information architecture. For that reason, Orientation invites the user to explore the user interface. 
Yelp does a great job of maintaining simple interface elements that expand to enrich the user experience and give the user a sense of space and organization.
Relational
The relationships and context of elements on the screen can be communicated with motion. Motion can allow the interface to communicate similar skeuomorphic principles without being concrete. One way to do this is to imitate real world motions when users are interacting with the interface. The motion of how a page turns can have a similar motion of a page turning in real life but without superfluous embellishments. 
Intuitive
The main function of motion should be more than embellishment, it’s principle goal should be to help the user’s awareness of where they are in an experience and how they got there. 
Emotive
Motion can also help create an emotional connection with your applications. This is especially prevalent in games where character animation is bouncy and fun, drawing the user into the product’s environment and eliciting an emotional response. The mood set within an app should be consistent and add to the overall product experience. 
Subtlety
One of the keys to adding motion to interfaces is subtlety. Too much can take your product in the opposite direction and cheapen the experience. Use motion to focus the user’s attention on important elements as well as guide them through the experience so they know where they are going and how they got there. Overall, motion done can greatly improve the perceived value of an application and strengthen your brand’s overall identity, look and feel, and experience.
Recent Comments