The Touch Bar in the new MacBook Pro replaces the physical function keys on the keyboard with a touchscreen panel, allowing apps to display custom, unique and contextual interfaces like buttons, sliders, tabs and other controls. We’ve already covered some general details about how the Touch Bar works and what developers can do with the API, but it will take some time for third-party developers to add integration.
Apple is leading the charge, however, adding extensive Touch Bar support to many macOS apps with 10.12.1. Using the Xcode developer tools, we’ve gathered screenshots from all of Apple’s apps that already include Touch Bar features. See our roundup of the 23 compatible apps after the jump …
Below is a list of all the Apple apps that support the Touch Bar found in the /Applications folder on a default install of macOS including the iLife and iWork suite apps: Pages, Keynote, Numbers, iMovie and GarageBand.
This is meant as an overview of what kind of support is available in the system apps for the new MacBook Pro and is not comprehensive as Touch Bar features change depending on the context, not merely on a per-app basis.
We will have a full hands-on of how the Touch Bar works in person, once we have the new hardware in our hands.
Touch Bar Support In Apple’s Apps
Calculator
Calculator uses the Touch Bar to display the primary arithmetic operations, like add, subtract, multiple and divide. In general, Touch Bar controls do not use bright color palettes but Calculator uses the theme orange color from the app itself to highlight these primary buttons. There are also shortcuts for percentages and decimal points by default. These shortcuts change dynamically to reflect the calculator mode; using Calculator in Scientific mode will show more mathematically advanced buttons on the Touch Bar.
Calendar
On the Touch Bar, Calendar shows a timeline scrubber. Users simply swipe on the scrolling list to jump to a new date. The timeline will offer options at the same granularity as the app view itself, whether that’s Day, Week, Month or Year. Selecting an event replaces the scrubber with relevant quick actions, including buttons to add a location to the selected event or change which calendar the event is associated with.
Contacts
Contacts displays actions in the Touch Bar for the contact card being viewed in the main app window. The Touch Bar offers one-tap shortcuts to call, FaceTime and iMessage the person. Naturally, this bar will dynamically update depending upon which contact is selected. You can even add new fields to a card using the drill-down menu. Notice how the virtual ‘esc’ key transforms into a blue Done button when in the modal editing experience.
FaceTime
When receiving a FaceTime call, the Touch Bar lights up with a large green Answer button and a red Decline button in the center; the caller’s name and contact picture is also displayed on the left. During the call, the buttons morph into controls to end the call, mute audio or maximize the video window.
Finder
Finder brings the file view and sort options found in its toolbars into the Touch Bar. Quick Look, share and tag options are presented front and center. Tapping on the tag button opens a scrolling palette of known tags, enabling users to add and remove tags solely using the Touch Bar interface. Tapping on the List view button displays a new screen of sorting options; selecting a new view mode is then reflected in the Finder window.
GarageBand
GarageBand shows adjustment sliders based on the selected instrument in the project. The buttons such as Level, Cutoff, Res, Attack and Mix show percentage indicators at the bottom of the buttons indicating their value as a percentage of the maximum. Tapping on one of these buttons presents a detail view that allows the value to be changed by adjusting a larger interactive slider. It remains to be seen how useful this will be in practice, as the screen is quite small.
iBooks
From what I could tell, iBooks only uses the Touch Bar while reading a book. When in the main library view, the Touch Bar app region was completely blank. The reading interface is clever though. The Touch Bar displays a large scrubber which represents how far into the book you are; the little black marks indicate the start of a new chapter. Slide the scrubber with your finger on the Touch Bar to quickly advance through the pages.
iMovie
Apple has shown off a rich Touch Bar experience for Final Cut Pro, where a miniature version of the project timeline is displayed on the Touch Bar persistently, so I was expecting similar advanced behavior from iMovie. Unfortunately, iMovie integration with Touch Bar seems rushed or incomplete. The Touch Bar would only display basic buttons such as play/pause/rewind controls and a Split Clip button.
iTunes
The Touch Bar will permanently display media playback bar while iTunes is the frontmost app as well as back/forward buttons to navigate the main iTunes interface and an ‘Add To Up Next’ queue button when highlighting a particular song. I would like to see love/dislike buttons added in future updates. iTunes will also appear in the Control Strip as a Now Playing app when not in the foreground, allowing users to quickly skip songs and scrub through tracks.
Keynote
Keynote’s integration with Touch Bar impressed me a lot. While presenting, the Touch Bar displays mini thumbnails of adjacent slides. Tapping on a thumbnail jumps the presentation forward to that slide, as you might expect. You can scroll through the entire slide deck this way — the high-resolution Retina Touch Bar display means it is actually possible to discern individual words. Outside of presenting, Keynote offers commonly used shortcuts while composing a Keynote document.
Mail looks at the selected message and presents a convenient ‘Move’ button to quickly file the message into another inbox or folder. It will use machine learning to automatically suggest mail destinations, if it recognizes a familiar usage pattern. There are also Touch Bar controls to flag, reply or trash. Long-pressing on the ‘Reply’ button exposes additional related actions such as ‘Forward’ and ‘Reply All’.
Maps
Maps integration with Touch Bar is relatively straightforward, displaying a My Location and a large search bar when first launched. Tapping on the search button focuses the keyboard into the text field on the main Mac app as well as showing some quick search POIs (points-of-interest) on the bar itself. These are color-coded to match the appearance of the search options on the iOS Maps app.
Messages
The Touch Bar makes the Mac Messages app feel like an iPhone or iPad experience with a visible QuickType bar offering autocomplete suggestions as you type. (By the way, this appears to be a standard contextual feature while writing in most apps). Like iOS 10, the QuickType suggestions include emoji as well as words. Tapping on the emoji button reveals a list of frequently used emoji; one tap adds them to the message. The on-stage demo of the emoji feature was more advanced, allowing access to the entire emoji character set, so expect to see a more fully-fledged emoji experience in the final hardware.
Notes
Notes on Touch Bar includes a persistent compose button to make a new note, a quick shortcut to make a to-do list, and an array of text formatting options. Toggles for bold, italics and underline are always visible and expanding the ‘Aa’ reveals options to choose Title, Heading or Body paragraph styles. Pressing the keyboard icon (with the disclosure arrow) will reveal the QuickType suggestions bar, just like what is seen in Messages.
Numbers
I’m not a big Numbers user but Apple appears to have comprehensive integration with Touch Bar in the app. It exposes formula, text formatting, autofill and cell merging options. With a cell selected onscreen, the Touch Bar Format mode allows the user to switch between data types: be it numeric, currency, percentages, text, dates or durations.
Pages
Unsurprisingly, the Pages Touch Bar experiences focuses on text entry. Change paragraph text alignment with one tap, start a bulleted list and more. Paragraph styles can be switched between effortlessly; the Touch Bar labels preview what the styles look like as a visual aide. There’s even a color palette selector builtin, which is way more accessible than the system Color inspector.
Photos
Apple has clearly chosen Photos as a flagship demo app for Touch Bar; the multi-touch bar is perfect for navigation and making adjustments. In library view, the Touch Bar shows a photo scrubber with thumbnails of the images before and after. Simply swipe the bar to skim through your photo library. Most functions in Edit mode can be performed wholly on the Touch Bar, like adding filters or adjusting color tweaks.
Preview
Preview adds basic adjustment and annotation buttons into the Touch Bar. Rather than pressing rotate in an onscreen menu, the Touch Bar adds rotate and flip buttons right above the keyboard. The annotation buttons act as a helpful accessory bar to switch between tools and change colors, although the edits themselves are still going to require the trackpad cursor.
QuickTime Player
QuickTime Player has surprisingly good Touch Bar support. The app displays a wide track of the currently playing item in the Touch Bar, enabling users to scrub through the audio with their finger. Cleverly, the track displays a waveform of the audio file to give a sense of what’s happening directly under the user’s finger.
Reminders
Reminders’ Touch Bar support is a relatively straightforward, promoting actions to add a new note, complete the selected note, reveal more information onscreen or add additional context info like locations or times. The interface for adding times is clever – there’s a segmented control to adjust the day and a timeline pin wheel for more fine-grained selection of the hour and minute.
Safari
Safari uses the Touch Bar to display thumbnails of the tabs in the current window. As the Touch Bar is quite small height-wise, it’s sometimes difficult to work out what page the thumbnail is representing from the miniature preview. With a few tabs, it’s okay, but a lot of open tabs shrink the thumbnails to infinitesimally small rectangles that are impossible to tell apart. There is a cool interface for browsing bookmarks: each Touch Bar button uses the website’s favicon superimposed on a familiar background color.
One special thing I want to highlight is that when playing audio/video in a tab, playback controls are visible on the thumbnail of the respective tab in the Touch Bar. This was a really impressive example of dynamic UI.
System Preferences
Not much to report here, System Preferences adds a permanent ‘Show All’ button to jump back to the main home grid of preference panes. There’s also back/forward navigation to skip through the app’s view history.
TextEdit
Similar to Pages, TextEdit displays an array of text formatting and emoji options. Expanding the keyboard button displays QuickType suggestions. For some variety, I’ve included a screenshot of the color picker here, although it isn’t an exclusive feature of TextEdit by any means. The color picker shows 12 primary colors and has a drill down menu to select any color from a full rainbow spectrum.
Conclusion
That’s a total of 23 Apple apps that live in the /Applications root folder with Touch Bar support as of the current macOS 10.12.1 build. The following apps have no Touch Bar integration as far as I could tell; App Store, Automator, Chess, Dashboard, Dictionary, DVD Player, Font Book, Image Capture, Photo Booth and Stickies. I expect all of Apple’s apps to flesh out their Touch Bar integrations in future macOS update.
Looking at static screenshots is also very different from the real-world reality of using the Touch Bar, complete with animations and visual whimsy. For a version 1.0, I think Apple has done a good job of covering the bases (all major apps feature rich Touch Bar integration on day one) and I can’t wait to try out the Touch Bar for real when my new MacBook Pro is delivered. Check out our previous article for details about screen resolution, Control Strip and Touch Bar developer APIs.
The Spraycan icon in Control Strip visible across these screenshots is a debug tool for Xcode. For actual customers, this button will not be shown on the Touch Bar and the Control Strip will be four buttons wide in the collapsed state. Moreover, in System Preferences, it will also be possible to disable the Control Strip entirely — allowing apps to use the full width of the Touch Bar.
