Icon vs. Text Navigation

revisiting an old issue in 2008

[Hobbs]

What's your outlook on the future for web site navigation? Mobile devices, operating systems, blogs and social networking sites are conditioning your visitors to icon navigation, is plain text navigation becoming a sign of 'old' sites?

Shouldn't there be universal icons standard by now for everything else giving the way things are heading, the same way everyone knows what the envelope, the printer and the home icons mean, why isn't there a unified effort by software and electronics companies to unify the rest?
(I know the answer to this one)

Did you iconize your site navigation yet? What was the outcome?

[cmarshall]

There are a number of ISO standard icons [iso.org]. I had a boss that was on a committee to develop photographic ones.

I had once designed a software program that was almost completely iconic. It was received well by my company and my peers. It was attractive, intuitive and compact.

The customers had other ideas. It did a marvelous imitation of a lead balloon.

I tend to think that icons+text are the best solution.

If you do use icons (which is not a bad thing, but use discretion):

1) Use as many common and/or ISO symbols as possible. If your designer sneers at you, show them this icon [upload.wikimedia.org].
2) Be careful about relying on color. I always test my interfaces using this tester [colorfilter.wickline.org].
3) Make liberal use of

title

attributes.
4) Don't expect the icons to replace localization. I had one icon (a turtle) that depicted "slower," and it was not so well received by the Asian customer base. You will still need to localize.
5) If you do develop your own icons, make them simple and concise. Icon design is a complete bear. I did a lot of it, and it's incredible how much work it can be to develop such a simple thing. It needs to work well as monochrome, be intuitive across as many cultures as possible, and be recognizable at many levels of magnification.

That's just my $0.02.

[pageoneresults]

Great topic! I've been knee deep into icon development over the past few months. Its a completely different mindset when designing for a 32x32 piece of real estate. Working at 1600% provides a very simple design canvas and you now think in "true pixels". And then, you have to take it one step further and make sure your 16x16 is suitable. Definitely a learning experience and one that I'm enjoying.

I surely wouldn't rely on anything other than standard icons if they exist. There are a few such as your feed icons, XML, etc. Outside of that, I'd be leary of making that jump just yet unless you have a very well designed set of icons that are "no brainers". :)

[europeforvisitors]

As you pointed out, some icons--such as printer, e-mail, and shopping-cart icons--are already de facto standards that most users recognize. Beyond those half-dozen or so icons, things get tricky, because sites are organized in so many different ways and and the meaning of an unfamiliar icon is in the eye of the beholder. (Just the other day, I was reading an airport terminal map, and I never did figure out what image the ATM icon was supposed to represent.)

[alexdino1]

I agree with cmarshall and strongly believe that icon + text is the way to go. Visual cues are huge these days. Text is also vital for accessability.

[adamxcl]

Text and Icon or just text. Never just an icon would be my wish. I don't want to stop and have to think about what an icon is and sometimes it's hard to tell or it could be more than one thing. Users probably don't want to figure it out either.

[dragonthoughts]

The localisation issue is very important. It is as easy to unintentionally convey the wrong meaning in a graphic as it is in words.

Colour blindness needs consideration but more importantly, colours often have varying connotations in different cultures.

For example:

1) Red is regarded as symbolising happiness (and the colour of traditional wedding dresses) in much of Asia, rather than stop / danger or anger in West.

2) White is a traditional colour for funerals in Buddhist dominate parts of Asia, while it is probably more associated with weddings in the West.

Symbolism varies too, so a very wide cultural awareness is essential in designing new icons.

For example, consider an icon for a butcher....

A pig icon might be used to indicate a butcher in some cultures, but would be considered offensive to Jews an Muslims.
Replacing it with a cow could be equally offensive, in a different way to Hindus.
Trying a sheep might generate confusion with wool, and in Japan, where sheep are rarely eaten would be deemed confusing.

How's that for some non-vegetarian food for thought.

[cmarshall]

I remember the first time I went to Japan, and saw their emergency exit icon [upload.wikimedia.org].

I figured it out pretty quickly, but it was a bit confusing, because emergency exit icons in the US are always red. Also, their first aid icon is green, which took me longer to figure out.

In these cases, it was context that helped me to figure it out and confused me. The emergency exit icon was over doors, so that was easy. However, the green cross was on a flag outside a building, so it was not as obvious. I had to ask someone what it meant.

[DrDoc]

I remember the first time I went to Japan, and saw their emergency exit icon [upload.wikimedia.org].

I figured it out pretty quickly, but it was a bit confusing, because emergency exit icons in the US are always red. Also, their first aid icon is green, which took me longer to figure out.

What? Which part of the US do you live in? ;)

The emergency exit icon is, as far as I know, fairly universal. I have never seen one that is non-green, nor one that differs substantially from the one you linked to.

Yes, the textual "E X I T" boxes generally use either red or green text in the US ... but that has nothing to do with the emergency exit icon.

The first aid sign I would say is a bit half-and-half. You mean the one with green bottom and a white cross, right? Well, that is also a fairly universal sign indicating first aid. The one you think of is the red cross on white bottom, which is the "red cross" sign (compare with the red crescent).

So, I guess this indicates the real danger behind assuming that icons you assume to be universal when they might not be. Or, when things you have gotten used to differ from generally accepted standards or conventions, and may therefore confuse more than provide clues.

[edited by: encyclo at 10:12 am (utc) on Mar. 17, 2008]
[edit reason] fixed link [/edit]

[cmarshall]

What? Which part of the US do you live in?

This reflects my experience in the East and West coasts. I haven't done much "heartland" travel.

I seldom see icons, and when I do, they are never green. The "stairs" icon is displayed (stick figure running down stairs), and that is in black-and-white.

The emergency exit "icon" is always a red "EXIT" against white, or a white "EXIT" against red. I'm pretty sure it's required by law.

[DrDoc]

It surprises me how many things are "required by law" in the US that go completely against universally adopted standards that everyone else is familiar with :(

But, I really think this highlights the problem well. One can never make assumptions about how icons will be interpreted. Research based on target audience should probably be carefully done, especially if there are cultural differences.

[piatkow]

This has reminded me that I need to readdress a gallery of around 50 photos as an analysis of the logs has revealed that most visitors do not understand that the little arrows under the picture mean "previous" and "next".
It looked so much neater without text links and made perfect sense to me and to the web experienced friend who reviewed it.

On a recent visit to hospital I was asked "how do you find your way around". My companion really hadn't worked out that the colour coding on the map at the entrance matched the colour coding on all the internal signage.

When it comes to the crunch, whatever you do, it will be misunderstood.