You can find an example on the HD Live website (an annual web design event hosted in lovely Hull):

The HD Live website navigation menu - icons and text

The HD Live website navigation menu. It used to consist solely of icons.

I guess this is an improvement on the previous Mystery Meat Navigation effort. But I’m left thinking: why not just use text? Icons are a bad idea because:

unless the icon’s meaning is clear, visitors have to guess at its meaning and then look to the text for confirmation. This creates cognitive dissonance.
when icons are used in applications they have a single, clear purpose. They often represent simple actions that can be performed across different applications (cut, paste, open file, close file etc.), while the meaning of less common icons can be learnt as the application is used over time. The meaning of entries in a website navigation menu are often less clear: they may represent places as well as more complicated, abstracted actions (archive, find out about something, etc.), and visitors are not going to learn their meaning through repeated use.

It strikes me that website navigation menus should always be rendered as text. The only exceptions I can think of are when a link leads to a place with a clear, branded icon (such as a Twitter account). Even then, you’re relying on all your users knowing what the Twitter bird looks like.

Comments

Michael Tuck says:

December 11, 2010 at 5:10 am

Hmmm, not sure I can agree with you in practice. (Theory, absolutely.) Agreed, the Hull navigation requires text to function properly, otherwise it is nothing but mystery-meat WTF navigation. But with the text, the buttons become eye candy, providing visual stimulus for the visually-oriented, button-loving user more used to thumbing in and out of apps than anything else.

Interesting side take: “speaking block” navigation using text as both function and decoration. Evan Eckard uses it very well: http://www.evaneckard.com/ (If you can find an earlier iteration of his design, I actually like that design better than his current version.)
Leon says:

December 11, 2010 at 1:37 pm

Evan’s navigation works well because the labels are set in a clear font; the decoration is just that as you don’t actually need the text set in a fancy script to understand where the link leads.

Perhaps the problem with icons is that they carry more visual weight than the actual text, thereby creating ‘noise’ and dissonance.

I guess they could be implemented in a more supportive way—but you just don’t see them that often, do you?
Michael Tuck says:

December 11, 2010 at 3:33 pm

>>I guess they could be implemented in a more supportive way—but you just don’t see them that often, do you?

No, you don’t. Mostly you see big honking icons with ee-niney little text that makes us squint at the screen. But we’re living in a button/app world, so I don’t think this trend is going away any time soon.
Cathy Dunham says:

February 7, 2011 at 2:59 pm

Thanks for views on both sides. I’d love to hear more input from other designers, programmers and web marketers. And yes, each of these titles can carry a different purpose for using text or icons.
A) Designers are focused on the “look”. B) Programmers want to “simplify coding or make things fit in the nav area”. C) Web marketers want to follow SEO best practices and to convert visitors.

When I look at the bottomline of what my clients want, I have to choose “C”. And to keep peace within my team, I try to coordinate and educate A and B.

Go Packers!! Woohoo!
Leon says:

February 7, 2011 at 3:46 pm

Hi Cathy,

Thanks for your response. Not sure I agree with the job roles. As I see it:

Designers are primarily responsible for making websites that fulfil users’ requirements (and, by extension, conversion). The look may support the ‘experience’ and help users do what they need to do, but that’s ancillary. In this case, using icons instead of text is an example of failing to fulfil the first function.

Programmers make the design happen.

The marketing department are responsible for market research, designing a product that meets a need and getting the message out there.

Thanks,

Leon

Leon Paternoster

Why icons are bad for website navigation menus