Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks

About the Touch Bar

The Touch Bar—located above the keyboard on supported MacBook Pro models—is a Retina display and input device that provides dynamic interface controls for interacting with content on the main screen. These controls offer quick access to system-level and app-specific functionality based on the current context. For example, when the user types text in a document, the Touch Bar might include controls for adjusting the font face and size. When the user views a map, the Touch Bar could give quick, one-tap access to gas stations, lodging, and restaurants near the displayed location. A Touch ID sensor to the right of the Touch Bar allows fingerprint authentication for logging into the computer and approval of App Store and Apple Pay purchases.

image: ../Art/touchbar_hero.png

By default, the right side of the Touch Bar displays an expandable Control Strip that includes controls for performing system-level tasks such as invoking Siri, adjusting the brightness of the main display, and changing the volume level. Previously, users accessed most of these controls with a top row of physical function keys. You can implement app-specific controls in the app region to the left of the Control Strip. An Esc (Escape) button or other system-provided button may appear to the left of the app region, depending on context.

image: ../Art/touch_bar_2x.png

The Touch Bar is configurable. The user can remove items from the Control Strip or hide it completely, in which case only app controls are displayed. The user can also hide the app region, displaying an expanded Control Strip. Some apps also allow users to add and remove items in the app region.

To implement Touch Bar support programatically in your app, see the reference documentation for NSTouchBar. To learn how to add Touch Bar controls to your app using Interface Builder in Xcode, see Xcode Help.

Design for the Touch Bar

Keep the following guidance in mind as you design your app’s Touch Bar interfaces.

Design a contextual experience. Make the Touch Bar relevant to the current context on the main screen. Identify the different contexts within your app, and consider how you can expose varying levels of functionality based on how your app is used.

Use the Touch Bar as an extension of the keyboard and trackpad, not as a display. Although technically it’s a screen, the Touch Bar functions as an input device, not a secondary display. The user may glance at the Touch Bar to locate or use a control, but their primary focus is the main screen. The Touch Bar shouldn’t display alerts, messages, scrolling content, static content, or anything else that commands the user’s attention or distracts from their work on the main screen.

Strive to match the look of the physical keyboard. To the extent possible, controls in the Touch Bar should resemble the appearance of physical keyboard keys in terms of size and color.

Don’t expose functionality solely in the Touch Bar. Not all devices have a Touch Bar, and people can disable app controls in the Touch Bar if they choose. Always provide ways to perform tasks using the keyboard or trackpad.

Provide controls that produce immediate results. Provide quick access to actions that would otherwise require more steps if the user were clicking controls or choosing from menus. Minimize the use of controls that present additional choices, such as popovers. See Controls.

Respond immediately to user interaction. Even when your app is busy doing work or the main screen is updating content, any enabled controls in the Touch Bar should be responsive to the user’s touch.

When possible, allow tasks that start in the Touch Bar to finish in the Touch Bar. Users shouldn’t need to switch to the keyboard or trackpad to complete a task unless it’s a task that requires more complex interface controls than the Touch Bar provides.

Avoid using the Touch Bar for tasks associated with well-known keyboard shortcuts. In general, the Touch Bar shouldn’t include controls for tasks such as find, select all, deselect, copy, cut, paste, undo, redo, new, save, close, print, and quit. It also shouldn’t include controls that replicate key-based navigation, such as page up and page down.

Reflect state consistently and accurately. If a control resides in the Touch Bar and on the main screen, both locations should show the control in the same state. If a button is disabled on the main screen, for example, it should also be disabled in the Touch Bar.

Avoid mirroring Touch Bar interactions on the main screen. If the user taps a button in the Touch Bar and is presented with a list of options, for example, don’t also present those options on the main screen.