Micro- animations.

What a micro-animation is

A micro-animation is a short interface movement in response to a person's action. A button dips slightly when pressed, a field lights up on focus, a list item shifts gently on hover, a tick is drawn rather than simply appearing.

These movements last fractions of a second, and people usually don't notice them consciously. What they do notice is the feeling: the interface either responds or seems dead.

A good example from the world of wearables: in augmented-reality headsets, the object you are looking at pulses almost imperceptibly. No flashes, no sound - just a confirmation: “I can see you're looking at me.” That is the essence of the technique.

Let's look at why an interface needs motion, where it works, where it gets in the way and what rules to follow when designing it.

What it does for the interface

Motion solves four practical problems; it doesn't decorate the screen.

It confirms an action. The person pressed - the interface reacted. Without feedback, doubt creeps in: did it work or not? And a second press follows.

It shows relationships. A card that expands into a full-screen view explains where the new screen came from. An abrupt swap of content offers no such explanation, and the person has to search the screen again to work out where they are.

It directs attention. Motion draws the eye more strongly than colour or size. This can be used to highlight a newly appeared error or a new element.

It masks waiting. A filling progress indicator or a skeleton of the content to come makes the same delay feel shorter, because the person sees a process rather than emptiness.

Of the four, the first is forgotten most often. A form with no feedback on submission is a common cause of duplicate enquiries and irritation. Other typical losses on the path to an enquiry are covered in a separate article.

How it looks in Russian services

The technique stopped being exotic long ago. In ticketing services, a date in the calendar doesn't just light up on hover - it bounces slightly, giving a physical sense of selection.

In banking apps, switching between card tabs comes with a light inertial bounce that mimics the movement of a hand: the screen behaves like a physical object, not a set of pictures.

In investment apps, a change in asset value isn't just updated as a number - it visually shows the movement, creating the feel of a live market rather than a static table.

All these examples share one thing: the motion is tied to meaning. It wasn't added “to look modern”; it explains what is happening.

The rules it follows

• Keep it short. Feedback on an action lasts fractions of a second. Motion you have time to consciously examine is already in the way.
• One movement per action. If a button changes colour, size and shadow and bounces when pressed, attention is scattered.
• With believable physics. Acceleration and deceleration make motion feel natural. Uniform movement looks mechanical.
• Consistent across the whole product. Different speeds and characters of motion on neighbouring screens make the product feel stitched together from pieces.
• Non-blocking. The person must be able to carry on without waiting for the animation to finish.
• Respecting system settings. Operating systems have a reduced-motion mode for those who find animation uncomfortable. It has to be taken into account.

The last point is often skipped, yet it is a matter of accessibility: for some people, excessive motion on screen causes physical discomfort.

When motion gets in the way

There are situations where animation makes an interface worse.

The first is a task a person performs many times in a row. Checkout, filling in a table, working in an admin panel: what looks pleasant on first acquaintance turns into a delay by the hundredth repetition.

The second is weak devices and slow connections. An animation that stutters makes a worse impression than no animation at all. Speed requirements on mobile are covered in our article on mobile optimisation.

The third is trying to cover up a problem with motion. A beautiful loading animation doesn't compensate for a slow server response: the person still waits, just with entertainment now.

The fourth is decorative motion with no function. Elements that move for no reason distract from what the person came for.

Where to start on your own site

There's no need to roll out motion across the whole product at once. A sensible order starts with the places where feedback is critical.

1. Buttons and links: hover and pressed states. This is the minimum without which an interface feels lifeless.
2. Forms: highlighting the active field, a smooth appearance of the error hint, a clear button state after submission.
3. Loading: instead of a blank screen, an outline of the content to come.
4. Transitions between sections: a link between what was clicked and what opened.
5. Appearance of new elements: an item added to the basket, a new message, a fresh search result.

After each step, check the result on a phone and on a slow connection, not just on a work computer. What else affects usability and how to spot it is covered in our article on usability, and why usability is directly tied to sales - in the article on UX/UI design.

Why it deserves attention

Micro-animations don't catch the eye - that is the point. But they are exactly what lies behind the phrase “I don't know why, but this product is pleasant to use”.

There is a practical side too. Clear feedback reduces the number of repeat presses and mistaken actions, and a sense of responsiveness raises trust in the service - especially where a person leaves their data or pays.

That said, motion is no substitute for the basics. First a clear structure, readable text and working forms, and only then the details. Animation on a poor interface makes it dressed up, not usable. We work on interfaces at this level as part of web design and development, and what a site that does its job looks like is described in our article on the elements of a company website.