As far as I’m concerned, icons serve two purposes in the web application arena: they act as visual markers that tell the user “click here to do this” and they, in best practices, play a pivotal role in the branding of a site. Many websites and pretty much every web app needs at least a few icons on their site, on browser toolbars, or for plugin apps for open APIs (like Facebook). The demand for little pictures as symbolic guides has organically created it’s own sector in the design industry (though there are still plain ‘ol designers like me who create them on an as-needed basis but would never consider themselves purely an “icon designer”).

Branding: Icons as Gentle Reminders

The key is to strike a balance between originality of style (branded recognition) and legibility (symbolic recognition). The ideal user experience is one of seamless navigation to complete the desired tasks or arrive at the desired information, as well as one of constant subtle brand recognition. The user knows he or she is undeniably on your site or using your app the whole time, and subconsciously cannot forget it, because every element subtly supports this branding. The style treatments on the icons are the backbone of these little “brand reminders” that carry the user through a recognizible experience that is your web app.

Custom icons do not have to be fancy in order to reinforce branding and do the trick as navigational aids. Often times even simple line graphics can possess an elegance and undistracting visual symbolism that some overdone 3d renderings lack. Microsoft may have sunk a fortune into their Windows Vista icon set, but c’mon, those things are just plain tacky. I’ll take the

The Logo as an Icon

Increasingly, smaller versions of logos as icons are functionally used first and foremost as a branding tool – no site is without it’s 16×16 (or 32×32) pixel favicon and many web apps have several sizes of “bugs” that can be planted on other sites. The “bug” or small iconic image representation of a logo is used to symbolize the action of whatever that company or web app does. For example, the Digg icon is a symbolic marker used to tell the user “Digg this post.” Symbolically the action tells the user to add it to their account – of course if you don’t have an account to sign in to, you are prompted to create an account on that website. While it allows the user the ease of a prescripted action, it also and perhaps more importantly serves as a tool of viral marketing. The icon represents an action but it also represents that web application an brings new users into the loop.

Part of making an effective social web app of any kind is getting new users to sign up and getting old users to return again and again. If your site offers some sort of bookmarking, creating a little logo-icon as a viral marketing tool that can easily be implemented on a third-party blog or website can get you that boost in both unique and returning user traffic. Social bookmarking icons have been especially effective, as site owners like getting the reciprocal traffic from your site.

Even outside of the web app arena, the favicon or tiny square logo “bug” is the hottest selling adspace around the internet – many sites that make their money by paid placement ads have now begun to separate out space for favicon ads – and on popular sites these adspaces seem to go like hotcakes as they’re a cheap way to get graphical adspace for many sites with a smaller marketing budget.

Many have taken a hint from sites like CSS Remix (see image above) sell dozens of favicon-sized spaces to advertisers at rates like $30/mo. But in order to make this form of advertizing worth while, your favicon has to stand out amongst the others.

Branding and the Icon Set

The wide-spread availability of icon sets, both free and vended, can save lots of design bucks, but it’s not necessarily the best approach for creating a visually memorable and unique user experience. While prepackaged icon sets have their merits – most professionally developed icon sets contain at least mostly familiar iconography that users understand for visual navigation – in a world of web application over-saturation, branding is not something you can afford to sacrifice. Maybe some of the biggies get away with it, but most of them make up for it by being crammed with functionality, and having been there first they’re not fighting for scraps like the newbies out there.

I will say this though: the Chalkboard icon set has one lovely icon that still has me cracking up – the spam icon that looks indeed like a can of spam. Mystery meat icons and humour in icon sets is always a plus.

Icans and Ican’ts: Usability in Icon Design:

Icons need to function as visual design components to enhance the livelihood of the page – and let’s face it, most really bland and bubbly bright web 2.0 sites need them so they don’t look totally cookie cutter. However, icons and graphics are supposed to have recognizable (and ideally universal) meaning – you’re supposed to see it, know what the symbol means, and thus be prompted to click on it to trigger an expected action.

Before you assume where I’m going with this, let me interject that this is not a cry for a beaurocratic hand to come down from the sky and put in place a mandated icon set that must be implemented on all websites. However, like all things web, we’ve reached a point where my own experiences as a confused user and heated arguments with alleged UI experts suggests to me that standardization of at least the most basic of icons is necessary. Desktop icons and application icons have naturally standardized themselves to a certain degree, but there are still a lot of ‘iffy examples of icons that don’t really do the trick as far as visual communication goes.

While introducing creative, original icons that go with the style of the overall site design is imperative to avoiding an “out of the box” stock image look, icons need to also function as traffic signs – symbols that guide the viewer through actions and instruct in a sense. Johnathan Follett says in Seeing the World In Symbols: Icons and the Evolving Language of Digital Wayfinding:

In conjunction with information architecture, icons guide virtual wayfinding and help users to perform specific tasks efficiently. While the term wayfinding typically refers to orienting people in physical space—using graphics, text, signs, and other design elements—it’s useful to examine the use of icons through the lens of digital wayfinding, as a way of generating a fresh perspective on how users perceive and interact with their virtual spaces.

As applications are growing on the web, the need to instruct users on how to use the site to it’s full capacity is expanding the need for a larger roster of icons in much the same way desktop applications make use of them. Symbolic legibility is critical.

Teaching the User:

In icon design, there are the norms, like “send to a friend” (the envelope and arrow), close window (x in a box), and the delete (trash can, sometimes with a little x overlapping the lower right corner). These staple icons are easy because they have in a sense standardized themselves long before web apps became wide spread and are often carry-overs from the desktop applications we are all so familiar with. However, as web apps do new things, visually describing new tasks and actions becomes the challenge.

One needs the user to understand the actions associated with a particular icon. However for new actions and functionalities for which there is no common symbol in place, there is the need to teach. Approaches to this vary from placing text next to the icon, to using descriptive title tags on links, to the on hover balloon with a description of the action one needs to use. I’m personally a fan of the bubble as it’s a staple in desktop applications, and hidden div that pops up “onmouseover” can be styled gracefully to even further fortify the branding of both the icon and the site at large. Over time the user will become familiar with the icon and load it into their cache of understood symbols. This is how standards are created where none existed previously.

And Now A Somewhat Fun Game: Name that Site

The Rules are simple: I’ll show you some icons sets and you guess what site it’s from.

**note: This is not so much really a game as it is a visual depiction of the idea that well branded icons can reinforce branding in a way that is (as Mastercard would say) Priceless.

This game is not really a test of how well you know your web 2.0 icon sets, but rather a test of how effective their icons are as an integral part of the branding of the site. So don’t feel bad if you missed most of them.

Posted on Tuesday, October 9th, 2007 at 1:33 am Follow responses via the RSS 2.0 feed.