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 UX design process.
Icons in UX Design
Think of the purpose
The main function of icons is to communicate meaning effectively. Therefore, before using an icon in a particular place, try to answer these questions:
-
What is the purpose – delight, inform or draw the user's attention to something?
-
Is the icon an appropriate element in a specific location?
-
What do you want to communicate to the user?
Avoid situations where the only reason to use icons is that your design seems empty.
Communicate proper meaning
A user interface (UI) is easier for users 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.
For unique icons (icons that represent distinctive traits or features), also take into account your user's cultural context or characteristics.
Icons don't communicate the intended meaning.
Correctly selected icons communicate proper meaning.
Consistency matters
To make the icons do their job, create 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.
Icons that are not consistent.
Correctly composed icons from the same family and style.
Use universal icons
Take the benefits from icons already universally recognizable and beyond cultural differences, like home, play, stop or pin. They can greatly enhance your website's or digital product's usability, minimizing the user's cognitive load.
Avoid conflicting icons
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.
Star and heart icons symbolize similar actions, which may mislead the user.
A single heart icon with an action description will do its job.
Use labels
Before users click or tap on your icons, they need to know what to expect. In the case of universal icons, it is almost intuitive – a house will typically take you to the homepage or home screen. At the same time, a magnifying glass will help you search for a particular piece of information. But in some cases, a single icon is insufficient – it could not be obvious or could be easily missed. To help resolve this problem, use a text label to make its meaning clear in the context. Labels should be simple and short (1-3 words are optimal). Use action words that indicate what will happen when a user interacts with the button (e.g., buy, continue, subscribe)
Icons without labels are often misunderstood and cause confusion
Labeled icons ensure the meaning is conveyed easily and is consistently understood.
Size of touch target
Make the icons easy to be touched and clicked. It is recommended that the touch target (area beyond the visual bounds of an element) should not be smaller than 48x48 px. What is also crucial, take care of the space in groups of tappable elements.
Color
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 very effectively communicate an error to the user by displaying the warning icon in red.
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.
Icons as visual anchors
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.
Take care of icon states and feedback
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.
Delight your user
Icons are more than conveying meaning to their audience. They also bring excitement, joy, delight, and fun into your design. Consider using animated icons to surprise your audience and evoke positive emotions with their flawless motion.
Encourage for interaction
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. Moving 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.
It’s all about testing
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:
-
Memorability: How much does your audience remember about an icon? Ask your test audience after a week or two to see if they remember how an icon looked.
-
Recognizability: How well does your audience understand the meaning of an icon? Ask your audience if they understand what each icon you wish to add means. You may need to re-design an icon or add a label to clarify its meaning.