Apple - MacBook Pro with TouchBar - Video Apps
“Many of the built-in apps on your MacBook Pro have Touch Bar controls that make common actions like sending an email or formatting a document even easier. The Touch Bar changes to match the app you’re using, bringing these shortcuts front and center. And third-party apps can take advantage of the Touch Bar as well.” (credit: Apple)
Our Role
We were assigned to be the design DRI (directly responsible individual), guiding the implementation of the Touch Bar user-interface for all of our video apps (Final Cut Pro, Motion, Compressor, and iMovie); the responsibilities included the interactions and the visual design, from concept, through design iterations, to working with engineering to implement the designs into working builds. The work culminated in the announcement and release of the MacBook Pro with Touch Bar in 2016.
Background
The hardware team was working to replace the function key row on the new MacBook Pro notebook computers back in 2013-2014. The main idea being that having a touch screen strip replace the hard keys could expose useful and frequently used controls for all our customers.
The team responsible for the OS (Human Interface) was beginning to establish a framework for how to standardize implementation of the TouchBar UI at the OS level and for applications. Final Cut Pro X, iMovie, Motion, and Compressor were among the first products that were updated to utilize the TouchBar UI when the new MacBook Pro shipped in 2016.
Final Cut Pro X
The TouchBar UI is fully contextual, meaning that what UI is presented to the TouchBar is dependent on what the user is doing in the application itself. The first task was to take inventory of all the contexts (i.e. pane focus) that we would want to cover for the TouchBar UI. Below is a compilation of every context we designed for. We worked closely with the OS team to ensure best practices for adopting the TouchBar UI framework. The biggest challenge was to identify and address the controls that we felt made the most sense to our customers.
One of the most interesting ideas to come out of the TouchBar project was a timeline navigator. Given the horizontal nature of the TouchBar screen, it felt like a natural implementation for Final Cut Pro X. The timeline navigator is presented modally and is brought up manually by the user. Since we were working on the Magnetic Timeline 2 in the same timeframe as the TouchBar work, it was a great way to showcase the new features of the timeline, in particular the new role-based clip colors and organization.