And 5 practical tips for improving the usability of icons
Icons help designers avoid visual clutter, and make UI more aesthetically pleasing. But at the same time, not all icons are universally clear to our users. Usability suffers when users have a hard time decoding the meaning of an icon.
A user’s understanding of an icon is based on previous experience. That’s why it’s always better to use familiar icons.
In this list, we will share a collection of universally understood icons and some practical tips that will help you improve your product’s usability.
5. Mail / Messages
7. User profile
16. Sound / Volume
21. Media controls
1. Platform visual style
Familiarize yourself with icons commonly used on the platforms that you target. For example, all major platforms have different visual style for sharing icon.
2. Avoid adding too many details to icons
Keep icons simple and schematic. Visualize essential characteristics of an object. By doing that you will speed up the design process (it will be easier to design icons for graphic designers) and improve icon recognition (it will be easier to understand the meaning of icons for users).
But at the same time, do now oversimply the icon.
3. Use five seconds test to test the meaning of your icons
If you must design a new icon, always test it. Give users five seconds to look at an icon and ask them what this icon means. If users tell you that they don’t know, this feedback will indicate that the design needs improvement.
4. Use text labels to communicate the meaning
Icon with a label works better than an icon alone or label alone. Text labels can reduce ambiguity and help users decode the meaning of icons.
5. Mind icons location
UIE conducted two experiments to test how people use icons. In the first experiment, they changed the pictures of the icons, but kept them in the same location. They found that users quickly adapted to the new imagery without much problem. In the second experiment, they kept the original pictures, but shuffled their locations on the toolbar. As a result, users really struggled with this. It means that the location of the icon is more important than visual imagery.
Try Interaction Design Foundation. It offers online design courses that cover the entire spectrum of UX design, from foundational to advanced level. As a UX Planet reader, you get 25% off your first year of membership with the IxDF.