Originally published: May 01, 1998                         Articles Archives

We see icons everywhere — on the road, at the airport, at the ATM machine, on bike trails, and of course, on computers. In a graphical user interface, icons convey objects or tasks. Since people comprehend images faster than words, icons can make it easier and faster to perform a task. Good icons convey their function rapidly and are easy to remember. Bad icons can actually reduce the usability of an application.

Above is the final version of an application icon for a program that performs government document searches. This icon takes advantage of the Windows® 95 and NT multi-resource file format (.ico). Three sizes of the 16-color application icon are shown — 48 x 48, 32 x 32, and 16 x 16. When you are designing icons, keep in mind the minimum video display of the application and the control within which the icon will be displayed, before using 256 colors. This icon uses the Windows® system default 16-color palette.

In the preliminary version of the application icon, shown above, we worked through conveying the idea of documents, searches, and state institutions using several sketches and whiteboard drawings.

This early application icon had too many elements for easy recognition. A 16 x 16 pixel version of this image would be too complex and unclear. This early application icon also lacked dimensionality, appearing too flat.

In the final version of the application icon, we eliminated the building and emphasized the document by using a golden seal in the lower right for an official appearance. We added dimensionality by using highlights and shadows on the magnifying glass to give the appearance of a round handle and curved glass. The end result was an application icon that conveyed the application’s function and was clear at all of the three different icon sizes.

Throughout the process of designing the icon, we tested it for clarity in concept and appearance. This was achieved by removing elements rather than adding them. When it comes to icon design, less is really more.