Mysterious design secret no. 2: use icons meaningfully

Posted by on Dec 10, 2015 in Mysterious design secrets | 4 Comments

The number of icons we encounter is staggering

On our computer screens, our phones, in real life, we are inundated by icons. As with any trend that takes off—like neon colors in sportswear—I predict that we will look back on this icon habit as one we should have stepped away from. Why? Because there are so many, and the quality so varied, that their purpose has been eroded. Read on if you want to learn the secret to using icons meaningfully.

Icons evolved from pictograms

Image from The Noun Project, AIGA Collection

Image from The Noun Project, AIGA Collection

A pictogram is an illustrated symbol that represents a concept, object, activity, place or event. Designed to be a universal language, pictograms don’t include words. The transportation industry, because it serves an international clientele, developed many of the “iconic” symbols that help communicate concepts to increase safety (emergency exits) or suggest group behaviors. Anyone who uses a car, train, bus or airplane has encountered these well-designed pictograms. And, if you’re like me, you’ve also encountered some that were poorly designed and confusing, which isn’t great when the purpose may be to save your life.

Icons play a major part in making operating systems and software user-friendly

Glyphs from Apple Symbols fontApple and Microsoft led the way using icons that are now very familiar. Here’s a sample from the Apple Symbols Font. These icons are constantly being redesigned to reflect trends, purpose and use. When color coding is used, it can reduce accessibility for the color-blind or screen reader users. Some images are what I call “icon muesli”—a supercomplex mixture of elements with no identifying focus. The software industry adopted many of the more universal icons to create a language for a wide range of users and to save screen space. We are now in a “reductionist” phase where icons are simpler flatter images.

Then icons got into everyone’s hands

As browsers evolved and we began to enjoy more sophisticated user interfaces, icons proliferated. Illustrators and designers recognized the need and filled the gap with icon kits galore, available for pennies or as free downloads. Technical advances and best practices have changed in parallel with browsers and devices; a good example of this is Font Awesome. And now we’re working to optimize everything for retina display viewing. The point is, icons are readily available to everyone, as available as emoji for texting and email.

Choices are difficult—even for professionals

Last year, I collaborated with a team on a website project, and we decided to use an icon kit. You might think to yourself “super easy.” Not so. Between the four of us, when faced with hundreds of choices to accompany the word “Services,” four different ideas emerged. So, icons are drawings that may or may not match (in the reader’s mind) the text accompanying it. Often, a better choice would be clear concise writing using well-crafted typography. In other words, use your words well and pair with an on-message, on-brand image—and only if it enhances your message!

Ask these questions before adding an icon

  • What is the purpose?
  • What would be meaningful to my audience?
  • Are the icons I’m using consistent with my brand identity?
  • Am I adding an icon because everyone does it?
  • What icons can I eliminate? (Fewer get more attention)

Happy Solstice

Here are two more icons from The Noun Project. “Candles” by Jennifer Zhang and “Open Day and Night” by Fernando A, shown combined with a solstice greeting, my favorite winter holiday.

Here are the things I considered

  • Purpose is to send a message of good cheer to you
  • Day and night are in equal proportions on 12/22/15 in the Northern Hemisphere
  • Solstice is celebrated with fire, light, good friends, food and drink

Choose between these two icons for the meaningful message

Notice the different feeling you get from the combination of icon and message on each? Which one is best for my purpose?

4 Comments

  1. Mark Root-Wiley
    December 11, 2015

    Nice post, Barb!

    You’re right that icons are spreading more before, and I like that you tie it into the rise of emojis as well. Your way of looking at icons emotionally is valuable too.

    It’s a best practice to use text with icons just like you did! Some people think this is ugly or not “minimal” enough, but I disagree (https://mrwweb.com/following-best-practices-doesnt-have-to-be-ugly/).

    Unsurprisingly, I think the Nielsen Norman Group has an awesome article on icon usability: http://www.nngroup.com/articles/icon-usability/

    Reply
    • Barb Rowan
      December 11, 2015

      Thanks Mark! for adding some extra info for readers to consider when using icons—labels. I can count on you to have meaningful, thoughtful ideas to share. It’s easy to forget that people interact with their devices emotionally, and designers have this opportunity to make them feel smart and capable.

      Reply
  2. Lynn Gaertner-Johnston
    December 14, 2015

    Hi Barb,

    I’m torn. The icon with the candles looks much more welcoming, yet the sun/moon one emphasizes the equal proportions of the solstice.

    I’m going to go with the candles. It communicates light in the darkness, along with good cheer.

    Did I pass?

    Lynn

    Reply
    • Barb Rowan
      December 14, 2015

      Yes, my interpretation is more about the gatherings, warmth and light than the astronomical event! Happy Solstice!

      Reply

Leave a Reply