Where do icons come from?

One of the more interesting things I worked on during the past few months was the development of a new “wireless“ icon for Windows. I found it a fascinating process and I thought it would be illuminating to share what we go through.

Icons are interesting things. They have to be both representative and abstract. Suggestive of whatever they're supposed to represent, but not so specific that they lose the audience. Icons come in all types. Some are pretty direct: a green arrow pointing to the left means “back;” a slanted I means “Italics.” Some, including one that's close to my heart, are a little more abstract: how exactly did two blinking blue computers come to represent networking activity?

That latter type of icon (the blinking blue computer screens) have a characteristic that must be familiar to people who design corporate logos. They're suggestive, but ultimately, their value comes from consistently using them to represent something, and eventually creating a visual association of the icon with the thing you're trying to represent. This visual association becomes an identity that you can leverage in the future (you'll see an example of doing just that later on).

Another good example of a real “icon”: On the side of my laptop, I have a microphone jack. Next to it is an small silhouette of a microphone in a style that hasn't been in use for probably 20 years. But that image, as anachronistic as it is, has such a strong association with “microphone“ that (apparently) no one questions what it is.

As we began looking into updating the icons, we had decide on a strategy for a wireless icon. Understanding why we were creating an icon was important to ensuring we ended up with a good icon at the end. Our strategy was simple: we wanted an icon that could serve as the basis for an 'identity' for wireless-related features in Windows. There ended up being four basic requirements: First, it had to be suggestive of “wireless“, somehow. Second, it had to be simple, so it could be used in combination with other icons to represent other concepts. Third, it had to be lasting -- Windows XP is going to be in current use for many, many years, and the icons should not be “obsolete“. Finally, it had to look good (whatever that means).

We started by looking at what was in Windows XP already. Windows XP's user experience up to this point was a little inconsistent with wireless icons. Or, taken another way, it was overly consistent.

The main “wireless connection“ icon, as displayed in the Network Connections folder used a forked antenna icon: , while the dialog for actually making a connection, used a radio-tower icon: . The distinction was deliberate. The forked antenna represented “wireless“ in general, while the radio-tower represented an access point network (there was a different icon for ad-hoc, or computer-to-computer networks - a small rectangle, intended to represent the PCMCIA cards that were most often used for wireless connectivity at the time of Windows XP release).

However, one thing that became clear over the past two years of observing users with Windows XP, was that the vast majority of users were connecting only to access point networks, so a strong association already existed between “access points” and “wireless”. An early decision, therefore, was that distinguishing between the general “wireless“ concept and “access points“ was unnecessary. We could design a single icon to represent both (or we could use slight variations of an icon, depending on what we came up with).

With the help of members of the Windows design team, the Usability team and the User Assistance team, we came up with several prototype icons. The antenna-styles of Windows XP SP1 and earlier (the two shown above) were clearly inspirational, in that many of the early prototypes were antenna-like.

This is one of the early protoypes. As part of the development process, we showed these icons to a lot of people internally, to find gauge initial reactions. A common thing that happens is that people “nickname“ the icons. I've noticed that the more someone dislikes an icon, the more likely they are to nickname it. This one was most commonly named the “blue matchstick.” Believe me, the generally phallic nature of antennas led to many “creative” nicknames for some of the other prototypes.
When we shipped the beta of SP2 in November, we had settled (temporarily) on an icon that was a more elaborate version of the original folder icon (the forked antenna). At the time, we were trying to avoid a complete update of all of the wireless icons in the system, so we were trying to stay close to the concept of the folder icon.

You'll notice that both of these icons have “waves“ on them. This was another early decision, made after trying out a few different prototypes. Among many users, there's a strong association of “wireless“ with radio waves. Additionally, waves help with the spacing of the icon (antennas are pretty thin, so the waves make the icon wider, and therefore fit the square space better). We even had a few prototypes that were just waves, which worked okay at small sizes, but not so well at larger sizes.

Since we the beta went out with the forked antenna above, we got a lot more feedback on it -- and a lot more nicknames. The “Blair Witch stick“, and the “sprinkler” were two that I remember. And someone felt it alluded somehow to the rainbow coalition, or “hands across america.” And of course, there's the immortal moment when I received an email from a representative of an early-adopter company, asking “what's with the chicken foot?” Clearly, we had more work to do.

There was a brief exploration in a slightly different direction from the abstract antenna. A number of people really liked icons that actually looked like access points. Icons like these are tempting. For a user that has an access point that looks like that, it's perfect. The problem is, most people don't have an access point that looks like that. There's a great deal of variation even among home access points in the US, and in some environments (airports, corporations), the users don't even have any idea what the access point looks like because it's hidden in the ceiling somewhere. So we abandoned this approach.
Finally, we settled on a particular icon variation that suited all of our needs. A simple grey antenna, with three green waves emanating to either sides. Feedback was good (i.e. almost no one had a good nickname for it). We put it in the builds. Ah... rule #29 of icon design: put many of them side-by-side. It turned out that, when in the list of wireless networks with several wireless networks showing, the icon was too busy. The list appeared vertically “crowded.”
So we iterated on the icon again. The designer trimmed the height of the waves, creating a less dense icon. Unfortunately, this made the icon look a little bit like a cross, and lost some of the “radiating” effect of the waves.
Finally, our development lead, JP, gave a simple, but effective suggestion, which when we put it in the builds was the clincher. The number of waves was reduced to two, with the vertical height of the waves remaining the same. Et voila. This is the icon you'll find in the RC release of SP2, and, barring bad feedback, the icon we'll ship with.

The design team took the green waves motif as the building block for other similar icons: The computer-to-computer (ad-hoc) wireless network icon, the Wireless Network Setup Wizard icon, and the icon in the notification area of the task bar (aka, the system tray), all of which can be seen in the SP2 Preview.

Some statistics: Five months from the first protoype to the last; 21 separate prototypes, of which we tried out five (i.e. put them into internal releases and so that the whole product team could use them in the product for a week or so).

As I said at the beginning, icons are interesting things. It's been fun for me to go back through all of the prototypes and directions we took for this one, “simple” icon. Hope you enjoyed it too.

Btw, in case you're wondering, many of the prototypes, as well as the final set of icons, were created by a member of the Windows design team who specializes in icon design and development. Each icon is created at 48x48, 32x32 and 16x16, and indivdually optimzed for each size. 

- Sean

As one final note: the images above are shown in order to illustrative the development of an icon strategy and direction. If an icon was only used during internal development, it is marked with “example.” If an icon was in a released product, then a simple screenshot is shown. There is no intention to violate anyone's rights or trademarks.

As with all other posts, this one is “AS IS“ and confers no rights.