Classic System Solutions Providing practical, effective solutions for ensuring usable software
Site search:
  Client Sign-In
Quick Reference Articles Contact Us
Articles Sign up for a free usability jump start kit
May 1998 Articles ArchivesArchives Folder

James HobartEffective Icon Design
By James Hobart
President & CEO

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.

Icon sizes

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.

16-color icon

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.

Back to Articles

 Featured News

GUIguide Overview Presentation
GUIguide™ 4.1 Released!
Capture, manage, and deliver best practices in GUI design standards.

 Upcoming Events

San Francisco Seminars
San Francisco