By: Sherice Goff

November 21st, 2000

Reader Rating: 7

Icons abound within our computers. From operating systems to web pages, these miniature graphics helped pave the way for user-friendly computer and Internet navigation. In this article, we will learn the ideas behind icon navigation, as well as how to create an outstanding set of icons to promote more efficient site browsing.

Following Standards

Most of us are familiar with the usual set of computer icons. A symbol of a printer denotes that you can print the given page with a single click. An open folder allows you to retrieve a document from within your hard drive. Icons such as these are straightforward symbols of easy maneuverability and help their users with routine computer tasks. On the Internet however, icons have taken a more abstract turn, and thus may confuse their users, more than assist them. Could your graphical links be causing your visitors to retreat as quickly as they came?

Let’s examine the causes

People are naturally drawn to symbols they are familiar with. Therefore, you should carefully consider the choice of icons you will use to direct your users through your site. The most favored choices are also some of the most well-known: icons of arrows, mail and folders are widely used to help visitors browse through a site, no matter what the topic. Resist the urge to use any obscure graphics, such as bright, highly-textured designs. Despite the fact that you may have slaved for hours on that search icon of a dancing purple dog, your visitors simply want to see what your site has to offer, without reflecting on the philosophy behind your odd choice of graphics. Use graphics that match the theme of your pages, and be consistent with their use throughout your site.

Where can I find themed icons?

“Dingbat” or “Wing Dings” fonts often make icon-navigation a cinch. Sites such as the DingBat Pages [1] offer professionally designed fonts that are perfectly suited for web site navigation. Other famous font sites such as The Fontpool [2] and the Font Addict [3] have extensive collections of “themed” dingbats for your site. If you’d like to try your hand at creating your own icons however, you’ll find that there is a vast array of tools available to aid you in your design efforts.

Inventing Icons

Many free and shareware graphic editors exist to help you edit or create new icons for your site. You can browse the most up-to-date selection of these editors, and view their ratings, at TuCows EditIcon [4]. While tailored more specifically for editing desktop themes, these will allow you to create and save icons for the web as well. Customizable options include different icon sizes, 3D renderings and the ability to create animated versions. One of the most highly recommended programs is Microangelo [5]. This program comes with an entire suite of tools to help you create and publish your icons online.

Including Text with your Icons

Now that you’ve created an impressive plethora of graphical guides, you should decide whether or not to include text alongside them. In most cases, it would be more beneficial to your visitors, who may be visiting your site for the first time, to have a textual guide near your graphics. In all cases, you should include your <alt> tags with descriptions of your icons. This not only helps your visitors become familiar with your site, but also assists those with visual impairments, who may not be able to see your icons, but will instead have them “read” to find out their meaning.

Tips and Tricks

Before you finally publish your new miniature masterpieces, you’ll want to remember these tips to help avoid visitor confusion and frustration while navigating your site!

*Visit your site through the eyes of a typical visitor. Check a particular route to certain content on your pages. Is the site difficult to follow? Does it shift navigational patterns? Are the icons hard to see or decipher? Your icons should be large enough to visualize and comprehend.

*Visitors hate to guess the meaning of your icons. In most cases, if they want to search the page, they’ll look for a magnifying glass symbol or a picture of binoculars. If they want to print it, they’ll seek out a printer picture. Unusual graphics in place of these modern symbols will only cause them needless frustration and endless searching. Make it easy for them to find the information they want. If they can find what they want, it’s more likely that they’ll return.

*Accompany your images with text if possible, even if your icons follow the standards above. Visitors are more likely to browse more pages and spend more time on your site if they can easily move from one section to another, just by reading the heading of your links.

[1] http://www.dingbatpages.com
[2] http://www.fontpool.com
[3] http://www.fontaddict.com
[4] http://themes.tucows.com/editors/editicon.htm
[5] http://themes.tucows.com/editors/adnload/58306.html