MobiliteaTime #4 : Guide Pratique Apple TV
4 j'aime2,395 vues
Ce document présente un guide pratique sur l'Apple TV, en détaillant ses caractéristiques, la télécommande et les contenus disponibles. Il aborde également les perspectives d'évolution du téléviseur, les implications d'usage pour les utilisateurs et les développeurs d'applications, ainsi que les principes d'UX/UI adaptés à cette plateforme. Finalement, le document discute des opportunités offertes par l'Apple TV en matière d'interaction des utilisateurs avec les programmes télévisés.
Contenu connexe
Similaire à MobiliteaTime #4 : Guide Pratique Apple TV (17)
![Fridays digest • Janvier - Décembre 2018 [ Friday's Watch ]](https://cdn.slidesharecdn.com/ss_thumbnails/fridaysdigest2019-010219-190201162920-thumbnail.jpg?width=560&fit=bounds)
MobiliteaTime #4 : Guide Pratique Apple TV
- 1. userADgents GUIDE PRATIQUE : APPLE TV Quand les apps débarquent dans votre salon ! MOBILI tea time #4 userADgents
- 2. SOMMAIRE 2 PARTIE 1 LE PRODUIT / P.3 PARTIE 3 L’UX & L’UI DES APPS / P.20 PARTIE 4 LE DÉVELOPPEMENT DES APPS / P.41 userADgents PARTIE 2 QU’EN PENSENT NOS EXPERTS ?/ P.10
- 3. userADgents PARTIE 1 Qu’est-ce que l’Apple TV ? userADgents
- 4. THE FUTURE OF TV IS APPS userADgents ‣ Apple TV 4ème génération ‣ Annoncée lors de la keynote Apple du 9.09.2015 ‣ Prix : $149 - $199 ‣ Date de sortie : Fin octobre
- 5. LA BOX userADgents Caractéristiques : ‣ 98x98x35mm ‣ 425 grammes ‣ Processeur A8 64-Bit ‣ Capacité de stockage 32GB ou 64GB ‣ Airplay ‣ HDMI ‣ Wifi ‣ Ethernet ‣ Bluetooth 4.0 (BLE) ‣ Récepteur infra-rouge ‣ USB‑C (service & support seulement) ‣ Adaptateur secteur https://developer.apple.com/tvos/
- 6. LA TÉLÉCOMMANDE userADgents Caractéristiques : ‣ 124x38x6.3mm ‣ 47 grammes ‣ Bluetooth 4.0 (BLE) ‣ Microphone (Siri) ‣ Surface tactile ‣ Emetteur infra-rouge ‣ Accéléromètre & gyroscope ‣ Connecteur Lightning pour chargement ‣ Batterie rechargeable (plusieurs mois d’autonomie) ‣ Disponible dans les pays suivants : Allemagne, Australie, Canada, Espagne, France, Japon, UK, USA https://developer.apple.com/tvos/
- 7. LES CONTENUS userADgents TV & VOD ‣ Films & Séries ‣ Chaines & services : HBO, SHOWTIME, Netflix, Hulu, Youtube,… JEUX & APPS ‣ Usage de la télécommande Apple possible ‣ Featured AirBnB MUSIQUE ‣ Apple Music PHOTOS ‣ Fond d’écrans personnalisables ‣ Photos & Vidéos ‣ Diffusion via Airplay
- 8. LES FONCTIONNALITÉS userADgents SIRI ‣ Simplifier la recherche & l‘accès aux contenus ‣ Simplifier la commande de la TV https://developer.apple.com/tvos/
- 9. LES PRINCIPES GÉNÉRAUX userADgents 10 FEET ‣ Pas d’interaction directe avec l’écran mais via la télécommande (tap, swipe, & click) ‣ Navigation en passant d’un élément à l’autre ‣ La TV est un terminal partagé lors de la consultation des apps Quelles différences clés avec le smartphone ? 321 ‣ Usage à distance qui nécessite notamment une identification claire de l’élément « in focus » REMOTE SHARED
- 10. userADgents PARTIE 2 Qu’en pensent nos experts ? userADgents
- 11. userADgents Est-ce que l’Apple TV va révolutionner la TV connectée ?
- 12. EST-CE QUE L’APPLE TV VA RÉVOLUTIONNER LA TV CONNECTÉE ? userADgents ‘L’Apple TV peut être au monde des box opérateurs ce qu’a été l’iPhone au monde du smartphone : a ce titre c’est une révolution ! La révolution va passer par les milliers d’applications qui vont déferler sur nos TV. Et cela peut tout changer. Cela marchera si et seulement si il y a une vraie perception de la valeur par le consommateur. Cependant quand on regarde le succès de Netflix déjà disponible sur les anciennes générations d’Apple TV nous avons déjà une partie de la réponse… VINCENT PILLET DIRECTEUR A SSO CIÉ DE USERA DGENTS ’
- 13. EST-CE QUE L’APPLE TV VA RÉVOLUTIONNER LA TV CONNECTÉE ? userADgents ‘Oui et non… L’Apple TV aujourd’hui n’est pas réellement une télévision connectée mais plutôt une plateforme offrant des contenus. En revanche, elle va clairement permettre de révolutionner les modes de consommation de média même si pour le moment elle s’adresse à un public spécifique et bien différent du spectateur de TF1. En somme, l’Apple TV propose des idées novatrices certes, mais ce n’est pas encore tout à fait la « révolution » tant acclamée dans la presse ! Aujourd’hui, le vrai « plus » c’est la simplification de la navigation grâce à Siri et la nouvelle télécommande. L’utilisation de Siri pour accéder rapidement à du contenu et la possibilité de pouvoir continuer d’affiner sa recherche à travers la communication avec ce-dernier constitue la véritable innovation. J U L I E N D I M A R C O DEV ELOPPEUR IOS CHEZ USERADGENTS ’
- 14. userADgents Comment développer des applications sur l'Apple TV ?
- 15. COMMENT DÉVELOPPER DES APPLICATIONS SUR APPLE TV ? userADgents ‘ Le SDK de l’Apple TV, tvOS, repose sur iOS. De ce fait, beaucoup de frameworks et concepts d’iOS sont disponible sur tvOS, comme UIKit, Core Graphics, SpriteKit, CloudKit, CoreData… N’importe quels développeurs iOS devraient s’y retrouver rapidement et développer des applications natives pour l’Apple TV sans accros. Toutefois, il ne faudra pas oublier qu'on ne touche plus l'interface du doigt, mais on la "pointe", en prenant en considération qu'il y a toujours un élément de l'UI qui sera actif. C'est le principe du focus engine. Mais là où Apple a surpris tout le monde, je pense, c’est certainement avec son TVLMKit, TVML et TVJS. TVML signifie Television Markup Language et TVJS pour Television Javascript. C’est une forme d’XML qui permet à un serveur de décrire des interfaces avec son propre contenu (Vidéos, audio, images, fichiers…). Celui-ci sera interprété par l’Application AppleTV et transformé en UI native à l’écran. Apple propose pas moins de 18 templates TVML afin de représenter des catalogues, playlists, alertes, menus… J O F F R E Y B O C Q U E T DEVELOPPEUR IOS CHEZ USERADGEN TS
- 16. COMMENT DÉVELOPPER DES APPLICATIONS SUR APPLE TV ? userADgents Cette nouvelle approche de conception d’applications est intéressante lorsqu’on dispose déjà de contenus sur un serveur et que l’on recherche plus une interface performante et rassurante qu’à créer une nouvelle expérience travaillée. Un autre nouveau Framework intéressant à souligner est TVServices qui peut faire penser au Dashboard sur iOS. Celui-ci permet à une application de décrire son contenu (multimedia) au système, afin de lui laisser le mettre en avant dans l’écran d’accueil. C’est une très bonne opportunité pour une app de fournir des raccourcis à des contenus de l’app. J O F F R E Y B O C Q U E T DEVELOPPEUR IOS CHEZ USERADGEN TS ’
- 17. userADgents Comment les utilisateurs / marques se serviront de l’Apple TV ?
- 18. COMMENT LES UTILISATEURS / MARQUES SE SERVIRONT DE L’APPLE TV ? userADgents Grâce à l’Apple TV, la télévision n’est plus seulement un moyen de regarder un programme mais un moyen d’interagir avec des programmes, c’est là que sont les opportunités. L’Apple TV permettra à l'utilisateur lors d’un événement sportif par exemple de changer de caméra pour suivre un ou plusieurs joueurs, de rejouer une action, de visualiser les statistiques etc. Les marques vont pouvoir rendre le spectateur actif lors du programme en direct, en proposant des mini-jeux, des votes, des sondages… Il sera également possible de commander des pizzas directement de son Apple TV pour apprécier une soirée foot entre amis ! Une famille pourra également planifier ses futures vacances sur sa télévision, une adolescente fera son shopping et bien d’autres choses seront possibles, notamment en matière de domotique. Il sera possible de contrôler son habitat, de jeter un coup d’oeil aux caméras de surveillance, régler la température de la pièce, l’éclairage etc. J O F F R E Y B O C Q U E T DEVELOPPEUR IOS CHEZ USERADGEN TS ’ ‘
- 19. COMMENT LES UTILISATEURS / MARQUES SE SERVIRONT DE L’APPLE TV ? userADgents Initialement, la télévision est un écran partagé entre les différents membres de la famille. L’Apple TV devrait démocratiser les applications sur les télévisions, ce qui va ouvrir beaucoup de questions quant à leur conception. A la différence du mobile, il ne s’agit d’un écran ni personnel ni tactile, il va donc falloir l’aborder différemment. Les interactions sont différentes : boutons et surface tactile sur la télécommande, commande vocale… Quant aux usages qui en seront faits, ils ne sont pour le moment qu’hypothétiques, il faudra les observer et être à l’écoute des premiers retours d’expérience des utilisateurs pour pouvoir ajuster ces expériences. A S M A M O U M N I UX DESIGNER CHEZ USERADGENTS ’ ‘
- 20. userADgents PARTIE 3 L’UX & l’UI des apps userADgents
- 21. TÉLÉCOMMANDE & INTERACTIONS userADgents Les boutons de la télécommande https://developer.apple.com/tvos/
- 22. LES PRINCIPES GÉNÉRAUX SWIPE ‣ Pour activer, sélectionner ou modifier un item 3 gestes sur la surface tactile utilisée pour la navigation 321 ‣ Horizontal & vertical ‣ Pour bouger sans effort un large volume de contenu CLIC TAP ‣ Gauche ou droite ‣ Naviguer parmi une collection de contenus ‣ Naviguer sur différentes régions plus facilement ‣ Faire apparaître un contenu caché https://developer.apple.com/tvos/
- 23. NAVIGATIONS & FOCUS BACK Mettre des listes de contenus dans une même page plutôt que plusieurs pages Privilégier la navigation horizontale, plus facile via le swipe Les règles de navigation 321 Pas de bouton back, c’est le bouton Menu de la télécommande qui joue ce rôle CONTENT LIST HORIZONTAL NAVIGATION userADgentshttps://developer.apple.com/tvos/
- 24. NAVIGATIONS & FOCUS userADgents Le focus ‣ Essentiel dans la navigation car l’utilisateur passe d’élément en élément et doit identifier à tout instant où l’on se trouve (ne pas mettre de curseur !) ‣ Taille, ombre, texte supplémentaire facilite l’identification de l’élément in-focus ‣ Utilisation du parallax pour effet 3D via la surface tactile de la télécommande https://developer.apple.com/tvos/
- 25. NAVIGATIONS & FOCUS userADgents Le focus ‣ Exemple de gestion du in-focus https://developer.apple.com/tvos/
- 26. NAVIGATIONS & FOCUS userADgents Le focus ‣ Exemple de gestion du parallax sur un élément in-focus https://developer.apple.com/tvos/
- 27. ICÔNES & IMAGES userADgents Icône de l’app ‣ Simple & clair pour être visible à distance ‣ 1 seul point de focus, centré ‣ Arrière-plan simple ‣ Pas de texte sauf si cela fait partie du logo ‣ Pas de screenshot ‣ Garder les coins carrés ‣ Une version avec layer pour effet parallax en focus ‣ 2 à 5 layers ‣ Séparer le logo du background ‣ Mettre le texte au premier plan https://developer.apple.com/tvos/
- 28. ICÔNES & IMAGES userADgents Top Shelf ‣ Le Top Shelf est une zone d’image (1920px par 720px) se situant au dessus du top row (genre de rang pour les applications favorites de l’utilisateur) qui diffuse du contenu lorsqu’une application est sélectionnée. ‣ Peut être statique ou dynamique / personnalisé (recommandé) ‣ Peut être une suite de contenus, une bannière scrollable avec des éléments sélectionnables directement via focus. ‣ En version vignette ou bannière XL https://developer.apple.com/tvos/
- 29. ICÔNES & IMAGES userADgents Layered Images ‣ Elément essentiel de l’expérience Apple TV ‣ Hautement recommandé pour tout élément sélectionnable ‣ 2 à 5 layers par image https://developer.apple.com/tvos/
- 30. userADgents Layout RATIO & RESOLUTION ‣ Laisser une marge de sécurité pour faciliter la lisibilité des contenus 21 ‣ Optimiser les ressources pour les grands écrans :1920 x 1080 pixels (1080p) ‣ Utilisation d’un ratio 16:9. ‣ Toute les ressources doivent être en résolution @1 ZONE DE SÉCURITÉ DESIGN DE L’APP https://developer.apple.com/tvos/
- 31. userADgents Layout ‣ Conserver un espace tampon entre les éléments sélectionnables (focus) afin qu’il n’y ait pas de chevauchement 3 ESPACE TAMPON 4 AFFICHAGE PARTIEL ‣ Faire allusion aux contenus supplémentaires sur les liste de contenus, via un affichage partiel DESIGN DE L’APP https://developer.apple.com/tvos/
- 32. DESIGN DE L’APP userADgents Templates prédéfinis ‣ Apple propose différents templates prédéfinis ‣ Javascript basé sur l’Apple TV markup language (TVML) https://developer.apple.com/tvos/
- 33. DESIGN DE L’APP userADgents Textures ‣ L’usage de textures transparentes est recommandé pour mettre en avant les contenus https://developer.apple.com/tvos/
- 34. DESIGN DE L’APP userADgents Typographie ‣ Utilisation minimum du texte dans l’interface ‣ Police : San Francisco, SF, commune à tous les OS d’Apple ‣ San Francisco Text (<39 pts) San Francisco Display (>40 pts) https://developer.apple.com/tvos/
- 35. DESIGN DE L’APP userADgents Vidéo ‣ Player natif à privilégier ‣ Utilisation simple via la télécommande https://developer.apple.com/tvos/
- 36. ÉLÉMENTS D’INTERFACE userADgents Tab bar ‣ En haut de l’écran (140px), en premier niveau de navigation ‣ Translucide & disparaissant quand non in-focus ‣ Intégration de badges possible (nouveautés) https://developer.apple.com/tvos/
- 37. ÉLÉMENTS D’INTERFACE userADgents Collections ‣ Présentation d’une suite de contenus https://developer.apple.com/tvos/
- 38. ÉLÉMENTS D’INTERFACE userADgents Saisie de Texte ‣ Minimiser les saisies de texte dans l’interface ‣ Montée automatique du clavier à la sélection du champs texte ‣ Clavier linéaire (avec la télécommande) ou avec grille https://developer.apple.com/tvos/
- 39. ÉLÉMENTS D’INTERFACE userADgents Recherche ‣ Intégrer un accès aux dernières recherches ‣ Catégoriser et/ou permettre de filtrer les résultats https://developer.apple.com/tvos/
- 40. ÉLÉMENTS D’INTERFACE userADgents Boutons ‣ Peuvent contenir un titre et/ou un icône ‣ Eviter les boutons « Retour » https://developer.apple.com/tvos/
- 41. userADgents PARTIE 4 Le développement des apps userADgents
- 42. LE SDK userADgents ‣ Un OS spécifique pour l’Apple TV ‣ Intégré à Xcode 7.1 (déjà disponible) ‣ Achat unifié sur l’App Store https://developer.apple.com/tvos/
- 43. LE SDK userADgents Modèle de communication pour une architecture client - serveur TVMLKit https://developer.apple.com/tvos/
- 44. LE SDK userADgents Stockage ‣ Apps limitées à 200MB sur Apple TV ‣ Pas de stockage persistant local pour les apps sur Apple TV ‣ Les données sont stockées sur iCloud https://developer.apple.com/tvos/
- 45. 45 Vous souhaitez cette présentation en PDF haute définition ? TÉLÉCHARGER LE PDF
- 46. P O U R A L L E R + L O I N LA CONF’ CETTE ÉTUDE PRÉSENTÉE EN LIVE CHEZ VOUS PAR NOS FORMATEURS LE WORKSHOP POUR DÉVELOPPER DES PISTES D’IDÉES & D’OPPORTUNITÉS POUR VOTRE ENTREPRISE 900€HT Solange DERREY [email protected] VOTRE CONTACT À PARTIR DE 1600€HT
- 47. userADgents Solange Derrey Responsable du Pôle Trendwatchers & de la Communication [email protected] É T U D E R É A L I S É E P A R T R E N D W A T C H E R S Le pôle études digitales et formations de userADgents JE M’INSCRIS À LA NEWS JE FOLLOW SUR TWITTER Et pour ne rien manquer des prochaines études ! VOIR TOUTES NOS OFFRES Renaud Ménérat Président r.méné[email protected]
- 48. userADgents RETROUVEZ NOS AUTRES ÉTUDES SUR SLIDESHARE ENVIE D’UNE ÉTUDE SUR-MESURE ? DÉCOUVREZ NOTRE CATALOGUE DE FORMATIONS INTÉRESSÉ PAR UNE ÉTUDE SUR-MESURE POUR VOTRE ENTREPRISE ? N’HÉSITEZ PAS À CONSULTER NOTRE CATALOGUE DE FORMATIONS VOIR NOS 20 FORMATIONSDÉCOUVRIR NOS OFFRESEN VOIR PLUS ! Digitalisation du point de vente, smartwatches, smart home, Apple TV… découvrez toutes nos études en libre accès sur Slideshare ! Découvrez nos 3 offres d’études sur-mesure : étude sectorielle, étude de tendances et audit de marque. A partir de 5000 € H.T, sur devis Envie d’en savoir plus sur le mobile et l’innovation ? Trouvez votre bonheur parmi nos 20 formations animées par des experts du domaine. A partir de 2000 € H.T pour 1 à 15 personnes
- 49. USERADGENTS & JOSHFIRE AGENCE DIGITALE MOBILE FIRST USER CENTRIC FABRIQUE D’OBJETS CONNECTÉS & CABINET D’INNOVATIONS userADgents est spécialisée dans la conception, le développement et la promotion de sites et d’applications pour smartphones, tablettes et objets connectés. Joshfire, une équipe de designers et d’ingénieurs qui conçoivent de A à Z des objets connectés et des expériences interactives sur mesure.
- 50. userADgents FABRIQUE DE DISPOSITIFS DIGITAUX INNOVANTS COMPLÉMENTAIRES DEUXAGENCES Hier l’enjeu était de s’adapter au web mobile, aujourd’hui & demain il sera d’embrasser ce nouveau monde ultra connecté où terminaux mobiles & objets communiquent. Notre complémentarité nous permet d’imaginer des expériences transversales à ces dispositifs et de répondre aux nouvelles problématiques des marques. 1 ÈRE 1 FORMANTÀELLESDEUXLA: USERADGENTS & JOSHFIRE
- 51. …DU CONSEIL À LA COMMERCIALISATION… Analyse comportementale Ateliers d’idéation Recherche de concepts innovants User journey Ergonomie Tests utilisateurs Ateliers de co-création Design des interfaces Design industriel Objets connectés Applications natives (iOS/Android/Windows) Responsive & Adaptive Design Back-end & APIs Arduino / Raspberry Pi Réalité virtuelle Chat bots Publicité mobile Couponing SMS/Push Notif App Store Optimization Mobile-to-store Interactions in-store Beacons Vidéo Etudes fonctionnelles Prototypages Spécifications Suivi d’industrialisation & de production Etude de tendances Audit de marque Benchmarks Accompagnement stratégique Recherche & Innovation DESIGN PROMOTION CRM UX / IDÉATION DÉVELOPPEMENT PROTOTYPAGE & INDUSTRIALISATION CONSEIL
- 52. userADgents SOYEZ UTILES & COHÉRENTS CULTIVEZ VOTRE DIFFÉRENCE Le digital et vos clients sont en constante mouvance ! Nous aimons faire bouger les choses et secouer les esprits pour sortir des idées reçues et se challenger constamment. SENS EFFERVESCENCE ESSENCE Dans un environnement de plus en plus concurrentiel et un contexte de surexposition des consommateurs, chaque marque doit cultiver sa différence et revendiquer son ADN et ses valeurs. Nous pensons que le digital ne doit pas être gadget ! Nous voulons créer des dispositifs qui ont du sens pour vos clients. OUVREZ GRAND LES YEUX …ANIMÉES PAR UNE VISION COMMUNE !