@xebiconfr #xebiconfr
Le futur de la télévision :
les applications !
Fabien Mirault
Arnaud Piroelle
@xebiconfr #xebiconfr
Speakers
2
Fabien Mirault
@magici1
Arnaud Piroelle
@ArnaudPiroelle
@xebiconfr #xebiconfr
Plan
3
Comment c’était avant ?
Présentation des plateformes
Bonnes pratiques de design
Le développem...
@xebiconfr #xebiconfr
Un petit retour en arrière
1976
1976
1983
@xebiconfr #xebiconfr
@xebiconfr #xebiconfr
Pourquoi tous ces services
sont aujourd’hui fermés ?
@xebiconfr #xebiconfr
1 Pourquoi tous ces services sont aujourd’hui fermés ?
9
Une minorité de personnes concernées
Des in...
@xebiconfr #xebiconfr
1 Pourquoi tous ces services sont aujourd’hui fermés ?
10
Solutions proposées par les FAI
(Free, Num...
@xebiconfr #xebiconfr
Présentation des plateformes
@xebiconfr #xebiconfr
La plateforme Android TV
1.1
@xebiconfr #xebiconfr
1.1 La plateforme Android TV : présentation
13
Processeur Atom quad core
1GB de Ram
8GB de mémoire i...
@xebiconfr #xebiconfr
La plateforme Android TV : présentation
14
Sharp Aquos Sony Bravia
Freebox Mini 4k Bbox Miami Razer ...
@xebiconfr #xebiconfr
La plateforme Android TV : interactions
15
Au travers d’une télécommande
Croix directionnelle simple...
@xebiconfr #xebiconfr
La plateforme Android TV : principal atout
16
Play Store & Services
1.1
@xebiconfr #xebiconfr
La plateforme Apple TV
1.2
@xebiconfr #xebiconfr
Apple TV 4ème génération : présentation
18
Processeur A8 (équivalent iPhone 6 / iPad mini 4)
2Gb de ...
@xebiconfr #xebiconfr
La plateforme Apple TV : une console de jeux
19
Mais aussi une console de jeux vidéo !
1.2
@xebiconfr #xebiconfr
La plateforme Apple TV : interactions extérieures
20
Au travers d’une télécommande
Touch surface pou...
@xebiconfr #xebiconfr
La plateforme Apple TV : principal atout
21
App Store
1.2
@xebiconfr #xebiconfr
Ventes de players vidéo aux États-Unis
22
Et ça semble marcher !
Autre
Apple TV
Google
Amazon
Roku
A...
@xebiconfr #xebiconfr
Une envie est né de cela
23
La création de l’application
1.2
Portail d’accès aux vidéos enregistrées...
@xebiconfr #xebiconfr
Conception / Design
@xebiconfr #xebiconfr
2 Applications sur TV : Principes fondamentaux
25
Ne pas penser une application TV
comme une applica...
@xebiconfr #xebiconfr
2 Applications sur TV : répondre à un besoin
26
On peut même commander sa pizza depuis son canapé (P...
@xebiconfr #xebiconfr
2 Applications sur TV : Principes fondamentaux
27
Penser au recul entre utilisateur et écran
Penser ...
@xebiconfr #xebiconfr
2 Applications sur TV : Principes fondamentaux
28
Favoriser les commandes vocales
Connexion simplifi...
@xebiconfr #xebiconfr
2 Applications sur tvOS : Principes fondamentaux
29
Saisie de texte à éviter au maximum !
Partage de...
@xebiconfr #xebiconfr
Design sur Android TV
2.1
@xebiconfr #xebiconfr
Design sur Android TV : Généralités
32
Pas de comptes multiples
Pas d’animations inutiles
2.1
Deux r...
@xebiconfr #xebiconfr
Design sur Android TV : spécificités
33
2.1
Applications TV Natives
34
Applications TV Natives
35
Applications TV Natives
36
Applications TV Natives
37
@xebiconfr #xebiconfr
2.1 Design sur Android TV : Généralités
38
Des templates « cachés »
Des designs innovants
Dépasser l...
Applications TV Natives
39
Applications TV Natives
40
@xebiconfr #xebiconfr
est né en prenant en compte tout cela !
41
Utilisation des templates
Respect des guidelines
2.1
@xebiconfr #xebiconfr
: Accueil
42
2.1
@xebiconfr #xebiconfr
: Ecran de détail
43
2.1
@xebiconfr #xebiconfr
: Player vidéo
44
2.1
@xebiconfr #xebiconfr
2.2
Design sur tvOS
@xebiconfr #xebiconfr
Design sur tvOS : Généralités
46
Résolution fixe (pour le moment)
2.2
Pas de templates prédéfinis
Le...
@xebiconfr #xebiconfr
2 L’exemple d’airbnb
47
@xebiconfr #xebiconfr
L’exemple d’airbnb
48
2.2
@xebiconfr #xebiconfr
Design sur tvOS : Généralités
50
Icônes avec effet parallaxe
Également disponible pour les images !
...
@xebiconfr #xebiconfr
Design sur tvOS : spécificités
52
Ne pas hésiter à mettre du flou
Parallaxe : design en couches
2.2
@xebiconfr #xebiconfr
Design sur tvOS : spécificités
55
Ergonomie similaire sur plusieurs
applications proposant de la vid...
@xebiconfr #xebiconfr
est né en prenant en compte tout cela !
59
2.3
Affichage des vidéos en catégories
@xebiconfr #xebiconfr
: détail d’une vidéo
60
2.3
Avec du flou un peu partout !
@xebiconfr #xebiconfr
: player vidéo
61
2.3
Le player vidéo natif donne accès à la description du média en cours de lecture
@xebiconfr #xebiconfr
Le développement d’applications
@xebiconfr #xebiconfr
Développement Android TV
3.1
@xebiconfr #xebiconfr
Développement sur Android TV : penser « TV first »
64
Ne jamais couper un média 

(audio/vidéo)
Appr...
@xebiconfr #xebiconfr
Développement sur Android TV : mutualiser
65
Mutualiser les apps smartphone/
tablette et TV
Ne pas a...
@xebiconfr #xebiconfr
Développement sur Android TV : première approche
66
Java / Kotlin
Librairie de support Leanback
Andr...
@xebiconfr #xebiconfr
Qu’est ce qui change pour un développeur ?
67
Absolument rien !
3.1
@xebiconfr #xebiconfr
Qu’est ce qui change pour un développeur mobile ?
68
Enfin presque…
<activity
android:name=".ui.tv.h...
@xebiconfr #xebiconfr
Qu’est ce qui change pour un développeur mobile ?
69
Enfin presque…
<activity
android:name=".ui.tv.h...
@xebiconfr #xebiconfr
3.2Développement tvOS
@xebiconfr #xebiconfr
Développement sur tvOS : première approche
71
Plateforme basée sur iOS
Objective-C ou Swift
Xcode po...
@xebiconfr #xebiconfr
Développement sur tvOS : première approche
72
Composants natifs réagissent aux
nouvelles interaction...
@xebiconfr #xebiconfr
Point commun entre ces frameworks ?
74
Photos
Multipeer connectivity
EventKit
Local Storage
Web View...
@xebiconfr #xebiconfr
Développement sur tvOS : différences avec iOS
75
Plusieurs frameworks iOS non
disponibles
3.2
@xebiconfr #xebiconfr
@xebiconfr #xebiconfr
Développement sur tvOS : différences avec iOS
77
Plusieurs frameworks iOS non
disponibles
Une approc...
@xebiconfr #xebiconfr
Développement sur tvOS : différences avec iOS
78
Utilisation d’iCloud pour les données
persistantes
...
@xebiconfr #xebiconfr 79
Librairies non disponibles au
lancement
Espaces entre éléments UI
: difficultés rencontrées
Probl...
@xebiconfr #xebiconfr 81
Concept abstrait et non visible
: gestion du focus
UIFocusGuide pour rendre
certaines zones acces...
@xebiconfr #xebiconfr
Développement sur tvOS : une approche alternative
84
TVML + JS
Balises HTML reprenant les
composants...
@xebiconfr #xebiconfr
Exemple d’architecture TVML3.4
@xebiconfr #xebiconfr
Des plateformes durables ?
@xebiconfr #xebiconfr
4 De grands noms présents sur les stores
88
@xebiconfr #xebiconfr
4 Des possibilités infinies !
89
Infuse 4
@xebiconfr #xebiconfr
4 De nouveaux usages à créer
90
Affichage d’un live avec des informations complémentaires ou
même ca...
@xebiconfr #xebiconfr
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et ...
Prochain SlideShare
Chargement dans…5
×

XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et iOS chez Xebia

189 vues

Publié le

Les applications natives sont partout autour de nous, sur nos smartphones, tablettes, et depuis peu sur nos télévisions. Le nombre d'applications, et les communautés qui les propulsent, ne cessent de croitre. Les utilisateurs eux aussi suivent le mouvement, à la recherche d'expériences innovantes, en complément de celles vécues sur leurs autres terminaux. En prenant pour exemple le développement de l'application Xebia TV, nous reviendrons donc sur les intérêts et enjeux du développement TVOS et Android TV. Nous aborderons les quelques obstacles liés à la jeunesse de ces langages, et mettrons en lumière toutes les possibilités offertes par ces plateformes.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault et Arnaud Piroelle, Développeurs Android et iOS chez Xebia

  1. 1. @xebiconfr #xebiconfr Le futur de la télévision : les applications ! Fabien Mirault Arnaud Piroelle
  2. 2. @xebiconfr #xebiconfr Speakers 2 Fabien Mirault @magici1 Arnaud Piroelle @ArnaudPiroelle
  3. 3. @xebiconfr #xebiconfr Plan 3 Comment c’était avant ? Présentation des plateformes Bonnes pratiques de design Le développement d’applications Des plateformes durables ? Android TV Apple TV
  4. 4. @xebiconfr #xebiconfr Un petit retour en arrière
  5. 5. 1976
  6. 6. 1976
  7. 7. 1983 @xebiconfr #xebiconfr
  8. 8. @xebiconfr #xebiconfr Pourquoi tous ces services sont aujourd’hui fermés ?
  9. 9. @xebiconfr #xebiconfr 1 Pourquoi tous ces services sont aujourd’hui fermés ? 9 Une minorité de personnes concernées Des interfaces pas toujours très attrayantes De nouvelles solutions qui permettent de nouveaux usages
  10. 10. @xebiconfr #xebiconfr 1 Pourquoi tous ces services sont aujourd’hui fermés ? 10 Solutions proposées par les FAI (Free, Numéricable, SFR, …) Streamers / players dédiés (Roku / Chromecast) Téléviseurs connectés (Samsung, LG)
  11. 11. @xebiconfr #xebiconfr Présentation des plateformes
  12. 12. @xebiconfr #xebiconfr La plateforme Android TV 1.1
  13. 13. @xebiconfr #xebiconfr 1.1 La plateforme Android TV : présentation 13 Processeur Atom quad core 1GB de Ram 8GB de mémoire interne Caractéristiques Conçu pour le streaming Un prix raisonnable !
  14. 14. @xebiconfr #xebiconfr La plateforme Android TV : présentation 14 Sharp Aquos Sony Bravia Freebox Mini 4k Bbox Miami Razer Forge Nvidia Shield 1.1
  15. 15. @xebiconfr #xebiconfr La plateforme Android TV : interactions 15 Au travers d’une télécommande Croix directionnelle simple Micro intégré pour la recherche vocale 1.1
  16. 16. @xebiconfr #xebiconfr La plateforme Android TV : principal atout 16 Play Store & Services 1.1
  17. 17. @xebiconfr #xebiconfr La plateforme Apple TV 1.2
  18. 18. @xebiconfr #xebiconfr Apple TV 4ème génération : présentation 18 Processeur A8 (équivalent iPhone 6 / iPad mini 4) 2Gb de Ram 32Go ou 64Go de mémoire interne Caractéristiques Un iPhone / iPad dans une boite affiché sur un écran externe Compatible avec toutes les télévisions 1.2
  19. 19. @xebiconfr #xebiconfr La plateforme Apple TV : une console de jeux 19 Mais aussi une console de jeux vidéo ! 1.2
  20. 20. @xebiconfr #xebiconfr La plateforme Apple TV : interactions extérieures 20 Au travers d’une télécommande Touch surface pour la sélection Siri intégré pour la recherche 1.2
  21. 21. @xebiconfr #xebiconfr La plateforme Apple TV : principal atout 21 App Store 1.2
  22. 22. @xebiconfr #xebiconfr Ventes de players vidéo aux États-Unis 22 Et ça semble marcher ! Autre Apple TV Google Amazon Roku Autre Apple TV Google Amazon Roku © Parks Associates 2014 © Parks Associates 2015 1.2
  23. 23. @xebiconfr #xebiconfr Une envie est né de cela 23 La création de l’application 1.2 Portail d’accès aux vidéos enregistrées par les Xebians tvOSAndroid TV
  24. 24. @xebiconfr #xebiconfr Conception / Design
  25. 25. @xebiconfr #xebiconfr 2 Applications sur TV : Principes fondamentaux 25 Ne pas penser une application TV comme une application tablette Interactions faisant partie des habitudes journalières d’un utilisateur Une application doit répondre à un besoin de l’utilisateur
  26. 26. @xebiconfr #xebiconfr 2 Applications sur TV : répondre à un besoin 26 On peut même commander sa pizza depuis son canapé (Papa John’s)Regarder la télévision autrement avec Molotov
  27. 27. @xebiconfr #xebiconfr 2 Applications sur TV : Principes fondamentaux 27 Penser au recul entre utilisateur et écran Penser convivialité Design homogène entre les applications
  28. 28. @xebiconfr #xebiconfr 2 Applications sur TV : Principes fondamentaux 28 Favoriser les commandes vocales Connexion simplifiée aux services en ligne Miser sur l’intuition utilisateur
  29. 29. @xebiconfr #xebiconfr 2 Applications sur tvOS : Principes fondamentaux 29 Saisie de texte à éviter au maximum ! Partage de token de connexion via le keychain iCloud (iOS) Utiliser Digits de Fabric
  30. 30. @xebiconfr #xebiconfr Design sur Android TV 2.1
  31. 31. @xebiconfr #xebiconfr Design sur Android TV : Généralités 32 Pas de comptes multiples Pas d’animations inutiles 2.1 Deux résolutions (720p / 1080p)
  32. 32. @xebiconfr #xebiconfr Design sur Android TV : spécificités 33 2.1
  33. 33. Applications TV Natives 34
  34. 34. Applications TV Natives 35
  35. 35. Applications TV Natives 36
  36. 36. Applications TV Natives 37
  37. 37. @xebiconfr #xebiconfr 2.1 Design sur Android TV : Généralités 38 Des templates « cachés » Des designs innovants Dépasser les recommendations
  38. 38. Applications TV Natives 39
  39. 39. Applications TV Natives 40
  40. 40. @xebiconfr #xebiconfr est né en prenant en compte tout cela ! 41 Utilisation des templates Respect des guidelines 2.1
  41. 41. @xebiconfr #xebiconfr : Accueil 42 2.1
  42. 42. @xebiconfr #xebiconfr : Ecran de détail 43 2.1
  43. 43. @xebiconfr #xebiconfr : Player vidéo 44 2.1
  44. 44. @xebiconfr #xebiconfr 2.2 Design sur tvOS
  45. 45. @xebiconfr #xebiconfr Design sur tvOS : Généralités 46 Résolution fixe (pour le moment) 2.2 Pas de templates prédéfinis Les seules limites : notre imagination !
  46. 46. @xebiconfr #xebiconfr 2 L’exemple d’airbnb 47
  47. 47. @xebiconfr #xebiconfr L’exemple d’airbnb 48 2.2
  48. 48. @xebiconfr #xebiconfr Design sur tvOS : Généralités 50 Icônes avec effet parallaxe Également disponible pour les images ! Contexte d’utilisation multi-utilisateurs 2.2
  49. 49. @xebiconfr #xebiconfr Design sur tvOS : spécificités 52 Ne pas hésiter à mettre du flou Parallaxe : design en couches 2.2
  50. 50. @xebiconfr #xebiconfr Design sur tvOS : spécificités 55 Ergonomie similaire sur plusieurs applications proposant de la vidéo Parallaxe : design en couches Ne pas hésiter à mettre du flou 2.2
  51. 51. @xebiconfr #xebiconfr est né en prenant en compte tout cela ! 59 2.3 Affichage des vidéos en catégories
  52. 52. @xebiconfr #xebiconfr : détail d’une vidéo 60 2.3 Avec du flou un peu partout !
  53. 53. @xebiconfr #xebiconfr : player vidéo 61 2.3 Le player vidéo natif donne accès à la description du média en cours de lecture
  54. 54. @xebiconfr #xebiconfr Le développement d’applications
  55. 55. @xebiconfr #xebiconfr Développement Android TV 3.1
  56. 56. @xebiconfr #xebiconfr Développement sur Android TV : penser « TV first » 64 Ne jamais couper un média 
 (audio/vidéo) Approche différente Pas de notifications Pas de contenu textuel Pas de navigateur web disponible Taille de l’application et stockage limités 3.1
  57. 57. @xebiconfr #xebiconfr Développement sur Android TV : mutualiser 65 Mutualiser les apps smartphone/ tablette et TV Ne pas aller trop loin Application TV si nécessaire Rester simple Ne pas utiliser de design « non tv » 3.1
  58. 58. @xebiconfr #xebiconfr Développement sur Android TV : première approche 66 Java / Kotlin Librairie de support Leanback Android Studio 3.1
  59. 59. @xebiconfr #xebiconfr Qu’est ce qui change pour un développeur ? 67 Absolument rien ! 3.1
  60. 60. @xebiconfr #xebiconfr Qu’est ce qui change pour un développeur mobile ? 68 Enfin presque… <activity android:name=".ui.tv.home.HomeActivity" android:banner="@drawable/xebiatv_banner" android:icon="@drawable/xebiatv_banner" android:label="@string/app_name" android:logo="@drawable/xebiatv_banner" android:screenOrientation="landscape"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <activity android:name=".ui.tv.home.HomeActivity" android:banner="@drawable/xebiatv_banner" android:icon="@drawable/xebiatv_banner" android:label="@string/app_name" android:logo="@drawable/xebiatv_banner" android:screenOrientation="landscape"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> 3.1
  61. 61. @xebiconfr #xebiconfr Qu’est ce qui change pour un développeur mobile ? 69 Enfin presque… <activity android:name=".ui.tv.home.HomeActivity" android:banner="@drawable/xebiatv_banner" android:icon="@drawable/xebiatv_banner" android:label="@string/app_name" android:logo="@drawable/xebiatv_banner" android:screenOrientation="landscape"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LEANBACK_LAUNCHER"/> </intent-filter> </activity> 3.1
  62. 62. @xebiconfr #xebiconfr 3.2Développement tvOS
  63. 63. @xebiconfr #xebiconfr Développement sur tvOS : première approche 71 Plateforme basée sur iOS Objective-C ou Swift Xcode pour la partie graphique ou TVML + JS 3.2
  64. 64. @xebiconfr #xebiconfr Développement sur tvOS : première approche 72 Composants natifs réagissent aux nouvelles interactions possibles Effet parallaxe simple à mettre en place Extension TopShelf possible pour la customisation de la partie haute 3.2
  65. 65. @xebiconfr #xebiconfr Point commun entre ces frameworks ? 74 Photos Multipeer connectivity EventKit Local Storage Web Views Absents de tvOS 9 ! 3.2
  66. 66. @xebiconfr #xebiconfr Développement sur tvOS : différences avec iOS 75 Plusieurs frameworks iOS non disponibles 3.2
  67. 67. @xebiconfr #xebiconfr
  68. 68. @xebiconfr #xebiconfr Développement sur tvOS : différences avec iOS 77 Plusieurs frameworks iOS non disponibles Une approche différente d’iOS Pas de multitâche ni de push notifications Absence de caméra Pas de navigateur web disponible Taille de l’application et stockage limités 3.2
  69. 69. @xebiconfr #xebiconfr Développement sur tvOS : différences avec iOS 78 Utilisation d’iCloud pour les données persistantes On-Demand resources pour intégrer des images conséquentes Xibs iOS non réutilisables 3.2 Mise en place simple
  70. 70. @xebiconfr #xebiconfr 79 Librairies non disponibles au lancement Espaces entre éléments UI : difficultés rencontrées Problème majeur : le focus ! 3.3
  71. 71. @xebiconfr #xebiconfr 81 Concept abstrait et non visible : gestion du focus UIFocusGuide pour rendre certaines zones accessibles Possède plusieurs directions 3.3
  72. 72. @xebiconfr #xebiconfr Développement sur tvOS : une approche alternative 84 TVML + JS Balises HTML reprenant les composants natifs Mises à jour à la volée viables 3.4
  73. 73. @xebiconfr #xebiconfr Exemple d’architecture TVML3.4
  74. 74. @xebiconfr #xebiconfr Des plateformes durables ?
  75. 75. @xebiconfr #xebiconfr 4 De grands noms présents sur les stores 88
  76. 76. @xebiconfr #xebiconfr 4 Des possibilités infinies ! 89 Infuse 4
  77. 77. @xebiconfr #xebiconfr 4 De nouveaux usages à créer 90 Affichage d’un live avec des informations complémentaires ou même carrément d’un multiplex Pousser à l’achat avec des images qui donnent envie Des expériences uniques adaptées à des conditions de salon Particulièrement adapté aux séniors Pas de smartphone Textes gros et donc plus lisibles
  78. 78. @xebiconfr #xebiconfr

×