Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks
On This Page

Selection Controls

Segmented Control

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

image: ../Art/segmented_controls_2x.png

To define a segmented control in your code, use the NSSegmentedControl class.

A segmented control:

  • Contains either images or text, but not a mixture of both

  • Can behave as either a collection of radio buttons or checkboxes (that is, segment selection can be mutually exclusive or inclusive)

  • May respond to a force click by spring loading an action or accelerating its operation

Use a segmented control to offer users a few closely related choices that affect a selected object, or to help users change views or panes in a window. (Note that a view-changer segmented control looks similar to a tab view control, but it doesn’t 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 Some Controls Can Be Used in the Window Frame).

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 (described in Use the Right Capitalization Style in 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 images, instead of custom images, 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 Toolbar Items. To learn more about the system-provided images, see System-Provided Images.

If you decide to design custom images for a segmented control, use the following sizes:

  • Regular size: 17 x 15 pixels.

  • Small: 14 x 13 pixels.

  • Mini: 12 x 11 pixels.

If you choose to put images inside the segments of a segmented control, you can provide a text label below the control.

Slider

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

image: ../Art/slider_2x.png

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 above has a directional thumb.

By default, a linear slider that has a round thumb (and no tick marks) is tinted.

image: ../Art/slider_tinted_2x.png

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.

image: ../Art/circular_slider_2x.png

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

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.

image: ../Art/slider_labeled_2x.png

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.

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.

Path Control

A path control displays the file-system path of the currently selected item. 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.

image: ../Art/path_control_2x.png

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.

image: ../Art/path_collapsed_2x.png

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 Colors and Fonts Windows.

Multiple color wells can appear in a window. For example, Rulers preferences in Keynote contains two color wells that allow users to change the colors of guides.

image: ../Art/color_wells_2x.png

Image Well

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

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

image: ../Art/image_well_2x.png

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.

Date Picker

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

image: ../Art/date_picker_2x.png

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.

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.

Stepper

The stepper control (also known as little arrows) helps users increment or decrement values, and is usually displayed near a text field that indicates the current value.

image: ../Art/steppers_2x.png

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.