UX · Apple

Getting Started with Apple TV and tvOS Apps

Ken Yarmosh

Last updated Jul 23, 2019

As a creator of apps, it's not every day that a new platform gets dropped into your lap by the most influential and powerful company in the world. Apple has unleashed a new Apple TV and tvOS, along with the tvOS SDK. With the tvOS SDK, third-party developers can design and develop apps for the Apple TV. Savvy has spent countless hours with platform, so that you can more quickly get up to speed.

We've taken the time to document our findings for those that want to get started with Apple TV and tvOS apps. Our focus overall is on the product, user experience, and design side of tvOS. These notes will not only be helpful for those focused in these areas but also for developers and others who are thinking about creating tvOS apps.

Note: Many of the links below will require you to be signed in with your Apple Developer account.

Register for the Apple TV Developer Kit

Since you'll be digging into the documentation for a while to wrap your head around tvOS, go ahead and register for the chance to get an Apple TV Developer Kit. Similar to what Apple did with the Apple Watch, a select number of developers will get an Apple TV Developer Kit. The kit includes the new Apple TV, Apple TV Remote, power cord, Lightning to USB Cable, USB-A to USB-C Cable, and documentation. You can still test your work out in the simulator with Xcode 7.1, even if you don't get one.

Apple TV's Focus vs Touch Model

The interaction model for the new Apple TV and tvOS is a completely different approach compared to iOS. iOS is driven by a touch model with a finger contacting the interface it interacts with, namely a touchscreen. With iOS, the screen is close in proximity and there's typically good context on where you are and where you want to go.

With tvOS' focus model, the gestures interact indirectly with a much larger screen from a farther distance through the Siri Remote. This change is why Apple outlines the design principle of "Clear," so that people always understand where they are in an app. "Focus" comes from the fact that a currently selected item on the Apple TV will be in focus and have some sort of indication accordingly. It should be mentioned that previous Apple TV owners, those who have a Wii, or comparable systems will have some experience with this model. Check out more on focus in the Apple TV Human Interface Guidelines.

Goodbye Apple Remote, Hello Siri Remote

The biggest change for Apple TV from a consumer standpoint will be the new remote. Apple's calling the latest and greatest remote the "Siri Remote." It's gesture-driven by the Glass Touch surface while still also having a number of physical buttons such as a "Home" and "Menu" button. Apple has a breakdown of the remote in its docs on the remote and its interactions. Note that the Siri Remote will initially not be available in all countries, but the sole difference would be an onscreen search app instead of voice interaction.

If you've been designing for iOS for a while, then you'll be familiar with ideas like a tap. At Savvy, we have a joke that you put money in the jar when you say "click" but mean "tap." Well, the joke is on us here because Siri Remote supports both a click and tap gesture. A "click" becomes the primary way of triggering an action where a "tap" on tvOS will be more about navigation.

Developers will also need to think about the Siri Remote as a game controller. Although an actual game controller will be an optional purchase, everyone will have a remote. You'll need to test both though and also ensure a controller is connected. See Apple's documentation on working with game controllers for more details.

Cozy up to Grids in tvOS

Longtime users of Apple TV know that content is largely organized in grid layouts. Apple's not getting away from that approach in this initial release of tvOS. They're using the interfaces they've honed and perfected on Apple TV the last number of years as the suggested ways for developers to think about creating their own apps.

A grid-based layout works well with screens that are farther away. They also make it easier to navigate content with the remote, particularly when items are properly spaced and padded. Grids also play well with a number of standard navigation paradigms ranging from collection and split views to page and segmented controls. Apple provides additional comments on the importance of grid layouts and some best practices in their visual design section.

Make tvOS UI Elements Bigger(er)

As TV screens are farther away than touchscreens, providing big, chunky UI elements that are easy to focus on and select will make it easier for people to use and navigate a tvOS app. Assets subsequently need to be optimized for a big screen and should be designed using a @1x resolution. Although more development-centric, keep in mind that many resources will be on-demand, since there's a 200 MB limit for tvOS apps.

Navigation-related elements ranging from tab to navigation bars generally should be text and not asset or icon-based and displayed at a readable size. Apple's also putting emphasis on parallax effect and layered images as part of the Apple TV's focus model. When there's a change in focus, animations and effects help communicate movement or a new selection. You get some of these focus elements for free if you’re using interface elements from UIKit. If you're a designer who also tinkers in Xcode, you can download a sample project to play around with creating and customizing UIKit controls for tvOS.

In terms of app icons, layered images will be required for them but optional for other focusable UI elements. There's a new tool you can download called the Parallax Previewer to check out layered app icons or other layered images designed for Apple TV.

Heavier Use of Web Technologies in tvOS

Without getting overly technical, I thought it would be useful to highlight that tvOS apps are more web-based than Mac, iOS, and watchOS apps. For non-game apps—Apple refers to them as client-server apps—interfaces are now defined with XML using Apple's custom markup language TVML. JavaScript plays a much bigger role in tvOS apps as well. That combined with the use of TVML templates should make web developers feel more at home when building tvOS apps.

I'll leave the rest up to whether you want to get into the technical details, which can be found in the App Programming Guide for tvOS. Jameson Quave also has a "Hello World" tvOS tutorial and Erica Sadun has some first thoughts on developing for Apple TV.

Concluding Note

These notes should be a great primer but the platform continues to evolve. Expect that we will have further details to share on tvOS, which will go deeper into design and technical specifics. In the meantime, have fun and ready, set, tvOS!

Written By:

Ken Yarmosh

Ken Yarmosh is the Founder & CEO of Savvy Apps. He's the creator of more than 20 featured apps, including an Editor's Choice selection and Starbucks Pick of the Week. An O'Reilly author, Ken regularly speaks about application design & development, as well as the future of technology at outlets ranging from Bloomberg TV to Google.