[ Previous |
Motif and CDE 2.1 Style Guide Reference
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
When to Use
RequiredUse an icon to represent objects that the user can place in a container.
RecommendedDo not use an icon to represent a function. Place function choices on
menus and in push buttons or tools.
RecommendedUse large icons only for window icons.
RequiredDefine an icon to consist of an image and an optional textual label as
ImageUse a common, task-related symbol associated with the object it
LabelIf 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
RequiredEnsure that the image has a border that prevents the image and the
background from merging.
RecommendedUse 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.
RecommendedDesign an icon so that it shows the important states associated with the
object it represents. Such states might include:
The object needs attention, for example, the printer is out of paper.
Some threshold has been reached, for example, a mailbox is full.
The object can only be read, for example, the user does not have the
authority to modify a document.
RecommendedDesign an icon so that it shows the important characteristics associated
with the object it represents. Such characteristics might include:
The security classification of an object, for example, a document is
confidential or of restricted distribution.
The urgency of some task associated with the object, for example, an
electronic mail item that must be responded to immediately.
The size of the object, for example, the number of mail messages in a mail
RecommendedIf 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.
RecommendedWhen 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.
RecommendedIf 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.
RequiredLimit 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.
RecommendedDo 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.
RecommendedUse a small icon to represent the general type of an object when space is
RecommendedAllow 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.
RecommendedUse 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.
RecommendedIf you use colors in icons, also provide a separate set of icons that can
be used on gray scale or monochrome displays.
RequiredIf an icon represents a named object, label the icon with the name of the
RequiredIf 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
RecommendedSupport direct editing to allow mouse users to change the textual label of
RecommendedVisually separate the textual label from the icon image.
RecommendedWhen 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 |