ABSTRACT

With the proliferation of graphical user interfaces, the need for clearly designed icons has become critical. Unfortunately, not all icons are clear and easy to understand. It is my belief that icon design should be more of a science and less of an art.

INTRODUCTION

Designing icons and visual symbols is for anyone-graphic artist, user-interface designer, human factors specialist, technical writer, product designer-who must design icons and visual symbols for use in computer displays, technical documents, and other media where a concept or idea must be communicated in a restricted area or to an international audience. It is also appropriate for those writing standards for icons and user interfaces.

Attendees will learn:

• Where and when to use icons, words, or both.
• How to represent conceptual and nonvisual concepts with icons.
• A systematic way of designing large numbers of icons.
• How to draw icons-limitations of size and colors.
• How to design icons for an international product.

Topics to be covered include:

• Why use icons?
• How do I represent concepts graphically?
• How do I draw icons?
• What about my international users?
• Why use an iconic language?

WHY USE ICONS?

You can use an icon anywhere you would use a word label: to activate menus, to perform actions, to select tools, to toggle between modes, to manipulate windows, to point to items on the screen, to reveal the state of the data and allow it to be changed, to represent files and directories and disks, and to provide a way to delete unneeded items. You can also use them in publications: on the cover to represent the capabilities of the product, in the table of contents to represent the contents of each chapter, and in the chapter headings themselves. Use icons

• To help users work smarter
• To represent visual and spatial concepts
• To save space (See how much space these icons save?)

  

  
  
• To speed search (Notice the distinctive shape of each of these icons)
  

  

  
  
• For immediate recognition
• For better recall
• So users do not have to read
• To help interfaces go global

HOW DO I REPRESENT IDEAS GRAPHICALLY?

When we communicate, whether we are communicating facts, numbers, or pure emotions, we do so through symbols. They may be pictures, words, musical notes, a tone of voice, or a facial expression. Often they are subtle and other times, direct. Sometimes they are used so effortlessly that we would deny using symbols at all. Sometimes they work and sometimes they do not.

To communicate complex meanings in icons, you must expose the viewer to a collection of symbols. For the icon to evoke the desired meaning in the viewer's thought-conscious or sometimes unconscious-each symbol must trigger exactly the idea you intend. Each symbol must have a strong, direct association with the desired meaning, not just in your mind but in the mind of the viewer.

HOW DO I DRAW ICONS?

After you have decided what objects to include in your icon, you must decide how to draw them. Should you draw them in a detailed, realistic style or a simplified, minimalist one?

Appropriate details make objects easier to recognize. Our eyes seek out detail in a scene and detail can draw our eye to an image. However, detail can distract and clutter. Excessive detail makes it harder to see a pattern of relationships.

Which is best? The rule is simple: Include just those details necessary for the icon to accomplish its purpose. Often a less detailed image makes a better emblem, especially for general or abstract concepts.

We can draw icons in five different degrees of detail and realism:

Although each of these styles has its place, it is difficult to mix radically different styles in a set of icons. The best approach is to select a primary style and use it for most of the icons of a set.

WHAT ABOUT MY INTERNATIONAL USERS?

For more and more companies, the only market that matters is the international market where over 100 languages are used in business. Even products that do not cross borders must overcome barriers of language and culture. No country speaks just one language and possesses a unified culture. India, for example, has 15 official languages that require 11 different scripts. If current trends continue, in about 15 years, less than half of Americans will have English as their first language.

With careful design icons can help bridge these barriers of language and culture. Well-designed icons can:

• Reduce translation.
• Simplify learning.
• Improve intelligibility of text.
• Give products an international look.

WHY USE AN ICONIC LANGUAGE?

Designing symbols one at a time can waste your time and lead to sprawling, inconsistent sets of icons. On the other hand, designing a coordinated set of icons:

• Reduces the effort required to design, draw, test, and revise the icons. It lets less skilled designers prepare first-draft versions of icons.
• Ensures and enforces fundamental consistency.
• Makes icons self-explanatory and deducible. Lets users predict what an icon will look like.
• Helps users get started more quickly and master advanced features sooner. It also helps them learn additional programs based on the same iconic language.
• Gives your product or product line a distinct style.

Large, complex systems benefit most from a simple, consistent iconic language. Imagine that you are charged with developing an iconic language for a computer program used by draftsmen, engineers, architects, technical illustrators, and other design professionals to make precision engineering drawings. You might invent a language with a grammar like this:

With a clearly defined language, a new icon is generated by stating its concept in terms of the grammar and vocabulary of the language. For example, we can make a slight variation on the initial example by changing just the method by which the circle is defined:

READINGS

Bertin, Jacques. Semiology of Graphics. Green Bay, WI: University of Wisconsin, 1983.

Bodmer, Frederick. The Loom of Language: An Approach to the Mastery of Many Languages. New York: W.W. Norton, 1944.

Bruce, Vicki and Patrick Green. Visual Perception: Physiology, Psychology and Ecology. Hove, UK: Lawrence Erlbaum Associates, 1990.

Dreyfuss, Henry. Symbol Sourcebook: An Authoritative Guide to International Graphic Symbols. New York: Van Nostrand Reinhold, 1984.

Gombrich, E. H. Art and Illusion: A Study in the Psychology of Pictorial Representation. Princeton: Princeton University Press, 1969.

Horton, William. The Icon Book: Visual Symbols for Computer Systems and Documentation. New York: John Wiley, 1994.

Humphreys, Glyn and Vicki Bruce. Visual Cognition: Computational Experimental and Neuropsychological Perspectives. Hove, UK: Lawrence Erlbaum Associates, 1989.

Jones, Scott, Cynthia Kennelly, Claudia Mueller, et al. Developing International User Information. Bedford, MA: Digital Press, 1992.