Touch Bar Overview
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.
Keep the following guidance in mind as you design your app’s Touch Bar interfaces.
Make the Touch Bar relevant to the current context on the main screen. Identify the different contexts within your app. Then, 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 size and color of physical keyboard keys.
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 Touch Bar > Controls and Views.
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 the task 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.