Icon Usability - Best UX Tips and Design Guidelines

Andrew Kucheriavy

Icon Usability - Best UX Tips and Design Guidelines

Icons are all around us: websites, smartphones and software - we even see them offline, such as in signage. Some icons like home, print, play, and search are so common that they don't require any explanation - we know exactly what they do whenever and wherever we see them.

UX Benefits of Icons

When icons are used correctly, they bring many UX and usability benefits. Here are five reasons why you should incorporate icons into your user experience:

  • Icons are easily recognizable. If you use common icons in your designs, your audience will recognize them instantly, helping with navigation and tasks.
  • Icons save space. This benefit is especially important on mobiles where using icons can save valuable real estate.
  • Icons make good touch targets. The recommended icon size for mobile devices is 1 cm by 1 cm, an ideal target for tapping with your finger.
  • Icons are universal. The meaning of icons can be easily understood, even if users don’t speak your language.
  • Icons are aesthetically appealing. When well-designed, icons can make a website or app more visually attractive.

Use icons to save space and improve recognition 2.jpg

Common UX Mistakes

Unfortunately, there are many mistakes that UX designers make with icons that results in a poor user experience.  The biggest one is assuming that users will understand what icons mean:

When Microsoft Outlook designed an icon-only toolbar, users did not know what icons represented. This resulted in poor UX and frustrated users. Once icons with text labels were introduced, people started using the toolbar as intended.

Other common mistakes that have been shown to cause usability issues include:

  • Not having corresponding text labels.
  • Using icons that don’t convey the meaning.
  • Leaving too little space for icons on mobiles.
  • Being ‘too creative’ with icons at the expense of recognition.
  • Reinventing the wheel as opposed to using commonly recognized icons.
  • Designing icons with too much graphic detail.

Icon Best Practices and Guidelines

Use the following checklist for icon best practices and guidelines to help you avoid the most common mistakes. Any time you see anyone not following these icon guidelines, help improve UX by tweeting it to them:

  1. Don't reinvent the wheel. Familiar icons work best (e.g. home, close, print, play, search). Click to Tweet
  2. Use icons to save space and improve recognition in toolbars, functions, and navigation. Click to Tweet
  3. Icons should be fast to recognize. Use icons that people have seen and used before. Click to Tweet

    Icons should be fast to recognize.jpg
  4. Don't change file type icons for file downloads. For example, use a “W” in a blue box for Word. Click to Tweet
  5. Icons should always communicate meaning. Don’t overuse them or use them for decoration. Click to Tweet
  6. Use the 5 second rule: If it takes more than 5 seconds to think of an icon, it will probably be ineffective. Click to Tweet

    If it takes more than 5 seconds to think of an icon, it will likely be ineffective.jpg
  7. Icons must visually describe the function and purpose. Make them simple, familiar and meaningful. Click to Tweet
  8. Always have at least 1 cm x 1 cm minimum around the icon for legibility and easy tapping on mobiles. Click to Tweet

    Always have the right amount of space around an icon.jpg
  9. When large enough, icons make good targets on mobiles where space is limited. Click to Tweet
  10. Use a single icon set and ensure that all your icons are consistent and cohesive. Click to Tweet
  11. Always use labels for icons and show them to the right or below the icon. Click to Tweet

    Always use labels and show them to the right or below icons.jpg
  12. A good test for an effective icon is when users can tell what it represents without a label. Click to Tweet
  13. Don’t use icons with conflicting meaning. Icons that could represent multiple things should be avoided. Click to Tweet
  14. Be careful with "heart" and "star" icons. They can mean different things and often confuse users. Click to Tweet

    Heart and Star icons can have different meanings and confuse users.jpg
  15. Keep icon designs simple and schematic. Minimize complex shapes and graphic detail. Click to Tweet
  16. Make icons distinct shapes and colors. This helps users recognize and recall them. Click to Tweet

    Make icons distinct shapes or colors 9_1.jpg
  17. Avoid using similar icons for different purposes or different icons for the same purpose. Click to Tweet
  18. When in doubt, remember the best icon is a text label. Click to Tweet

Free UX Session   Get More Business from your Website  Schedule a UX review to increase business from your website.  GET MORE BUSINESS