My wife shared with me an article about color blindness and video gaming (Red vs. Green: Gaming with Colour Blindness), and one of the things the author discusses is how some games like the Grand Theft Auto series avoid sole reliance on color on their maps by also using icons.

That got me thinking about the pros and cons of icons.

In the GTA example, it’s great having recognizable icons for things like food stops, stores, car repair businesses, etcetera.

On the other hand, a good rule to follow with iconography is “less is more”. You may be solving visual and cognitive obstacles by using symbols versus potentially vague or indistinguishable colors, but new problems can be introduced if you go nuts with them.
The face with an exclamation point quote bubble that informed Pre-OS X Macintosh users of an important decision or notification
Some things to be mindful of:

  • Generally speaking, a handful of icons might provide differentiate and quicker recognition of the information they support. A dozen icons? More? That might start watering down their impact. If you’re finding yourself using that many, it might be good to ask yourself if there’s an even better way to break down information.
  • Be mindful of your audience and realize that some icons might be universally understood in some cultures, but not in others.
  • Using images for icons might not be scalable — especially if they are initially small. Zooming will pixellate them and quickly render them hard to decipher.
  • On projects I’ve been involved with recently, Font Awesome has been used more and more. They have a wide range of icons, plus they scale very nicely. Just be sure to provide descriptive text (see: Making accessible icon buttons

    The smiling Macintosh icon that greeted Pre-OS X Mac users when they booted up their computer
    Like many things, icons can be an accessible plus, but only if used judiciously and appropriately!

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Secured By miniOrange