Best Icon Practices
Icons are a great way to add visual impact to your website without being too distracting. They are compact, light weight, and can add tremendous value to your website’s usability. But, if not used properly, can also cause great confusion and become frustrating for your users.
There are a few icons that enjoy mostly universal recognition from users. The icons for home, print, and the magnifying glass for search are such instances. Outside of these examples, most icons continue to be ambiguous to users due to their association with different meanings across various interfaces. Other icons frequently misunderstood by users include the heart and the star. These icons are often used to represent favorites, bookmarks, featured items, and ratings from other users. Not only does the precise functionality associated to these icons vary from site to site, but these two icons compete with each other. As a result, these icons and their exact meanings are hard to memorize and interpret precisely.
A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.
Here are a few other tips and some resources for icon sources:
- Keep the design simple and schematic.
- Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.
- Test the icons for recognizability: ask people what they expect the icons to stand for.
- Test the icons for memorability: ask a repeat set of users if they can remember the icon’s meaning after being told what it represented a couple weeks earlier.
Here are some great icon resources:
