Here’s something for the web teams among you who have been pondering whether and where to use iconic pictures on your web site. There’s a something to be said for using icons to dress things up: Icons can be attractive, easy for users to remember, and, if implemented in moderation, they help with the usability of the site. We’ve begun to use icons on areas of Cisco.com and have found them to serve all of these roles well.But — icons are incredibly difficult to get right. Without some careful planning, it’s easy create something that’s difficult for users to understand, doesn’t fit well with your brand, or is just plain strange.Several groups internally have asked me about our icon design experiences, and I thought I would share a few of them here. So, let me tell you a little story about icons in a recently designed area of our site.When we were creating the Small Business area of Cisco.com, we decided to use some placeholder icons to represent the”I need to-” solutions sections in the Small Business area. The first renditions were abstract (see below), but even so, when we tested them in our usability lab most customers responded to them warmly.But, because of the icons’ abstractness, our users told us they really didn’t understand what the individual images stood for. We knew we needed to create something more realistic and obvious. And, we didn’t like the plain grey style. There were three areas we needed to consider when approaching the icon project:1. We considered usage conventions:
- What are the rules regarding when to use icons? Should they be navigational aids? Emblematic devices?
We have generally chosen to use them as navigational or functional — meaning that if you click on them they should do something. Not just for eye candy.2. We considered visual stylistic considerations:
- What style should we use for the icons? Should they be cartoony or realistic? Should the finish be shiny like glass, or satiny like Gummi Bears?
- What considerstaions should be given to the size of the icons, since smaller icons should be less detailed?
These stylistic decisions were the easiest. Since we have developed icon standards for our software, we took our cue from those design directions. Our house style is for realistic icons with a glassy finish and top light sources, viewed straight on, like this one:We also liked some of the enameled treatments we saw around the web, such as GM’s fuel economy emblems; GM’s look like enameled pins you could reach out and pick up:In the end, as you’ll see, we adapted something realistic and glossy, and we’ll probably move even more to a glass look in the future. My advice for your site is to develop a visual style for icons, patterned off of what you’re using for your products (if you make products and the products have icons, that is); otherwise look for other cues from your brand identity system.3. We developed the actual images needed:
- What specific concept do you create for each of the ideas you are trying to get across? This is the hardest part, and while the stylistic rules above can be decided once and codified as standards, this choice of image to convey a concept has to be repeated each time you need to create a new icon.
There are other considerations, such as how an individual image choice fits within a family of icons, visual compatibility with related software iconography, etc.Developing the ImagesAs I mentioned above, this part is much harder because each image is a new conceptual adventure. How do you come up with the perfect image for concepts like “Being More Productive” or “Connecting Offices and Employees?” The answer is, you sketch out a lot of ideas until you hit on the right thing.We started with some initial sketches, then moved on to refined concepts (still in sketch form) and then moved to final rendering.Here is how we worked through concepts for “Be More Productive.” You can see that our artist (at agency Level Studios in California) tried out a number of different ideas, which we then reviewed. As is typical, many of the ideas were rejected, but one was a winner and we pushed forward with it.Once we had chosen the basic image we wanted, we started exploring how we wanted the final version rendered. Rendering 1 below was deemed to be not realistic enough a style. We like rendering 2.5, but the view-from-above angle (while we thought it looked nice) didn’t follow our software standard of looking at icons straight on. So ultimately, we iterated until we had version 5 below, which became an archetype for the other icons we were developing as part of the project.Finally, we had to think about how the icons would fit into the navigational widget where they live. We had to consider the gradient behind them; whether we wanted a reflection or shadow or nothing below them, and also what the icons should look like when a mouse is over them (hover state) or not (non hover). You’ll notice in the end we chose a light gradient background, a slight reflection, and a tinted metallic non-hover state:The final step was to produce the style sheets and DHTML to support the new component.You can see these icons in action on the Small Business area of Cisco.com.Enjoy!P.S. Once you have developed a style, there are some affordable ways to get your artwork for icons created. I’ll blog about that in a future post.