Key things to keep in mind if you plan to develop an application for Apple TV: design approach, possible use cases, and a new interaction model. At the end you will find infographics with the summary of tvOS Human Interface Guidelines.
The new Apple TV doesn’t bring innovation to living rooms but instead will certainly drive short-term adoption and popularity of the connected television. Unlike other companies in this sector (LG, Samsung, Panasonic and Sony) Apple finally has done it right from the user experience perspective by introducing an easy to use interface combined with the new remote, universal search and a large selection of apps (in the future).
New TV apps can’t simply replicate smartphone or web apps, and if you want to expand your existing product to the TV screen you will need to discover compelling use cases by creating an experience that wasn’t viable before.
But what kind of experiences should apps bring to TV users and what factors should we consider when thinking about developing such apps?
We’ve visualized tips of “Apple TV Design Principles for App Developers” in a presentation and one-page infographics.
Download PDF.
Design approach
Creating great products begins with understanding the goals of the people who use them. As a designer at Stanfy, when I start working on a new project there are three main questions I want to answer first:
- Who are the users?
- What problems would this product solve for them? What benefits would people get from using it
- What is the context or situation in which the product would be used?
Obviously the audience for TV apps is very wide but apps that embrace the communal nature of the living room or public spaces will be the real winners on this platform.
So we should definitely consider what kind of shared experiences we can create and how our app will appeal to a group, but we also should think about personalization and what will appeal to a single user.
When we think about TV, the environments for it are the living rooms, shared office spaces, universities, cafes, gyms, hotels or other public premises. And there are specific cases that can be targeted in those contexts.
Possible use cases
The obvious use cases — consuming media, playing games, watching media streams and communicating with friends and families. But beyond that areas apps for Apple TV have the potential to empower TV screens and allow you to engage viewers more efficiently.
For an office space you can build an app to inform your teammates about the latest updates and industry insights, share photos from team events, showcase company’s metrics or show the dashboard of Instagram or Twitter stream with the specific hashtags.
For a restaurant or cafe you can create an engaging experience for customers: share great Yelp reviews, showcase featured dishes, display your menu or instantly share customers’ Instagram and Twitter posts. TV wait-list apps can help to keep track of wait time and showcase a real-time waitlist for guests to see their spot in line.
In the family environment, different productivity apps with shared options, sport activities dashboards, shopping and cooking apps could transform the TV into something more than just a movie hub.
Also, you may think of providing some useful content on top of any media. For example, you could make a streaming app that together with video displays additional information like tweets from customers or Viber messages from friends or family who are watching the same content and want to exchange opinions.
New interaction model & interface guidelines
Apple TV brings new interactions to a TV screen. Let’s talk about the most important.
Focus-based interactions
The remote is used to interact indirectly with elements on-screen from across the room. The interaction is fully based on a focus model. By pressing buttons and swiping, users move their focus from element to element, stop and click to access particular content.
We don’t need a cursor as people will navigate simply by changing focus.
Mind the gap
On Apple TV, users see the screen across the room so you should think carefully about user interactions and the sizes of the text and interface elements. Apple gives precise recommendations on that.
You have to minimize the amount of text in your app and seriously consider using more pictures or animations rather than writing about something. When using typography, follow Apple recommendations on font sizes to make sure your interface is legible at a distance.
Remote interactions
Remote has a touch surface, an accelerometer, and a gyroscope that you can leverage in your app to deliver a compelling experience.
You must make the remote usable as a game controller and you should always implement some behavior for the Play/Pause button. Unused buttons feel broken. For example, the Play/Pause button can trigger the same behavior as a click to activate a focused item.
With the new Apple TV, users expect to press the Menu button to return to a previous screen or the main Apple TV Home screen. Implement backward navigation by using the Menu button instead of introducing a separate Back button.
Layout templates
TVs vary in size and TV app layouts don’t automatically adapt to the size of the screen. That is why you should pay special attention to this fact when designing the layout, to make sure that it looks great in a variety of screen sizes. Optimize assets for the big screen. Design interface for a screen resolution of 1920×1080 pixels (1080p, 16:9 aspect ratio).
On the Apple site you can find particular recommendations on designing an app’s layouts and also templates for different needs that are easy to browse at a distance, and are quick to navigate with the remote.
Navigation
Apple created standard navigation components such as page controls, tab bars, segmented controls, table views, collection views, and split views. They can cover most of your UI needs so use them to provide an optimal viewing experience.
Also you should keep in mind that swiping to the side is easier than swiping up and down so you should consider this when choosing or designing layouts for your content.
No Web browsing
There is no web browser on Apple TV and moreover – you can’t open web pages inside your app either. Webkit, the framework that allow developers to include webviews in their apps, is missing from tvOS. For example, on the TV you won’t be able to open links posted by someone you follow on Facebook or Twitter.
Why would Apple do this? The main reason is that they want to control user experience. A big, non-retina screen is not going to render web content well and a mobile browser also has a number of interactions that simply are not available on the tvOS. Also, this way Apple makes sure that non-native apps with poor overall experience won’t appear on Apple TV.
Key takeaways
- People mostly enjoy watching TV in a shared environment so, when creating a TV app, think about experiences that you can bring to a group of people.
- Touch or click interactions that people are used to on other devices are now focus-based. Use the remote’s touch surface, accelerometer, and gyroscope to help people feel connected to your app even though they’re sitting at a distance.
- You can build a fully customized interface for your app but do refer to Apple’s recommendations on grid parameters, interface component sizes, spacing, typography and layout templates to make sure your content is easy to browse at a distance and navigate quickly with the remote.
Welcome to the new apps world for Apple TV 🙂