apple tv ux presentation for tampa bay ux meetup, april 20, 2016

Apple TV UXTampa Bay UX Meetup, April 20, 2016

Presented by Anitra Pavka • Written by Anitra Pavka and Joey deVilla

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!

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

The portsUSB-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

The default controller: the remoteTouch 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

Home screenTop 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 appA visual hint suggesting

that there are more apps below

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

Touch surface gestures

SwipeMoves the focus in apps,

or an object in games

ClickThe primary way to trigger actions

TapA “mini-swipe” for

single-unit navigation

FocusA

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.

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

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.)

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.

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.

Go cinematicThe 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!

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.

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!

A quick tour of tvOS’ UI elements

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

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

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.

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.

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.

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

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

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.

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.

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

• 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.

Built-in interface templates

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

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

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

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.

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”.

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)

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.)

Two ways to program tvOS appsThe “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!

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.

A full set of resources, including the notes and slides for this presentation,

is available at: globalnerdy.com/apple-tv-resources