Great Animations Make Great Apps

By Ben Johnson. The first in our series of blog posts by members of the Raizlabs team of developers, designers and product managers on various aspects of the world of mobile development.

Animations can make a world of difference in the user experience of a mobile app. Most of the time, we don’t even notice these animations in the same way that we rarely notice the environmental sound effects (by foley artists) that are added to most motion pictures. It is important when building mobile apps to remember that animations can be a powerful tool and can often do more for a user’s experience than the interfaces they inhabit. They Inform, Enable, Welcome, and Delight us. Below are a few examples (from iOS) of great animations that fit into these four categories.

1. Animations that Inform You

When developers animate an interface, it isn’t always just for kicks, lots of times animations help you know more about the app that you’re using. The simplest animation is present in almost every single app: navigation and the slide of the screen’s contents from right to left.

 

Tweetbot - Sliding the screen from one view to the next is common in most apps with deep content offerings.

 

Facebook - Tapping the menu button at the top left slides the main page to the right of the screen, revealing hidden functionality but also letting you know how to get back to where you were.

 

Mail – The trashcan is a well-known and commonly referenced animation. When deleting an email the message is sucked right into the trash. Though it is a bit silly, it’s hard to misconstrue the action that was just taken. If you look closely the mail message actually folds up and the trash can shakes a little bit afterwards. Subtle.
 

SolidWorks – Don’t forget that loading animations, progress bars, and status spinners are animations too! These types of animations perform a critical function: alerting you that something is still happening even though you can’t use the app yet. The next time you see one, imagine how frustrated you would be if it weren’t there.

2. Animations that Enable You
Animations aren’t just about informing you, they also enable you to take advantage of more space, find hidden functionality, and perform tasks that wouldn’t be possible in the current context.

 

Sermo − Reconfiguring the screen when the keyboard appears. These kinds of animations help you focus on what’s important in your current context.

Apple Folders – In iOS 4, Apple introduced folders to store and organize more applications on your phone. Tapping a folder splits the screen letting you know that this new view lives between your typical homescreen. Because of this animation, tapping outside of this folder to return to the homescreen is a more intuitive gesture.

Maps – The pin on the map view pops in to place to both identify the exact area where an item appears on a map, but also to indicate to the user that this is an object that is alive and interactive.

Lock Screen Camera – If you haven’t seen this before, tap the camera button on the bottom right of your iPhone’s home screen. This animation helps coaxe you to slide upwards on the screen and teaches you a faster way of accessing the camera.

 

3. Animations that Welcome You
Launch animations, though often neglected, are an important part of every app. It’s the first interaction you (as a developer) will have with the people that are using your apps. First load animations set the stage for a high quality experience and tell your users that the app they are using is crafted by people that sweat the small stuff.

SolidWorks – The loading experience can be a painful one for a conference app that spends time downloading long lists of information. When we built the SolidWorks app, we wanted to make sure users were greeted with a fun animation that not only welcomed them to the experience but highlighted some of the lesser used features of the app.

 

4. Animations that Delight You
Last but not least are those animations that delight users. Their purpose is less clear than animations that welcome you. Instead, these animations go the extra mile, and in some cases go a little too far. It’s a fine balance but done correctly can continuously delight you even if you don’t even know it.

 

RunKeeper – Though a subtle touch, when refreshing information within the app, instead of the standard spinner that appears in most apps, RunKeeper has an animated runner moving in place at the top of the screen.
 

Just Landed – The turbine animates while data is loading.
 

Passbook – It would be wrong to leave out Apple’s newest app.

——————————

If you’re a developer, designer, or app enthusiast you’ve probably seen quite a few of these animations and while they may seem trivial and obvious, someone made the decision to create them and a significant amount of time was spent bringing them to life. Whether your animation Informs, Enables, Welcomes, or Delights your users, I hope you’ll know that you’re not alone in sweating the small stuff. At the end of the day, it’s the little things that count.

——————————

Ben Johnson is a Product Engineer here at Raizlabs and an Animations Aficionado among other things. You can read more of his thoughts at http://freetim.es where he posts on a regular basis about mobile, product development, and the weather.