C H A P T E R 1 5

Controls

Of the controls that are designed for use in the window body, there are three that can also be used in window-frame areas:

■Icon buttons (including icon buttons that contain a pop-up menu)—see “Icon Buttons” (page 261) and “Icon Buttons and Bevel Buttons With Pop-Up Menus” (page 279) for more information.

■Action menus—see “Action Menus” (page 284) for more information.

■Search fields—see “Search Fields” (page 317) for more information.

This section describes the controls that are designed solely for use in the window-frame areas. If your window contains a toolbar or bottom bar, be sure to use only the controls that are appropriate for each area, including icon buttons, Action menus, and search fields, as needed.

Rectangular-Style Toolbar Controls

The rectangular-style toolbar control can be used in both the toolbar and the bottom bar. (The capsule-style toolbar control, described in “Capsule-Style Toolbar Controls” (page 254), should be used in toolbars only.) The rectangular-style toolbar control is a very versatile control that can behave as a push button, a toggle button, a segmented control, or a pop-up menu. Figure 15-1 shows some variations of the rectangular-style toolbar control in Address Book.

Figure 15-1 Variations of the rectangular-style toolbar control

Rectangular-style toolbar controls

Rectangular-style toolbar controls

Rectangular-Style Toolbar Control Usage

In a toolbar, use rectangular-style toolbar controls to give users access to frequently used commands and objects (for guidelines on designing the contents of a toolbar, see “Designing a Toolbar” (page 199)). For example, the Finder uses a combination of rectangular-style toolbar buttons and segmented controls to allow users to preview an item with Quick Look, choose a view style, see the path of an item’s location, navigatethroughpreviouslyvieweditems,andperformanactiononanitem. Figure15-2showstherectangular toolbar buttons and segmented controls the Finder uses.

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.

C H A P T E R 1 5

Controls

Figure 15-2 Rectangular-style toolbar controls in a toolbar

Rectangular-style toolbar controls in a toolbar

In a bottom bar, use rectangular-style toolbar controls when you need to provide controls that directly affect the contents or organization of the window body. In general, controls in the bottom bar are important, but they are less frequently used than controls in the toolbar (see “Bottom Bars” (page 207) for guidelines on designing the contents of a bottom bar). For example, the rectangular-style toolbar controls in the iCal bottom bar include a segmented control that allows users to add calendars and change the items displayed in the source list, and a button that shows or hides the to-do list, as shown in Figure 15-3.

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.

C H A P T E R 1 5

Controls

Figure 15-3 Rectangular-style toolbar controls in a bottom bar

Rectangular-style toolbar controls in a bottom bar

Rectangular-Style Toolbar Control Contents and Labeling

A rectangular-style toolbar button can contain either text or icons. In addition, this button can contain a downward-pointing arrow that indicates the presence of a pop-up menu. A rectangular-style toolbar segmented control can also contain either text or icons, but should not contain a mix of text and icons.

If you display an icon in a rectangular toolbar control, be sure the meaning of the image is clear and unambiguous (see “Cultural Values” (page 47) for some advice on choosing appropriate imagery). In Mac OS X v10.5 and later, Interface Builder makes it easy to add to a control one of the system-provided images, such as the plus sign, the accounts symbol, or the locked symbol. You can see some of these symbols in the controls in the Finder toolbar, shown in Figure 15-2 (page 251). See “System-Provided Images” (page 151) for more information on standard images available in Mac OS X v10.5 and later. If you need to design your own image,see “DesigningIconsforRectangular-StyleToolbarControls” (page 150)forsomemetricsandguidelines.

If you want to display text in a rectangular-style toolbar control, be sure it is either a noun (or noun phrase) that describes an object, setting, or state, or that it is a verb (or verb phrase) that describes an action. For example, the nouns used in the iCal toolbar controls clearly indicate the function of the controls. Text in rectangular-style toolbar controls should have title-style capitalization (see “Capitalization of Interface Element Labels and Text” (page 131) for more on this style).

If you use a rectangular-style toolbar control that behaves like a checkbox or a toggle button in a toolbar or bottom bar, you may be able to benefit from the automatic highlighting that signifies the on state of the button. If you do this, however, be very sure the control clearly indicates the correct state in the correct situation. Also, if you put such a control in a toolbar, you should provide two descriptive labels that can be displayed below the control. One label should describe the on (or pressed) state and one should describe the off (or unpressed) state. Finally, be sure to describe both of the states in the control’s help tag, whether the control appears in a toolbar or a bottom bar. To learn more about the on-state appearance, see “Rectangular-Style Toolbar Control Implementation” (page 254).

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.

C H A P T E R 1 5

Controls

For example, iCal offers toggle controls in its bottom bar that allow users to show or hide various views. When one of these views is visible, the associated toggle control is highlighted; when the view is hidden, the highlighting disappears. Figure 15-4 shows the iCal bottom bar, along with a help tag that describes both states.

Figure 15-4 Toggle controls in the iCal bottom bar clearly indicate their current state

Important: You must supply a descriptive label for each rectangular-style toolbar control you place in a toolbar so that users can customize the toolbar to display both images and text. This is the external label users see when they select the Icon & Text or Text Only display options in the Customize Toolbar dialog.

Rectangular style toolbar controls used in a bottom bar do not need external descriptive labels.

Rectangular-Style Toolbar Control Specifications

Control sizes: Rectangular-style toolbar controls are available in regular, small, and mini sizes. In a toolbar, display the regular size by default, but be sure to supply the small size to allow users to customize the toolbar.

In a bottom bar, you can use either the regular or the small size, depending on the dimensions of the bottom bar. See “Designing a Bottom Bar” (page 208) for guidelines on how to create and lay out a bottom bar.

Labelspacingandfonts: Labels for rectangular-style toolbar controls should be in the system font appropriate for the size of the control (these fonts are automatically supplied by Interface Builder):

■Regular size: System font.

■Small: Small system font.

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.