Not that this is a new phenomena, but I’ve been noticing icons popping up in the navigation of a number of web sites recently.
As much as I appreciate the craftsmanship that goes into designing these often beautiful graphics, I have mixed feelings about the time and effort it must take.
Let’s assume that time spent designing these navigation icons equates to time not spent doing something else on a web site (say, working on other aspects of the design or improving usability).
That being the case, I have to question whether the benefit gained from adding icons to a site for navigation purposes (in terms of usability) outweighs the cost of developing them.
So, what is the purpose of icons anyway? The Gnome Developer’s Site says it well on their page on designing effective icons:
Icons should be suggestive of the functionality with which they are associated. The best icon will suggest to the user the primary purpose of the program or operation without having to read accompanying text.
If you have to think about an icon to ‘get it’, the metaphor is too complex.
I use this definition in judging the effectiveness of web site navigation icons. Unless they add meaning to a navigation item, what purpose do they serve other than to look pretty / clutter up the navbar?
The following examples help to illustrate what I mean. Take a look at them and see if you can tell what the navigation link would be if only the icon and not the accompanying text was present:
Only the Home and RSS icons have any meaning without their accompanying text because they are universally recognized.
This illustrates the main problem with web site navigation icons; only a few terms (e.g., home, contact, calendar, shopping cart) are used consistently across web sites so that icons can be used effectively to represent them.
Although these images are trying to serve the same purpose as icons they don’t work at all well. The text is made small to the point of unreadability in order to fit both image and text within the navigation space.
Only Home and Login have any meaning without the accompanying text.
This example illustrates the point that icons don’t serve their purpose if they don’t convey meaning. Because I don’t speak Italian I have no clue what these navigation choices are despite the presence of these wonderfully designed icons.
Only the calendar icon works by itself. The bundles of dollars almost do, but it could be easy for someone to misinterpret what they are. It would have been better to use a simple $ sign, but that was probably thought to be too obvious.
Can you imagine the time (designing, discussing, approving) that must have gone into creating these meaningless icons? Surely there is something else on this site that could have benefited more from this extra time.
Although nicely designed, these icons are clearly meaningless.
However, they also spin around in a circle making it hard to mouse over them to find out what they are for. It’s even to actually click on one.
To my mind this is the worst example I have found — a complete usability disaster.
On a travel site, some of these icons have meaning (flights, car rental). But the others? At least the designer didn’t even bother trying to come up with an icon for ‘Blog’. If only they’d done the same for the other navigation options.
I have no clue what any of these icons are supposed to mean.
These icons do not provide any added meaning compared with their textual counterparts. In fact, the first one actually hinders meaning as the text is so hard to read.
Some of these icons work as they are used universally — Print, Discuss, Email. The others do not help at all, and the RSS one is actually wrong now that there is a standard RSS icon.
The Podcasts icon makes me smile; however, an iPod icon might have been more effective.
Interestingly, this is only example I could find from the web site of a company that actually designs icons. Surely there is a lesson to be followed if the people who know the most about icon design don’t use them in their own site navigation.
Wonderfully designed icons that integrate beautifully into the site design. However, how much meaning some of them provide is questionable.
Of the eight icons here, only four mean anything to me (skiing, canoeing, hiking, cycling). The others could signify anything. Perhaps the two on the right represent fireworks and target shooting?
Conclusions About Icon-based Navigation
Given how poorly icons work for most aspects of web site navigation, I have to conclude that the cost to develop them is not worth it.
I’ll admit that when well-designed they look nice, but if you removed from a site it would be none the worse for it. Valuable design time would most likely be better spent elsewhere.
Further Reading on Icon Design
- Learning to Love the Pixel: Exploring the Craft of Icon Design
- The Icon Book: Visual Symbols for Computer Systems and Documentation
- Icon Semiotics: A Common Visual Representation
- Designing Effective Icons