Assembling interactive icons.
Best practices

While animated icons offer some enjoyment to users, we must be mindful that they don’t guarantee the success of your message. Following these best practices will help you avoid the usual pitfalls of incorporating animation, and ensure your audience react favorably to their inclusion.

Key takeaways
  • Avoid constantly looping icons. If you are tech-limited by using GIF only, set a long delay time between each loop. Too frequent loops can be a major distraction, especially for those with attention deficit disorders.

  • Don’t overload your content with animated icons, as you’ll distract from the message you’re trying to convey. Find the sweet spot.

  • Avoid any kind of extreme flashing or flickering in your user experience as it could harm people with motion sensitivity disorders

  • Avoid unrealistic animation. If an animation looks or feels out of place, the overriding user feeling is going to be one of confusion.

Try to avoid looping animation

Don’t assume that a constantly looping icon will work in all cases. There’s always a point at which there’s too much. For example, using them as a website loader is a good use, but in a standard dashboard, they just become an unwelcome distraction.

Icons that are constantly animated in the dashboard become a distraction. Consider setting them up to play on hover.

If you have an animation on your page that loops, blinks, or scrolls, this can be a major distraction, especially for those with attention deficit disorders. Ultimately, they’ll lose focus on the page, and in all likelihood, move away from it as a result. This isn't an ideal solution.

Sometimes, technology won’t allow you to add animations to a presentation or email marketing campaign. You may need to use GIF files, which can be set to a loop or played once. If you are looping, try to add a 2000-5000 ms delay between the looping sequence. This helps create an appealing aesthetic.

An animated icon designed to work as occasional animation doesn’t work with a perfect loop.

An icon designed to work as an occasional animation can work as a constantly looping sequence, but only when combined with 2-5 second delay.

Keep it simple

Too many animated icons on one page, especially when set all on loop, won’t deliver the intended effect. While you may want to distract the user, you don’t want to take their focus away from the main task at hand.

Too many animated icons may become a distraction, especially when set on loop. This will harm the user experience.

Try to reduce the number of animated icons. You can also set their animation triggers to hover, so they don’t distract user attention. This will make for a positive user experience.

Remember, the animation is there to support your message, pointing the user in the right direction. Too many animations or transitions and the user’s gaze will be averted from the goal. They need to be relatable, so you’ll need to stick to some ground rules.

Too many transitions and unnecessary screens with animations divert users’ attention from the main goal. This lessens the experience.

Make your interactions quick and hassle-free. A subtle animation on completion will be enough. It will do its job without creating unnecessary distractions.

The length of the micro-interactions shouldn’t take too long. These micro-interactions shouldn’t last too long. This is especially true with commonly repeatable actions, such as saving changes, clicking radio buttons, or interacting with animated icons in the menu. Motion length here shouldn't exceed 500ms (0.5 seconds) for animated icons initiated by the “click” trigger.

Animations that are too long end up out of sync with the click action.

Quick animations delight, and keep up with the click speed.

A user may like a longer animation the first few times they click it, but this will quickly change. Clicking this button several times times a day may result in the longer animation becoming a significant distraction, harming the attractiveness of your user interface. Remember, our goal is to draw user’s gaze, not to distract them.

The same situation occurs with decorative animated icons that initiate on hover. People's time is valuable, which is why longer animations will not meet with positive feedback. We have found that the sweet spot for animated symbols initiated on hover is between 1500-3000 ms (1.5-3 seconds). The more complex the symbol, the longer the animation may take to complete.

To long animation burns the delight gaze and becomes an unwelcomed distraction.

Make your animations straightforward.

If you need to present several steps, consider breaking it down and delivering several instead of one very long animated icon.

Avoid unrealistic animation

At Lordicon we put maximum pressure on delivering quality over quantity. This is why using our resources, you are sure, that you are using the highest quality animation. However, if you find yourself in a position of outsourcing animation to an external vendor, this point will guide you how to overcome some commonly faced problems.

The first thing to remember when you plan to add animation to your project is whether or not it’s natural. If an animation looks or feels out of place, the overriding user feeling is going to be one of confusion.

Familiarity is the key to keeping your user on board with your message. If an animation bounces unnaturally for no reason, or it somehow breaks the natural laws of physics, it’s probably not going to fit the purpose.

Animations that break the natural laws of physics leave the user unsettled.

Correct dynamics help users associate movement with real-life situations.

Anything that forces you to question the order of things is a negative type of attention. Irregular movement is an example of an animation that doesn’t quite fit with the real world, and can leave your user feeling somewhat unsettled.

So, you need to design your user experience around this. Smooth motion and accurate movements will be more relatable and as a result, more likely to be accepted.

Try to avoid unnatural 3D movements.

A correctly animated 3D spinning cube

An incorrectly animated walk cycle doesn’t reflect real-life physics.

A walk cycle done accurately is instantly recognizable to the user.

As well as the motion itself, we also need to keep in mind the meaning of the movement. It’s great if the animation supports and strengthens the meaning of the icon. Conversely, if the animation doesn’t convey the message accurately, then it will confuse the user.

Disorienting the user destroys the icon’s message, which in turn can put your users off your product.

The wave and wiggle animations here don’t support the meaning of a home security icon.

Keeping the animation organic strengthens the meaning of the icon. This adds real value.

In a nutshell, every movement must serve a purpose, reflect real-world physics, embody precision, and communicate clearly.

Think about accessibility

Animation is a very powerful tool when making a product accessible. For example, when we want to make something stand out, by using motion we won’t exclude those with color vision deficiency or low vision by relying exclusively on color to communicate contrast.

However if we take it too far, motion is trickier for a user to process. The last thing we want to achieve, when designing animated icons is to instigate dizziness, nausea, disorientation, migraines, or even seizures.

For this reason, you need to design your animations with both accessibility and aesthetics in mind.

Using Flashing elements

You shouldn’t really need to incorporate any kind of extreme flashing or flickering in your user experience. Users with motion sensitivity disorders or who are prone to seizures are at risk if you do, so try to find ways around this.

For example, you can look to the frequency or speed of flashes, so that the triggers are far less prominent or more manageable.

Extreme flashing may cause issues for some users.

The same animation, executed in a smooth, harmless way.

Visual Impairment

For those with visual impairment, consider using equivalent text so that accessibility tools like screen readers can also convey your message. This is especially important if the icon is key to understanding the context of the content.

Ultimately, accessibility shouldn’t be an afterthought, but a core facet of your design.

Icons without labels are often misunderstood and cause confusion

Labeled icons ensure the meaning is conveyed easily and is consistently understood.