It’s 2014 and lots of apps are looking the same. Flat design is here for the foreseeable future and with it a definite lack of personality. If everything looks the same how do you differentiate?
I’m going to go out on a limb here and say the answer is with animation and motion. Animation is now a key facet in how an interface is experienced and understood. A search for shots tagged “animation” on Dribbble reveals designers are using animation to enhance the user experience. In this post I want to categorise some common UI animations that I’ve noticed and explain what I think their purpose is.
Animation to transition
Let’s start with an animation effect that’s ubiquitous: a transition. A transition is a change from one state to another over time. A smooth gradual transition will help to ease a user into a new screen rather than abruptly forcing it upon them.
Tweetbot 3 uses a transition to guide the user into viewing attached content.
This animation is also an example of how a transition can help the user understand how to interact with an app. By bringing the attached content to the fore while also subsiding the listing the user won’t feel like they’re lost. This affordance also helps the user understand how to return to the previous state.
Animation to focus
The animation below implements a build-in effect to transition to a new UI state.
Notice how each element animates separately, this focuses the users attention on to one element at a time. Animations like this enable a designer to control a users visual focus, directing their attention to what’s most important on screen.
Animation to delight
Now this is a hard sell as it has little effect on usability but If your goal is to make a memorable app, then adding animations which pique a users attention is a wise choice. Here’s an example:
This interface element could easily have been built without any animation at all. But would you remember it? It’s touches like this that separate good from great and enable your app to stand out from the crowd.
With transition, focus and delight we now have a framework for describing UI animations. Which is exactly what I intend to do right here over the next number of weeks, I hope you stick around.