| link >
Guidelines Home Page > Java Look and Feel Design Guidelines >
Part II: Fundamental Java Application Design >
5: Application Graphics >
Designing Button Graphics
Button graphics appear inside buttons--most often in toolbar buttons. Such graphics identify the action, setting, mode, or other function represented by the button. For instance, clicking the button might carry out an action (creating a new file) or set a state (boldfaced text).
For a collection of button graphics designed in the Java look and feel, see Appendix B. The graphics in this repository can also be found on the book's companion CD-ROM.
The two standard sizes for button graphics are 16 x 16 pixels and 24 x 24 pixels. You can use either size (but not both at the same time) in toolbars or tool palettes, depending on the amount of space available. For details on toolbars, see Toolbars.
It might be appropriate to use toolbar buttons that display text in addition to or instead of graphics. Consider this approach if your usability studies establish that the action, state, or mode represented by the button graphic is difficult for users to comprehend.
If you include both text and graphics in a button, the size of the button will exceed 16 x 16 or 24 x 24 pixels. Consider using tool tips instead, or let users choose between displaying button text or using tool tips. For details, see Tool Tips for Toolbar Buttons.
Use tool tips to help clarify the meaning of toolbar buttons.
When designing your button graphics, clearly show the action, state, or mode that the button initiates.
Keep the drawing style symbolic; too much detail can make it more difficult for users to understand what a button does.
Use a flush 3D border to indicate that a button is clickable.
Draw a distinct dark border without anti-aliasing or other exterior detail (except the flush 3D highlight) around the outside of a button graphic.
Do not include text as part of your button graphics (GIF files). Use button text instead. Keep the button text in a resource bundle to facilitate localization.
Setting tool tips automatically sets the
accessibleDescription of an object, which in turn, greatly benefits users with physical and cognitive limitations.
Use a single style to create a "family" of button graphics with common visual elements. You might use a similar color palette, size, and style for all button groups across your GUI, such as toolbar buttons, toggle buttons, or command buttons. Review the graphics in context before finalizing them.
The flush 3D effect simulates the appearance of beveled buttons or shapes inset at the same level as the background. To achieve this effect, you need to create a shadow and a highlight for both the background and the button graphic. In smaller button graphics, you can achieve this effect by placing highlights at the correct locations along the edges of the icon. (The shadows are already provided by the darker outline of the button graphic.) In a larger 24 x 24 or 32 x 32 pixel graphic, you can use a graduated highlight within the button graphic to simulate a more smoothly rounded edge.
The size of a button graphic includes all the pixels within the border. As shown in the following illustration, horizontal and vertical dimensions are both either 16 or 24 pixels. The border abuts the button graphic (that is, there are no pixels between the border and the graphic).Figure 47 Button Graphics With Borders
Leave an apparent two pixels between the button border and the graphic. Because the white pixels in both the button border and the button graphic are less visually significant than the darker borders, the area used for most of the drawing is offset within the 16 x 16 or 24 x 24 space. Actually, 1 pixel is reserved on the left and top, and 2 pixels are reserved on the right and bottom (but highlights are allowed to extend in this area). The following illustration shows the standard drawing area for both button sizes.Figure 48 Primary Drawing Area in Buttons
The following illustration shows 16 x 16 and 24 x 24 button graphics that use the maximum recommended drawing area. On all four sides, there are 2 pixels between the dark border of the button graphic and the dark portion of the button border.Figure 49 Maximum-Size Button Graphics
|1. Decide which sizes you want to use for the button or toolbar graphic and identify your primary drawing area.|
|2. Draw a basic outline shape, taking care to remain within the primary drawing area.|
| 3. Add some basic color.
| 4. Add the flush 3D effect by drawing highlights on the inside left and top, and on the outside bottom and right of the outline. Note that the highlights can extend beyond the primary drawing area.
|5. Try a gradient instead of the flat color.|
|6. Add a pattern. This technique minimizes banding and dithering on displays with 256 or fewer colors (see Maximizing Color Quality).|
|7. Define the empty area around your button graphic (in which you have not drawn anything) as transparent pixels in the GIF file.|
|8. Test your button graphic on target platforms.|
|Java Look and Feel Design Guidelines, second edition.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.