Breadcrumb
Level 2 navigation
As the saying goes, a picture is worth a thousand words. And in interface design, icons can communicate far more than text alone – highlighting navigation options, enticing users to engage with your content and streamlining design.
The power of effective icons stems from their ability to present a concept visually and to allow users to process and absorb information in a quick and concise manner. Using icons well allows users to scan interfaces, gather basic information and identify their desired navigation paths.
Icon design and implementation is a crucial, and often challenging, part of creating a usable interface. To aid in their development, we have identified the following tips and observations to avoid common pitfalls encountered and maximise the usability of an icon set.
Use icons sparingly. When icons are overused, they lose some of their ability to emphasise, draw attention and provide navigational cues – ultimately complicating, rather than simplifying interaction with the interface.
Make them simple. Icons need to be recognised instantly to be effective. Most users will pay very little attention to icons whose meaning is not immediately apparent or eye catching. Caution should be taken where several elements or objects are required in a single icon to communicate its meaning. The more elements used the more effort required of the user to decipher its meaning and the greater the possibility that it will be misunderstood.
Make icons unique. Icons can become ineffective if they overlap with others in their set or don’t clearly represent a single concept.
Provide text alternatives for all icons used. Although ideally users should understand an icon immediately, this is not always the case. Factors such as familiarity, imagery, cultural differences and locality all affect a users’ interpretation of an image. Accessibility for users with visual impairments is also an important consideration when providing text alternatives.
Keep text brief. Although it’s important to provide alternative text for icons, ensure the text does not have greater visual prominence than the icon itself.
Be consistent. Maintaining consistency will affect how users learn to use your interface and the degree to which they form intended associations. In our experience, confusion tends to arise if different icons are used to represent the same functionality.
Maintain a style guide. While icons need to be visually distinct, it’s also important they’re consistent in terms of styling and support the overall visual design and branding of the interface.
Words are sometimes necessary. While the power of icons lies in their ability to represent a concept visually, sometimes this is not enough to establish meaning. Although some designers shy away from using words as elements of icons, sometimes a single word is the most effective solution.
Usability is all about effective communication and by harnessing the power of icons your interface can be enhanced in a multitude of ways. Not only setting the foundations for a successful communication platform, but also utilising space more effectively and enriching the overall user experience.