Are your animations doing anything? How to measure it
A beautiful animation is not necessarily an animation that works. How to tell whether an interaction actually produces a result: identify its role, spot the indicators that mislead, compare the version with and without, measure according to your traffic, then keep, adjust or cut.
An animation is beautiful, smooth, everyone approves it. It ships, and from there, most of the time, nobody asks what it changed. It is a familiar blind spot: telling whether an interaction is liked is easy, telling whether it does any work is much less so.
Being liked and doing work are two different things. A polished interface gets noticed and helps sell, no argument there. But an effect can be flawless to the eye and still leave behaviour untouched, sometimes even cost a few conversions because it adds delay or grabs attention at the wrong moment. "It feels premium" says something true about the sensation. It says nothing about the result.
The idea here is simple: an interaction behaves like a hypothesis. The bet is that adding it makes people click faster or hesitate less, and that bet can be checked. Here is how: identify an animation's real role, recognise the indicators that mislead, pick the metric that counts and read it against your traffic, then choose between keeping, adjusting and cutting.
An interaction always has a role
An animation never just exists to be there. It usually fills one of these roles, and it is the role, not the effect itself, that gets measured.
- Guide attention. Bring the eye to the next action: a button that shows up at the right moment, an element that enters to point out where to look.
- Confirm an action. Show right away that the click, the submit or the add-to-cart landed. Without that signal, people doubt and try again.
- Reduce perceived wait. A loading skeleton or an optimistic update do not shorten real time, only the feeling of waiting.
- Provide spatial continuity. Show where an element comes from and where it goes, so the interface does not jump from one state to another with no transition.
- Reassure about quality. Mark care at the moment trust matters, often at checkout, a role explored in the micro-interactions that reassure (opens in a new tab).
- Reveal information in steps. Unveil content gradually rather than all at once, to ease cognitive load.
An animation whose role nobody can name is probably decorative. Nothing wrong with that in itself, decoration can have its place, but it carries a cost in weight, delay and attention, and that cost is there whether or not anyone looks at it. More to the point, with no role identified there is nothing to measure: the role is what points to the metric.
The indicators that mislead
Once the animation is live, the first number that ticks up invites a victory lap. Several of those numbers point the wrong way.
- Time on page. It gets tied to engagement. Yet it also climbs when someone is lost, re-reading or hunting for where to click. Rising time can mark friction as much as interest.
- "People notice it". It sounds like a win and is often the opposite. An interaction that guides well goes almost unseen: the action is found faster without quite knowing why. When it is the effect that gets noticed, it has taken the attention meant for the content.
- Scroll depth. It shows someone went down the page, not that the animation had anything to do with it, nor that they did what was expected at the bottom.
- The team's opinion. The people who built the effect meet it dozens of times a day and grow fond of it. Their eye is no longer the eye of someone seeing it once, on mobile, on a slow network.
These indicators share one thing: none of them compares. They describe what happens with the animation, without saying what would happen without it. That comparison is what actually settles the matter.
The real test: with or without
An animation has an effect if the same page without it does a little worse: fewer conversions, less clear guidance, a step crossed less often. Without that point of comparison, it stays an impression.
It is the logic of the control group. In medicine a treatment is judged not on the state of the treated patient but on the gap with one who did not get it. An interaction is judged the same way: its value is the difference between the version with and the version without. That difference is hard to guess by eye, and intuition often has the direction wrong.
In practice it comes down to stating the bet before measuring, in a checkable form: an animated confirmation on add-to-cart should lower re-clicks on the button and drop-off at that step. Now there is a hypothesis, a metric and an expected direction, and all that is left is reading the number on both sides.
Each role, its metric
| Role of the animation | What you actually measure | The false friend |
|---|---|---|
| Guide attention | Clicks on the targeted element, time to the first key action | Time on page |
| Confirm an action | Fewer re-clicks, double submits and rage clicks | "You clearly see the feedback" |
| Reduce perceived wait | Drop-off rate during loading | The real measured speed |
| Spatial continuity | Navigation errors, immediate back actions | A feeling of smoothness |
| Reassure at checkout | Step completion, cart abandonment | "It looks serious" |
| Reveal progressively | Form completion, drop-off per field | Scroll depth |
The principle does not change: you do not measure the animation, you measure the behaviour it is meant to move. When the role is to guide toward a button, the proof is in the clicks on that button, not in a sense of smoothness.
Measuring according to your traffic
The right comparison method depends on a factor that often gets forgotten: volume. A statistical test only means something with enough events to tell a real effect from chance.
On a page with heavy traffic and plenty of conversions, an A/B test settles it, through a dedicated tool such as VWO, AB Tasty or PostHog: one half of visitors sees the version with, the other the version without, and you compare the target metric. Two things to watch. First, measure the click on the target, not the click on the animation. Second, let the novelty effect fade. A new interaction draws attention at first because it is new, spikes at launch then settles. The telling number comes after two or three weeks, not on day one.
Below a certain volume, the A/B test works against you. Spotting a 10% improvement on a 3% conversion rate takes several thousand conversions per variant to be reliable. Many sites do not gather those in a reasonable time, the test concludes nothing, and that silence gets taken for an absence of difference. At that scale, qualitative says more than quantitative.
- The five-user test. Five people meeting the page for the first time already reveal the essentials. What matters is not their opinion but their behaviour: the hesitations, the cursor going back and forth, the moment the eye searches, the remarks like "what's happening there". And at the end: is the task faster and with fewer errors, with the animation or without.
- Session replays. Anonymised recordings of real journeys surface rage clicks, dead clicks and the spots where people stall. Tools like Microsoft Clarity, which is free, or Hotjar record them and flag those clicks automatically. A burst of repeated clicks on an element meant to confirm an action shows the feedback is not being seen.
- The step funnel. The pass-through rate from one step to the next locates the leak. If the step fitted with the animation retains better than before, that is a signal, one to confirm but a signal.
Either way, nothing gets measured without instrumentation. Page views are not enough: it takes events placed on the actions that carry the role, time to the first click on the key element, re-click rate, step completion, dead clicks. An analytics tool that handles custom events and funnels is enough to track them, from GA4 or Matomo on the web side to PostHog or Amplitude on the product side, the latter also covering funnels and A/B tests. Without them, you are back to a gut feeling.
When an animation that works still hurts
An animation can succeed on its metric and hurt elsewhere, because it carries a cost that number does not see. "Does it work" is judged on the net effect, not on one isolated indicator.
- Added delay. A 400 ms transition is 400 ms of waiting. An effect that reassures but delays the key action can lose more conversions than it gains. It is the visible side of what optimizing render performance (opens in a new tab) goes into.
- Fatigue. The flip side of the novelty effect: what charms on the first visit annoys on the tenth. A spectacular intro animation turns into a toll gate for the regular. Hence the value of also looking at the effect on returning visitors.
- Accessibility. Part of the audience turns on reduced motion (opens in a new tab) or copes poorly with movement. An interaction with no calm version leaves them out, a topic covered in the accessibility of interactions (opens in a new tab).
- Mobile and the real network. What glides on a studio screen can stutter on a mid-range phone on a busy network. An animation is judged in real users' conditions, not on the machine that produced it.
An interaction that gains in perceived quality but adds delay, wears out regulars and leaves part of the audience out has not fixed anything. It has moved the problem around.
Keep, adjust or cut
A measurement is only worth something if it leads to a decision. Three cases.
- Keep. The version with does better on the role's metric, with no net cost elsewhere. The effect has earned its place, it stays.
- Adjust. The direction is right but the cost eats the gain: too long, too repeated, poorly rendered on mobile. Shorten it, limit it to the first visit, add the calm version, then measure again.
- Cut. No measurable gap, or a negative one. The effect does not fill its role, it goes.
One idea helps in the grey zone: by default, an effect that proves nothing can go. Every animation has a cost, in weight, delay, attention and maintenance, and it is better spent on what has shown its worth. A site loses no character that way, it gains in clarity.
Beauty does not exempt you from checking
Beautiful and useful are not opposites but one does not bring the other. A spectacular effect that moves no behaviour stays an expense. A quiet effect that makes people click faster or drop off less pays for itself.
What separates the two is not visible at a glance. It reads in a named role, a stated bet, a chosen metric and a comparison with the version without.