Checklist for Using Icons In UI
Icons are one of the most frequently used elements in graphical user interfaces. In this article, I want to share a simple checklist that you can use to ensure that the icons you use work for your users.
This content is also available in a video format:
1. Easy to recognize
Clarity is the most important characteristic of a great interface. Unfortunately, icon design often breaks clarity.
Icons must first and foremost communicate meaning. When it’s not clear what the icon represents, it immediately loses its meaning and becomes nothing more than visual noise.
What makes an icon great is the fact that users can understand its meaning without reading a label.
A few simple rules will help you avoid using icons that don’t convey the meaning.
Try to use icons that are familiar to your users
User’s understanding of an icon is based on previous experience. That’s why it’s better to use familiar icons rather than unique.
- Rely on universal icons. Icons like home, print, play, and search are so common that they don’t require any explanation.
- Conducting research. Check the icons used by your competitors. Its likely your target audience is familiar with those icons.
Don’t use icons with conflicting meaning
Icons that could represent multiple things should be avoided. For example, the ‘Heart’ and the ‘Star’ icons can both mean liking or putting an item to the favorites. When used together they can confuse users.
Test icon meaning
Don’t listen to the phrases like “People will use our app daily; they’ll learn the meaning of our icons.” When people see an unfamiliar icon, they simply skip it. Thats why you should always test your icons!
5-second rule is an effective way to test your icon:
If it takes more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate a meaning
Test scalability
If you design a product that will be viewed on different screen sizes and resolutions, you need to test if your icons can still be recognized at small sizes such as 15 x 15 px.
Pair unfamiliar icons with labels
If you still want to use a unique icon, consider using a text label alongside it.
Don’t redefine the meaning of the icon
It’s fairly easy to confuse users by changing the meaning of an icon. When the icon’s functionality differs from the expected, you confuse users.
Don’t reinvent the wheel!
For a long time, Google Docs used icons that look almost like a hamburger. Most interfaces use a similar icon to represent the main navigation menu. But Google redefined its meaning and used it as a ‘Back’ action. When users clicked on this icon, they were redirected to the Google Docs home page.
2. Visually pleasing
It’s possible to convey brand personality through illustrations, color, and icons. Done right, icons can certainly enhance the aesthetic appeal of a design.
Reduce the number of graphic details
KISS principle works for all elements of UI including icons. Keep icons as simple as possible, and avoid unnecessary complexity by following two rules:
- Limit the number of colors used. Use tints and shades of the selected color to keep the design clean.
- Reduce the number of visual attributes by focusing on the basic characteristics of the object. Try to keep the design schematic because schematic design translates well on different screens and resolutions.
3. Properly sized
Icons should be good targets for users. Leaving too little space for icons on mobiles is one of the most common mistakes among designers. When you design for touch, make sure that the icons are sized large enough to be easily touched by a finger. The recommended target size for touchscreen objects is 7–10mm. Also, make sure to add padding between targets to prevent incorrect taps.
4. Consistent
Consistency is a key principle in design.
Consistent design is intuitive design
Both usability and learnability improve when similar elements have a consistent look and function.
Internal consistency
The set of icons you choose to use in your product should have visual unification. They all should have the same style. Ideally, they all should look like they were designed by the same person.
Here are some of the rules you need to follow to create a sense of unity:
- Use the same color scheme for all your icons.
- Use the same shape and other styling attributes (such as the size of borders) for all your icons.
Consistency with a platform
Ensure the icon style is consistent with the platforms you target. They will be most recognizable to your users.
Consistency with product family
If you have a product family, make sure that the same (or at least similar) icon style is used in all products.
Learn how to design user interfaces
Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.
