A good transition tells the person where they are and what just happened, in a fraction of a second, and then gets out of the way. A bad one decorates. This note is about telling the two apart, and about the cost of getting it wrong on the phones most Indian users actually hold.
Many of the patterns below were popularised in Adrian Zumbrunnen's article of the same name, published by Smashing Magazine in 2013. We recommend reading it. What follows is our own working view, shaped by building for mobile audiences in India.
Orientation: tell people where they went
Long pages create a quiet problem. Jump to a section by an anchor link and the page cuts instantly to another place. The reader has to work out what moved, and whether they skipped something. A short animated scroll turns a blind cut into a visible journey. The skipped content is now a choice, not an accident. The same logic applies to opening a menu, a drawer or a search panel: show where it came from and where it will go back to.
Meaning: small movements change what a button says
A plus sign means add or open. Rotate it a quarter turn and it becomes a cross, which means close. The movement does not decorate. It teaches the next action, and it works without a label. Look for places where a state change already exists and the interface could explain it with motion instead of text.
Familiarity: borrow gestures people already know
Drag and drop feels obvious now, but it had to be taught. Solitaire shipped with Windows 3.0 in 1990, and one reason it did was to get new users comfortable with a mouse, dragging cards across a table. Pull to refresh, introduced by Loren Brichter in the early days of the iPhone and made famous by Twitter, works because it links the wish for more content with the action that fetches it. The best interactions line up what people intend with what the screen does.
Progress: reduce effort where people are most tempted to leave
Comment boxes and enquiry forms often show every field at once and scare people off. Show the one thing they came to do first, and reveal the rest as they begin. Progressive disclosure is a transition in time rather than in space, and it consistently makes long forms feel shorter.
The cost side
- Speed: a transition that stutters on a mid-range phone is worse than none. Keep them short, animate cheap properties such as opacity and position, and test on a low-end device.
- Motion sensitivity: some people get dizzy or distracted by movement. Respect the system's reduced motion setting and make sure everything still works without animation.
- Restraint: if everything animates, nothing stands out. Choose the three moments that matter most and leave the rest still.
- Clarity of state: after the movement ends, the screen should make sense on its own. Never rely on the animation to carry the meaning.
Where transitions go wrong
- Automatic carousels that move before the reader has finished the first slide.
- Loading spinners that run longer than the thing they are covering for.
- Parallax and scroll effects that make text drift while a person is reading it.
- Transitions that only exist because the template included them.
Each of these confuses decoration with explanation. A useful rule is to remove the animation and look at the page. If the meaning survives, the animation was a flourish. If the page becomes confusing, the animation was doing real work and deserves care.
A small case from this site
On our own mobile menu, a tap on the menu button opens a full screen list, and the phone's back gesture closes it again instead of leaving the page. That is a transition of intent: people expect back to undo the last thing they did. The visual movement is quick and the sense of place is preserved. It took more work than the animation and matters more to the people using it.
How to test a transition
- Watch someone use it without explaining it, and note where they hesitate.
- Switch the animation off and check that the page still makes sense.
- Run it on a cheap phone with a throttled network and watch the frame rate.
- Check it with the keyboard and with the reduced motion setting turned on.
Slow connections change the question
On a patchy network the main job of a transition is to make waiting feel honest. A grey outline of the page that fills in as content arrives tells people something is on its way. A spinner that runs for ten seconds tells them nothing. Where speed is outside your control, show structure early, load the most important image first and avoid any movement that makes the page jump when content arrives.
Before adding any transition, ask what the person would be confused about without it. If the answer is nothing, leave it out. If the answer is something specific, you have found a transition worth building, and you will know how long it should last.
