As Seen On TV ... Bringing Apps To The Living Room

The new Apple TV is out and with it the ability to run apps! To make things even better, these apps can be built using Swift, Objective-C, even C#! This session will introduce how to create and design a tvOS app. Capabilities and limitations of the Apple TV hardware along with the architecture of the two different types of Apple TV apps will be explored. Differences between the tvOS and iOS APIs, how to respond to input and focus events from the new remote control and UI design best practices are some of the unique aspects of developing for this set top box that will be covered. So grab some popcorn, this is going to be good!

Transcript

1. As Seen On TV … Developing Apps for Apple TV & tvOS Matthew Soucoup Code Mill Technologies @codemillmatt https://github.com/codemillmatt/that-conference-tv-os
4. Today’s Lineup • Introduce hardware, OS and take a tour • Techniques to navigate between views • Best practices to present cinematic content to a room full of people Topics
6. Meet Our Stars • Characteristics • Strengths • Weaknesses • Special considerations Apple TV, Siri Remote, tvOS
7. Hardware
8. 64-bit A8 processor Up to 64 GB Storage 2 GB RAM 10/100 Mbps Ethernet WiFi 802.11 a/b/g/n/ac 1080p Resolution HDMI Game Controller Capable Siri Remote / Apple TV Remote
9. Touch surface Menu Siri / Search Play / Pause Home Volume Lightning Connector
10. Hardware Star Bio • Ample power for apps • No hardware fragmentation • One screen size • Always on – high speed Internet • New user interaction model Strong Points • Limited storage • 200 MB app bundle • 4 GB total ODR • Cannot write to permanent storage • No 4K support • New user interaction model Weak Points
11. tvOS
12. tvOS Intro • Derived from iOS • But is a distinct OS • UIKit, AVKit, CoreGraphics … still present • Supports new app type – TVML • New TVServices framework Characteristics
13. TVServices Framework / Front Row
14. tvOS Intro • Derived from iOS • But is a distinct OS • UIKit, AVKit, CoreGraphics … still present • Supports new app type – TVML • New TVServices framework • Radically different interaction model • No touch - remote • Social • Immersive Characteristics
17. tvOS Star Bio • Two types of apps • TVML • Traditional • Same old UIKit • Different way to interact • Immersive experience • Most other native frameworks available Considerations
18. tvOS 10 Beta • New UI styles (light & dark) • HomeKit • Photos • UserNotifications • ReplayKit • ExternalAccessory New Features & Added Frameworks
20. Development Environment • XCode 7.3 • tvOS 9.2 SDK Apple • Xamarin.tvOS Cycle 7 • Xamarin Studio 6 • Visual Studio(!!) • Can build with Unity Xamarin
22. Sneak Preview • Types of interactions • Navigation between views • Design considerations Remote & Navigation • What it is • Focus engine • Interacting with Focus Model Demo!
23. Siri Remote
24. Remote Interaction • Across the room • Only one element on screen ”in focus” • Siri remote & game controllers • Can use in landscape • Accelerometer & gyroscope available Interacting with tvOS
25. Touch surface Menu Siri / Search Play / Pause Home Volume
26. Touch surface Menu Play / Pause • Gestures • Swipes – 1 finger only! • Taps • Clicks Touch Surface
27. Touch surface Menu Play / Pause • Back button • No on-screen back! • Pause for game play Menu
28. Touch surface Menu Play / Pause • Playback shortcuts • Game controls Play / Pause
29. Remote Best Practices • Don’t repurpose standard gestures • Don’t invent new gestures • Use menu as back button Standards
30. Navigation • Only one item “in-focus” at a time • Focused item needs to be obvious • Move between items with minimal gestures • Navigation between items & screens intuitive • Don’t get the user lost! Everything Needs To Be Obvious
31. Focused Control
32. Focused Control
33. Focused Control
34. Focused Control
35. Focused Control
36. Focused Control
37. Focused Control
38. Focused Control
39. Focused Control
40. Focused Control ?
41. Focused Control
42. Focused Control
43. Focused Control
44. Focused Control ?
45. Focus Model & Engine • Implementation of Focus Model for UIKit controls • Intended for use with Siri Remote (works with others) • Provides consistent user experience Focus Engine • Theory of indirect UI manipulation • Only one view in focus • Obvious and intuitive movement between views Focus Model
46. Focus Engine • Maintains single view in focus at a time • Takes care of finding next focusable view • Cannot set focus programmatically • Provides API to respond to focus changes • Don’t fight it – defaults on most UIKit controls work API Basics
47. Demo!
48. Scene One • User interaction happens at a distance • Maintain a consistent remote control experience • Don’t get the user lost – easy navigation • Take time to understand focus model and engine Recap
50. Sneak Preview • Cinematic experience • Many people – far away • Organized and legible content Design Practices For • Stack views • Collection views Tools To Provide
51. Immersive
52. Living Room Experience • Edge to edge content • No chrome • Rely on focus model Cinematic • Legible at distance • Adjust for content appearing/disappearing • Reduce words on screen Organized
53. The Tools
54. Collection Views
55. Stack View
56. Demo!
57. Scene Two • Provide “Living Room Experience” • Immersive, cinematic – edge-to-edge content, no chrome • Easy to read and understand from a distance • Adjust for content appearing and disappearing • Stack Views – Auto Layout’s helper • Collection Views – Grid organization Recap
59. C# in the Living Room • New generation of hardware and remote • New tvOS and two ways to write apps • Traditional apps – UIKit based • User do not interact directly – rely on focus model • Make interactions obvious and intuitive • Immersive and organized layouts Recap
60. As Seen On TV … Developing Apps for Apple TV & tvOS Matthew Soucoup Code Mill Technologies @codemillmatt https://github.com/codemillmatt/that-conference-tv-os