Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of communication yet devised for quick mass appreciation. - Walt Disney
An interface without motion is dead. Motion is the gate pass for iOS 7 – it breathes life into interfaces and allows an app to communicate in ways its static counterparts can’t. Animation in mobile interface design is not new; successful apps have been implementing it for years. Now at the dawn of iOS 7, many app designers are revisiting their apps and stripping them down, visually, to the flattest, most minimalistic versions. Previously, skeuomorphism bore the weight of explanation; if it looked like a knob, it controlled volume. If it looked like tattered paper, it was for writing notes. If it looked like fine corinthian leather, it must show where your friends are in real time (sorry, Forstall).
In this new ecosystem of stripped down interfaces, your app will need thoughtful animations to communicate the skeuomorphic things that it left on the cutting room floor. Luckily, there are new tools available to developers that make the logistics of putting elements in motion easier than ever. Express caution with these new tools because it’ll be easy to over-indulge, creating unnatural interactions equivalent to today’s hyper-skeuomorphic apps. That’s why, just as each pixel is mapped out, each animation should be thoughtful – designed and labored over with a specific purpose.
Animation in iOS 7 plays the role of skeuomorphism previously: it explains how things work and smooths over the sharp corners. - Benedict Evans (@BenedictEvans)
How do you design the way something feels and reacts?
As designers, we have to figure out how to communicate with motion or risk getting left behind – producing stagnant, lifeless apps that don’t mesh with the ecosystem and leave users wondering how to interact with them. Herein lies part of the problem. It’s hard enough to get a pixel perfect implementation, but how do you get animation ideas from your head to a developer who will interpret them? Can you design an interactive, dynamic experience with a tool like Photoshop or Sketch? Maybe, well… not really. How much are you willing to leave open to interpretation? “It should bounce to the left until it hits the side of the screen.” What type of easing do you want to use? What weight does this item have? Without detailed, moving examples you’re leaving room for others to interpret your vision and extending the time of development.
The Right Tool Amplifies Your Message
Designing iOS 7 apps is going to be extremely difficult without a dynamic UI compositing tool like Quartz Composer. The interface is motion. - Dustin Curtis (@dcurtis)
Sketching and describing your animations isn’t quite enough. While there is certainly a giant gap in the market for new motion interface design tools, there are a few existing tools to help you express your ideas. Facebook has reinvigorated Quartz Composer after revealing it played a large role in their Facebook Home product design process. Some claim it’s too complicated, poorly designed or on Apple’s chopping block. Others use After Effects, and a few do indeed use Photoshop’s motion tools. The learning curve for these tools varies with Quartz Composer probably being the highest; however, I believe the benefit of interaction that QC brings is well worth the extra time to learn it. From QC you can simply send your qtz file to the developer so they can interact and get a feel for the intended results. It leaves no questions unanswered.
In the coming months, we’ll see many new apps and some that are completely re-imagined. Motion design in mobile apps is already critical to the success of your app and will continue to become more and more important as we move forward. Don’t let your app lose the spotlight because it’s too lifeless or (even worse) alienates your users. Right now, motion is the unsung hero of user experience, but it won’t always be. Now’s the time for you to get busy animating.
Recommended Links
Quartz Composer Download Link (requires developer login)