We watched a usability test participant get angry at a checkout button last month. She tapped it. It bounced — one of those subtle scale-down-and-back springs that someone on a design team somewhere is probably proud of. Nothing else happened immediately. She tapped it again, harder. Then a third time. The second and third taps registered as duplicate submissions, the API rejected them, and an error toast slid in with its own elegant little easing curve. She closed the tab.
That button was animated by a designer who genuinely cared about the user experience. The animation hurt her.
The "delightful microinteractions" wave that started around 2014 produced some of the best interaction design of the last decade and also more user-hostile UI than the era before it. The trend oversold itself. We're walking some of it back.
The honest case for motion
Motion is information. It can tell a user where something came from, where it went, that an action was received, that a state changed, that a thing they're about to do is reversible. When motion carries information, it earns its CPU cycles. When it doesn't, it's noise that the user pays for in attention, in milliseconds of perceived delay, and occasionally in actual task failure.
Three cases from our work this year where animation made tasks measurably better.
Drag-and-drop reordering on a list
A reservations client had a list view where staff dragged appointments to reorder them. We added a 180-millisecond easing on the drop and a slight neighbor-shift on hover. Task completion time on reordering improved by roughly 15% in our pre/post testing. Reason: users were dropping items in the wrong place and not noticing, then having to undo. The animation showed them where the item would land before they committed.
Form validation feedback
Inline validation that animates in — a subtle color shift and the error message fading down rather than appearing instantly — gets read more often than instant-appearance equivalents. We A/B tested this on a client's signup form last year and the animated version cut form-abandonment-after-error by about 8%. The animation drew the eye to the change. Instant appearance got missed because the cursor was already somewhere else.
State transitions that would otherwise feel like teleportation
A filter panel that expands. A modal that opens. A row that gets deleted. Without motion these read as one frame becoming a different frame, and users lose track of what changed. A 200-millisecond transition turns the change into a perceivable event. This is the original Apple Human Interface Guidelines argument from the 1980s and it's still right.
Three places we'd rip the animation out
Button-press feedback that delays the actual action
The checkout button at the start of this article is one example. We've seen too many. A 300-millisecond ripple effect that defers form submission, a "loading" spinner that animates in over half a second before it starts spinning. If the user has hit a primary action button, the only animation that earns its place is the one that confirms the system received the click. Spinners should appear instantly. Submissions should fire on the first tap. The bounce on the button is a costume, not a feature.
Hover animations on items that need to be scanned
List rows that grow on hover. Cards that lift and shadow themselves. A dashboard with 30 items and a hover animation on each one becomes a visually unstable surface — every mouse pass through the list causes things to move. Users moving from "scan the list" to "click the right one" lose time fighting visual motion that exists to look polished, not to help. We rip these out routinely now and clients rarely notice. The ones who do say the page feels faster.
Page-load animations that gate content reveal
The staggered fade-in. The hero element that slides up before the body copy appears. These were never user features. They're portfolio features. The user came to read the page, not watch it assemble. We did a small experiment last quarter, removing entry animations from a marketing site and measuring scroll-depth and time-on-page. Both improved. The animation had been adding perceived delay without adding anything else.
The principle we use now
Animation has to answer a question the user is asking. "Where did that go?" Animate the transition. "Did the system see my click?" Animate the response. "Is this a valid value?" Animate the validation. If the animation is not answering a user-side question, it's answering a designer-side one, and the user is paying for the designer's answer in time and attention they did not choose to spend.
The checkout button now changes state instantly on tap, the API call fires, and the spinner takes over within 80 milliseconds. There is no bounce. The user who would have closed the tab does not.