HTML Version |
Updates |
Reader Feedback
Chris Ryan and Harry Vertelney, January 2000
Introduction
There are several "visual language" issues that often arise in the design of toolbar button graphics.
For instance, some buttons display a menu when the user clicks and holds the mouse on them. Netscape Communicator
and Microsoft Internet Explorer browsers use small arrows within the button graphics for "Back" and "Forward"
to indicate the presence of menus that contain lists of pages visited before or after the current page. These extend
the function of the buttons by letting users jump directly to a page in the list, rather than clicking the button
repeatedly.
There are other functions such as: the creation of a new object, adding an object to a collection, reviewing
or editing settings and properties, that are commonly represented by toolbar buttons. These can be represented
by a visual indicator, or modifier, added to the button graphic. This note proposes a standard way to incorporate
these modifiers into your button graphics.
Menu Indicator
An arrow is used as follows to indicate that a click (or a click and hold) displays a menu of choices.
Erase the pixels around the arrow as shown below, to set it off from the rest of the graphic. Leave this "buffer
area" transparent, along with the other transparent pixels in the image (see "Designing
Button Graphics" in Chapter 5, Application Graphics,
of the Java Look and Feel Design Guidelines).
Here is the final result at actual size (16x16).
The lower right hand corner is the recommended location for the modifier. The following illustration shows the
position and space around arrows for 16x16 and 24x24 toolbar button graphics.
New Object Indicator
A similar approach is taken to indicate that a button containing a "twinkle modifier," creates a new
object.
Here is an example of the twinkle modifier applied to a document graphic to indicate "new document."
Actual size "new document" button graphic:
Add Object Indicator
Here again, a similar approach is taken for indicating that a button adds an object to a group.
Below is an example of the symbol applied to a document graphic to indicate "add a document."
Actual size "add document" button graphic:
Properties or Preferences Indicator
A small representation of a check mark is used to indicate that the button opens a properties or preferences window
or panel for the object or action represented by the main part of the button graphic.
Here is an example at actual size: Page Setup.
Combining Indicators
In general, there should not be a need to combine the functions represented by these indicators; distinct buttons
should correspond to separate menu items. For instance, there should be separate buttons for creating a new document
and for setting document properties. Do not use more than one of the symbols described above on a single button
graphic.
In some cases you may need to indicate that more choices are available. For example, a button might create an
empty document when clicked; but when clicked and held, a list of document templates are displayed in a menu. In
this case, the menu indicator should be used instead of the "new" indicator, to show that the additional
options are available. This is similar to the "back" and "forward" buttons on popular web browsers:
a single click navigates to the previous or next page in the "go" list; a click and hold displays a menu
listing all of the documents back or forward in the list.
Further overloading of toolbar button functionality is not recommended. There should be a separate button for
preferences or properties; and items in a menu opened from a toolbar button should be related to the default (click
without hold) button command. The button graphic and its tool tip should be enough to describe adequately the button's
function.
