Authentic motion. Moving through space. Meaningful transitions. Micro-interactions. I pored through Google looking for why animations in mobile apps are so important, and while I found reams of terrific guidelines on how animation can achieve user nirvana, I still didn’t find a lot on why.
Why do we find mobile animation to be so crucial to an app’s success? It’s a question that’s important to me; I want to be able to convince customers that Studio for Xamarin's attention to animation is a big deal. Our development team spends a lot of valuable time on perfecting animations in controls so you don’t have to, and it’s become a cornerstone of the product. Our goal is to have the best animation a third-party control can offer. But to justify all that work, I want to understand the inherent value of mobile animation, and what it does for the user. Setting aside how to achieve great animation, and when to use it, and what to use, I’m thinking about why we should care about any of it. Sure, we know that an uneven transition is jarring, and pulls the user out of the app experience, like a flickering bulb draws your attention away from what the bulb’s supposed to be lighting. We can all agree that when we swipe up, a smooth scroll feels satisfying. But why?
Google’s Material Design guidelines puts it well:
Just as the shape of an object indicates how it might behave, watching an object move demonstrates whether it’s light or heavy, flexible or rigid, small or large. In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity. Motion in material design should embrace the familiarity and real-world behavior of physical objects, without sacrificing elegance, simplicity, and beauty.
In other words, because I’m interacting with my phone directly, I expect my phone to behave like objects in the real world. I want my phone screen to feel real. When I’m holding a phone in my hand, it becomes a temporary extension of my body. I’m not someone who sleeps with her phone on her pillow, or arguing that we should all be plugged in 24/7. But for the times when I am plugged in, touching a screen, I’m physically affecting the phone in a pretty intimate way: it’s not through push-buttons or dials or keys or a mouse; it’s me, touching the screen and effecting change.
When I swipe a piece of paper on my desk, it catches a breeze; it drifts to the floor. When I type on my keyboard, unless I’ve been eating too many lunches at my desk, the keys respond immediately by moving up and down at a predictable speed concurrent with the speed of my (highly advanced) hunt-and-peck three-finger method. If I erase a whiteboard, it erases only where I’ve touched. When I turn the page in a book, the page moves in accordance with my muscle movements, no faster, no slower. My phone has replaced, or at least supplemented, most of those tasks. I swipe. I turn pages. I type. I erase. And because I’m doing it with my own muscle movements, holding it in my hand—not through a wire, viewed at a 24-inch-distance from a giant monitor—my natural expectation is that the experience will be similar. We’re creatures of muscle memory and habit; turning on an electric car can be jarring when it lacks the audio and sensory cues that go along with a familiar internal combustion engine.
An entire generation of kids are growing up hearing the shutter-click of a camera as nothing more than a sound effect, but for the first generation of digital camera owners, that sound was necessary for understanding that the picture’s been taken. The best apps duplicate, then enhance, the real-world experience of handling and understanding physical objects.
My favorite example is Koi Pond, that classic app that allows the user to touch the surface of water and chase away fish as they glide past. The beauty and realism of the animation captivates: the visual and audial ripples of the water, the fish swimming in variable directions, the fireflies skimming just above the bobbing lily pads.
Bring those qualities to a business app and we begin to understand the power of a tactile, beautiful, near-holographic representation of information. Spending the extra time developing a delightful, realistic, meaningful animation can be the difference between interacting with an app and inhabiting it.