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).
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.
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.
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.
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.