Apple transformed themselves from an also-ran computer maker to the biggest PC-maker, most profitable phone company, and the most valuable technology company in the world by focusing relentlessly on delighting their users. For example, Apple products are typified by their natural and fluid transitions and animations. Although this is only a small slice of the ‘delight pie,’ it is still a critical aspect of a successful application’s user experience, and one that must be studied and planned-for from project inception. The effective use of a smoothly, seamlessly transitioning user interface can really affect the perception of quality and will greatly add to your users’ delight with your app, even if only subconsciously.
Take, for instance, Facebook for iOS, and its transition from hybrid to fully native iOS app. As has been documented elsewhere, the new native experience pulled the app’s average review score to 4 from a lowly 1.5. The new experience is markedly improved, and prominent users describe it as no longer suffering from “lags or screen locks.” What goes unmentioned, though, is that much of the improvement seen in the app comes from subtle, fluid gesture-based animations, like dismissing photos by pulling down on them (ed: this actually feels so natural to me that I always try to pull down on photos on Flickr and am constantly disappointed by the feature’s absence). These animations, mostly subtle and never included in feature lists, are the unsung heroes of iOS app design.
Static, my most recent iOS app, was the first app where I decided early on to implement custom UI animations. Previously, I had only used stock UIKit transitions, so I spent a lot of time studying different apps and quickly iterating on code samples to figure out what felt natural, and understanding where animations began to feel too exaggerated.
My first attempts began with me mocking up my animations in Adobe Photoshop with its Timeline and built-in animation features. After hours of tearing my hair out and getting nowhere, I decided it would be better for me to simply start coding. I wasn’t very familiar with Core Animation, and most of my exposure to it had consisted of snippets I had found on Stack Overflow that consisted of opacity transitions, basic movements, and the like.
In order to get up to speed as rapidly as possible, I dissected AwesomeMenu, a beautifully executed clone of Path 2.0’s action menu control by Levey Zhu. AwesomeMenu’s animations are quite intricate, comprised of rotations, translations, bounces, and z-space transforms. I separated out parts, mixed and matched them, and adjusted values until I had created Frankenstein’s Core Animation Monster. However, the experience paid off in spades and I walked away from this feeling more comfortable with Core Animation.
In addition to my dissection of AwesomeMenu, I spent a lot of time researching shipping apps’ use of advanced animations. Being new to this whole custom animation thing, it was challenging for me to understand exactly how the best apps did what they did. Most UI animations are composed of several simultaneous effects: was an element changing opacity and bouncing in while moving along a path? Was it scaling in from nothing or a small scale version of itself? To help better understand what was going on, I used Reflector to AirPlay the apps I was analyzing to my Mac and screen-captured them. Afterwards I’d scrub through the animations frame-by-frame. It amazes me how many transitions happen in some animations. With study and practice, I became better and better at dissecting them without having to slowly scrub through but it’s still a great exercise to repeat with new apps.
Animation sketch for Static (View larger)
As development of Static began, I started sketching out animations the same way that I sketch out custom UI elements (I love my sketchbook). My workflow is pretty straightforward: I sketch each state of a control and draw arrows to indicate movement. Once I’m happy with how it ‘looks and feels,’ I move into Xcode and create a new app with its Single View Application template, build and refine the animation, and finally move it into my app project once I’m satisfied with its behavior.
Your average user may not ever consciously notice the time you invest in compelling animations, but this can actually be a good thing! It means that the effect is natural. Unnatural, bad animations are the ones that stick out like a sore thumb. Put in the time necessary to build natural-looking, fluid animations. Study existing apps with tools like Reflector. Plan out your animations first on paper, and second in a one-off Xcode project. It’s definitely more of a time commitment than using iOS’ stock animations, but it is time well spent. Your users will be delighted by it.
A few links for further study:
- Meaningful Transitions
- Disney’s 12 Basic Principles of Animation
- Best of 2012 UI Animations
- My Dribbble bucket for UI animations
A few great apps to study: