Web Design

The key to a well-constructed icon is knowing what your audience will and will not understand, and appreciating the context in which the icon is viewed

The last time you crossed a busy street in London, or just about anywhere in the world these days, you probably first checked the other side of the street to see if there was a green or a red person. If you saw the green person walking, you knew it was safe to cross without fear of being run down by some mad Hooray Henry in a Range Rover. Conversely, if you saw the red person standing, you knew that crossing the street meant taking your life into your own hands.

This is an example of how icons - such as the pictures of the walking and standing people - are used to navigate. If we see the icon of the person walking in the traffic signal, we know this means to go forward. If we see the icon of the person standing, we know this means to stop.

Icons are perceived more quickly than written language because we see before we understand. Graphic representations work as mnemonic devices to aid memory and recognition, allowing us quickly to remember larger blocks of information than we could otherwise cope with.

Computers have led a renaissance in iconic communication at least since the introduction of the Macintosh in 1984, and arguably even before that. Icons on the computer screen provide information about file type and content without the need to read or even scan the file in question. Of course, the quality of information we get from an icon depends on how well it was crafted by its creator, but then the same is true of written communication.

Consider the following icon:

It is shaped like a piece of paper, and the horizontal lines let us know that this is a text document. The grey square embedded in the lines lets us know that it includes (or can include) graphics. The folded-down right- hand corner lets us know that this file can be altered, and the small "N" in the top left corner indicates that it is a file associated with the Netscape browsers, which in turn implies that this will be an HTML document. Now compare the size of the icon with how much space it took for me to tell you this, and you can understand why icons are often preferable to verbal descriptions.

The downside to icons, of course, is ambiguity. While the icon presented above may mean all of those things to one person, it could mean something different, or nothing at all, to someone unfamiliar with the visual metaphors being used. .

On the Web, icons have blossomed and flourished as clients demand unique graphic elements for their sites. Unfortunately, all too often the icons designed are information-poor if not highly ambiguous in meaning, mostly because designers don't understand what they are using the icons for.

Navigational icons on the Web can be broken down into three basic categories.

Universal icons: These are the icons that are pretty much universally understood, such as an arrow pointing left to indicate "back", and a graphic of a house to indicate "home page". These are generally effective even without the use of text, as you can pretty much guarantee that everyone will understand their meaning without exposition.

Site icons: These are icons created for use with a particular Web site, and would be meaningless - or at least have a different meaning outsidetheir boundaries. For instance, if a section in your site sold footwear, you might include a picture of a shoe. Generally, for these icons to be effective a brief textual explanation should accompany the graphic - for instance, "buy shoes" - in order to avoid ambiguity. However, once a visitor understands the meaning of that icon in context to your site, navigation becomes much simpler.

Pict icons: These are pictures, drawings and photographs that are used as links. Generally information-rich, they may still require some textual explanation, either as part of the graphic or beneath it in HTML text, to help convey their exact context.

Of course, there will always be "bleeding" between the various types of icons we see in our browser windows, but by understanding the differences between these general classifications we can better understand what icons work best for our Web sites navigation.

Next week: making Web icons more effective.

E-mail Jason Cranford Teague at

indy_webdesign@mindspring.com