[ Previous | Next | Contents | Glossary | Home | Search ]
Motif and CDE 2.1 Style Guide Reference

Icon

Reference

Description

An icon is a pictorial representation of an object that can be manipulated directly. An icon typically consists of an image and a label. The image might be text, a frame from a video object, or a graphic representation of a printer or document, and may include animation. Icons for the same object may be displayed in various sizes. The operating environment and the container for a collection of icons may support distinct small, medium, and large icons that represent the same object but differ in detail and size.

Figure 32. Window and Application Icons


%>Window Icon: View figure. Application Icons: View figure.

When to Use

Required
Use an icon to represent objects that the user can place in a container.

Recommended
Do not use an icon to represent a function. Place function choices on menus and in push buttons or tools.

Recommended
Use large icons only for window icons.

Guidelines

Required
Define an icon to consist of an image and an optional textual label as follows:

Image
Use a common, task-related symbol associated with the object it represents.

Label
If you provide a label, place the label below the image. If the image is small relative to the size of the label, place the label to the right of the image. For information on bidirectional and vertical language support, see Chapter 11.

Required
Ensure that the image has a border that prevents the image and the background from merging.

Recommended
Use a readily identifiable shape or outline for the icon. This helps to improve user recognition and reduce a user's dependence on other identifiers such as the label or color. For example, an icon of a printer clearly identifies its purpose; the label can be reduced to a brief identifier for the specific printer.

Recommended
Design an icon so that it shows the important states associated with the object it represents. Such states might include:

  1. The object needs attention, for example, the printer is out of paper.

  2. Some threshold has been reached, for example, a mailbox is full.

  3. The object can only be read, for example, the user does not have the authority to modify a document.

    4. Recommended
    Design an icon so that it shows the important characteristics associated with the object it represents. Such characteristics might include:

    1. The security classification of an object, for example, a document is confidential or of restricted distribution.

    2. The urgency of some task associated with the object, for example, an electronic mail item that must be responded to immediately.

    3. The size of the object, for example, the number of mail messages in a mail container.

      4. Recommended
      If you show shadows on objects to add depth to the image, assume the light source is from the front top-left and place the shadows to the right, below and behind the object.

      Recommended
      When several elements or objects are used together within one icon image, visually unite them. For example, overlap the elements to present a more visually unified whole.

      Recommended
      If your application will be presented in more than one language, avoid using words, body parts, or figures that involve signing with hands or fingers in the icons.

      Required
      Limit the detail in a small icon to avoid a cluttered appearance. For example, do not display a count of the number of objects in the container.

      Recommended
      Do not use an algorithmically reduced copy of the original icon as a small icon. Instead, use a separate graphic to display a small icon that shows fewer characteristics so that the characteristics can be more easily distinguished.

      Recommended
      Use a small icon to represent the general type of an object when space is limited.

      Recommended
      Allow a user to customize the image of an icon that represents an object. For example, allow a user to change the icon to make it more meaningful, recognizable, or personal.

      Recommended
      Use colors in an icon to enhance user recognition and to intentionally link or group related elements. To avoid a busy, cluttered screen and to reduce the chance of unintentionally indicating a relationship between objects, do not overuse different colors.

      Recommended
      If you use colors in icons, also provide a separate set of icons that can be used on gray scale or monochrome displays.

      Required
      If an icon represents a named object, label the icon with the name of the object.

      Required
      If direct editing can be used to change the textual label of an icon, include a Properties choice in the icon's pop-up menu, and include a text-entry field in the properties window through which the label can be changed.

      Recommended
      Support direct editing to allow mouse users to change the textual label of an icon.

      Recommended
      Visually separate the textual label from the icon image.

      Recommended
      When the icon has focus, expand the width of the label to display the entire text. For example, when the icon for the "1999 Financial Goals" document has focus, display the entire document name as the icon label.

      Supplemental Related Topics

      For more information, see the Label, Object, and Text-Entry Field (Control) reference pages.

      [ Previous | Next | Contents | Glossary | Home | Search ]