Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Apple TV UX presentation for Tampa Bay UX Meetup, April 20, 2016

678 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Apple TV UX presentation for Tampa Bay UX Meetup, April 20, 2016

  1. 1. Apple TV UX Tampa Bay UX Meetup, April 20, 2016 Presented by Anitra Pavka • Written by Anitra Pavka and Joey deVilla
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. A quick tour of tvOS’ UI elements
  18. 18. Tab bars logically organize content at the top level of apps.
  19. 19. Collections display graphical items of either uniform or varying size in rows, grids, or a custom layout of your design.
  20. 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. 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. 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. 23. Text fields are fixed-height and single-line, and they automatically
 bring up a keyboard screen when clicked on.
  24. 24. Minimize the amount of typing the user has to do, because entering text with the remote is painful.
  25. 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. 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. 27. tvOS comes with a standard alert view, with mandatory title, optional message, and one or more buttons. Use these sparingly.
  28. 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. 29. Built-in interface templates Apple TV has several standard built-in UI templates. Use them!
  30. 30. Design your apps for use at a distance in communal spaces.
  31. 31. Design your interfaces for 1080p resolution, and keep crucial UI elements out of the margins.
  32. 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. 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. 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. 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. 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. 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. 38. A full set of resources, including the notes and slides for this presentation, is available at: globalnerdy.com/apple-tv-resources

×