The flagship feature of the new MacBook Pro is the Touch Bar, an OLED display strip that replaces the physical row of function keys. This adds a dynamic zone to top of the keyboard where apps can display custom buttons, sliders, switches and scrubbers to enhance the MacBook experience while adding a new way to interact with Mac applications beyond text input and mouse pointers.
How does the Touch Bar interface work? What is the resolution of the Touch Bar? What is the Control Strip? What can third-party developers do with the Touch Bar? Read on for all the answers and more …
First things first, the Touch Bar is exclusive to the higher-end 13-inch and 15-inch MacBook Pro models. If you want the Touch Bar, you must have a new MacBook Pro.
And right now, those models are on one-month backorder so this requires a bit of imagination. Assuming you unwrap a MacBook Pro for the first time, how exactly does the Touch Bar interface work in practice?
General Interface and Control Strip
The Touch Bar offers quick access to functions provided by applications and by the system. The main interface is split into three distinct sections: the area for app controls, the Control Strip and a system button. The system button is controlled by macOS Sierra and displays a Cancel, Done or virtual ‘esc’ key where necessary. It may be the death of the physical esc key but the operating system guarantees that a virtual button will always be available.
In the middle is the ‘app region’ which is controlled by the currently active app (the one whose name is displayed on the menu bar). If you are on the desktop, this is just going to be a blank space. When you click into an app or select a file, it will light up with contextual buttons and actions.
What about the media keys and brightness controls? These are contained within the Control Strip. This is another element controlled by the system and it is a persistent tray on the right hand side with buttons to access sliders for brightness and volume, mute and Siri. This tray is expandable (or collapsible) so you can dedicate more screen real estate of the Touch Bar to app content if you want to. If you hold down the function key, the Touch Bar transforms into a virtual set of normal function keys. This behavior is configurable in the preferences.
Touch Bar Tech Specs
The Touch Bar is a 10-point multitouch touch screen located above the keyboard, replacing the function keys on existing Mac keyboards. It’s also the same approximate physical size as the row of keys it replaces, a skinny height rectangle spanning the full width of the keyboard. In technical terms, the display is 2170×60 pixels. Details on what drives the Touch Bar are not entirely clear but Apple says it has a custom T1 chip to power the Touch ID and Apple Pay features (it seems like the T1 is actually a mini Apple Watch SoC.)
The Touch Bar is a @2x Retina display, which makes an effective screen resolution of 1085 x 30 points for content display. Essentially, there is no meaningful concept of a Y-axis when interacting with display — controls always take up the full height. The display also supports a P3 wide color space, just like the primary MacBook Pro display and the new iPhone 7. This means apps can make buttons appear on the Touch Bar with strikingly vibrant and saturated colors.
Developer API
The Touch Bar is supported by a comprehensive API for third-party developers to add rich controls and interface elements for their apps, in the same way Apple has done for its own stock apps like Safari and Mail. Typically, initial iterations of third-party developer integration from Apple are limited and simplified, and then slowly expand in capability with future versions. The Touch Bar API is not that, its first version features a very detailed, customizable and intricate set of APIs.
Developers have full control over what buttons and views they want to show and how the buttons are displayed. Apple includes a handful of template controls for consistency between apps but the API enables developers to create truly-unique controls for their individual needs as well. The main constraint is that the Touch Bar is very skinny and UI can only be shown in a single horizontal row (side scrolling is possible).
Developers can display pretty much whatever they want whilst their app is in the foreground; this includes swapping out views and buttons depending on the current window of their app (a compose window necessitates different Touch Bar accessory views than the inbox window). However, the Touch Bar does not allow persistent widgets, status items or similar features like always-visible news tickers. These constraints are unlikely to be lifted either; Apple is imposing the restriction so that the UI under the user’s finger isn’t constantly changing due to spurious notifications or text messages.
Apple wants the bar to display peaceful relatively-static UI based on the current task. Major changes to the Bar should only happen when the application state drastically changes, such as opening a new tab or beginning a new modal activity. To repeat: once an app’s window is not active, it loses its control to influence what is shown on the Bar. The system Control Strip sits to the right in a collapsed state by default, but can be disabled entirely in System Preferences if desired.
The API also allows developers to make more controls than they might want to show at any one time, enabling users to customise their toolbar layouts with options and commands that are most interesting and relevant to them.
Touch Bar Controls
Apple allows apps to make custom views to display unique content but it provides a rich set of base elements too. Here’s a look at the Apple stock controls, to give an idea about what kind of interactions are possible. There are buttons, toggles, multi-option collapsible pickers, segmented controls and sliders.
There is also the concept of popovers which temporarily swap out the toolbar with a modal view. For instance, the emoji picker is a character viewer modal view — a scrolling list of emoji symbols. Apple also has a color picker modal to select colors from a rainbow spectrum strip.
Combining all of these elements together creates the rich interactions. Marc Edwards produced a nice image showing a plethora of Touch Bar states for apps that Apple showed in the keynote itself, showing how all the controls come together to customize the experience for every app. Microsoft also showed some good examples of using the Touch Bar with the Office suite, where the buttons naturally gel with Office iconography and tools.
Design Guidelines
Although Apple cannot enforce Mac apps outside of the App Store to comply with any guidelines, it is providing documentation to encourage good practice and consistent experiences. The design documentation is comprehensive and can be read in full here if you are interested. In summary, the Touch Bar should feel as responsive as an iPhone to the touch and blend in with the rest of the keyboard as much as possible. The OLED display provides incredibly high contrast to make the black backgrounds of the bar mirror the black physical keys.
The display supports wide color but Apple is generally discouraging the use of bright colors and imagery apart from where it is essential … although Apple isn’t exactly leading by example here with the Siri button.
Another interesting point is that the Touch Bar should not be the only place to be able to perform a feature of an app. In fact, developers don’t get to know if the Touch Bar is present or in use at all. What this means is that the Mac app toolbars and controls visible on the primary display will not change in the presence of the toolbar.
I wish Apple would stop insisting the Siri icon on the Mac has to be full-colour when all the icons around it are monochrome glyphs. pic.twitter.com/SXraaXM4B1
— Benjamin Mayo (@bzamayo) October 28, 2016
The reason behind this decision is the simple fact that the Touch Bar is not available on most Macs or external keyboards so it can’t be a mandatory part of the experience. Apple is positioning the Touch Bar as an additive improvement, a bit like 3D Touch Peek & Pop on the iPhone.
In the same way, Apple is discouraging duplication of functionality where possible; they don’t want developers to show things just for the sake of it. The guidelines also say to avoid showing ‘well-known’ keyboard shortcuts like cut/copy/paste as it’s assumed everyone will still want to do basic shortcuts like that ‘the old way’ using Cmd+X, Cmd+C, and Cmd+V.
Summary
In summary, Apple has introduced a very powerful Touch Bar in its first iteration with comprehensive developer integration for the currently-focused app.
The Touch Bar is really interesting but time will tell if it becomes an essential part of the Mac, so much that you would miss it if it wasn’t there. Customers will start getting their hands on the MacBook Pro with Touch Bar in the next couple of weeks, as the products are already backordered around the world. What do you think of Apple’s latest interface innovation? Let us know your impressions of the Touch Bar in the comments below.
