Mario Viviani - Designing apps for fire TV - Codemotion Amsterdam 2019
•
0 likes•64 views
With the advent of media streaming, consumption of content via Smart TVs and Streaming Media Players is skyrocketing. However, designing and developing apps for the Big Screen provides unique challenges: crafting an easy-to-navigate UI, implementing a fail-proof login experience, introducing new monetization models and more. In this session you will learn: • How to implement a solid TV-centric UI/UX • Navigate through case studies and scenarios for the 10-foot experience • Developer tools and APIs that facilitate the creation of high quality TV-centric apps
Report
Share
Mario Viviani - Designing apps for fire TV - Codemotion Amsterdam 2019
- 1. Designing Apps in the Age of Media Streaming: Optimise Your Content for TV Mario Viviani Technology Evangelist, Amazon Digital, Apps and Games Services @Mariuxtheone
- 2. Mario Viviani EU Technology Evangelist, Amazon DAGS @mariuxtheone • Android Developer since 2010 • 95+ apps published • 12,000,000+ downloads • Google Developer Expert 2013-15 • Startup Founder, Co-Worker
- 5. A bit of recent history… 4 2016 Amazon Fire TV Stick (2nd Gen.) 2017 Amazon Fire TV 4K (3rd Gen.) 2019 Amazon Fire TV Stick with all-new Alexa Voice Remote 2018 Amazon Fire TV Stick 4K with all-new Alexa Voice Remote
- 6. A great milestone 5 30+ Million active Amazon Fire TV users Amazon Data, Jan 2019
- 7. *available in US only
- 9. OS 6BASED ON ANDROID 7 NOUGAT ANDROID STUDIO
- 12. The 3 Phases of Funnel Conversion 11 Engagement & Retention Conversion & Monetisation Onboarding & Registration
- 14. The Content Showcase Dilemma ? User Registration/Sign-Up Show In-App Content
- 15. Content First – Ensures Best Conversion Show In-App Content User Registration/Sign-Up
- 16. HOW DO WE REDUCE FRICTION IN THE SIGN-UP EXPERIENCE? 16
- 17. Reducing Customer Friction on Sign-Up 17 Your First Name Your Last Name Your Email Address Password Confirm Password Your Postcode CONFIRM ~300 Clicks via on-screen keyboard
- 18. Login With Amazon 18 2/3 Clicks no on-screen keyboard
- 20. Login With Amazon 20 { "email" : "johndoe@gmail.com", "name" : "John Doe", "user_id" : "amzn1.account.K2LI23KL2LK2" } Scope 1: profile • Requires confirmation screen.
- 21. Login With Amazon 21 { "user_id" : "amzn1.account.K2LI23KL2LK2" } Scope 2: profile:user_id • Every company that creates websites or apps for Login with Amazon gets the same user_id for a customer. • Different companies receive different user_id (avoids customer tracking on the web) • Because no personal information is requested, the user will not be presented with a consent screen the first time they log in.
- 22. Login With Amazon 22 { "postal_code": "98101", } Scope 3: postal_code • Requires confirmation screen.
- 23. Login With Amazon 23 { "email" : "johndoe@gmail.com", "name" : "John Doe", "user_id" : "amzn1.account.K2LI23KL2LK2" "postal_code": "98101", } Combined Scope: profile postal_code
- 24. Find out more about Login With Amazon 24 login.amazon.com
- 27. TV App Design UX Guidelines 27
- 29. Interaction is Remote Based 29
- 30. General Design Principles •Clear, Simple, Visual •Limit Design Elements on Screen •Place Important Content First •Focus on Consumption •Design with Remote in Mind, Reduce Clicks 30
- 31. TV App Design UI Guidelines 31
- 32. Screen Size and Resolution: Amazon Fire TV 32 1920px 1080px FullHD 1080p Density: 320dpi ("xhdpi") Output Resolution: 960x540dp ("large")
- 33. Overscan and the Safe Zone Overscan: Space around the displayable area of the screen. 33 Displayable Area Overscan
- 34. Safe Zone 34 Safe Zone 5% of any edge on the screen
- 35. 35 Developer Option on, then Hold 5 Seconds Central+Down buttons on Remote, then click Menu Button
- 36. Color 36
- 37. Measure Performance with System X-Ray 37
- 38. 38 Developer Option on, then Hold 5 Seconds Central+Down buttons on Remote, then click Menu Button
- 39. System X-Ray 39
- 40. System X-Ray - Display 40 HDMI Mode: Shows the physical height of display in pixels and the refresh rate in frames per second. HDCP: Shows the HDCP (High-bandwidth Digital Content Protection) version used by Amazon Fire TV to encrypt content that is sent through the HDMI cable to the television.
- 41. System X-Ray - CPU 41 •0% to 33% (low utilization) shows in green •34% to 66% (moderate utilization) shows in orange •67% to 100% (high utilization) shows in red
- 42. System X-Ray - Memory 42 • Foreground Memory (blue): used by app in foreground (not GPU) • Other Memory (gray): used by apps and processes in background • Available Memory (white): the free memory in device
- 43. System X-Ray - Network 43 • RSSI (Received Signal Strength Indicator): Shows how strong the WiFi signal is, measured in dBm (decibels-milliwatt, value of radio signal) • System: Measures how many bits per second are being actively downloaded to the device (including both visible and background apps). • Visible: Measures how many bits per second are being actively downloaded by the visible (also called foreground) app.
- 46. AMAZON IAP & SUBSCRIPTIONS API 46
- 47. Paid Apps In-App Purchase SubscriptionsAdvertisement App Monetisation models AD Amazon In-App Purchase API
- 48. A D VA N TA G E S Provide IAP Items, Entitlements & Subscriptions Handles Free Trials, payment processing, receipts, rights management Amazon 1-Click Settings Why Amazon IAP & Subscription API
- 50. BUILDING APPS FOR TV IN MINUTES 50
- 52. FIRE APP BUILDER STREAMING MEDIA PLAYERS Plug and Play template for audio and video apps. Create an app in less than 1 hour. E A S Y, FA S T A N D B E A U T I F U L Contains modules (plugins) to enable advanced functionality Handles JSON feeds, branding and customisation Supports Amazon Fire TV family Supports FireOS and Android
- 54. M O D U L E S Social logins In-App Purchasing & Subscriptions Ads Analytics Media Player AD
- 55. F I R E A P P B U I L D E R W O R K F L O W CONFIGURE YOUR FEED LAUNCH THE APP! CUSTOMIZE UI & MODULAR COMPONENTS SETUP RECIPE FOR CATEGORIES AND CONTENTS JSON
- 56. S TA RT TO D AY ! D O W N L O A D github.com/amzn/fire-app-builder D O C U M E N TAT I O N bit.ly/FireAppBuilderDoc
- 58. “IT’S A WRAP!”
- 59. o Content First o Reduce friction and clicks o Login with Amazon Onboarding & Registration Conversion & Monetisation Engagement & Retention01 02 03 Focus on your customers o 10-foot UI o Design for Remote o Follow Design Guidelines o Select Right Monetisation Model o Implement Subscription via Amazon IAP API