The 4th-generation Apple TV is the first version of Apple TV that runs third-party apps downloadable from an App Store. It presents an opportunity for developers and designers to build apps for a whole new world: the living room (or, the family room or den). It also presents challenges; designing for a large screen usually set 6 to 10 feet away and controlled by a one-hand remote is different from designing for the desktop or mobile platforms. This presentation provides an overview of the Apple TV user experience and designing for TV platforms in general. It covers both the on-screen user interface as well as the remote control, explains Apple TV's focus and navigation paradigms, gives a quick tour of Apple TV's user interface elements, and provides a set of do's and don'ts for the Apple TV app design. It concludes with a look into whether Apple TV is catching on, and pointers to getting started building your own Apple TV apps.

1. Apple TV UX
Tampa Bay UX Meetup, April 20, 2016
Presented by Anitra Pavka • Written by Anitra Pavka and Joey deVilla

2. 4th-generation Apple TV
• Released in fall
2015
• Interface based
on lessons from
other TV
platforms, iOS,
and 3 previous
generations of
Apple TV
• Now runs apps!

3. Fun facts
Same processor
as the iPhone 6 (A8);
as much RAM
as the iPhone 6S (2GB)
tvOS is
“95% based on iOS 9”,
with modifications
for use with TVs
Priced at
$150 and $200;
similar pricing to the
better Keurig machines

4. The ports
USB-C
For programming
and diagnostics
Power
Standard 2-prong
cord
HDMI
Connects to TV
Ethernet
Connects to
wired network
802.11ac wifi
Connects to wifi
at nearly a gigabit
per secondBluetooth
Connects to remote controllers

5. The default controller: the remote
Touch surface
A single-touch trackpad
that can be clicked
Menu button
Like a browser’s “back” button
Siri button
Press and hold, talk to Siri,
release when you’re done talking
Play/pause button
Plays/pauses media, or acts like
a “select” or “activate” button
Home button
Takes you to the top of
the Home screen
Volume buttons
I think you know what these do
Microphone
For talking to Siri
Gyroscope + accelerometer
Inside the remote; used to sense motion

6. Home screen
Top shelf
A content showcase area that
showcases the top row app
that is currently in focus
Every app should have at least
one top shelf image
Top row
The five apps you use the most
The user can choose which apps
go into the row
Only top row apps get showcased
in the top shelf
App grid
Five columns wide, infinitely high.
The user can choose the location for each app
A visual hint suggesting
that there are more apps below

7. Navigation
Touch surface, Menu and
Home buttons
Allow the user to:
• Navigate the interface
• Enter data
• Initiate actions
Grid interface with
moveable focus
Presents options as large icons
or images, with the current option
highlighted in some manner

8. Touch surface gestures
Swipe
Moves the focus in apps,
or an object in games
Click
The primary way
to trigger actions
Tap
A “mini-swipe” for
single-unit navigation

9. Focus
A
B
• Unlike the mouse-based Mac OS and the
touch-based iOS, tvOS uses a
focus-based interface where only one
UI element is active (i.e. has the focus)
at any given time.
• The focus-based interface is linear; if
you’re at point A (see diagram on left),
getting to point B requires navigating
through the points in between.
• A lot of Apple TV design is about
minimizing this focus travel distance.

10. Offering choices
Where possible,
present multiple choices
as images arranged
in a grid
If space is tight, present multiple choices
as a horizontal list of images

11. Offering choices, cont’d
It should easy
for the user to tell
which option
is the one currently
in focus.
(Apple TV’s built-in
UI elements make
this very easy.)

12. The Menu button is the “back” button
Home screen
App main screen
App screen 1
User chooses app
User chooses
option in app
User presses Menu
User presses Menu
• Apps should have a
hierarchical structure,
with the main screen at the
top, and subsequent screens
progressively deeper in the
hierarchy.
• The Menu button should
take you to the previous
screen, one layer up in the
hierarchy.
• If you’re at the “top” of the
app, the Menu button should
take you to the Home
screen.

13. Don’t provide an onscreen “back” button
• It’s unnecessary, and only clutters up the
screen. That’s what the Menu button is for.
• Adding a “back” button just adds one more
item on the screen that the user has to
navigate to. Pressing the Menu button is a
much faster way to perform this very
common act of navigation.
• While we’re at it, don’t provide an
onscreen “quit” or “exit” button either.
That’s what the Home button is for.

14. Go cinematic
The Apple TV will
likely be used with
the biggest, best
TV and sound
system in the
house.
Take advantage of
this and use big
images and rich
sounds!

15. Go easy on the text
Like the Star Wars “opening crawl”, use text where necessary to explain,
but keep it brief (all 7 opening crawls were just three short paragraphs).
The TV viewing distance isn’t good for long-form reading.

16. Typography
San FranciscoThe quick brown fox jumped over the lazy dog.
• For most non-game apps, use the default system font, San Francisco.
It was designed specifically for onscreen use and is now the system font
for Apple’s operating systems: Mac OS, iOS, watchOS, and tvOS.
• For text 40 points or larger, use San Francisco Display.
For text smaller than 40 points, use San Francisco Text.
• Remember, people are reading at TV distance —
make your text as big (and brief) as possible!

17. A quick tour of tvOS’
UI elements

18. Tab bars logically organize content at the top level of apps.

19. Collections display graphical items of either uniform or varying size
in rows, grids, or a custom layout of your design.

20. When a list of text items will do the job better than a list of images,
you’ll want to use a table, a single column list of text rows.

21. Split views present two side-by-side panes of content,
usually as a set of options in the primary pane,
with details about that choice in the secondary pane.

22. Buttons are pretty much
like their counterparts
in desktop and mobile apps.
Segmented controls let the user pick from
related but mutually exclusive options.
They’re the “radio buttons” of tvOS.

23. Text fields are fixed-height and single-line, and they automatically
bring up a keyboard screen when clicked on.

24. Minimize the amount of typing the user has to do,
because entering text with the remote is painful.

25. Dictation can replace typing, but don’t count on it —
it’s off by default, and the user has to go to Settings to turn it on.

26. If want the user to be able to enter search terms,
use the search controller, which provides both a keyboard and
a customizable view of search results.

27. tvOS comes with a standard alert view, with mandatory title, optional message,
and one or more buttons. Use these sparingly.

28. • Web browsing doesn’t work well when you don’t
have a pointer, whether it’s a cursor
or your finger.
• Typical browsing actions, such as following links,
scrolling the page, and filling out forms,
are hard to do with a remote.
• Hence, there’s no Safari for Apple TV,
and tvOS doesn’t offer a control that renders
HTML content.
• Instead of displaying web pages, make apps that
fetch online data and display that data using
tvOS’ rich interface controls.

29. Built-in interface templates
Apple TV has several standard built-in UI templates. Use them!

30. Design your apps for use at a distance
in communal spaces.

31. Design your interfaces for 1080p resolution,
and keep crucial UI elements out of the margins.

32. Is Apple TV catching on?
Mmmmmmmaybe.
• They sold like hotcakes on Black
Friday and Cyber Monday 2015.
• When Apple reports sales, it puts
Apple TV (along with Apple Watch and
Beats headphones) in the “Other
products” category. In January 2016,
they reported $4.4 billion in “Other”
sales for the last 3 months of 2015.
• Early reports say that Apple TV
overtook Amazon and Roku as the
number one selling set-top box within
weeks of its release.

33. 15% of all Americans — and 20% of Americans under 30 —
have already “cut the cord” and canceled their cable/satellite TV service.
Of those Americans who “cut the cord”, 58% have broadband at home,
75% have smartphones, and 27% are “smartphone-only”.

34. Share of online TV viewing worldwide Q2 2015
Source: Adobe, via Fortune
Nearly 2 of out 3 online TV viewings is done on an Apple device.
Even as far back as the spring of 2013,
more than half the streaming boxes sold
were Apple TVs.
(Consumer Video Devices Market report, June 2013)

35. How do I make my own apps?
• You’ll need a Mac and Xcode, the development tool
for building Mac OS, iOS, watchOS, and tvOS apps.
Xcode is free from the Mac App Store.
• You’ll also need an Apple developer account, which
is free if you’re just deploying apps to your own
iPhone, iPad, or Apple TV. (It’s $99/year if you’re
going to deploy to testers or the App Store.)

36. Two ways to program tvOS apps
The “traditional” iOS way, using the Swift or Objective-C
programming languages. Swift is much nicer to use.
The new, more web-development-like way, which uses:
• TVML, an HTML-like markup language for specifying the
content and layout of the app, and
• TVJS, a set of APIs that let you program Apple TV using
JavaScript
If you have web front-end development skills, you’re already
most of the way to being an Apple TV developer!

37. One of the best
resources for getting
started with building
your own Apple TV
apps and interfaces is
tvOS Apprentice,
available at the go-to
site for Apple
development,
raywenderlich.com.

38. A full set of resources,
including the notes and slides for this presentation,
is available at:
globalnerdy.com/apple-tv-resources