Editor’s note: Tim Donnelly is the co-founder of Storehouse.
It’s easy to forget that it was only eight years ago that the first iPhone introduced the world to the idea that you could actually touch software. Graphically, the UI was filled with gradients, textures and bevels that referenced real world objects to make the user interface look touchable and familiar — a term that we call skeuomorphism.
Fast forward to today. Skeuomorphism is out and flat design is in on iOS, Android and Windows Phone. The new generation of design is less about looks — it largely doesn’t matter if it’s flat, round or textured — and more about how the interface works, moves and functions in predictable ways that are instantly understandable.
As the role of animation grows, it’s more important than ever to carefully consider how your UI moves, from transitions that enhance usability to tiny details that make people fall in love with your app. Here are some ways to make your app feel truly special.
What does it mean for animation to be realistic? Things in the real world have weight. They bounce. They don’t start and stop moving immediately. The same principles should be applied to animation.
If you’re using your iPhone, for example, and dragging a photo in a certain direction with your finger and then stop, the photo shouldn’t just stop moving. It should keep going in that direction with the same velocity that your finger had when you lifted it. If it just stops, it won’t feel natural.
When animating, it’s important to respect the behavior of real objects. Your animation will feel more comfortable and expected.
If a piece of your UI moves in an unusual or surprising way, it can feel jarring and disorienting. If you display an image by sliding it up from the bottom of the screen, for example, you should hide it by sliding it back down. It’s important to be consistent in your animations because it puts users at ease when the little things make sense. They then have the mental capacity to focus on the parts of your product that are unique.
People know how objects move in the real world, and they expect your app to comply with that knowledge.
Provide immediate feedback
We’ve all used bad software. Software that freezes. Software that does something strange or unexpected when we interact with it. Or worse, software that ignores us.
This may seem obvious but it’s an important and often forgotten point: when the user taps, scrolls, or does anything else that provides input, make it clear to the user that their action did something. Simply put: when a user presses a button, make it obvious that your product has recognized the touch.
Use meaningful transitions
Most mobile products are built around a hierarchical navigation model, so users are constantly navigating in and out of content. An example is navigating through iOS settings: Going deeper into the display and brightness setting moves you to the right. Going back moves you to the left. It is very clear and consistent and creates a strong sense of place for where the user is inside the product.
It can sometimes be difficult for people to form a mental model and remember how they got somewhere within your app. Be sure to use transitions when the user is navigating between content in your product. You want it to feel as though they are truly navigating a 3D space — aware of where they are, where they came from, and how to get back.
Whether your product is for iOS or Android, there are animations built into the operating system that feel familiar. These are the animations and transitions that are found in most apps that users see countless times each day.
As you add animation to your product, be careful not to reinvent the wheel. For example, one of the most familiar pieces of animation in iOS is the way it uses physics to drive scrolling content. This is seen every time a user scrolls through their inbox, zooms in on a photo, or does really anything on their iPhone.
For these most common animations, be careful not to change things up too much. Some apps build their own scrolling behavior, for example, and the difference is nearly always evident to users. It just feels different. You want users focusing on the unique things that your product does, not on why scrolling a list breaks their expectations of how the UI should feel.
In the same way that animations can help people understand how your app works and focus their attention, unnecessary animations can confuse your users and cause them to lose their understanding of how your product works.
Use common sense. Is there a reason to animate or are you just being fancy?
This applies to the speed of your animations and transitions — keep them short. The user shouldn’t have time to sit and ponder your animation, thinking “I wonder where that button is going?” And, if you need an animation to be long, make sure you allow your user to interact with the product before the animation completes.
While most animations help people to understand and navigate, finding unique ways to introduce animations can help make your app really feel special. Small details help to create trust with your product. If you care enough to pay attention to the smallest details, it implies that the rest of your product was created with care.
There are over a million apps on the App Store now, but only a handful are really pushing the edge of what animation can do in UI design. By carefully considering the use of animation in your app, you can really stand out.
Most of the tips above are possible with the tools and APIs provided in iOS, especially since Apple added the UIKit Dynamics framework. It is very powerful, is built into iOS, and should be sufficient for most apps wanting to use springs and other physics-based effects in their animation. Of course, that isn’t always the case. Facebook developed a custom animation framework for Paper, which is now open source.
Ninety-nine percent of apps should never have to go that far. But it’s important to remember that Apple and Google are building their platforms in the way that works for 99 percent of people’s apps. If your app has very specific needs, a custom solution may be appropriate.