Applying Animation: An Independent Study on Motion in Mobile App Interfaces
A case-study survey of real mobile apps (Snapchat, Pinterest, Tinder, HBO, Spotify, among others) analyzing how animation choices affect usability and perceived quality, organized around why an interface moves, how it moves, and common failure modes.
License: No open license — used with the author’s personal permission, not for redistribution
Key points
- Motion should serve one of three purposes: drawing attention to an element or a change, defining or reinforcing a spatial relationship between two interface states — an image that expands to fill the screen while keeping one or two edges in place reads as the same surface growing, not a jump to a new one — or establishing atmosphere or character consistent with the product’s own purpose. See Motion Design.
- Multiple moving elements should choreograph as a single, predictable movement consistent with the interaction driving it — the survey found the best uses of animation pair tightly with the gesture or action that triggers them, and the worst uses feel disconnected from it.
- Reversing a motion’s direction for the opposite navigation action, and only for the opposite action, keeps the interface’s spatial mental model intact — sliding forward and back through a hierarchy in the same direction, rather than opposite ones, was found to be a common, confusing failure.
- Both too much and too little motion undermine an interface: gratuitous animation reads as childish and erodes an app’s credibility, while an app with a deep, complex navigation hierarchy that relies only on instant crossfades between screens gives up motion’s ability to help users track their position in that hierarchy.