{"id":6082,"date":"2016-06-03T00:00:10","date_gmt":"2016-06-03T07:00:10","guid":{"rendered":"http:\/\/thinkapps.com\/blog\/?p=6082"},"modified":"2016-06-03T00:29:52","modified_gmt":"2016-06-03T07:29:52","slug":"apple-tv-app-how-to-design-develop","status":"publish","type":"post","link":"https:\/\/thinkapps.com\/blog\/development\/apple-tv-app-how-to-design-develop\/","title":{"rendered":"Apple TV: How to Design and Develop An App for the Big Screen"},"content":{"rendered":"

This is part two of our Apple TV series.\u00a0In the first post<\/a><\/span>, we explored whether you should build an app for this platform. Now we’ll explain how to design and develop an Apple TV app.<\/em><\/p>\n

As we explained in a previous post<\/a>, the Apple TV<\/a> has been around for quite some time. In fact, it was introduced back in 2007, when the very first iPhone was released.<\/p>\n

But, unlike the iPhone, the Apple TV had a back-seat status of being more of an Apple hobby. And despite numerous incremental improvements over the years, this little black box had still not received much attention from Apple.<\/p>\n

This all changed, however, in fall 2015.\u00a0Amidst the excitement of Apple\u2019s announcements of the new iPhone 6S and iPad Pro in September, the company\u00a0finally put Apple TV in the spotlight.<\/p>\n

The device has been reborn with an array of hardware enhancements<\/a>, including a fast A8 processor. And the new Apple TV will be controlled through a cleaner interface with deep searching, a gesture-friendly remote control, and the ability to hook up gaming controllers\u00a0\u2014 all powered by Siri.<\/p>\n

But the most notable improvement is the all-new tvOS framework, which opens up the platform for the first time to third-party developers<\/a>.\u00a0No longer is the Apple TV a second class citizen in Apple’s app-driven ecosystem.<\/span><\/p>\n

In this article, we’ll explain the process of developing and designing an Apple TV app,<\/span>\u00a0starting with the different approaches developers can take when building for\u00a0tvOS, followed by some design considerations. <\/span><\/h3>\n

Apple TV Apps: TVML vs Custom<\/span><\/h2>\n

Being a completely new platform for third-party developers, Apple has provided\u00a0two different approaches for\u00a0creating <\/span>tvOS apps<\/a>.<\/span><\/p>\n

The first utilizes Apple’s new\u00a0Television Markup Language (TVML)<\/a>, a\u00a0<\/span>JavaScript-centric framework that is well suited to video consumption apps like <\/span>Hulu<\/span> or <\/span>Ted TV<\/span>.<\/span><\/i><\/p>\n

The second option is a custom app<\/span>, which essentially is an iOS app that conforms to various tvOS SDK features and requires extensive use of Swift or Objective-C. <\/span><\/p>\n

Next we will explain each of these approaches in greater detail, including\u00a0their benefits and limitations.<\/span><\/p>\n

TVML<\/span><\/h2>\n

TVML<\/span> acts as a bridge or gateway between native iOS code and the\u00a0UI<\/a>\u00a0for\u00a0Apple TV.<\/span><\/p>\n

If you decide to go with this approach, you would build your app through a series of JavaScript pages, without having to rely too heavily on Swift or Objective-C. Instead, you would utilize\u00a0<\/span>TVMLKit<\/span><\/a>, consisting of TVML and\u00a0TVJS<\/a>.<\/span><\/span><\/p>\n

Each TVML template represents a single page and is made up of a series of <\/span>simple and compound elements<\/span><\/i>, which contain content information or images that\u00a0are displayed on screen. <\/span><\/p>\n

The sequence of orchestrating and displaying TVML template pages is managed via a TVJS\u00a0<\/span>JavaScript file called by the tvOS binary app, which handles user input in addition to loading various pages.<\/span><\/p>\n

\"Apple<\/a><\/p>\n

In the client-server paradigm, your JavaScript file orchestrates loading assets (images, videos, text content) from the server and overlays them into the UI elements, which sit within the TVML files.<\/span><\/p>\n

\"Apple<\/a><\/p>\n

TVML makes use of traditional web networking technologies such as HTTPS, XMLHttpRequest, DOM, and other JavaScript libraries to acquire content to display TVML pages.<\/span><\/p>\n

Templates<\/span><\/h3>\n

As mentioned in part one of this series, Apple provides 18\u00a0<\/span>TVML templates.<\/a>\u00a0The list includes an<\/span>\u00a0<\/span>alertTemplate,\u00a0<\/span>catalogTemplate,\u00a0<\/span>productTemplate,<\/span> ratingTemplate, searchTemplate<\/span>, and more.<\/span><\/p>\n

Each of these templates serves a specific role, while allowing developers to add their own simple and compound elements to customize each screen. <\/span><\/p>\n

(<\/span>We will discuss various UX considerations when designing screens in the second half of this article.)<\/span><\/p>\n

\"Apple<\/a><\/p>\n

A template in code\/script format would resemble something like the\u00a0alertTemplate below:<\/span><\/p>\n

<document><\/span><\/em><\/p>\n

\u00a0 \u00a0<alertTemplate><\/span><\/em><\/p>\n

\u00a0 \u00a0 \u00a0 <title>Update Available<\/title><\/span><\/em><\/p>\n

\u00a0 \u00a0 \u00a0 <description>Get the latest tvOS version<\/description><\/span><\/em><\/p>\n

\u00a0 \u00a0 \u00a0 <button><\/span><\/em><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<text>Update Now<\/text><\/span><\/em><\/p>\n

\u00a0 \u00a0 \u00a0 <\/button><\/span><\/em><\/p>\n

\u00a0 \u00a0 \u00a0 <button><\/span><\/em><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<text>Cancel<\/text><\/span><\/em><\/p>\n

\u00a0 \u00a0 \u00a0 <\/button><\/span><\/em><\/p>\n

\u00a0 \u00a0<\/alertTemplate><\/span><\/em><\/p>\n

<\/document><\/span><\/em><\/p>\n

You can check out the complete list of TVML templates that\u00a0<\/span>Apple provides\u00a0<\/span>here<\/span><\/a>. <\/span><\/p>\n

We expect to see\u00a0third-party templates gradually become available, and Apple will also most likely continue\u00a0adding new templates in the future.<\/span><\/p>\n

Simple and Compound Elements<\/h3>\n

TVML pages contain both\u00a0<\/span>simple elements<\/span><\/a> and <\/span>compound elements<\/span><\/a>, which together make up the template.<\/span><\/p>\n

Simple Elements<\/strong><\/h4>\n

Simple elements represent a singular item, be it a badge, text, image, etc.<\/span><\/p>\n

\"Apple<\/a><\/p>\n

\"Apple<\/a><\/p>\n

Some of the s<\/span>imple display elements <\/span>that Apple has made available so far include:<\/span><\/p>\n

Badge<\/span><\/i><\/i> \u2014<\/span>\u00a0a link to a small image that is usually displayed on top of another image (similar to the badges we see on iOS app icons)<\/span><\/p>\n

DecorationImage \u2014<\/span><\/i>\u00a0an image that is usually displayed inside of another image<\/span><\/p>\n

FullscreenImg<\/span><\/i> \u2014 displays the image over an entire element<\/span><\/p>\n

HeroImg<\/span><\/i> \u2014 a hero image, usually displayed inside of a banner<\/span><\/p>\n

Img<\/span><\/i> \u2014 a standard image, usually a preview image of a product<\/span><\/p>\n

RatingBadge<\/span><\/i> \u2014 a different type of badge that is displayed inside a <\/span>review card, <\/span><\/i>which is a compound element<\/span><\/p>\n

SeasonBadge<\/span><\/i> \u2014 an image to indicate the season count, which is also usually displayed inside a <\/span>review card<\/span><\/i><\/p>\n

Apple also provides\u00a0<\/span>simple multimedia elements<\/span><\/a>\u00a0for streaming audio and video stored on a server, as well as an array of <\/span>simple text elements<\/span><\/a>\u00a0for creating headings, monograms, ordinal elements, and so forth.<\/span><\/p>\n

Compound\u00a0Elements<\/strong><\/h4>\n

Compound elements<\/span> are higher-level groupings of s<\/span>imple elements<\/span>, consisting of <\/span>compound background elements<\/span><\/a>\u00a0that display images prominently in the back of elements, as well as play audio in the background of a template page. <\/span><\/p>\n

Compound banner and header elements<\/span><\/a>\u00a0contain buttons, heroImg, row, stack, and other types of simple elements.\u00a0There is also a\u00a0footer compound element and itemBanner, which displays information along the top of the element and consists of <\/span>heroImg, row,\u00a0<\/span>and I<\/span>mg<\/span>.<\/span><\/em><\/p>\n

Compound information elements<\/span><\/a> provide user-specific group elements such as <\/span>activity indicators<\/span><\/i> and\u00a0<\/span>placeholders<\/span><\/i>, as well as\u00a0<\/span>ratingCard<\/span><\/i>\u00a0and <\/span>relatedContent<\/span><\/i> elements. Information elements could also include <\/span>menuItem<\/span><\/i> for labeling an item inside of a <\/span>menuBar<\/span><\/i>\u00a0and <\/span>reviewCard<\/span><\/i> for displaying abbreviated review information. <\/span><\/p>\n

Compound layout elements<\/span><\/a> help organize and display elements they contain as a <\/span>shelf, collectionList, grid, imgDeck, infoList, list, menuBar, overlay, section,<\/span><\/i> and more. <\/span><\/p>\n

Compound lockup elements are a combination of other elements treated as a single element, usually presented in grouped elements like a shelf. <\/span><\/p>\n

For instance, you might\u00a0incorporate a <\/span>badgeLockup<\/span><\/i>, which is a combination of <\/span>badge <\/span><\/i>and <\/span>title<\/span><\/i>, or <\/span>listItemLockup,<\/span><\/i> which is a list item consisting of various elements, such as <\/span>decorationImage, Img, ordinal, relatedContent,<\/span><\/i> and more.<\/span><\/p>\n

Additional Notes about\u00a0Elements<\/strong><\/h4>\n

In addition to <\/span>s<\/span>imple and compound elements<\/span>\u00a0and working with predefined t<\/span>emplates<\/span>, Apple also provides guidance on how you can <\/span>style elements<\/span><\/a> with colors,\u00a0attributes, font weights and sizes, and margins. <\/span><\/p>\n

There are tons of elements and templates available, and it can be overwhelming. <\/span><\/p>\n

That’s why it’s a good idea for you to download the <\/span>TVML Catalog sample app<\/span><\/a>, which will allow you to play with all the different options\u00a0and\u00a0find the right fit and feel to meet your app needs. <\/span><\/p>\n

Benefits and Limitations<\/span><\/h3>\n

You’ve now had a\u00a0brief introduction to TVMLKit, which is a completely new framework for creating tvOS apps. <\/span><\/p>\n

The most striking feature is how simple it is to get started, with\u00a0a rich tapestry of simple and compound elements\u00a0and the ability to promote\u00a0conformance through templates.\u00a0For developers already familiar with JavaScript and Node.js, this is a perfect framework to create a rich, compelling client-server app. <\/span><\/p>\n

However, there are some distinct limitations to TVML apps vs. custom apps. <\/span><\/p>\n

The most notable limitation is <\/span>that TVML\u00a0is\u00a0only suited to simple, lightweight apps that support accessing a list of videos or audio on a server, but nothing too complex or fancy like creating games or iOS-style apps. <\/span><\/p>\n

If you want to create a more iOS-style app, such as\u00a0an AirBnB-like app or 3D game, you will need\u00a0to build\u00a0a custom Apple TV app. We will discuss that approach\u00a0in greater detail in the next section.<\/span><\/p>\n

Custom Apps<\/span><\/h2>\n

In the context of Apple TV, custom apps<\/span> are basically just iOS apps that are extended to conform to the tvOS SDK. <\/span><\/p>\n

In most cases, seasoned Swift and Objective-C iOS developers are already\u00a0accustomed to most of the libraries that are part of tvOS, including AVKit, AVFoundation, UIKit, CoreGraphics, CloudKit, and so forth. <\/span><\/p>\n

For\u00a0iOS developers, this process should be rather\u00a0straightforward. However, developers do need to be mindful\u00a0of the differences in designing and developing for tvOS as opposed to iOS.<\/span><\/p>\n

The Focus Engine<\/span><\/h3>\n

Apple TV developers\u00a0don\u2019t have the luxury of having a screen where they\u00a0can use touch gestures. Instead they must rely on a\u00a0remote that\u00a0uses the <\/span>Focus Engine<\/span><\/a> to focus on a single item at any given time, using remote swipe gestures. <\/span><\/p>\n

Of course, users can also use Siri to control their element interactions on the Apple TV or plug in a bluetooth gaming controller for playing games. \u00a0<\/span><\/p>\n

This means developers need to design their storyboard and elements in a manner that is conducive to users navigating with singular focus, clearly and consistently, in a layout that is either grid-like or stacked logically. <\/span><\/p>\n

(We will discuss the UX aspects further in the next section of\u00a0this article.)<\/span><\/p>\n

As Apple explains in its\u00a0documentation<\/a>:<\/span><\/p>\n

“Focus refers to the effect onscreen of external, indirect user input from a remote or another input device. In a focus-based interaction model, a single view onscreen is considered focused, and the user can move focus to other views by navigating through different UI items onscreen, which triggers a focus update. <\/span><\/p>\n

“The focused view is used as the target of any user actions. For example, if an onscreen button is focused, the button\u2019s action is triggered when a select event is sent from a remote.”<\/span><\/p>\n

Conforming Existing iOS Elements to\u00a0tvOS<\/span><\/h3>\n

Most of the existing standard Apple frameworks, such as UIKit<\/a>, will\u00a0automatically support the <\/span>Focus Engine,<\/span>\u00a0meaning they inherently support the behavior of being controlled by an Apple TV remote for focus, without any additional\u00a0programming needed. <\/span><\/p>\n

It\u2019s just a matter of understanding which UIKit elements can receive focus and which can\u2019t. For example,\u00a0UIButtons can receive focus, while\u00a0UILabels obviously cannot. <\/span><\/p>\n

The standard UITableView and UICollectionView elements allow developers\u00a0to use the standard delegate objects they\u00a0are familiar with in order to receive\u00a0UIFocusEnvironment<\/span><\/a>\u00a0behavior events.<\/span><\/p>\n

You can also obtain focus updates through delegates programmatically, but you cannot control or set focus explicitly and programmatically, such as to move focus to a certain element. <\/span><\/p>\n

UITextField,\u00a0UITableView, UICollectionView, and UISearchBar also have inherit focus support, which developers\u00a0should be able to understand by referring to Apple\u2019s reference documentation. <\/span><\/p>\n

Gestures and touches are observed synonymously to iOS apps, through <\/span>UIGestureRecognizer<\/span><\/a> delegate methods and the <\/span>UIResponder<\/span><\/a> class, with the added methods to respond to buttons pressed via the Siri remote, as well as responding to pan and swipe gestures via the remote glass pane. <\/span><\/p>\n

Custom Support for Focus Engine<\/span><\/h3>\n

For custom UI elements that don\u2019t have inherent focus support, you will need to <\/span>implement your own custom behavior for focusing.\u00a0<\/span><\/p>\n

This\u00a0<\/span>would entail receiving delegate callbacks to update the app state based on the focus change. Alternatively,\u00a0the developer can\u00a0create a new kind of custom focus interaction interface design.<\/span><\/p>\n

Through <\/span>UIFocusEnvironment<\/span><\/a>, you can dictate how each UI element reacts to changes in focus by\u00a0having your UI control conform to the <\/span>UIFocusEnvironment Protocol.<\/span><\/p>\n

This will allow you to gain access to the custom focus behaviors, including where the focus is allowed to move and\u00a0how to respond to the focus.\u00a0<\/span>You also gain access to <\/span>focus updates as they occur<\/span>, through a callback delegate method called\u00a0<\/span>didUpdateFocusInContext:withAnimationCoordinator:<\/em>.<\/span><\/p>\n

Benefits and Limitations<\/span><\/h3>\n

The benefits of c<\/span>ustom apps<\/span> pick up where <\/span>TVML apps<\/span> left off, as\u00a0you can use this approach to create truly\u00a0robust iOS apps for the big screen. <\/span><\/p>\n

If you are a seasoned Swift or Objective-C developer, you will feel very much at home. And, by conforming to certain design principles (which we will discuss shortly), as well as certain protocols, your standard frameworks will\u00a0work seamlessly on tvOS in most cases. <\/span><\/p>\n

Of course, not every framework has been ported to tvOS, which is why developers need to consult Apple\u2019s documentation in regard to\u00a0their specific use cases.<\/span><\/p>\n

If you already have an iOS app, it makes sense to leverage existing iOS code when making the transition to a tvOS app. Also, if your business needs require\u00a0creating a game or iOS-style app, it makes sense to develop a c<\/span>ustom app for Apple TV<\/span>. <\/span><\/p>\n

However, if you are only going to showcase video or audio content and\/or your available talent pool mostly consists of\u00a0web developers, it would make sense to take the <\/span>TVML app<\/span> approach instead. <\/span><\/p>\n

Now that you are well-versed on the two approaches for\u00a0building an Apple TV app, we will focus the remainder\u00a0of this article on design and UX considerations for tvOS apps. <\/span><\/p>\n

Design and UX Considerations<\/span><\/h2>\n

We\u2019ve just covered development considerations for building an Apple TV app. Now we will look at the d<\/span>esign and UX considerations<\/span> that go into creating such apps. <\/span><\/p>\n

Unlike developing for the iPhone and iPad \u2014 or even the Apple Watch, which provides a more intimate user experience<\/a> \u2014\u00a0designing for the Apple TV is the exact opposite.<\/span><\/p>\n

Unlike other Apple devices, where Apple provides the complete hardware, the Apple TV is a box that connects to third-party televisions, which each have\u00a0different screen sizes and resolutions. <\/span><\/p>\n

tvOS apps are meant to be shared in a\u00a0room with others, so the user experience is less private but potentially more engaging (and certainly apps can take advantage of\u00a0greater visual real estate), in comparison to other Apple devices. <\/span><\/p>\n

With that in mind, there are quite a few considerations worth noting as a designer<\/a>, when working on your tvOS app.<\/span><\/p>\n

Focus and Control<\/span><\/h3>\n

Unique to the Apple TV, users control and interact with the platform through their Apple TV remote. <\/span><\/p>\n

With the new Siri-powered remote, users are able to use <\/span>gestures to navigate the home screen icons in a grid<\/span>, as well as navigate specific apps horizontally and\u00a0vertically.<\/span><\/p>\n

\"Apple<\/a><\/p>\n

Emphasizing Focus<\/span><\/h3>\n

As obvious as this might sound, when you go through each UI element within your app, you need to emphasize focus.<\/span><\/p>\n

The other iOS platforms don\u2019t show a cursor or any focused element because you don\u2019t have a mouse, but rather use your fingers. In contrast, on the Apple TV, users need to keep track of their active or current selection.<\/p>\n

Apple has decided the best UX approach is their Focus Engine, which we discussed above.<\/p>\n

An icon or image is in focus when the current item is all of the following:<\/span><\/p>\n