The most popular mistakes in the animation of websites and applications

1. An animation where it is not needed

Try to find the animation in the picture above. Right – it’s not there, because a 200-500ms response can cost you your life.

A simpler example: all sorts of terminals, new ATMs, which sometimes just twist in an attempt to animate the interface on 2015-level hardware. If you have to use this diabolical machine in order to get your hard earned money, user experience is annoying 🏏

Two reasons: one – the picture on the screen moves too slowly, the second – why even need it there?

Well, and even simpler: all sorts of online stores plumbing, handyman ordering services and other similar sites. The animation of how my order flies into the task list is not much needed, when you have only three buttons in the header and the task list is signed “Here, dear, are your tasks” or something shorter.

2. Too slow animation

Try to make the slider animation not 100-200ms, but 500 – and the patient (ouch, user) will run away. Any animation must fit within 100-250ms, any faster will not be noticed. Anything done beyond 250ms should be carefully considered, based on 4 principles:

What reward, pleasure, and understanding brings the user this animation?How often will users see it in 1 session?Surely it can’t be made faster?Can it be done differently?If you do want to leave an animation >250ms, be sure to test it. Yes, the very A/B test that will most likely show that it doesn’t belong here.

3. Frequently repeated animation

Let’s imagine a hypermarket where the average number of purchases is >3. Now let’s imagine that every time (!) when adding an item the user sees a 2-3 second animation of the item flying into the cart across the screen. Naturally, this causes a torrent of not the most positive emotions.

Or another case. The user just exits the app, comes back in and watches the cartoon about the app starting up again (which can be avoided because the app loads 200ms instead of 500ms).

Or the third. When navigating between pages of website services – each one displays a lot of different animations. The first time you might be interested, the second time you’ll be annoyed, the third time you’ll walk away.

4. Trying to improve problematic UI with animation

The simplest example is all sorts of “callbacks” and other notifications that appear, at times, on old and inconvenient sites. These notifications often stand out in bright color, flicker and persistently draw attention to themselves.

But – it doesn’t work when the user can’t find information about the service itself or the details of its delivery, which he needs. Therefore, it is better to think about UX (usability), draw a concise design, mark the CTA buttons with a separate color that will stand out, but not irritate.

5. Making a cartoon out of an app, a website

That’s a lot of animation for one action

I think it’s pretty clear from the title. Animations everywhere are unnecessary for anyone, ever, unless you’re introducing another Pixar competitor. With animation you can present a new product, like Apple does on its website, and each animation should have its own target audience.

For example: we have two cranes. Yes, yes, we are talking about the usual taps that everyone has in the kitchen. Faucet for 3000 rubles does not need animation, because it is a device that is chosen primarily by price (just to be something) and size.

A designer faucet for 50000 rubles will be more appropriate animation on the website of the manufacturer, because it clearly shows its size (often – non-standard), an example of the place of application (often – too big or too small), examples of the appropriate color scheme surrounding the faucet (yes, let’s raise the faucet to a cult), and otherwise explains graphically the idea “For what to pay”.

6. Make an endless loading animation

The animation is as strange as possible…

A spinning circle for tasks where the deadline for the function is clear is not the best solution, because the user does not know when it will finally get there. It takes the user out of comfort, because waiting is annoying and the situation is not under the user’s control.

Hence, if possible (and even if not) it is better to use a percentage or other way of animating the loading. The main thing is that this method was understandable to the user, for example, filling in the picture.

7. Not to do animation at all

Ignoring animation is also a serious mistake. Animation is all around us-in every device we use, in almost every app, and on almost every website. Animation makes us feel good because it reinforces the positive effects of our actions.

Not the best, but understandable example of feedback

We clicked on the slider -> it moved at the speed we noticed it -> yes, we did what we needed to do and made sure we clicked exactly there.

On mobile interfaces, where even carrying a shovel in your pocket – it’s still sometimes hard to see the settings screens – this is especially important. Google uses animations, as do almost all leading IT companies.

Don’t ignore animations in your website, app, remember that animations should carry a positive effect, feedback or impressions, test your ideas and have a good weekend!