Java >
Guidelines Home Page >  Java Look and Feel Design Guidelines
>
Part II: Fundamental Java Application Design
>
5: Application Graphics
>
Using Badges in Button Graphics
  Previous Next Contents/Index/Search


Using Badges in Button Graphics

Badges are a kind of visual shorthand used extensively in toolbar button design. The presence of a menu, the creation of a new object, the addition of an object to a collection, and the review or editing of properties and settings are typically represented by incorporating a badge into an existing button graphic. This section suggests standard ways for you to incorporate badges into the design of your toolbar button graphics.

 The badges in the button graphics in this chapter appear in several of the graphics discussed in Appendix B and are included in the graphics on the book's companion CD-ROM.

Menu Indicators

An arrow in a button graphic indicates that a click (or a press) of the mouse button displays a menu of choices. The following illustration shows the volume toolbar button with a menu indicator.

Figure 50   Menu Indicator in a Volume Toolbar Button

 

Menu Indicator in Toolbar Button

  To indicate that a click or press of the mouse button displays a menu, provide an arrow menu indicator in the lower-right corner of toolbar button graphics.

Badges can extend as far as one pixel from the button border, and their highlights can touch the border. Use a 1-pixel-wide transparent area between a badge and the main button graphic to set off the badge visually. The following illustration shows the buffer area around the menu indicator. The buffer area placed around the indicator shows the background of the toolbar button, not the background of the volume graphic. For details, see Drawing the Button Graphic.

Figure 51   Menu Indicator and Transparent Buffer Area

 

Menu Indicator and Transparent Pixels

  Use transparent pixels around the menu indicator arrow to set it off from the rest of the button graphic.

  Add the standard highlight below or to the right of the badge in a button graphic.

The following figure shows the volume toolbar button with the menu indicator at actual size (16 x 16 pixels).

Figure 52   Volume Toolbar Button (Actual Size)

 

Volume Toolbar Button

The lower-right corner is the standard location for the arrow graphic (in locales with left-to-right reading order). The following illustration shows the arrows for 16 x 16 and 24 x 24 pixel graphics.

Figure 53   Position and Space Around Menu Indicators

 

Position and Space Around Menu Indicators

New Object Indicators

Some buttons create new objects. You can use a twinkle graphic to indicate this button feature. In 16 x 16 pixel graphics, the twinkle graphic might touch the lower edge of the button border, as shown in the following illustration.

Figure 54   New Object Indicator and Transparent Buffer Area

 

New Object Indicator and Transparent Pixels

  To indicate the creation of a new object, provide a twinkle graphic in the lower-right corner of toolbar button graphics.

The following illustration shows a twinkle graphic incorporated into a document toolbar button to indicate that clicking the button creates a new document.

Figure 55   Document Toolbar Button With a New Object Indicator

 

New Object Indicator in Toolbar Button

The following figure shows the toolbar button with the new object indicator at its actual size (16 x 16 pixels).

Figure 56   New Document Toolbar Button (Actual Size)

 

New Document Toolbar Button

Add Object Indicators

Some buttons add objects to a group. You can incorporate an addition symbol into your button, as shown in the following figure, to indicate this aspect of the button's features.

Figure 57   Add Object Indicator and Transparent Buffer Area

 

Add Object Indicator and Transparent Pixels

  To indicate the addition of a new object to a group, provide an addition symbol in the lower-right corner of toolbar button graphics.

The following figure provides an example of the symbol incorporated into a document toolbar button.

Figure 58   Document Toolbar Button With an Add Object Indicator

 

Document Toolbar Button With Add Object Indicator

The following figure shows the toolbar button with the add object indicator at its actual size (16 x 16 pixels).

Figure 59   Add Document Toolbar Button (Actual Size)

 

Add Document Toolbar Button

Properties Indicators

Some buttons open a properties or settings window for the object or action indicated by the main part of the button graphic. You can use a small check mark to represent this action, as shown in the following illustration.

Figure 60   Properties Indicator and Transparent Buffer Area

 

Properties Indicator and Transparent Pixels

  To indicate the opening of a properties or settings window or panel for the object or action represented by the main part of a button graphic, provide a small check mark in the lower-right corner of toolbar button graphics.

The following figure shows a page setup button with the properties indicator at its actual size (16 x 16 pixels).

Figure 61   Page Setup Toolbar Button (Actual Size)

 

Page Setup Toolbar Button

Combining Indicators

As a general rule, you should not need to combine the functions represented by these indicators.

  Design toolbar buttons with badges individually rather than adding badges programmatically. This practice ensures that the transparent buffer area is tuned for each indicator.

  Do not use more than one of the Java look and feel badges (that is, the menu, new object, add object, or properties indicators) in a single button graphic.

  If the button graphic needs to indicate that more choices are available, use a menu indicator and drop-down menu. Ensure that menu items are closely related and parallel.

  Do not overload toolbar buttons with features. Ensure that the button graphic and its tool tip clearly indicate the function of the toolbar button.


Java Look and Feel Design Guidelines, second edition.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.
Previous Next Contents/Index/Search
Left Curve
Java SDKs and Tools
Right Curve
Left Curve
Java Resources
Right Curve
JavaOne Banner Java 8 banner (182)