UI Element Guidelines: Controls

Controls are graphic objects that cause instant actions or visible results when users manipulate them. In OS X, the Application Kit (or AppKit) framework provides the controls you can use in your app, such as push buttons, radio buttons, checkboxes, text fields, and table views.

Guidelines that Apply Generally to Controls

You are strongly encouraged to use the system-provided controls in your app. When you do this, you benefit in three important ways:

Avoid mixing control sizes in the same view. Many controls are available in three sizes: regular, small, and mini. In most cases, you want to use regular-size controls in your windows. When space is at a premium, such as in a panel or within a pane, you might want to use small or (less often) mini controls. Although in rare cases a pane might contain small controls while the surrounding window contains regular controls, it’s best to avoid mixing different sizes of controls in the same window. (Note that all panes in a window should use controls of the same size.)

In general, avoid resizing controls vertically. Many controls can be resized horizontally, but most controls are fixed vertically for each available size. If you vertically resize some controls, you might trigger unexpected results, such as a change in control style.

Use the proper text size and font within a control. For example, a regular-size control generally uses the regular system font for text that appears within it, such as “OK” in a button or a menu item name in a pop-up menu. When you create your UI in Interface Builder, you automatically get the proper font and size for each standard control you use.

Use the proper spacing between controls. When controls are spaced evenly in a window, the window is more attractive and easier for users to use. The layout guides in Interface Builder show you the recommended spacing between controls and between UI elements and window edges.

Window-Frame Controls

A small subset of controls can use a display style that makes them suitable for use in the window-frame areas (that is, in the toolbar or bottom bar). The control and style combinations that you can use in window-frame areas are listed in Table 8-1.

Table 8-1  Control and style combinations designed for use in the window frame

Control (API name)

Style

Example

Round textured button (NSButton)

NSTexturedRoundedBezelStyle

../art/ct_roundtexturedbutton.jpg

Textured rounded segmented control (NSSegmentedControl)

NSSegmentStyleTexturedRounded

../art/ct_texturedroundsegmented.jpg

Round textured pop-up menu (NSPopUpButton with PopUp attribute *)

NSTexturedRoundedBezelStyle

../art/ct_roundtexturedpopup.jpg

Round textured pop-down menu (NSPopUpButton with PopDown attribute)

NSTexturedRoundedBezelStyle

../art/ct_roundtexturedpopdown.jpg

Search bar (NSSearchField)

Not applicable (the correct style is used automatically)

../art/ct_searchbarintoolbar.jpg

*Note that you can use the NSTexturedRoundedBezelStyle style of pop-up menu to place an Action menu in a toolbar (for more information about Action menus, see “Action Menu”).

You can see examples of most of these types of window-frame controls in the Mail toolbar.

../art/ct_toolbarcontrols.jpg

Don’t use the window frame–specific control styles in the window body. The control and style combinations listed Table 8-1 have been specially designed to look good on the window-frame surface of the toolbar (or bottom bar). These control styles don't look good in the window body. Specifically, these control styles have a translucency that is designed to coordinate with the window-frame surface, and they include inactive and other appearances that don't harmonize with other controls and styles.

In general, don’t use window-body controls or styles in the window frame. All system-provided controls and styles other than those listed in Table 8-1 have been designed to look good in the window body and its content regions, and should not be used in the window frame. The exception is the icon button, which can be used in both window-frame and window-body areas. In general, apps reserve this type of toolbar control for preferences windows. To learn more about designing icons for toolbar icon buttons, see “Designing Toolbar Icons.” To learn more about using an icon button in general, see “Icon Button.”

If your window includes a bottom bar (which is not typical), you can use window-frame controls in the bottom bar. For some guidelines on creating a bottom bar, see “Providing a Bottom Bar.”

Avoid combining text and icons within a toolbar control. A toolbar button can contain either text or an icon. And, although each segment in a segmented toolbar control can contain either text or an icon, it’s best to avoid combining text segments with icon segments in the same segmented control.

Interface Builder makes it easy to add one of the system-provided images to a toolbar control, such as the plus sign, the accounts symbol, or the locked symbol. Some of these symbols are shown here in the controls in the Finder toolbar. For more information about the system-provided images, see “System-Provided Icons.” If you need to design your own image to place in a toolbar control, see “Designing Toolbar Icons” for some metrics and guidelines.

../art/ct_standardiconsintoolbar_2x.png

If you want to display text inside a toolbar control, be sure it’s either a noun (or noun phrase) that describes an object, setting, or state, or that it’s a verb (or verb phrase) that describes an action. Text inside toolbar controls should have title-style capitalization (for more on this style, see “Capitalizing Labels and Text”).

Accurately indicate the current state of a two-state control in a toolbar. If you use a toolbar control that behaves like a checkbox or a toggle button, you may be able to benefit from the automatic highlighting that signifies the on state of the control. If you do this, be very sure that the control clearly indicates the correct state in the correct situation.

If you put a two-state control in a toolbar, you should also 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 “Appearance and Behavior.”

For example, Mail includes a toggled toolbar button that users can use to take their accounts online or offline (shown here in its pressed state). The “Go Offline” label that accompanies the pressed state changes to “Go Online” when the control is in its unpressed state.

../art/ct_togglebuttonintoolbar.jpg

To provide a toggle-style toolbar button that displays an on-state appearance, use an NSButton object with style NSTexturedRoundedBezelStyle, with which you’ve associated an image. Be sure the button cell’s showsStateBy mask contains NSContentsCellMask. This means that AppKit uses the alternate image and title when the cell’s state is NSOnState. However, to get the on-state effect do not provide an alternate image. If you’re using Interface Builder, place a Rounded Textured Button object in your toolbar or bottom bar; in the Attributes pane of the inspector, set the mode to Toggle, provide an image, and don't provide an alternate image.

To provide a segmented toolbar control that displays an on-state appearance, use an NSSegmentedControl object with style NSSegmentStyleTexturedRounded and mode NSSegmentSwitchTrackingSelectAny. If you’re using Interface Builder, place a Segmented Control object in your toolbar or bottom bar; in the Attributes pane of the inspector, set the style to Textured Rounded and the mode to Select Any. Be sure to provide an image for the control (in Interface Builder, select an image from the Image combo box in the Attributes inspector).

Light Content Controls

A small subset of controls can use an appearance that makes them suitable for display in the content area of a window or view that has a white or light-colored background, such as a popover or a document view. To use this appearance in your app, apply the NSAppearanceNameLightContent appearance type to the relevant controls (to learn how to do this, see NSAppearance Class Reference). The controls that can adopt the light-content appearance are listed in Table 8-2.

Table 8-2  Controls that support the light content appearance

Control (API name)

Example

Notes

Push button (NSButton type NSMomentaryPushInButton or NSMomentaryLightButton)

../art/light_push_2x.png

Can display an image instead of text.

One point taller than standard Aqua push button.

Radio button (NSButton type NSRadioButton)

../art/light_selected_radio_2x.png ../art/light_unselected_radio_2x.png

Same metrics as standard Aqua radio button.

Checkbox (NSButton type NSSwitchButton)

../art/light_selected_checkbox_2x.png ../art/light_unselected_checkbox_2x.png

Same metrics as standard Aqua checkbox.

Segmented control (NSSegmentedControl)

../art/light_segmented_2x.png

One point taller than standard Aqua segmented control.

Slider (NSSlider)

../art/light_slider_2x.png

Same metrics as standard Aqua slider.

Text field (NSTextField)

../art/light_text_field_2x.png

One point taller than standard Aqua text field.

Combination box (NSComboBox)

../art/light_combo_2x.png

One point taller than standard Aqua combination box.

Pop-up menu (NSPopUpButton)

../art/light_popup_2x.png

One point taller than standard Aqua pop-up menu.

Command pop-down menu (NSPopUpButton of type Pull Down)

../art/light_popdown_2x.png

One point taller than standard Aqua command pop-down menu.

Search field (NSSearchField)

../art/light_search_field_2x.png

One point taller than standard Aqua search field.

Don’t use light content controls in a dialog or other content area that has a dark background. Light content controls are designed to look good on a white or light-colored background. In content areas that use a dark-colored background, use the standard Aqua appearance.

Test a layout that uses the taller light content controls. If you apply the light content appearance to a view that uses the taller light content controls—that is, push button, segmented control, text field, combination box, pop-up menu, command pop-down menu, or search field—you may find that the layout changes slightly. In general, the extra height in these controls is above the text baseline, which is positioned the same in both the standard and light content versions. It’s especially important to test for layout differences if you reuse a XIB file and dynamically switch between appearances in code. (In Interface Builder, you can use the Appearance pop-up menu in the Attributes inspector to apply the light content appearance to a window or view on the canvas.)

Buttons

Buttons initiate an immediate action. There are several types of buttons in OS X, each of which is well suited to a certain set of tasks. As you design your app’s user interface, be sure to select the appropriate button for each job. The guidelines in the following sections help you use each type of button correctly.

Push Button

A push button performs an app-specific action.

../art/ct_pushbuttonexamples.jpg

Push buttons are designed for use in the window body only, not in the window-frame areas. To learn about the controls that you can use in a toolbar or bottom bar, see “Window-Frame Controls.” To learn about the push button appearance that’s appropriate for a window that has a light-colored or white background, see “Light Content Controls.”

Push buttons are available in Interface Builder. To create one programmatically, create an NSButton object of type NSMomentaryPushInButton or NSMomentaryLightButton. Note that the NSTexturedRoundedBezelStyle style of NSButton is designed for use in the window frame.

Appearance and Behavior

A standard Aqua push button always contains text, it does not contain an image; a light content push button can contain text or an image.

Aqua push buttons are clear in appearance, that is, without color, except the default button in a dialog. (The default button performs a safe action and is activated when users press Return or Enter; for more information, see “Dismissing Dialogs”). You can see the two different button colors in the standard OK and Cancel buttons.

../art/ct_standardpushbtn.jpg

When the user clicks a nondefault button, such as Cancel, that button acquires color and the default button loses its color. This behavior is automatically implemented by the system-provided Aqua push buttons.

Light content push buttons don’t provide a default state.

Guidelines

Use a push button in the window body to perform an instantaneous action, such as Print or Delete. A push button can also open another window to complete its operation.

Avoid using a push button to mimic the behavior of other controls. Users expect an immediate action to occur when they click a push button, including the opening of another window or the dismissal of a dialog. In particular:

  • Don’t use a push button to indicate a state, such as on or off. Instead, you can use checkboxes to indicate state, as described in “Checkbox.”

  • Don’t use a push button as a label. Instead, use static text to label elements and provide information in the interface (for more information, see “Static Text Field”).

  • Avoid associating a menu with a push button.

Provide enough space between buttons so that users can click a specific one easily. In particular, if a push button can lead to a potentially dangerous or destructive action (such as Delete), it should be far enough away from safe buttons so that users are unlikely to click it accidentally.

Avoid displaying an icon in an Aqua push button. An Aqua push button should contain text that describes the action it performs. If appropriate, a light content push button can contain an icon.

Use a verb or verb phrase for the title of a push button.The title you create should describe the action the button performs—Save, Close, Print, Delete, Change Password, and so on. If a push button acts on a single setting or entity, name the button as specifically as possible; “Choose Picture…,” for example, is more helpful than “Choose…” Because buttons initiate an immediate action, it shouldn’t be necessary to use “now” (Scan Now, for example) in the button title.

Use title-style capitalization for the button title and add an ellipsis if necessary. To learn more about title-style capitalization, see “Capitalizing Labels and Text.”

If the push button immediately opens another window, dialog, or app to perform its action, use an ellipsis in the title. An ellipsis prepares users to expect another window to open in which they complete the action the button initiates. For example, Print & Scan preferences uses ellipsis characters in the names of buttons that open the print queue window and show information about the printer’s options and supplies.

../art/ct_ellipsisinpushbutton.jpg

Be sure to resize a button’s width to accommodate the title. If you don’t make a button wide enough, the end caps clip the text. Note that the height of a push button is fixed for each size.

In general, avoid supplying a static text label to introduce a push button. You should be able to avoid an introductory label by clearly describing the push button action in the button title.

Icon Button

An icon button, or freestanding icon, performs an app-specific action, often in a toolbar. For example, System Preferences uses icon buttons to represent its preferences panes.

Icon buttons used in a toolbar

You can use an icon button in a toolbar or in the window body. (Icon buttons are not suitable for use in a bottom bar.)

To create an icon button in Interface Builder, drag a bevel button or a square button into your window, add your icon, and deselect the Bordered checkbox in the Attributes pane of the inspector. To create one using AppKit programming interfaces, use the setBezelStyle: method of NSButtonCell with NSShadowlessSquareBezelStyle as the argument.

Appearance and Behavior

An icon button does not have a visible rectangular edge around it. In other words, the entire button is clickable, not just the icon.

An icon button can have a pop-up menu attached to it, which is indicated by the presence of a single downward-pointing arrow. For more information about this usage, see “Icon Button or Bevel Button Containing a Pop-Up Menu.”

Guidelines

Use an icon button to perform an app-specific action in either the toolbar or the window body. You can also use an icon button to provide mode-switching functionality in a preferences window toolbar.

Avoid mixing icon buttons with toolbar controls in a toolbar. Toolbars look best, and are easiest for users to understand, when they contain controls of the same type.

Make sure the meaning of an icon button is clear and unambiguous. Because users might view the icon without its label, it’s especially important to choose an icon that accurately communicates its meaning. For tips on designing attractive and expressive toolbar icons, see “Designing Toolbar Icons.”

Create a label that names a thing or describes an action; also, use title-style capitalization. An icon button that functions as a pane-switcher should name a thing, such as Network or Accounts. If an icon button performs an action, its label should describe it succinctly, such as Mask or Show Art. Use title-style capitalization for both types of icon button label (for more information about this style, see “Capitalizing Labels and Text”).

Avoid making the icon too big for the button. Even though the outer dimensions of an icon button are not visible, they determine the hit target area. In general, it works well to size the icon button so that you leave a margin of about 10 pixels all the way around an icon.

If you include a label, place it below the icon, as shown here in the Sound icon button. (Use the small system font for a label.)

Icon button dimensions

Avoid putting an icon button too close to other UI elements. Don’t forget that the entire button area is clickable (not just the icon). When you use Interface Builder, the layout guides help you see where the edges of an unbordered icon button are.

Scope Button

A scope button specifies the scope of an operation, such as a search, or defines a set of scoping criteria.

../art/ct_recessedscopeexample.jpg

Scope buttons are available in Interface Builder. To create a recessed scope button using AppKit programming interfaces, use the setBezelStyle: method of NSButtonCell with NSRecessedBezelStyle as the argument. To create a round rectangle scope button, pass NSRoundRectBezelStyle as the argument to the setBezelStyle: method.

Appearance and Behavior

Scope buttons are available in two different styles:

The recessed scope button: ../art/ct_recessedscope.jpg

The round rectangle scope button: ../art/ct_rndrectscope.jpg

Typically, round rectangle and recessed scope buttons contain text, but they can instead contain images.

Guidelines

Use a recessed scope button to display types or groups of objects or locations that users select to narrow the focus of a search or other operation.

Use a round rectangle scope button to allow users to save a set of search criteria and to change or set scoping criteria.

For example, the Finder uses round rectangle scope buttons to display search criteria, such as creation and last opened dates, and to provide a save search button. The Finder location buttons, such as This Mac and Shared, are recessed scope buttons.

../art/ct_rndrectscopeexample.jpg

If you want to display an image in a scope button, be sure to consider the system-provided images before you spend time designing your own. If you decide to design a custom icon for use in a scope button, see “Designing Toolbar Icons.”

Gradient Button

A gradient button performs an instantaneous action related to a view, such as a source list.

../art/ct_gradbuttonexample.jpg

Gradient buttons are available in Interface Builder. To create one using AppKit programming interfaces, use the setBezelStyle: method of NSButtonCell with NSSmallSquareBezelStyle as the argument.

Appearance and Behavior

Gradient buttons can have push-button, toggle, and pop-up menu behavior. For example, Mail uses gradient buttons below the sidebar to offer New Mailbox, Show/Hide Mail Activity, and Action menu functionality:

../art/ct_gradbuttonuse.jpg

Gradient buttons contain images; they don't contain text.

Guidelines

Use a gradient button to offer functionality that is directly related to a source list or other view, such as a column view.

Because the function of a gradient button is closely tied to the view with which it’s associated, there’s little need to describe its action using a label.

When possible, use system-provided images, such as the Action and the Add images, because their meaning is familiar to users. For more information on the system-provided images, see “System-Provided Icons.” If you need to create your own icons to use in a gradient button, see “Designing Toolbar Icons” for some guidance.

The Help Button

The Help button opens a window that displays app-specific help.

../art/ct_helpbutton.jpg

The standard Help button is available in Interface Builder. To create a Help button using AppKit programming interfaces, use the setBezelStyle: method of NSButtonCell with NSHelpButtonBezelStyle as the argument.

Appearance and Behavior

The Help button is always a clear, circular button. The Help button is available in a single size and it always contains the standard OS X question mark graphic.

When users click a Help button, the system-provided Help Viewer app opens to a page in the current app’s help book. An app can determine whether the help book should open to a top-level page or to a page that is appropriate for the context of the button.

Guidelines

Don’t create a custom button to perform the function of the standard Help button.

In dialogs (including preferences windows) and drawers, the Help button can be located in either the lower-left or lower-right corner. In a dialog that includes OK and Cancel buttons (or other buttons used to dismiss the dialog), the Help button should be in the lower-left corner, vertically aligned with the buttons. In a dialog that does not include OK and Cancel buttons, such as a preferences window, the Help button should be in the lower-right corner. For example, the Mail Fonts & Colors preference displays a Help button in the lower-right corner.

Help button in the Page Setup dialog

For information on providing help in your app, see “User Assistance.”

Bevel Button

A bevel button is a multipurpose button designed for use in the window-body area.

You can use bevel buttons singly (as a push button) or in groups (as a set of radio buttons or checkboxes). The Preview inspector window uses bevel buttons as push buttons that rotate and crop the current content.

../art/ct_bevbuttonexample.jpg

Bevel buttons are available in Interface Builder. To create one using AppKit programming interfaces, use the setBezelStyle: method of NSButtonCell with NSRegularSquareBezelStyle as the argument. (To create a square-cornered bevel button, use NSShadowlessSquareBezelStyle as the argument for the setBezelStyle: method.)

Appearance and Behavior

Bevel buttons can have square or rounded corners. They can display text, icons, or other images. Bevel buttons can also display a single downward-pointing arrow in addition to text or an image, which indicates the presence of a pop-up menu (for more information about this usage, see “Icon Button or Bevel Button Containing a Pop-Up Menu”).

Bevel buttons can behave like push buttons or can be grouped and used like radio buttons or checkboxes.

Guidelines

You can use a square-cornered bevel button when space is limited or when adjoining a set of bevel buttons.

If you use a bevel button as a push button, its label should be a verb or verb phrase that describes the action it performs. If you provide a set of bevel buttons to be used as radio buttons or checkboxes, you might label each with a noun that describes a setting or a value.

If you choose to display an icon or image instead of a text label, be sure the meaning of the image is clear and unambiguous. It’s recommended that you create an icon no larger than 32 x 32 pixels. Maintain a margin of between 5 and 15 pixels between the icon and the outer edges of the button. A button that contains both an icon and a label may need a margin around the edge that’s closer to 15 pixels than to 5 pixels. Use label font (10-point Lucida Grande Regular) for text labels.

Bevel button examples

You can also use Interface Builder to add a pop-up menu to a bevel button. First, drag a pop-up button into your window then, in the Attributes pane of the inspector, change the type to Pull Down. Finally, in the same pane, change the style to Bevel (for a standard bevel button look) or Square (for a square-cornered bevel button look).

Round Button

A round button initiates an immediate action.

Examples of round buttons

Round buttons are available in Interface Builder. To create one using AppKit programming interfaces, use the setBezelStyle: method of NSButtonCell with NSCircularBezelStyle as the argument.

Appearance and Behavior

Round buttons contain images only, not text.

Guidelines

Round buttons, like bevel buttons, are seldom used in modern Mac apps. You might want to use a gradient button that contains a system-provided (or custom) image as an alternative. For more information about gradient buttons, see “Gradient Button”; for more information about system-provided images, see “System-Provided Icons.”

Don’t use a round button to create a Help button. If you provide onscreen help, use the standard Help button instead (to learn more about this control, see “The Help Button”).

Don’t use round buttons as radio buttons or as checkboxes. If you need to provide functionality of these types, use radio buttons (see “Radio Buttons”) or checkboxes (see “Checkbox”).

If you need to display a single letter in a round button you should treat the letter as an icon.

Selection Controls

Selection controls 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 displays a set of mutually exclusive, but related, choices.

../art/ct_radiobuttons_2x.png

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

Appearance and Behavior

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

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

Radio buttons are available in both standard Aqua and light content appearances. To learn more about controls that are appropriate for a window that has a light-colored or white background, see “Light Content Controls.”

Guidelines

Use a group of radio buttons when you need to display a set of choices from which the user can choose only one.

Use checkboxes, instead of radio buttons, to display a set of choices from which the user can choose more than one at the same time. Also, if you need to display a single setting, state, or choice that 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 “Checkbox.”

Consider using a pop-up menu if you need to display more than five items. It’s best when a group of radio buttons contains at least two items and a maximum of about five. (To learn more about pop-up menus, see “Pop-Up Menu.”)

Don’t use a radio button to initiate an action. Instead, use a push button to initiated an action. Note that the choice of a radio button can change the state of the app. In Speech preferences, for example, the user must choose the second listening method (“Listen continuously with keyword”), to enable the keyword setup preferences.

../art/ct_radiobuttonex2_2x.png

Give each radio button a text label that describes the choice it represents. Users need to know precisely what they’re choosing when they select a radio button. Radio button labels should have sentence-style capitalization, as described in “Capitalizing Labels and Text.” In addition, you should introduce a group of radio buttons with a label that describes the choices represented by the group.

In a horizontal group of radio buttons, make the space between each pair of radio buttons consistent. It works well to measure the space needed to accommodate the longest radio button label and use that measurement consistently. Also, use the Interface Builder guides to ensure that the baseline of the introductory label is aligned with the baseline of the label of the first button in a group.

Checkbox

A checkbox describes a state, action, or value that can be either on or off.

../art/ct_checkboxes_2x.png

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

Appearance and Behavior

The selected and unselected appearances of a checkbox are provided automatically; you don’t display any text or images in a checkbox.

Checkboxes are available in both standard Aqua and light content appearances. To learn more about controls that are appropriate for a window that has a light-colored or white background, see “Light Content Controls.”

Guidelines

Use a checkbox when you want to allow users to choose between two opposite states, actions, or values.

Use radio buttons, instead of checkboxes, to provide a set of choices from which users can choose only one. To learn more about using radio buttons in your app, see “Radio Buttons.”

Use the alignment of a group of checkboxes to show how they’re related. If there are several independent values or states you want users to control, you can provide a group of checkboxes that are all left-aligned. 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, in the Clock pane of Date & Time preferences, the options for customizing the display of date and time in the menu bar are inactive unless the user selects “Show date and time in menu bar.” In addition to using unambiguous labels, the Clock pane uses this indentation to show users that some settings are dependent on others.

../art/ct_dependentcheckboxes_2x.png

Provide a label for each checkbox that clearly implies two opposite states. The label should make it 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 instead, so you can clarify the two states with two different labels. Checkbox labels should have sentence-style capitalization (for more on this style, see “Capitalizing Labels and Text”), unless the state or value is the title of some other element in the interface that is capitalized.

In addition, it’s a good idea to provide a label that introduces a group of checkboxes and clearly describes the set of choices they represent. Use the Interface Builder guides to ensure that the baseline of the introductory label is aligned with the baseline of the label of the first button in a group.

If appropriate, display a dash inside a checkbox. A dash means that the selection comprises more than one state, in a way that is similar to the use of a dash in a menu (for more information about this, see “Using Symbols in Menus”).

In general, arrange checkboxes in a column. When checkboxes are arranged vertically, it’s easier for users to distinguish one state from another.

Segmented Control

A segmented control is a linear set of two or more segments, each of which functions as a button.

../art/ct_segmentedexample.jpg

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

Appearance and Behavior

A segmented control contains either icons or text, but not a mixture of both. The segments in a segmented control can behave as a collection of radio buttons or checkboxes.

Segmented controls are available in both standard Aqua and light content appearances. To learn more about controls that are appropriate for a window that has a light-colored or white background, see “Light Content Controls.”

Guidelines

Use a segmented control to offer users 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 a view-changer segmented control looks similar to a tab view control, it does not behave the same; for more information about tab views, see “Tab View.”)

Don’t use a segmented control to enable addition or deletion of objects in a source list or split view. If you need to provide a way for users to add and delete objects in a source list or other split view, use a gradient button (described in “Gradient Button”) in the window body. (If you need to put an add-delete control in a bottom bar, use a toolbar control (described in “Window-Frame Controls.”)

Make the width of each segment the same. If segments have different widths, users are likely to wonder if different segments have different behaviors or different degrees of importance.

Use a noun or short noun phrase for the text inside each segment. The text you provide should describe a view or an object and use title-style capitalization (for more on this style, see “Capitalizing Labels and Text”). A segmented control that contains text inside each segment probably doesn’t need an introductory label.

As much as possible, use the system-provided icons, instead of custom icons, inside a segmented control. 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 Toolbar Icons.” (To learn more about the system-provided images, see “System-Provided Icons.”) If you decide to design custom icons for a segmented control, use the following sizes:

  • Regular size: 17 x 15 pixels.

  • Small: 14 x 13 pixels.

  • Mini: 12 x 11 pixels.

Note that if you choose to put icons inside the segments of a segmented control, you can provide a text label below the control.

Icon Button or Bevel Button Containing a Pop-Up Menu

An icon button or a bevel button that contains a pop-up menu provides a menu of choices. For example, the Keynote Chart inspector uses a bevel button that contains a pop-up menu to give users a menu of chart styles:

../art/ct_bevelwithpopup.jpg

Keynote also includes several icon buttons that contain pop-up menus in its toolbar (the Masters toolbar icon is shown here).

../art/ct_iconbuttonwithpopup.jpg

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.

Both types of buttons can behave like a standard pop-up menu, in which the image on the button is the current selection, or like a menu title, in which the image on the button is always the same.

To learn more about bevel buttons, see “Bevel Button”; to learn more about icon buttons, see “Icon Button.”

Pop-Up Menu

A pop-up menu presents a list of mutually exclusive choices in a dialog or window.

Pop-up menu dimensions

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

Appearance and Behavior

A pop-up menu:

  • Has a double-arrow indicator.

  • Contains nouns (things) or adjectives (states or attributes), but not verbs (commands).

  • Displays a checkmark to the left of the currently selected value when open.

You can see most of these components in the Highlight color pop-up menu in General preferences (the double-arrow indicator isn’t completely visible because the menu is open).

../art/ct_popmenupopped_2x.png

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 menus are available in both standard Aqua and light content appearances. To learn more about controls that are appropriate for a window that has a light-colored or white background, see “Light Content Controls.”

Pop-Up Menu Usage

Use a pop-up menu to present up to 12 mutually exclusive choices that users don’t need to see all the time.

Consider using a pop-up menu as an 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.

Use a pop-up menu to provide a menu of things or states. If you need to provide a menu of commands (that is, verbs), use a pull-down menu instead (to learn more about menus, see “UI Element Guidelines: Menus”). Use title-style capitalization for the label of each item in a pop-up menu.

In general, provide an introductory label to the left of the pop-up menu (in left-to-right scripts). The label should have sentence-style capitalization (for more information on this capitalization style, see “Capitalizing Labels and Text”).

Avoid adding a submenu to an item in a pop-up menu. A submenu tends to hide choices too deeply and can be physically difficult for users to use.

Avoid using a pop-up menu to display a variable number of items. Because users must open a pop-up menu to see its contents, they should be able to rely on the contents remaining the same.

Consider using a scrolling list, instead of a pop-up menu, for a large number of items. If space is not restricted, use a scrolling list to display more than 12 items.

Don’t use a pop-up menu when more than one simultaneous selection is appropriate. For example, a list of text styles, from which users might choose both bold and italic, should not be displayed in a pop-up menu. In this situation, you should instead use checkboxes or a pull-down menu in which checkmarks appear.

In rare cases, 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, which allows users to add a printer to the menu. If users add a new printer, it becomes the menu’s default selection. If you need to add such commands to a pop-up menu, put them at the bottom of the menu, below a separator. (A separator—called a Separator Menu Item in Interface Builder—is a horizontal line.)

Ensure that all pop-up menus in a stack have the same width. Even if the visible contents of each pop-up menu varies, the width of the controls themselves should be equal.

Action Menu

An Action menu is a specific type of pop-up menu that functions as an app-wide contextual menu.

../art/ct_actionpopup.jpg

To create an Action menu in Interface Builder use the control that’s appropriate for the window area. Then, in the Attributes pane of the inspector, specify NSActionTemplate for the image.

Appearance and Behavior

An Action menu displays the system-provided Action icon and the standard downward-pointing arrow. (This is the same arrow used in an icon button with an attached pop-up menu; for more information about this controls, see “Icon Button or Bevel Button Containing a Pop-Up Menu.”)

An Action menu does not display a label, because users are familiar with the meaning of the Action icon. The only exception is the label that accompanies 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 (for more information on toolbars, see “Designing a Toolbar”).

Guidelines

Use an Action pop-up menu to provide a visible shortcut to a handful of useful commands. An Action menu has the advantage of a contextual menu, without the disadvantage of being hidden. (You can learn more about contextual menus in “Designing Contextual Menus.”)

In particular, you can use an Action menu in a toolbar to replace an app-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.

../art/ct_actionmenuexample_2x.png

Don’t create a custom version of the Action icon. It’s essential that you use the system-provided Action icon so that users understand what the control does (for more information on the system-provided icons, see “System-Provided Icons”).

Follow the guidelines for contextual menu items as you design the contents of an Action menu. For example, you should ensure that each Action menu item is also available as a menu command and avoid displaying keyboard shortcuts. For more information on the guidelines that govern contextual menus, see “Designing Contextual Menus.”

Use an Action menu at the bottom of a list to provide commands that apply to items in the list. An Action menu works well beneath a list view or a source list. For example, the Action menu at the bottom of the Mail source list contains commands that act on the account or mailbox selected in the source list.

../art/ct_actionmenuinmail_2x.png

Use a gradient button to provide an Action menu at the bottom of a source list or table view (for information on gradient buttons, see “Gradient Button”).

Avoid placing an Action menu control anywhere else in the body of a window. An Action menu needs to be visually connected to a context, such as a list or a toolbar. An Action menu can’t replace a contextual menu that users reveal by Control-clicking anywhere in a window, because placing the Action menu in a specific area implies that it applies to that area.

Share Menu

A Share menu is a specific type of pop-up menu that displays a list of services that users can use to share content. Users reveal a Share menu by clicking a Share menu button.

../art/share_menu.png

To create a Share menu button in Interface Builder, first select the appropriate button. Then, in the Attributes pane of the inspector, specify NSImageNameShareTemplate for the image. To create a Share menu button using AppKit programming interfaces, use NSImageNameShareTemplate to add an image to a button (NSButton). If you create the button programmatically, in order for the Share menu to behave as users expect, you need to set sendActionOn:NSLeftMouseDownMask.

Appearance and Behavior

A Share menu button displays the system-provided Share icon. The button does not display a label because users are familiar with the meaning of the Share icon.

Users reveal the menu by clicking on the Share menu button. A list descends from the button, and its width is dictated by the longest menu item.

Guidelines

Sharing Service is an integral part of the OS X experience. A Share menu enables users to share content they care about with others. For general guidelines about Sharing, see “Sharing Service.”

Use a Share pop-up menu to provide a visible shortcut to a handful of useful sharing options. A Share menu has the advantage of a contextual menu, without the disadvantage of being hidden. (You can learn more about contextual menus in “Designing Contextual Menus.”)

Don’t create a custom version of the Share icon. It’s essential that you use the system-provided Share icon so that users understand what the control does (for more information on the system-provided icons, see “System-Provided Icons.”)

Follow the guidelines for contextual menu items as you design the contents of a Share menu. For example, you should ensure that each Share menu item is also available as a menu command and avoid displaying keyboard shortcuts. For more information on the guidelines that govern contextual menus, see “Designing Contextual Menus.”

Combination Box

A combination box (or combo box) provides a list of choices and allows users to specify custom choices.

../art/ct_comboboxexample.jpg

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

Appearance and Behavior

A combo box is a text entry field combined with a drop-down list. The default state of the combo box is closed, with the text field empty or displaying a default selection.

Users open the list by clicking the arrow to the right of the text field. The list descends from the text field and is the same width as the text field plus the arrow box.

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, that item is highlighted when the user opens the list. A user-typed item is not added to the permanent list.

Combo boxes are available in both standard Aqua and light content appearances. To learn more about controls that are appropriate for a window that has a light-colored or white background, see “Light Content Controls.”

Guidelines

Use a combo box to give users the convenience of selecting an item from a list combined with the freedom of specifying their own custom item.

List only items that users can choose singly. 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.

Display a meaningful default selection. It’s best when the default selection (which may not be the first item in the list) provides a clue to the hidden choices. It’s also 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.

Display the most likely choices, even though users can enter their own. Users appreciate being able to specify custom choices, but they also appreciate the convenience of choosing from a list. For example, Safari allows users to set a preference for the minimum font size to display. In its Advanced preferences pane (shown here), 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.

../art/ct_combinationbox_2x.png

Path Control

A path control displays the file-system path of the currently selected item.

../art/ct_pathcontrolexample_2x.png

The path control is available in Interface Builder (you can change its style in the Attributes pane of the inspector panel). To create this control using AppKit programming interfaces, use the NSPathControl class.

For example, when you choose Show Path Bar, Finder uses one style of path control to display the path of the currently selected item at the bottom of the window.

Appearance and Behavior

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

  • Standard

  • Navigation bar

  • Pop up

All three path-control styles display text in addition to icons for apps, 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 (for more information on the Open dialog, see “The Open Dialog”).

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 here in the path control in a Finder window.

../art/ct_pathcollapsed.jpg

Guidelines

Use a path control 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.

Use a path control only when necessary. For most apps, a path control is unlikely to be useful, because few apps need to provide a file-system browsing experience the way the Finder does.

Color Well

A color well indicates the current color of the selected object and, when clicked, displays the Colors window, in which users can specify a color. (To learn more about the Colors window, see “The Colors Window.”)

Multiple color wells can appear in a window. 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, stroke, and shadow.

../art/ct_colorwellexample.jpg

Color wells are available in Interface Builder. To create one using AppKit programming interfaces, use the NSColorWell class.

Image Well

An image well is a drag-and-drop target for an icon or picture.

For example, the Password pane in Accounts preferences uses an image well to allow users to choose a picture to represent them.

Image wells

Some image wells, such as the user picture in the Password pane of Accounts preferences, must always contain an image. If you allow users to clear an image well (that is, leave it empty), be sure to provide standard Edit menu commands and Clipboard support for the contents of the image well.

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

Date Picker

A date picker displays components of date and time, such as hours, minutes, days, and years.

../art/ct_datepickerexample.jpg

The date-picker control is available in Interface Builder (you can change its style in the Attributes pane of the inspector). To create one using AppKit programming interfaces, use the NSDatePicker class.

Appearance and Behavior

The date-picker control provides two main styles:

  • Textual. This style consists of a text field or text field combined with a stepper control.

  • Graphical. This style consists of a graphical representation of a calendar or a clock.

Using the textual style, users can enter date and time information in the text field or use the stepper. Using the graphical style, users can move the clock hands or choose specific days, months, or years in the calendar.

Guidelines

Use a date picker to provide time and date setting functionality in a window.

Choose the date-picker style that suits your app. 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. A graphical date picker can be useful 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 UI of your app.

Command Pop-Down Menu

A command pop-down menu provides pull-down menu functionality within a window.

../art/ct_commandpopdown.jpg

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 AppKit programming interfaces, use the NSPopUpButton class.

Appearance and Behavior

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 (to learn more about pop-up menus, see “Pop-Up Menu”).

A command pop-down menu contains a single, downward-pointing arrow and can display checkmarks to the left of all currently active selections.

Users open a command pop-down menu by clicking anywhere in the control.

Guidelines

Use a command pop-down menu to present a list of commands that affect the containing window’s contents. For example, the Colors window contains a menu with commands that can be used to change the contents of the Colors window itself.

../art/ct_popdownexample.jpg

In general, use a command pop-down menu in a window that is shared among other windows or apps. For example, the Colors window can be used in any app. The items in its command pop-down menu allow users to make new palettes of colors available in the Colors window.

Avoid listing too many items in a command pop-down menu. Command pop-down menus should contain between 3 and 12 commands. The items in a command pop-down menu don't have to be mutually exclusive.

In general, don’t supply an introductory label for a command pop-down menu. The text in the control should be sufficient to tell users what they can expect to find in the menu.

Slider

A slider lets users choose from a continuous range of allowable values (shown here with tick marks and labels).

../art/ct_sliderexample.jpg

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

Appearance and Behavior

A slider can be linear or circular.

The movable part of a linear slider is called the thumb, and it can be either directional or round. The slider shown here has a directional thumb.

../art/ct_linearslider.jpg

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.

../art/ct_circularslider.jpg

If a circular slider includes tick marks, they appear as dots that are evenly spaced around the circumference of the slider.

Sliders are available in both standard Aqua and light content appearances. To learn more about controls that are appropriate for a window that has a light-colored or white background, see “Light Content Controls.”

Guidelines

Use a slider to allow users to make fine-grained adjustments or choices throughout a range of values. 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.

Ensure that the slider moves as users expect. By default, users scroll content in the “natural” manner (that is, the content moves in the same direction as the user’s fingers on a trackpad). But users can change this setting so that the content moves in the opposite direction of the gesture. You need to make sure that a slider always moves in the direction that makes the most sense, regardless of the user’s setting. For example, the user should be able to move a vertical volume slider upwards for greater volume and downwards for lower volume.

In general, use a directional thumb in a linear slider with tick marks. The point of the thumb helps show users the current value. (Note that you can also display a directional-thumb slider without tick marks.)

In general, use a round thumb in a linear slider without tick marks. The rounded lower edge of the thumb works well in a slider without tick marks because it does not appear to point to a specific value.

In general, label at least the starting and ending values in a linear slider with tick marks. You can create labels that use numbers or words, depending on what the values represent. If each tick mark represents an equal fraction of the entire range, it might 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.

../art/ct_sliderlabeled.jpg

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.

As much as possible, match the slider style to the values it represents. For example, a linear slider is appropriate in Energy Saver preferences (shown above) 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 don't increase at consistent intervals. In this case, a linear slider brings to mind a number line that stretches from the origin to infinity.

On the other hand, the circular slider in the Keynote Graphic inspector (shown below) 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.

../art/ct_circularsliderexample.jpg

Display tick marks when it helps users understand their choices. 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.

The Stepper Control (Little Arrows)

The stepper control (also known as little arrows) allows users to increment or decrement values, usually in conjunction with a text field that indicates the current value.

../art/ct_stepperexample.jpg

The text field may or may not be editable.

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

Placard

A placard displays information at the bottom edge of a window.

../art/ct_placard1.jpg

Placards are not available in Interface Builder. To create one using AppKit programming interfaces, subclass NSScrollView.

Typically, placards are used in document windows as a way to enable quick modifications to 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.

A placard with a pop-up menu

Don’t add to the placard menu commands that affect the contents of the window in other ways. Instead, you should use an Action menu (for more information on Action menus, see “Action Menu”).

Indicators

Indicators are controls that show users the status of something. For the most part, users don’t interact with indicators.

Progress Indicators

A progress indicator informs users about the status of a lengthy operation.

Be sure to locate all types of progress indicators in consistent locations in your windows and dialogs. For example, the Mail app displays the asynchronous progress indicator in the right end of the To field as it finds and displays email addresses that match what the user types. Choosing a consistent location for a progress indicator allows users to quickly check a familiar place for the status of an operation. (For more information on the importance of providing consistency in your app, see “Consistency.”)

There are three types of progress indicators, each of which is suitable for a specific situation:

  • Determinate progress bar

  • Indeterminate progress bar

  • Asynchronous progress indicator

Determinate Progress Bar

A determinate progress bar provides feedback on a process with a known duration.

../art/ct_determinate.jpg

Determinate progress bars are available in Interface Builder. In the Attributes pane of the inspector, select Bar for the style and deselect the Indeterminate checkbox. To create a determinate progress bar using AppKit programming interfaces, use the NSProgressIndicator class with style NSProgressIndicatorBarStyle.

Appearance and Behavior

In a determinate progress bar, the “fill” moves from left to right. The fill is provided automatically (you determine the minimum and maximum values that should be represented).

Users generally expect a determinate progress bar to disappear as soon as the fill completes.

Guidelines

Use a determinate progress bar when the full length of an operation can be determined and you want to tell the user how much of the process has been completed. For example, you could use a determinate progress bar to show the progress of a file conversion.

Ensure that a determinate progress bar accurately associates progress with time. A progress bar that becomes 90 percent complete in 5 seconds but takes 5 minutes for the remaining 10 percent, for example, would be annoying and lead users to think that something is wrong.

Be sure to allow the fill to complete before dismissing the progress bar. If you dismiss the progress bar too soon, users are likely to wonder if the process really finished.

Allow users to interrupt or stop the process, if appropriate. If the process being performed can be interrupted, the progress dialog should contain a Cancel button (and support the Esc key). If interrupting the process will result in possible side effects, the button should say Stop instead of Cancel. To learn more about dialogs in general, see “Dialogs.” To supply a Cancel button, you use a push button (for more information about this control, see “Push Button”). To supply a Stop control, you can use the standalone version of the stop progress image (to learn more about this system-provided image, see “System-Provided Images for Use as Standalone Buttons”).

If appropriate, provide a label for a determinate progress bar in a dialog. You can do this so that users understand the context in which the process is occurring. Such a label should have sentence-style capitalization (for more information on this style, see “Capitalizing Labels and Text”).

Indeterminate Progress Bar

An indeterminate progress bar provides feedback on a process of unknown duration.

../art/ct_indeterminate.jpg

Indeterminate progress bars are available in Interface Builder. In the Attributes pane of the inspector, select Bar for the style and be sure the Indeterminate checkbox is selected. To create an indeterminate progress bar using AppKit programming interfaces, use the NSProgressIndicator class with style NSProgressIndicatorBarStyle.

Appearance and Behavior

An indeterminate progress bar displays a spinning striped fill that indicates an ongoing process. OS X provides this appearance automatically.

Guidelines

Use an indeterminate progress bar when the duration of a process can’t be determined.

Switch to a determinate progress bar when appropriate. If an indeterminate process reaches a point where its duration can be determined, switch to a determinate progress bar (for more on determinate progress bars, see “Determinate Progress Bar”).

In general, use an indeterminate progress bar in a dialog or window that focuses on the process. For example, you might display an indeterminate progress bar in a dialog that focuses on the opening of the file. This usage helps users understand which process is ongoing.

Allow users to interrupt or stop the process, if appropriate. If the process being performed can be interrupted, the progress dialog should contain a Cancel button (and support the Esc key). If interrupting the process will result in possible side effects, the button should say Stop instead of Cancel. To learn more about dialogs in general, see “Dialogs.” To supply a Cancel button, you use a push button (for more information about this control, see “Push Button”). To supply a Stop control, you can use the standalone version of the stop progress image (to learn more about this system-provided image, see “System-Provided Images for Use as Standalone Buttons”).

If appropriate, provide a label for an indeterminate progress bar in a dialog. You can do this so that users know what process is occurring. Such a label should have sentence-style capitalization (for more information on this style, see “Capitalizing Labels and Text”). Also, you can end the label with an ellipsis (...) to emphasize the ongoing nature of the processing.

Consider using an asynchronous progress indicator, instead of an indeterminate progress bar, in some cases. If, for example, you need to provide an indication of an indeterminate process that’s associated with a part of a window, such as a control, or if space is limited, you might want to use an asynchronous progress indicator instead. (For more information on asynchronous progress indicators, see “Asynchronous Progress Indicator.”)

Asynchronous Progress Indicator

An asynchronous progress indicator provides feedback on an ongoing process.

../art/ct_asynchprogindsizes.jpg

Asynchronous progress indicators are available in Interface Builder. In the Attributes pane of the inspector, select Spinning for the style and be sure the Indeterminate checkbox is selected. To create an asynchronous progress indicator using AppKit programming interfaces, use the NSProgressIndicator class with style NSProgressIndicatorSpinningStyle.

Appearance and Behavior

The appearance of the asynchronous progress indicator is provided automatically. The asynchronous progress indicator always spins at the same rate.

Guidelines

Use an asynchronous progress indicator when space is very constrained, such as in a text field or near a control. Because this indicator is small and unobtrusive, it is especially useful for asynchronous events that take place in the background, such as retrieving messages from a server.

If the process might change from indeterminate to determinate, start with an indeterminate progress bar. You don’t want to start with an asynchronous progress indicator because the determinate progress bar is a different shape and takes up much more space. Similarly, if the process might change from indeterminate to determinate, use an indeterminate progress bar instead of an asynchronous progress indicator, because it is the same shape and size as the determinate progress bar.

In general, avoid supplying a label. Because an asynchronous progress indicator typically appears when the user initiates a process, a label is not usually necessary. If you decide to provide a label that appears with the indicator, create a complete or partial sentence that briefly describes the process that is occurring. You should use sentence-style capitalization (for more information on this style, see “Capitalizing Labels and Text”) and you can end the label with an ellipsis (...) to emphasize the ongoing nature of the processing.

Level Indicators

A level indicator provides graphical information about the level or amount of something. Level indicators can be configured to display different colors to warn users when values are reaching critical levels.

There are three styles of level indicator:

  • Capacity

  • Rating

  • Relevancy

Capacity Indicator

A capacity indicator provides graphical information about the current state of something that has a finite capacity (shown here with labels and tick marks).

../art/ct_continuouscapacity.jpg

Capacity indicators are available in Interface Builder (you can change its style in the Attributes pane of the inspector). To create one using AppKit programming interfaces, use the NSLevelIndicator class with style NSDiscreteCapacityLevelIndicatorStyle or NSContinuousCapacityLevelIndicatorStyle.

Appearance and Behavior

There are two styles of capacity indicator:

Continuous. The continuous capacity indicator consists of a translucent track that is filled with a colored bar that indicates the current value.

Discrete. The discrete capacity indicator consists of a row of separate, rectangular segments equal in number to the maximum value set for the control.

The default color of the fill in both styles is green. Depending on app-specific definitions, the fill can change to yellow or red.

The continuous capacity indicator can display tick marks above or below the indicator control to give context to the level shown by the fill.

The segments in the discrete capacity indicator are either completely filled or empty; they are never partially filled. If you stretch a discrete capacity indicator, the number of segments remains constant, but the width of each segments increases.

Guidelines

Use a capacity indicator to provide information about the level or amount of something that has well defined minimum and maximum values.

Change the fill color to give users more information, if appropriate. You can configure a capacity indicator to display a different color fill when the current value enters a warning or critical range. Because capacity indicators provide a clear, easily understood picture of a current state, they’re especially useful in dialogs and preferences windows that users tend to view briefly.

If you define a critical value that is less than the warning value, the fill is red below the critical value, yellow between the critical and warning values, and green above the warning value (up to the maximum). This orientation is useful if you need to warn the user when a capacity is approaching the minimum value, such as the end of battery charge.

Use a discrete capacity indicator to show relatively coarse-grained values. The discrete capacity indicator displays the current value rounded to the nearest integer and the segments are stretched or shrunk to a uniform width to fit the specified length of the control. Visually, this makes a discrete capacity indicator better for showing coarser-grained values than a continuous capacity indicator.

In general, use tick marks with the continuous capacity indicator only. This is because the number and width of the segments in the discrete capacity indicator provide similar context, making tick marks redundant (and potentially confusing). If you find that you need to display very small segments in a discrete capacity indicator to appropriately represent the scale of values, you might want to use a continuous capacity indicator instead.

In general, label at least the first and last tick marks. Even if you don’t label any other tick marks, labeling the beginning and end of the scale provides useful context for the user.

Rating Indicator

A rating indicator shows the rating of something.

../art/ct_rating.jpg

Rating indicators are available in Interface Builder. Start with a discrete level indicator object and change its style to Rating in the Attributes pane of the inspector. To create one using AppKit programming interfaces, use the NSLevelIndicator class with style NSRatingLevelIndicatorStyle.

Appearance and Behavior

By default, the rating indicator displays stars.

A rating indicator does not display partial stars. Instead, it rounds the current value to the nearest integer to display only whole stars. The stars in a rating indicator are not expanded or shrunk to fit the specified length of the control and no space is added between them.

Guidelines

Use a rating indicator to provide a graphic representation of the rating of an object. Because a rating indicator conveys the ranking of one item relative to all other items in a category, such as favorite images or most-visited webpages, it’s most useful in a list or table view that contains many items.

Allow users to set ranking criteria, if appropriate. Or, you can make a rating indicator editable so the user can increase or decrease the ranking of an item in a table or list.

Supply a custom image to replace the star, if it makes sense. You can use any image in place of the star, but you should make sure that it makes sense in the context of your app and the task it enables.

Relevance Indicator

A relevance indicator displays the relevance of something.

../art/ct_relevancy.jpg

Relevance indicators are available in Interface Builder. Start with a discrete level indicator and change its style to Relevancy in the Attributes pane of the inspector. To create one using AppKit programming interfaces, use the NSLevelIndicator class with style NSRelevancyLevelIndicatorStyle.

Relevance indicators are especially useful as part of a list or table view. This is because relevance as a quantity is easier for users to understand when it is shown in comparison with the relevance of several items.

Text Controls

Text controls either display text or accept text as input. The combination box, which combines a text input field with a menu, is not covered in this section; instead, see “Combination Box.”

Static Text Field

A static text field displays text that can't be modified by the user.

../art/ct_statictext_2x.png

Static text fields are available in Interface Builder (where they’re called labels). To create a static text field using AppKit programming interfaces, use the NSTextField class.

Static text fields have two states: active and dimmed.

Make static text selectable when it provides an obvious user benefit. For example, a user should be able to copy an error message, a serial number, or an IP address to paste elsewhere.

Text Input Field

A text input field accepts user-entered text.

../art/ct_textfield.jpg

Text input fields are available in Interface Builder. To create one using AppKit programming interfaces, use the NSTextField class.

Appearance and Behavior

A text input field (also called an editable text field) is a rectangular area in which the user enters text or modifies existing text. A text input field displays user-supplied text in a system font that is appropriate for the size of the control. In addition, a text input field can contain a token field control, which displays the user input in the form of a draggable token (for more information on tokens, see “Token Field”).

By default, a text input field supports keyboard focus and password entry.

Text input fields are available in both standard Aqua and light content appearances. To learn more about controls that are appropriate for a window that has a light-colored or white background, see “Light Content Controls.”

Guidelines

Use a text input field to get information from the user.

Be sure to perform appropriate edit checks when you receive user input. For example, if the only legitimate value for a field is a string of digits, an app should issue an alert if the user types characters other than digits. In most cases, the appropriate time to check the data in the field is when the user clicks outside the field or presses the Return, Enter, or Tab key.

Be sure to use a combo box if you want to combine a menu or list of choices with a text input field. Don’t try to create one by putting a text input field and a menu together. For more information about combo boxes, see “Combination Box.”

In general, display an introductory label with a text input field. A label helps users understand what type of information they should enter. Generally, these labels should have title-style capitalization (for more information on this style, see “Capitalizing Labels and Text”).

In general, ensure that the length of a text input field comfortably accommodates the length of the expected input. The length of a text input field helps users gauge whether they’re inputting the appropriate information.

Space multiple text input fields evenly. If you want to use more than one text input field in a window, you need to leave enough space between them so users can easily see which input field belongs with each introductory label. If you need to position more than one text input field at the same height (that is, in a horizontal line), be sure to leave plenty of space between the end of one text field and the introductory label of the next. Typically, however, multiple text input fields are stacked vertically, as in a form users fill out. In addition, if you display multiple text input fields in a window, be sure they all have the same length.

Token Field

A token field creates a movable token out of text.

../art/ct_token.jpg

Token field controls are available in Interface Builder. To create one using AppKit programming interfaces, use the NSTokenField class.

Guidelines

In general, use a token field control in a text input field. As the user types in the text input field, the token field control invokes text completion after a delay that you specify. When the user types the comma character or presses Return, the preceding text input is transformed into a token. (For more information about text input fields, see “Text Input Field”).

If appropriate, add a contextual menu to a token.(Note that you have to add code to support the addition of a contextual menu.) In a token field’s menu, you might offer more information about the token and ways to manipulate it. In Mail, for example, the token menu displays information about the token (the email address associated with the name) and items that allow the user to edit the token or add its associated information to Contacts.

../art/ct_tokenmenu_2x.png

Search Field

A search field accepts text from users, which can be used as input for a search (shown here in a toolbar).

../art/ct_search.jpg

Search field controls are available in Interface Builder. To create one using AppKit programming interfaces, use the NSSearchField class.

Appearance and Behavior

A search field looks like a text field with rounded ends. Users enter text (or modify existing text) that specifies items they want to search for. A search field can be configured to begin searching while the user is still entering text, or to wait until the user is finished.

By default, a search field displays the magnifying icon in its left end. A search field can also contain an icon the user clicks to cancel the search or clear the field.

Search fields are available in both standard Aqua and light content appearances. To learn more about controls that are appropriate for a window that has a light-colored or white background, see “Light Content Controls.”

Guidelines

Use a search field to enable search functionality within your app.

Decide when to start the search. You can begin searching as soon as the user starts typing, or wait until the user presses Return or Enter. If searching occurs while the user is still typing, the behavior is more like a find in which results are filtered as the entered text becomes more specific. This behavior is especially useful when the search field is in a scope bar that focuses on a window’s contents. If search should occur after the user finishes typing, you might want to enable a search term completion menu so that users can choose from commonly searched terms.

In general, avoid using a menu to display search history. For privacy reasons, users might not appreciate having their search history displayed. You might instead use the menu to allow users to choose different types of searches or define the context or scope of a search. Note that a scope bar is well-suited to enabling this type of searching (for more information, see “Using a Scope Bar to Enable Searching and Filtering”).

Avoid supplying an introductory label. Users are familiar with the distinctive appearance of a search field, so there is no need to label it. The exception to this is when you place a search field in a toolbar; in this case, you need to supply the label “Search” to be displayed when users customize the toolbar to show icons and text or text only.

Display placeholder text, if it helps users understand how search works in your app. A search field can display light gray placeholder text in its left end. For example, the search field in the Safari toolbar can display one of three common search engines (users can choose the search engine they want to use in the search field menu).

Scrolling List

A scrolling list is a list that uses scroll bars to reveal its contents.

../art/ct_scrollinglist.jpg

Scrolling lists are available in Interface Builder. Start with a table view object and ensure that it is sized so that only the vertical scroller can be visible. Then, in the Attributes pane of the inspector, set the number of columns to 1 and deselect the Headers checkbox. To create a scrolling list using AppKit programming interfaces, use the NSTableView class.

Appearance and Behavior

A scrolling list is a single-column rectangular view of any height. The background of a scrolling list can be white or white striped with light blue.

Users can scroll through a scrolling list without selecting anything, or they can click an item to select it, use Shift-click to select more than one contiguous item, or use Command-click for a discontinuous selection. Users can press the arrow keys to navigate through the list and can quickly select an item by typing the first few characters.

Guidelines

Use a scrolling list to display an arbitrarily large number of items from which users can choose. Although scrolling lists aren’t directly editable, you can provide editing functionality that allows users to provide additional list items.

In general, don’t use a scrolling list to provide choices in a limited range. A scrolling list might not display all items at once, which can make it difficult for users to grasp the scope of their choices. If you need to display a limited range of choices, a pop-up menu (described in “Pop-Up Menu”) might be a better choice.

Insert an ellipsis in the middle of an item that is too long to fit in the list. Inserting the ellipsis in the middle allows you to preserve the beginning and end of the item name, so that users can more easily recognize it. For example, users sometimes add the most specific information (such as a date) to the end of a document name, so it’s helpful when both the beginning and the end of the name are visible.

Use a striped background when it helps users distinguish list items. For example, users can lose their place in a very long list in which most of the items look similar. In this case, it can be easier for users to scan the list and find specific items when the background is striped.

In general, provide an introductory label for a scrolling list. A label helps users understand the types of items that are available to them.

View Controls

View controls allow users to modify how information is presented to them in a window. Some view controls allow you to provide additional information or functionality that remains hidden until users choose to see it, and others give you a frame for organizing and displaying data, such as a table.

Disclosure Triangle

A disclosure triangle displays (or discloses) information or functionality associated with the primary information in a window.

Disclosure triangles

Disclosure triangles are available in Interface Builder. To create one using AppKit programming interfaces, use NSButton and set the bezel style to NSDisclosureBezelStyle and the button type to NSPushOnPushOffButton.

Appearance and Behavior

A disclosure triangle is in the closed position (that is, pointing to the right) by default. When the user clicks a disclosure triangle, it points down and the additional information is displayed.

Guidelines

Use a disclosure triangle when you want to provide a simple default view of something but need to allow users to view more details or perform additional actions at specific times.

In general, you can use a disclosure triangle in the following two ways:

  • To reveal more information in dialogs that have a minimal state and an expanded state. For example, you might want to use a disclosure triangle to hide explanatory information about a choice that most users aren’t interested in seeing.

  • To reveal subordinate items in a hierarchical list. For example, the Mail Photo Browser panel uses a disclosure triangle to reveal specific iPhoto categories.

    ../art/ct_disctriangleexample.jpg

Supply a label for a disclosure triangle in a dialog. The label should indicate what is disclosed or hidden and it should change, depending on the position of the disclosure triangle. For example, when the disclosure triangle is closed the label might be “Show advanced settings;” when the disclosure triangle is open the label can change to “Hide advanced settings.”

Don’t use a disclosure triangle to display additional choices associated with a specific control. If you need to do this, use a disclosure button instead (for more information about this control, see “Disclosure Button”).

Disclosure Button

A disclosure button expands a dialog or panel to display a wider range of choices related to a specific selection control.

../art/ct_discbutton.jpg

Disclosure buttons are available in Interface Builder. To create one using AppKit programming interfaces, use NSButton and set the bezel style to NSRoundedDisclosureBezelStyle and the button type to NSPushOnPushOffButton.

Appearance and Behavior

A disclosure button is button that contains a small triangular icon. By default, a disclosure button is in the closed position (that is, pointing down). When the user clicks a disclosure button, the window expands to reveal the additional choices and the disclosure button changes to point up.

Guidelines

Use a disclosure button when you need to provide additional options that are closely related to a specific list of choices.

Don’t use a disclosure button to display additional information or functionality or subordinate items in a list. If you need to display additional information or functionality related to the contents of a window or a section of a window, or if you need a way to reveal subordinate items in a hierarchical list, use a disclosure triangle instead. For more information on this control, see “Disclosure Triangle.”

Place a disclosure button close to the control to which it’s related. Users need to understand how the expanded choices are related to their current task. For example, the Preview Export As dialog puts a disclosure button close to the Export As text field, so that users understand that the expanded view will help them choose a location for their document.

../art/ct_discbuttonexample_2x.png

Table View

A table view displays data in a one-column list, with optional additional columns that display attributes associated with the data.

Table views are available in Interface Builder. To create a simple table view using AppKit programming interfaces, use the NSTableView class. To get disclosure triangles in a list, use an NSOutlineView object in column format.

Appearance and Behavior

A table view displays the entire set of data in the leftmost column (in systems that use left-to-right script). When the data is hierarchical, the child objects are revealed within the primary column, not in other columns (table views use disclosure triangles to indicate objects that contain other objects).

Additional columns in a table view display attributes that apply to the data in the primary column; they don’t contain data that is specific to a different level of hierarchy. In general, users can resize, rearrange, and sometimes add and subtract the columns that represent attributes of the table data.

When users click a disclosure triangle to reveal the child items contained within another item, the table lengthens and the leftmost column can widen. If the primary column widens, other columns might shift to the right, but they don’t change their headings or order.

In an editable table view, users begin editing by clicking once on a selected table row. This behavior allows the table view to respond differently to a double click. In the Finder, for example, users can double-click a file to open it or single-click a selected file to edit its name.

Guidelines

Use a table view to display a list of items along with various attributes of each item. If you need to display a simple list of items, and you don’t need to display associated attributes, you might want to use a scrolling list instead (for more information about scrolling lists, see “Scrolling List”). Using a table view, you can create a column for each attribute that is associated with the items you display.

Sort the rows in a table view by the selected column heading. You can implement sorting on secondary attributes behind the scenes, but the user should see only one column selected at a time. If the user clicks an already selected column heading, change the direction of the sort.

Create column headers that are nouns or short noun phrases that describe an attribute of the data. When you use clear, succinct attribute names, users quickly understand what information is available in each column.

Column View

A column view displays a hierarchy of data, in which each level of the hierarchy is displayed in one column.

../art/ct_colview.jpg

Column views are available in Interface Builder. To create one using AppKit programming interfaces, use the NSBrowser class or an NSOutlineView object in column format.

Appearance and Behavior

Column views don’t display disclosure triangles. The triangle displayed to the right of an item shows that the item contains other objects (to reveal those objects, users click anywhere on the item’s row).

Users scroll vertically within columns and horizontally between columns. When users click an object in one column, its contents (that is, its descendants in the hierarchy) are revealed in a column to the right. Each column displays only those objects that are descendants of the item selected in the previous column. If the item selected in the previous column has no descendants, the column to the right might display details about the item.

Columns in column views don’t have headings, because a column view doesn’t behave like a table. A column in a column view contains the objects that exist at a particular node in the hierarchy; it doesn’t contain an attribute of every object in the hierarchy.

Guidelines

Use a column view when there is only one way the data can be sorted or when you want to present only one way of sorting the data. A column view is also useful for displaying a deep hierarchy of data in which users frequently move back and forth among levels.

Display the first or root level of the hierarchy in the leftmost column (in systems that use left-right script). As users select items, the focus moves to the right, displaying either the child objects at that node or, if there are no more children, the terminal object (a leaf node in the hierarchy). When the user selects a terminal object, you can display additional information about it in the rightmost column.

In general, allows users to resize columns. This is especially helpful when the names of some items might be too long to display in the default width of a column.

Split View

A split view groups together two or more other views, such as column or table views, and allows the user to adjust the relative width or height of those views (shown here with a “move” pointer resting on it).

../art/ct_splitter.jpg

Split views are available in Interface Builder (you can specify the splitter width in the Style pop-up menu in the Attributes pane of the inspector). To create one using AppKit programming interfaces, use the NSSplitView class (note that the splitter bars are horizontal by default).

Appearance and Behavior

A split view includes a splitter bar, or splitter, between each of its subviews; for example, a split view with five subviews would have four splitters. Each subview is generally known as a pane. A split view can arrange views horizontally or vertically, but not both.

The entire splitter bar is a hot zone. In other words, when the pointer passes over any part of the splitter, the pointer changes to one of the move or resize pointers. (To learn more about the different pointers that are available, see “Use the Right Pointer for the Job.”) For zero-width splitters, the hot zone includes two points on both sides of the splitter.

Guidelines

Use a split view to display two or more resizable content views.

In general, use the zero-width splitter. Users are accustomed to the appearance of the zero-width splitter. You might want to use a wide splitter bar if you need to indicate a stronger visual distinction between panes, but this is unusual.

Don’t let users lose the splitter. A zero-width splitter can disappear when the user drags it far enough to hide the subview. To avoid this, you can define minimum and maximum sizes for the subviews so that the splitter remains visible. Alternatively, if you want to allow users to completely hide a subview by dragging a zero-width splitter, you should provide a button that re-opens the subview.

Tab View

A tab view presents information in a multipane format.

../art/ct_tabview_2x.png

Tab views are available in Interface Builder. To create one using AppKit programming interfaces, use the NSTabView class.

Appearance and Behavior

A tab view consists of a tab view control (which looks similar to a segmented control) combined with a set of views. Each segment in the tab view control is called a tab. The content area below a tab is called a pane, and each tab is attached to a specific pane. The tab view control is horizontally centered at the top edge of the view.

Users click a tab to view the pane associated with that tab. Although different panes can contains different amounts of content, switching tabs does not change the overall size of the tab view or the window.

Guidelines

Use a tab view to present a small number of different content views in one place within a window. Depending on the size of the window, you can create a tab view that contains between two and about six tabs.

Use a tab view to present a few peer areas of content that are closely related. The outline of a tab view provides a strong visual indication of enclosure. Users expect each tab to display content that is in some way similar or related to the content in the other tabs.

Ensure that each pane contains controls that affect only the contents of that pane. Controls and information in one pane should not affect objects in the rest of the window or in other panes.

In general, inset the tab view so that a margin of window-body area is visible on all sides of the tab view. The inset layout looks good and it allows you to provide additional controls that can affect the window itself (or other tabs). For example, the “Enable access for assistive devices” and “Show Universal Access status in the menu bar” checkboxes in Universal Access preferences are outside of the inset tab view, because they represent settings that affect accessibility generally.

It’s also possible to extend the side and bottom edges of a tab view so that they meet the window edges, although this is unusual.

Provide a label for each tab that describes the contents of the pane. It’s best when users can accurately predict the contents of a pane before they click the tab. Nouns or very short noun phrases work well for tab labels, although a verb (or short verb phrase) might make sense in some contexts. Tab labels should have title-style capitalization (for more information on this style, see “Capitalizing Labels and Text”).

Avoid using a pop-up menu as a tab-switcher. This arrangement is not encouraged in modern Mac apps. If you have too many tabs to fit into a single tab view, you should investigate other ways to factor your information hierarchy.

Group Box

A group box provides a visual way to break a window into distinct logical areas.

../art/ct_groupbox_2x.png

Group boxes are available in Interface Builder. To create one using AppKit programming interfaces, use the NSBox class.

Appearance and Behavior

The outline of a group box is similar in appearance to the outline of a tab view, except that a group box does not include a tab view control (for more information about tab views, see “Tab View”). Users don't interact with a group box (for example, they can’t directly resize it), but they can interact with the controls inside it.

Group boxes tend to be untitled, but they can include a text title that appears above the outline of the box.

Guidelines

Group boxes are seldom used in modern Mac apps. You might want to use a group box when you want users to understand logical groupings of controls in a window.

Avoid nesting group boxes. Nested group boxes take up a lot of space, and it can be difficult for users to perceive individual boundaries when group boxes are nested too deeply. Instead, consider using white space to group content within a group box.

Use sentence-style capitalization in the title of a group box. For more information on this style, see “Capitalizing Labels and Text.”