Icon Labels: the Good and the Bad

The Bad

Let's start off with a reversal of what's promised in this post's title. What I'm going to review first is not an icon-based navigation system for a website, but one for a web-based application: SharePoint. SharePoint is almost universally reviled in the business world for being incomprehensibly complicated to all but its most devoted adherents. One of the biggest impediments to successfully using SharePoint is mastering its multi-layered navigation system. Microsoft has been somewhat successful in bringing order to chaos in the icon-based navigation systems in applications like Word and Outlook. SharePoint adopts the same style of navigation menu design, but is hobbled by the complexity of the concepts that the icons are meant to represent. As the Nielson Norman Group observes, if it takes you more than five seconds to think of an appropriate icon, it's unlikely that an icon's going to effectively communicate the meaning of a link. Looking at a typical ribbon example from SharePoint below, we can see the complexity of the concepts that the designers tried to capture: "Self-Service Site Creation", "Permission Policy", "Web Part Security", etc. At least they included a text fall-back for each menu option. Without them, the user would be lost.

The Good

For an example of a "good" icon-based navigation system, I'm going to cheat a bit and use an example that I designed myself. If anyone reading this post thinks that I've goofed or if there's room for improvement, I'd love to hear about it. (Really!) Critiques are welcome. This is from a site designed to tout my employer's environmental sustainability program. I opted for an icon-based menu in the drop-down for "Our Initiatives." Each of the six icons comes from a completely different source. I unified them as a cohesive group by applying the same color to all of them and enclosing each in a circle. Two of the icons are fabricated from scratch: "Greenhouse Gas (GHG) Reduction" and "Waste Minimization."

Without text, most of these icons would be ambiguous at best and indecipherable at worst.

"Green Purchasing" is close to being a universal symbol, and even then, it would be interpreted as an online shopping cart without a text caption.
"Efficient Buildings" is clearly about buildings, but nothing about the icon suggests efficiency; the caption is critical.
The "Waste Minimization" icon has nothing to do visually with waste, but does try to convey the idea of reduction.
The "Fleet Management" icons is obviously related to trucks, but wouldn't mean much more without the caption. The same is true of the "Reducing Energy & Water Usage" icon.

I think it's obvious that the decreasing steps of the bar chart convey something getting smaller...but only if the viewer has the context provided by the caption.

Cion labels used on the 'Sustainable Brookhaven' website.