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.
Be realistic
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.
Be consistent
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.
Be familiar
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.
Use restraint
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.
Be playful
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.