Best practices

The human eye scans photos and icons faster than anything else on the screen, making them a no-brainer when designing the next user interface. This guide gives you the best practices for applying static and animated icons to your projects.

Wired icons has been designed to work best in bigger formats as decorative and explanatory elements. They represent various characteristics and are designed to be fun, expressive, and modern.

However, incorporating them into menus or buttons may not yield the desired aesthetic result. Instead, consider using System icons. These icons have been reduced to their minimal form to guarantee clarity and readability, even at small sizes.

A user interface (UI) is easier to interact with when icons correctly communicate their meaning. Make sure the icon is easy to understand and conveys to the user exactly what you have intended.

To make the icons do their job, select them with consistency and coherence. Keep the icons from the same family, so visuals stay consistent throughout the entire experience. Remember to maintain consistency in style, color, size, and animation type.

Coherence in the context of which icons you use in which situations is also key. Avoid using the same icon for multiple purposes or different icons for the same purpose.

It takes people about 1/10th of a second to understand the overall meaning of visual elements. Pretty fast, right? Take advantage of this insight and use icons to create an additional, quick-to-decode layer of information. Consisting of visual anchors, it can act as a path for the user to follow in a specific way.

Such a solution can be a great idea for buttons – by placing an animated icon, you will attract the user's attention rapidly and, at the same time, give them a quick hint of what the button is for.

This is also helpful for longer text or multiple paragraphs. If you are dealing with a "wall of text" at which the recipient may have trouble maintaining focus, put icons between different text parts to create a visual point of separation. For already separate paragraphs, such as descriptions of the features of your product on the homepage, use the iconographic system to state the idea you are presenting in a particular place. Make sure that the selected icon correctly represents the meaning of the paragraph. Remember, icons should reinforce a given message but not replace it.

Color is a design principle with enormous possibilities. Combined with an iconographic system, it can either improve your interface's usability or make it even more inefficient. Generally, using one color throughout the icon set is reasonable. However, there may be situations where using a different color will be useful.

Use the color cues to show the different states of the clickable icon (hover, pressed, clicked). You can also effectively communicate an error to the user by displaying the warning icon in red.

Animated icons are a highly effective way to drive engagement with your site. You can integrate icons that generate motion or noise for a notification depending on your needs.

Icons can also support your branding and show customers more of your company's personality. They can also give customers insight into your product's features and how it can improve their lives. Animated icons can also generate curiosity among your customers and encourage them to explore more of your products.

Icons that utilize motion can also convey more meaning than static ones. This can help you make the most of the limited real estate on each web page.

When, in the real world, you press the switch on your router, you immediately know if you have done it correctly - the button will change its position, or the LED will light up. Such instant feedback is extremely important for people in the real and digital worlds. In the case of digital space - you are operating without this added physical context, so it is even more necessary to take care of this aspect.

It's possible to give users proper feedback through icons. A checkmark can show users that the purchase process was completed successfully, while a warning sign can tell them that the password entered is wrong.

Combining the icon with motion is taking the user experience to a new level. Use the potential of animation states to smoothly signal to recipients the different statuses - when the trash is empty, full, or when they make an action to empty it. This approach has a lot of potential implementations, all of which enhance the usability of your product.

Also, keep in mind the states of the elements so the viewer knows they are clickable. What does the icon look like on default, hover, and pressed? You can implement different methods to distinguish these states from each other. Use motion, color, or another design principle to achieve the desired effect.

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.

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. Try to add a 2000-5000 ms delay between the looping sequence. This helps create an appealing aesthetic.

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.

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.

The length of micro-interactions shouldn’t be too long, especially with commonly repeatable actions such as saving changes, clicking radio buttons, or interacting with animated icons in the menu. Motion length in such places shouldn't exceed 500ms (0.5 seconds) for animated icons initiated by the ‘click’ trigger.

A user may like a longer animation the first few times they click it, but this will quickly change. Clicking this button several times 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 icons triggered on hover is between 1500-3000 ms (1.5-3 seconds). The more complex the symbol, the longer the animation may take.

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

At Lordicon we put maximum focus on delivering quality over quantity. This is why you can be sure that when using our resources, you are getting the highest quality animation. However, if you find yourself in a position of outsourcing animation to an external vendor, this point will guide you on how to overcome some common 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.

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.

As well as the motion itself, we also need to keep in mind the meaning of the movement. Sure, it’s great if the animation supports and strengthens the intent of the icon, but 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.

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

Users frequently access complex dashboards or multi-level menus with a specific purpose in mind. Since they want to get to the feature they need and finish their task as soon as possible, they greatly value efficiency and scannability. And this is where the power of icons comes in.

By adding appropriate icons to each menu item, the viewer is given visual cues that facilitate scanning the text (remember, the information presented as an image is processed faster by humans than text), thus completing the chosen goal.

Some icons could represent multiple actions and features. Such examples are the heart and the star. Because these icons are often used interchangeably to symbolize favorites, bookmarks, or ratings, their particular meanings are difficult to recall and understand. The solution is not to avoid these icons altogether but to consciously decide on one of them and clearly explain to the user the function behind it.

Animation is a very powerful tool when making a product accessible. For example, when we want to make something stand out, in 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 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.

You shouldn’t 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 at the frequency or speed of flashes, so that the triggers are far less prominent or more manageable.

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

Be sure to test any icons you wish to add to your site. Even if you think it's easy to understand their function and meaning, your customers might not. Test out any new icons you wish to add to your site with an outside audience to see if they understand what the icons mean.

You'll want to test any icons you're adding to a site for the following attributes: