Mobile UX Guideline: For Every Animation, an Equal and Opposite Gesture
It started with small, optional interactions like swipe menus and pull-to-refresh — things without which a user could get by. But more and more apps are relying on gestures beyond the tap for their primary interactions. Flingable cards, edge swipes, and draggable side menus are now the norm, and that norm continues to evolve.
In the short term, this creates confusion as patterns conflict and change. But that’s the inevitable cost of progress in a relatively new space. Over time things will settle down; and while it would be premature to codify human interface standards, we can start to write some guidelines. Here’s my first, inspired by Newton’s Third Law of Motion:
Every animation suggests an equal and opposite gesture.
Or if you prefer, “every transition provides a equal and opposite affordance.”
Not long ago, animation was a hard sell; today it’s a staple of good design. On small screens, animation is essential to preserve context: what just happened, and how did I get from where I was to where I am now? Consider the left-to-right “push” animation of an iPhone drill-down; or the drag-and-slide via which Android’s notification drawer appears.
In 1992, developmental psychologist Dr. Karen Wynn published an ingenious study in Nature demonstrating that infants have basic math ability. Babies were shown a doll, which was then obscured by a screen. A second doll was placed behind the screen — that is, they could see it going there. Then the screen was removed, to reveal either two dolls (the expected result) or one doll (unexpected). The babies would stare at the unexpected result longer than the expected one, indicating surprise: one plus one equals two, not one.
This demonstrates a basic concept of object persistence: if an object goes behind the screen, we assume it remains there, unless we see it emerge. We can’t help thinking in spatial terms. We evolved to survive in the physical world, and that depended on an ability to interpret it rapidly, to make spatial inferences about the signals coming in through our eyes.
I’m a fan of Google’s new Material Design guidelines for that reason: by choosing paper as the metaphor, they give interactions a strong tie to the physical world, even as they reject more photorealistic decoration. And while some describe iOS’s 2013 redesign as abandoning physicality, nothing could be further from the truth. Apple simply took advantage of higher-resolution displays and more advanced animations to represent physicality with fewer textures, gradients, and shadows.
Good transitions take advantage of this by suggesting that the current UI came from somewhere, and that the previous one went somewhere. When I drill down on the iPhone, the previous screen went off to the left, and the new one slid in from the right. When I pull down Android’s notification drawer, it came from the top, and the previous screen is underneath.
Because of our concept of object persistence, animations can also suggest how to get back where we were before. If I want to “drill” back up on the iPhone, it seems natural to push the current screen back off to the right — my brain thinks the previous one is still stashed underneath. To dismiss the Android drawer, I ought to be able to fling it back up off the top of the screen.
In other words, each animation serves as an affordance for its reversal. If we enable that affordance, it often provides a better interaction than the button we’d have used otherwise (e.g., Back or Close).
For instance, an iOS sheets is dismissed via a Done button at the top. If one could dismiss it by reversing the slide-up that produced it — that is, by swiping down —not only would the transition provide an affordance, but one-handed operation would become easier, and dismissal would be faster due to Fitts’s Law.
As always, there are trade-offs to consider. Enabling a swipe gesture across an entire UI means you can’t use it for anything else. iOS had to choose between swipe-to-drill-back-up and a swipe menu on list items, but found a compromise in the edge swipe: if you swipe from the very edge of the screen, you reverse the drill-down. That isn’t easily discovered, but is implemented in the SDK and therefore relatively universal: once learned, you can use it everywhere. Similarly, enabling a downward swipe to dismiss modal sheets would eliminate pull-to-refresh. (But that’s overused anyway, and more often than not just encourages addictive behavior.)
Here’s a great example from Google Inbox. Inbox drills down into an email thread or bundle by expanding it upward and outward. The resulting sub-screen does have an X button to close it (which I think was a good decision). But given the nature of the animation, it feels natural to pull down on the screen to dismiss, and indeed that gesture is rewarded. The whole thing is fluid, delightful, and lightweight — and succeeds in mirroring Inbox’s desktop interaction without feeling out of place.
It’s worth thinking about this rule in reverse, too: for an existing gesture, can you create an animation that serves as an affordance? Mobile Safari is a great example of such an opportunity: currently one can use an edge-swipe instead of the Back button, but it’s not discoverable. Sliding new pages in from the right would help.
Indeed, I can’t think of a situation where this is a bad idea, at least on its own. Again, there are legitimate trade-offs against other interactions; and ROI calculations to be made. But in each case, the animation-reversal gesture itself would benefit users.
Want to ensure your app meets this guideline?
- If your platform of choice gives you this behavior out of the box, use it! Use standard components in a standard way instead of rolling your own.
- If you’re creating a novel interaction, keep asking a simple question: when the UI changes, might the user want to reverse that change? If so, is your transition suggesting a reversal gesture? Could it?
- Having implemented that gesture, is it also worth implementing a more traditional affordance like a Close button, for the sake of discoverability? Could it serve as a teaching tool, mimicking the gesture in question with animation?
Photo credit: rogersmith / Flickr