出自UXGuide.net

Selection Controls

The controls described in the following sections provide ways for users to make selections from multiple items. Some selection controls allow only a single selection, others can be configured to allow a single selection or multiple selections.

Radio Buttons

A group of radio buttons provides users with a set of mutually exclusive, but related, choices. For example, Security preferences uses radio buttons to allow users to choose which connections can get through the firewall, as shown in Figure 15-20.

Figure 15-20 Radio buttons offer mutually exclusive choices

Radio Button Usage

Use a group of radio buttons when you need to display a set of choices from which the user can choose only one. If you need to display a set of choices from which the user can choose more than one at the same time, use checkboxes instead. Also, if you need to display a single setting, state, or choice the user can either accept or reject, don’t use a single radio button; instead you can use a checkbox. To learn more about checkboxes, see “Checkboxes.”

A group of radio buttons should contain at least two items and a maximum of about five. If you need to display more than five items, consider using a pop-up menu (described in “Pop-Up Menus”).

A radio button should never initiate an action, although the choice of a radio button can change the state of the application. For example, Speech preferences allows the user to choose between two listening methods, as shown in Figure 15-21. If the user chooses the second listening method (“Listen continuously with keyword”), the keyword setup preferences are automatically enabled.

Figure 15-21 A radio button can change the state of an application

Radio Button Contents and Labeling

The selected and unselected appearances of a radio button are provided automatically; you cannot display any text or images in a radio button.

Radio buttons should be accompanied by text labels that describe the choice associated with each button. These labels should have sentence-style capitalization, as described in “Capitalization of Interface Element Labels and Text.”

A set of radio buttons is never dynamic; that is, the contents and labels shouldn’t change depending on the context.

Radio Button Specifications

Control sizes: The dimensions of the radio button itself are fixed for each size, but you determine the length of the label that introduces the group and the length of each radio button label.

Label spacing and fonts: Radio button text (both the introductory label and control label) should be in a font that is proportional to the size of the control. The following fonts are supplied automatically by Interface Builder:

• Regular size: System font.
• Small: Small system font.
• Mini: Mini system font.

Use the following metrics to position the introductory labels correctly:

• Regular size: 8 pixels from the end of the label (the colon) to the control.
• Small: 6 pixels from the end of the label (the colon) to the control.
• Mini: 5 pixels from the end of the label (the colon) to the control.

Control spacing: Radio buttons can be arranged vertically or horizontally, depending on the overall layout of your window or dialog. Typically, however, radio buttons are stacked vertically to emphasize the mutually exclusive relationship among the buttons.

If you position a group of radio buttons horizontally, measure the space needed to accommodate the longest radio button label. Use that measurement to make the space between each pair of radio buttons consistent.

Use the following metrics when you position radio buttons vertically:

• Regular size: 6 pixels between controls.
• Small: 6 pixels between controls.
• Mini: 5 pixels between controls.

For radio buttons stacked vertically or horizontally, be sure to align the baseline of the introductory label with the baseline of the first button’s label, as shown in Figure 15-22.

Figure 15-22 Radio button label alignment

Radio Button Implementation

Radio buttons are available in Interface Builder. To create one using Application Kit programming interfaces, create an NSButton object with type NSRadioButton.

Checkboxes

A checkbox describes a state, action, or value that can be either on or off. In a group of checkboxes, each checkbox should be independent of all the others, unless interdependency is clearly indicated (for example, by displaying a subordinate checkbox indented below a superior checkbox). A checkbox can also enable or disable another control, such as a text field or pop-up menu.

For example, in Sound preferences (shown in Figure 15-23), checkboxes allow users to make choices about sound effects and choose whether to display the volume setting in the menu bar. Notice that users can select or deselect any of the three sound effects checkboxes, because these controls are independent of each other.

Figure 15-23 Checkboxes provide on-off choices to the user

Checkbox Usage

Use a checkbox when you want to allow users to choose between two opposite states, actions, or values. If you want to provide a set of choices from which users can choose only one, use a set of radio buttons instead (see “Radio Buttons” for more on this control).

If there are several independent values or states you want users to control, you can provide a group of checkboxes (see Figure 15-23 for an example of a group of independent checkboxes). If, on the other hand, you need to allow users to make an on-off type of choice that can lead to additional, related on-off choices, you can display checkboxes in a hierarchy that indicates the relationship.

For example, the Trackpad pane of the Keyboard & Mouse preferences allows users to decide which trackpad gestures to use (this window is shown in Figure 15-24). Notice that the “Allow horizontal scrolling” checkbox is dependent on the “Use two fingers to scroll” checkbox, because if users choose not to use two fingers to scroll, they don’t care about horizontal scrolling. Similarly, the Dragging and Drag Lock checkboxes are unavailable unless the Clicking checkbox is selected, because the dragging gestures are dependent on the clicking gesture. The Trackpad pane uses indentation to tell users that some of these settings are dependent on others.

Figure 15-24 Checkboxes can be indented to show a dependent relationship

Checkbox Contents and Labeling

Each checkbox label should clearly imply two opposite states so it’s clear what happens when the option is selected or deselected. If you can’t find an unambiguous label, consider using a pair of radio buttons so you can clarify the states with two different labels.

Checkbox labels should have sentence-style capitalization (see “Capitalization of Interface Element Labels and Text” for more on this style), unless the state or value is the title of some other element in the interface that is capitalized.

When a user selection comprises more than one state, use a dash in the appropriate checkboxes. This symbol is consistent with the mixed-state indicator in menus, as described in “Using Symbols in Menus.”

Checkbox Specifications

Control sizes: The dimensions of the checkbox itself are fixed for each size, but you determine the length of the introductory label and checkbox label.

Label spacing and fonts: Checkbox text (both the introductory label and control label) should be in a font that is proportional to the size of the control. The following fonts are supplied automatically by Interface Builder:

• Regular size: System font.
• Small: Small system font.
• Mini: Mini system font.

If you display an introductory label on the same line as the first checkbox, use the following metrics to position it correctly:

• Regular size: 8 pixels from the end of the label (the colon) to the control.
• Small: 6 pixels from the end of the label (the colon) to the control.
• Mini: 5 pixels from the end of the label (the colon) to the control.

Be sure to align the baseline of the introductory label with the baseline of the closest checkbox’s label, as shown in Figure 15-25.

Figure 15-25 Checkbox label alignment

If you display an introductory label above a group of checkboxes, leave 8 pixels between the label and the first checkbox.

Control spacing: Typically, checkboxes are arranged vertically, because this arrangement makes it easier for users to distinguish one state from another. As described in “Checkbox Usage,” you should align a set of independent checkboxes so that all appear to be at the same level. If one checkbox describes a state or action that depends on the state of another checkbox, you can indent the dependent checkbox below the controlling one.

Use the following metrics when you lay out checkboxes in your window:

• Regular size: 8 pixels between controls when stacked.
• Small: 8 pixels between controls when stacked.
• Mini: 7 pixels between controls when stacked.

Checkbox Implementation

Checkboxes are available in Interface Builder. To create one using Application Kit programming interfaces, create an NSButton object of type NSSwitchButton.

Segmented Controls

A segmented control is divided into two or more segments and behaves as a collection of radio buttons or checkboxes. Like a push button, a segmented control initiates an immediate action—that is, when the user clicks one of the segments, something should happen.

Mac OS X offers different styles of segmented controls for use in different window areas. The segmented control described in this section is suitable for use in the window body; it should not be used in the window-frame areas. For information on styles of segmented controls that are available for use in the window-frame areas (the toolbar and the bottom bar), see “Window-Frame Controls.” Figure 15-26 shows an example of segmented controls in a window-body area.

Figure 15-26 Segmented controls can be used as radio buttons

Segmented Control Usage

Use a segmented control when you want to offer the user a few closely related choices that affect a selected object. You can also use a segmented control to change views or panes in a window. Note that although a segmented control used as a view-changer looks similar to a tab view control, it does not behave the same: A segmented control is not attached to the panes, whereas a tab view control is attached to them. See “Tab Views” for more information about tab views.

If you need to provide a way for users to add and delete objects in a source list or other split view, don’t use a segmented control that contains the plus and minus symbols. Instead, if you need to put an add-delete control in a bottom bar, use a rectangular-style toolbar control (described in “Controls for Toolbars and Bottom Bars”). If you need to put an add-delete control in the window body, use a gradient button (described in “Gradient Buttons”). Also, you don’t need to create the plus and minus icons for these controls, because Mac OS X v10.5 and later provides these and many other icons for your use (see “System-Provided Images” for more information).

Segmented Control Contents and Labeling

A segmented control can contain either icons or text, but not a mixture of both. However, when the control contains icons, you can place a text label below the control.

For the text in each segment, or the label below it, use a noun (or short noun phrase) that describes a view or an object, and use title-style capitalization (see “Capitalization of Interface Element Labels and Text” for more on this style).

If you choose to use icons in a segmented control, be sure to consider using the images that are available in Mac OS X v10.5 and later (see “System-Provided Images” for more information on these). If you need to design your own images, try to imitate the clarity and simple lines of the system-provided images. For some tips on how to create custom images of this type, see “Designing Icons for Rectangular-Style Toolbar Controls.”

Segmented Control Specifications

Control sizes: The height of a segmented control is fixed for each size, but you determine the width of the control. Be sure to make the width of each segment the same, because a segment of a different width might imply that it has different behavior or is of greater or lesser importance than the others.

Label spacing and fonts: The text in a segmented control and the label text is proportional to the size of the control (Interface Builder automatically supplies the appropriate font for the text within the control):

• Regular size: System font for text within the control and for label text below it.
• Small: Small system font for text within the control and for label text below it.
• Mini: Mini system font for text within the control and for label text below it.

Icon sizes: If you need to design an icon for each segment, you should constrain the icon to the following dimensions:

• Regular size: 17 x 15 pixels.
• Small: 14 x 13 pixels.
• Mini: 12 x 11 pixels.

Figure 15-27 Segmented controls can contain icons or text

Segmented Control Implementation

The segmented control is available in Interface Builder. To create one using Application Kit programming interfaces, use the NSSegmentedControl class.

Icon Buttons and Bevel Buttons with Pop-Up Menus

A bevel button or an icon button containing a pop-up menu has a single downward-pointing arrow. The button can behave like a standard pop-up menu, in which the image on the button is the current selection, or the button can represent the menu title and always display the same image.

An icon or bevel button with a pop-up menu is easy to create in Interface Builder. First, drag a pop-up button (an NSPopUpButton object) into your window. Select the button and in the Attributes pane of the inspector, change its type to Pull Down. Finally, for a Rounded or Square Bevel Button, change the style to Square or Shadowless Square, respectively. For an icon button, it doesn’t matter which style you choose, but you must deselect the Bordered checkbox. Resize the button as needed.

See “Bevel Buttons” and “Icon Buttons” for specifications for the buttons themselves. Figure 15-28 shows examples of these types of buttons with pop-up menus.

Figure 15-28 Bevel and icon buttons can include pop-up menus

Pop-Up Menus

A pop-up menu presents a list of mutually exclusive choices in a dialog or window. The pop-up menu described in this section is suitable for use in window-body areas. If you need to provide pop-up menu functionality in a window-frame area (a toolbar or bottom bar), see “Window-Frame Controls” for more information on controls you can use. If you want to add pop-up menu functionality to a bevel or icon button, see “Icon Buttons and Bevel Buttons With Pop-Up Menus” for some specifications you can use. Figure 15-29 shows several pop-up menus in a window.

Figure 15-29 Pop-up menus provide users with menu functionality in a control

A pop-up menu behaves like other menus: Users press to open the menu and then drag to choose an item. The chosen item flashes briefly and is displayed in the closed pop-up menu. If users move the pointer outside the open menu without releasing the mouse button, the current value remains active. An exploratory press in the menu to see what’s available doesn’t select a new value.

Pop-Up Menu Usage

Use a pop-up menu to present up to 12 mutually exclusive choices that the user doesn’t need to see all the time. Sometimes a pop-up menu can be a good alternative to other types of selection controls. For example, if you have a dialog that contains a set of six or more radio buttons, you might consider replacing them with a pop-up menu to save space.

Avoid adding a submenu to any item in a pop-up menu. Doing so hides choices too deeply and is physically difficult for users to use.

Avoid using pop-up menus:

• For more than 12 items; instead, use a scrolling list unless space is restricted.
• When the number of items in the list can change.
• When more than one simultaneous selection is appropriate, such as in a list of text styles (from which users might choose both bold and italic). In this situation, you should instead use checkboxes or a pull-down menu in which checkmarks appear.

Pop-Up Menu Contents and Labeling

A pop-up menu:

• Usually has a label to the left (in left-to-right scripts). The label should have sentence-style capitalization (see “Capitalization of Interface Element Labels and Text” for more information on this capitalization style). The only exception is if the control is used as the title for a group box, which is not a common usage.
• Has a double-arrow indicator.
• Contains nouns (things) or adjectives (states or attributes), but not verbs (commands). If you need to display commands, use a pull-down menu instead. Use title-style capitalization for the item labels.
• Displays a checkmark to the left of the currently selected value when open.

Figure 15-30 shows the components of a pop-up menu.

Figure 15-30 An open pop-up menu

In special cases, you may want to include a command that affects the contents of the pop-up menu itself. For example, in the Print dialog, the Printer pop-up menu contains the Add Printer item, so users can add a printer to the menu; the new printer becomes the menu’s default selection. Put such commands at the bottom of a pop-up menu, below a separator.

Pop-Up Menu Specifications

Control sizes: The height of a pop-up menu is fixed for each size. The width should be wide enough to accommodate the longest item. If you display multiple pop-up menus in a stack the width of each control should be the same.

Label spacing and fonts: The menu-item text in a pop-up menu should be in a font that is proportional to the size of the control. The text of the introductory label should be an emphasized version of the same font. Use the following metrics and specifications for a pop-up menu:

• Regular size:
  • Menu-item text: System font. Leave 9 pixels from the left edge of the control and at least 9 pixels from the double-arrow area.
  • Introductory text: Emphasized system font. Leave 8 pixels between the end of the text (colon) and the left edge of the control.
• Small:
  • Menu-item text: Small system font. Leave 7 pixels from the left edge of the control and at least 7 pixels from the double-arrow area.
  • Introductory text: Emphasized small system font. Leave 6 pixels between the end of the text (colon) and the left edge of the control.
• Mini:
  • Menu-item text: Mini system font. Leave 5 pixels from the left edge of the control and at least 5 pixels from the double-arrow area.
  • Introductory text: Emphasized mini system font. Leave 5 pixels between the end of the text (colon) and the left edge of menu.

Figure 15-31 shows how the pop-up menu introductory text and menu-item text are positioned.

Figure 15-31 A pop-up menu with an introductory label and menu-item text

Control spacing: When you display multiple pop-up menus stacked vertically, leave the following amounts of space between them (Figure 15-32 shows how this looks with regular-size controls):

• Regular size: At least 10 pixels between stacked controls.
• Small: At least 8 pixels between stacked controls.
• Mini: At least 6 pixels between stacked controls.

Figure 15-32 Pop-up menus stacked vertically

Pop-Up Menu Implementation

Pop-up menus are available in Interface Builder. To create one using Application Kit programming interfaces, use the NSPopUpButton class.

Action Menus

An Action menu is a specific type of pop-up menu that’s designed to replace an application-wide contextual menu. For example, in its default set of toolbar controls, the Finder includes an Action menu that performs tasks related to the currently selected item, as shown in Figure 15-33.

Figure 15-33 An Action menu in the Finder toolbar

Action Menu Usage

Use an Action pop-up menu when you want to provide a visible shortcut to a handful of useful commands. Although contextual menus also provide shortcuts to a small number of commands, the fact that they are hidden makes them difficult for new users to discover and for all users to remember. (You can learn more about contextual menus in “Contextual Menus.”) If you are thinking of providing (or already provide) an application-wide contextual menu, you might choose to replace it with an Action menu control in the toolbar.

You can also use an Action menu at the bottom of a list view or source list to provide commands that apply to items in the list. For example, Mail provides an Action menu at the bottom of its source list (shown in Figure 15-34). This Action menu contains commands that act on the account or mailbox selected in the source list.

Figure 15-34 An Action menu can be below a list view or source list

Avoid placing an Action menu control anywhere else in the body of a window. Contextual menus appear when the user selects an object in a window and Control-clicks (or clicks the right button of a properly configured two-button mouse). Because such an object might appear anywhere in a window, there’s no reasonable, consistent location for an Action menu control that contains the commands specific to that object.

Action Menu Contents and Labeling

An Action menu should display only the Action icon and the standard downward-pointing arrow used in icon and bevel buttons with attached pop-up menus (for more information about these controls, see “Icon Buttons and Bevel Buttons with Pop-Up Menus”). It’s essential that you use the system-supplied Action icon so users understand what the control does (for more information on the Action icon and icons available for other types of controls, see “System-Provided Images”).

The contents of an Action menu should conform to the guidelines for contextual menus, such as ensuring that each Action menu item is also available as a menu command and avoiding the display of keyboard shortcuts. For more information on the guidelines that govern contextual menus, see “Contextual Menus.”

An Action menu does not need a label, because users are familiar with the meaning of the Action icon. The only exception is the label you should supply for an Action menu button in a toolbar, because users can customize the toolbar to view toolbar items as icons with text or as text instead of icons (see “Toolbars” for more information on toolbars).

Action Menu Specifications

Control sizes: The Action menu icon is available in regular and small sizes. Use the icon size that’s proportional to the size of the control you want to use.

Control spacing: Spacing depends on what type of control you use. For details, see “Rectangular-Style Toolbar Controls” (if you plan to put an Action menu in a toolbar) or “Gradient Buttons” (if you plan to put an Action menu below a source list or other type of list view).

Action Menu Implementation

You can create an Action menu in Interface Builder. If you need an Action menu control for a toolbar, select a rectangular-style toolbar control (see “Rectangular-Style Toolbar Controls” for more information about this control). In the Attributes pane of the inspector, specify NSActionTemplate for the image.

If you need an Action menu control at the bottom of a source list or list view, you can use a gradient button (see “Gradient Buttons” for information on this control).

Combination Boxes

A combination box (or combo box) is a text entry field combined with a drop-down list. Combo boxes can display a list of likely choices while still allowing the user to type in an item not in the list. For example, Safari allows users to set a preference for the minimum font size to display. In its Advanced preferences pane (shown in Figure 15-35), Safari lists several font sizes in a combo box, and users can supply a custom font size if none of the listed choices is suitable.

Figure 15-35 A combo box allows users to select from a list or supply their own item

Users can type any appropriate characters into the text field. If a user types in an item already in the list, or types in a few characters that match the first characters of an item in the list, the item is highlighted when the user opens the list. A user-typed item is not added to the permanent list.

Users open the list by pressing or clicking the arrow to the right of the text field. The list descends from the text field; it is the same width as the text field plus the arrow box, and it has a drop shadow.

When the user selects an item in the list, the item replaces whatever is in the text entry field and the list closes. If the list was opened by pressing the arrow, the user selects an item in the list by dragging to it. If the list was opened by clicking the arrow, the user selects an item by clicking it or by pressing the Up Arrow or Down Arrow key. The user can accept an item by pressing the Space bar, Enter, or Return.

If the list is open and the user clicks outside it, including within the text entry field, the list closes.

Figure 15-36 A combo box with the list open

Combo Box Usage

Use a combo box when you want to give users the convenience of selecting an item from a list combined with the freedom of specifying their own custom item. A combo box does not allow multiple selections, so be sure to offer users a list of items from which they can choose only one at a time.

Combo Box Contents and Labeling

The default state of the combo box is closed, with the text field empty or displaying a default selection. Recall that user-supplied items are not added to the control’s permanent list.

The default selection (which may not be the first item in the list) should provide a meaningful clue to the hidden choices, but it’s a good idea to introduce a combo box with a label that helps users know what types of items to expect.

Don’t extend the right edge of the list beyond the right edge of the arrow box; if an item is too long, it is truncated.

Combo Box Specifications

Control sizes: The height of a combo box is fixed for each size, but its width should be wide enough to accommodate the longest list item.

Label spacing and fonts: The text of the list items in a combo box should be in a font that is proportional to the size of the control. The text of the introductory label should be an emphasized version of the same font. Use the following metrics and specifications for a combo box:

• Regular size:
  • List-item text: System font. This font is automatically supplied by Interface Builder.
  • Introductory label: Emphasized system font. Leave 8 pixels between the end of the text (colon) and the left edge of the control.
• Small:
  • List-item text: Small system font. This font is automatically supplied by Interface Builder.
  • Introductory label: Emphasized small system font. Leave 6 pixels between the end of the text (colon) and the left edge of the control.
• Mini:
  • List-item text: Mini system font. This font is automatically supplied by Interface Builder.
  • Introductory label: Emphasized mini system font. Leave 5 pixels between the end of the text (colon) and the left edge of menu.

Figure 15-37 shows how the combo box introductory label and list-item text are positioned.

Figure 15-37 A combo box with an introductory label and list-item text

Control spacing: When combo boxes are stacked vertically, leave the following amounts of space between them:

• Regular size: At least 12 pixels.
• Small: At least 10 pixels.
• Mini: At least 8 pixels.

Combo Box Implementation

Combo boxes are available in Interface Builder. To create one using the Application Kit programming interfaces, use the NSComboBox class.

Path Controls

A path control displays the file-system path of the currently selected item. For example, the Finder uses one style of path control to display the path of the currently selected item at the bottom of the window, as shown in Figure 15-38.

Figure 15-38 A path control displays the path of the current item

There are three styles of path control, all of which are suitable for use in the window body:

• Standard
• Navigation bar
• Pop up

Path Control Usage

Use a path control when you want to display the file-system location of the currently selected item in a way that is not overly technical. You can also use a path control to allow users to retrace their steps along a path and open folders they visited earlier.

Path Control Contents and Labeling

All three path-control styles display text in addition to icons for applications, folders, and document types. When users click the pop-up style path control, a pop-up menu appears, which lists all locations in the path and a Choose menu item. Users can use the Open dialog opened by the Choose item to view the contents of the selected folder. (See “The Open Dialog” for more information on the Open dialog.)

Path Control Specifications

The standard-style path control is available in regular size only. The navigation bar and pop-up styles are each available in regular, small, and mini sizes.

You specify the horizontal length of the standard and navigation bar styles; if the displayed path is too long to fit in the control, the folder names between the first location and the last are hidden, as shown in Figure 15-39.

Figure 15-39 A path control can accommodate a large number of locations

Path Control Implementation

The path control is available in Interface Builder. You can change the style of the control in the Attributes pane of the inspector panel. To create this control using Application Kit programming interfaces, use the NSPathControl class.

Color Wells

A color well is a small rectangular control that indicates the current color for a particular setting and, when clicked, displays the Colors window (using the Colors window, users can change a color setting). For example, the Graphic pane of the Pages inspector contains three color wells that allow users to change the color of an object’s fill, outline, and shadow, as shown in Figure 15-40.

Figure 15-40 Color wells in an inspector window

Multiple color wells can appear in a window. Color wells are available in Interface Builder. To create one using Application Kit programming interfaces, use the NSColorWell class.

Image Wells

Use an image well as a drag-and-drop target for an icon or picture. You could use a set of image wells to manage thumbnails in a clip-art catalog, for example. Don’t use image wells in place of push buttons or bevel buttons. Figure 15-41 shows the image well in Accounts preferences.

Figure 15-41 An image well in a preferences pane

Some image wells (the user picture in the Password pane of Accounts preferences, for example) must always contain an image. If the user can clear an image well (leaving it empty) in your application, provide standard Edit menu commands and Clipboard support.

Image wells are available in Interface Builder. To create one using Application Kit programming interfaces, use the NSImageView class.

Date Pickers

A date picker allows users to select a specific date and time in a window. The date-picker control provides two styles of date and time selection:

• A combination of a text field and stepper control
• A graphical calendar and clock

The Date & Time preferences pane uses both types of date picker, as shown in Figure 15-42.

Figure 15-42 Textual and graphical date pickers in a preferences pane

Date Picker Usage

Use a date picker to provide time and date setting functionality in a window. The text field and stepper date picker is useful when space is constrained and you expect users to be making specific date and time selections. This style of date picker can be modified to display various combinations of date format (month, day, and year or month and year) and time format (hour, minute, and second, or hour and minute). It can also display a text field and stepper for either the date or the time by itself. The user adjusts the date and time by clicking the arrows of the stepper or by selecting the field to change (such as the month or minute field) and typing a new value. For example, Figure 15-43 shows a text field and stepper date-picker control that allows month, day, and year selection for the date, and hour, minute, and second selection for the time.

Figure 15-43 A textual date-picker control

The graphical style of the date-picker control displays a calendar and a clock. Use this style when you want to give users the option of browsing through days in a calendar or when the look of a clock face is appropriate for the style of your application. You can display either the calendar or the clock in your window or both together. The user selects a month by clicking the left or right arrows in the upper-left corner of the calendar display and selects a day by clicking its date in the month. A specific time is selected by dragging the hands of the clock. Figure 15-44 shows a date-picker control that displays both a calendar and a clock.

Figure 15-44 A graphical date-picker control

Date Picker Implementation

The date-picker control is available in Interface Builder. You can change the style from textual to graphical in the Attributes pane of the inspector. To create one using Application Kit programming interfaces, use the NSDatePicker class.

Command Pop-Down Menus

A command pop-down menu is similar to a pull-down menu, but it appears within a window rather than in the menu bar. A command pop-down menu presents a list of commands that affect the containing window’s contents. For example, the Colors window (shown in Figure 15-45) contains a menu with commands that can be used to change the contents of the Colors window itself. (If your application uses the Colors window, don’t create your own menu with these same commands; see “Fonts Window and Colors Window” for more information on the Colors window.)

Figure 15-45 A command pop-down menu in the Colors window

Command Pop-Down Menu Usage

Use a command pop-down menu only when the containing window is shared among multiple windows or applications and the menu contains commands that affect the window’s contents. For example, the Colors window (shown in Figure 15-45) can be used in any application. The items in its command pop-down menu allow users to make new palettes of colors available in the Colors window (the open command pop-down menu in the Colors window is shown in Figure 15-46).

Figure 15-46 An open command pop-down menu

Command pop-down menus should contain between 3 and 12 commands. The items in a command pop-down menu do not have to be mutually exclusive.

Command Pop-Down Menu Contents and Labeling

Command pop-down menus do not require an introductory label. A closed command pop-down menu always displays the same text, which acts as the menu title. This is in contrast to a closed pop-up menu, which displays the currently selected item.

Command pop-down menus contain a single, downward-pointing arrow and may display check marks to the left of all currently active selections.

Command Pop-Down Menu Specifications

The specifications for command pop-down menus are the same as those for pop-up menus; see “Pop-Up Menu Specifications” for the appropriate metrics. Figure 15-47 shows how the command pop-down menu text is positioned.

Figure 15-47 A command pop-down menu

Command Pop-Down Implementation

You can use Interface Builder to create a command pop-down menu: select an NSPopUpButton object and change its type to Pull Down in the Attributes pane of the inspector. To create a command pop-down menu using Application Kit programming interfaces, use the NSPopUpButton class.

Sliders

A slider lets users choose from a continuous range of allowable values. For example, Energy Saver preferences (shown in Figure 15-48) provides two sliders that allow users to specify when the computer and the display should sleep.

Figure 15-48 Sliders allow users to choose from a continuous range of values

Sliders can be linear (as shown in Figure 15-48) or circular, as shown in Figure 15-49. Typically, users can spin circular sliders in either direction and through the point between the beginning and ending values.

Figure 15-49 A circular slider

Slider Usage

Sliders support live feedback (live dragging), so they’re especially useful when you want users to be able to see the effects of moving a slider in real time. For example, users can watch the size of Dock icons change as they move the Dock Size slider in Dock preferences.

To decide whether a slider should be linear or circular (and, if linear, whether it should be horizontal or vertical), examine the user’s mental model of the task your application performs and try to meet their expectations of similar real-world controls. (You can learn more about the user’s mental model in “Reflect the User’s Mental Model.”) For example, the circular slider in Figure 15-49 allows users to choose the angle of the drop shadow displayed for an object. The circular slider not only displays the full range of values (0 to 360 degrees) in a compact way, it also mirrors the placement of the drop shadow itself as it is displayed on different sides of the object.

On the other hand, a linear slider is appropriate in Energy Saver preferences (shown in Figure 15-48) because the values range from very small (the screen saver should start after 3 minutes) to very large (the screen saver should never start) and do not increase at consistent intervals. In this case, a linear slider brings to mind a number line that stretches from the origin to infinity.

You can display tick marks with both linear and circular sliders. In general, you should display tick marks when it’s important for users to understand the scale of the measurements or when users need to be able to select specific values. If, on the other hand, users don’t need to be aware of the specific values the slider passes through (as in the Dock size and magnification preferences, for example), you might choose to display a slider without tick marks.

Slider Contents and Labeling

The movable part of a linear slider is called the thumb. The thumb can be either directional or round. The directional thumb is especially useful for sliders with tick marks, because the point of the thumb helps show users the current value (see Figure 15-48 for examples of directional slider thumbs). However, you can also display a directional-thumb slider without tick marks. The round thumb is recommended for sliders that don’t display tick marks, because the rounded lower edge of the thumb does not appear to point to a specific value. (If you use Interface Builder to create a slider, note that specifying any nonzero number of tick marks automatically changes a round thumb to a directional one.) Figure 15-50 shows an example of slider with a round thumb.

Figure 15-50 A linear slider without tick marks should display a round thumb

A circular slider displays a small circular dimple that provides the same functionality as the thumb of a linear slider: Users drag the dimple clockwise or counter-clockwise to change the values.

If you want to display tick marks with a slider, be sure to label at least the starting and ending values. You can do this using numbers or words, depending on what the values represent. If each tick mark represents an equal fraction of the entire range, it may not be necessary to label each one. However, if users can’t deduce the value of each tick mark from its position in the range, you probably should label each one to prevent confusion. For example, it’s important to label some of the interior tick marks in Energy Saver preferences (shown in Figure 15-48), because the intervals do not all represent an equal amount of time. In addition, it’s a good idea to set the context for a slider with an introductory label so users know what they’re changing. Figure 15-51 shows both types of sliders, with and without tick marks.

Figure 15-51 Examples of different types of sliders

Slider Control Specifications

Control sizes: Linear sliders are available in regular, small, and mini sizes. Circular sliders are available in regular and small sizes. The dimensions of sliders are fixed for each size and type, but the inclusion of tick marks changes the effective size of the control. These measurements are stated below to help you with your layout.

Height of horizontally positioned linear sliders:

• Regular size, directional thumb: 19 pixels without tick marks, 25 pixels with tick marks.
• Regular size, round thumb: 15 pixels.
• Small, directional thumb: 14 pixels without tick marks, 19 pixels with tick marks.
• Small, round thumb: 12 pixels.
• Mini, directional thumb: 11 pixels without tick marks, 17 pixels with tick marks.
• Mini, round thumb: 10 pixels.

Width of vertically positioned linear sliders:

• Regular size, directional thumb: 18 pixels without tick marks, 24 pixels with tick marks.
• Regular size, round thumb: 15 pixels.
• Small, directional thumb: 14 pixels without tick marks, 19 pixels with tick marks.
• Small, round thumb: 11 pixels.
• Mini, directional thumb: 11 pixels without tick marks, 17 pixels with tick marks.
• Mini, round thumb: 10 pixels.

Diameter of circular sliders:

• Regular size with tick marks: 32 pixels.
• Regular size without tick marks: 24 pixels.
• Small with tick marks: 22 pixels.
• Small without tick marks: 18 pixels.

Label spacing and fonts: For the labels that describe the range of values, use the following font sizes:

• Regular size: Label font.
• Small: Label font.
• Mini: 9-point label font.

Control spacing: When you display multiple linear sliders, leave the following amounts of space between them:

• Regular size: At least 12 pixels.
• Small: At least 10 pixels.
• Mini: At least 8 pixels.

Slider Control Implementation

Sliders are available in Interface Builder. To create one using Application Kit programming interfaces, use the NSSlider class.

The Stepper Control (Little Arrows)

The stepper control (also known as little arrows) allows users to increment or decrement values. The control is usually used in conjunction with a text field that indicates the current value. The text field may or may not be editable. Figure 15-52 shows several examples of the stepper control.

Figure 15-52 Stepper controls in a panel

The stepper control is available in Interface Builder. To create one using Application Kit programming interfaces, use the NSStepper class.

Stepper Control Specifications

Control sizes: Stepper controls are available in regular, small, and mini sizes. The dimensions of the stepper control are fixed for each size.

Control spacing: Use the following recommended spacing between the stepper and the text field it modifies:

• Regular size: 2 pixels.
• Small: 2 pixels.
• Mini: 1 pixel.

Figure 15-53 A regular-size stepper control

Placards

A placard is a small control at the bottom of a window used to display information, such as the current page number or the current magnification level.

Typically, placards are used in document windows as a way to quickly modify the view of the contents—for example, to change the current page or the magnification. The most familiar use of the placard is as a pop-up menu placed at the bottom of a window, to the left of the horizontal scroll bar, as shown in Figure 15-54.

Figure 15-54 A placard

If you need to offer a menu of commands that affect the contents of the window in ways other than magnification or number of pages per view, don’t add the commands to the placard’s menu. Instead, you should use an Action menu (see “Action Menus” for more information on Action menus).

Placards are not available in Interface Builder. To create one using Application Kit programming interfaces, subclass NSScrollView (for an example of how to do this, see the Sketch sample code located in /Developer/Examples/AppKit when the Developer package is installed). A placard is 15 pixels high and text on it should be in either the small system font or the label font.