View
125
Download
0
Category
Preview:
Citation preview
@xebiconfr #xebiconfr
Le futur de la télévision :
les applications !Fabien MiraultArnaud 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éveloppement d’applications
Des plateformes durables ?
Android TVApple TV
@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 interfaces pas toujours très attrayantes
De nouvelles solutions qui permettent de nouveaux usages
@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)
@xebiconfr #xebiconfr
Présentation des plateformes
@xebiconfr #xebiconfr
La plateforme Android TV1.1
@xebiconfr #xebiconfr
1.1 La plateforme Android TV : présentation
13
Processeur Atom quad core1GB de Ram8GB de mémoire interne
Caractéristiques
Conçu pour le streaming
Un prix raisonnable !
@xebiconfr #xebiconfr
La plateforme Android TV : présentation
14
Sharp Aquos Sony Bravia
Freebox Mini 4k Bbox Miami Razer Forge
Nvidia Shield
1.1
@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
@xebiconfr #xebiconfr
La plateforme Android TV : principal atout
16
Play Store & Services
1.1
@xebiconfr #xebiconfr
La plateforme Apple TV1.2
@xebiconfr #xebiconfr
Apple TV 4ème génération : présentation
18
Processeur A8 (équivalent iPhone 6 / iPad mini 4)2Gb de Ram32Go 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
@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 pour la sélection
Siri intégré pour la recherche
1.2
@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
RokuAutre
Apple TV
Google Amazon
Roku
© Parks Associates
2014
© Parks Associates
2015
1.2
@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
@xebiconfr #xebiconfr
Conception / Design
@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
@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
@xebiconfr #xebiconfr
2 Applications sur TV : Principes fondamentaux
27
Penser au recul entre utilisateur et écran
Penser convivialité
Design homogène entre les applications
@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
@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
@xebiconfr #xebiconfr
Design sur Android TV2.1
@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)
@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 les recommendations
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.2Design 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
Les seules limites : notre imagination !
@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 !
Contexte d’utilisation multi-utilisateurs
2.2
@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éo
Parallaxe : design en couches
Ne pas hésiter à mettre du flou
2.2
@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)
Approche différentePas de notificationsPas de contenu textuelPas de navigateur web disponibleTaille de l’application et stockage limités
3.1
@xebiconfr #xebiconfr
Développement sur Android TV : mutualiser
65
Mutualiser les apps smartphone/ tablette et TV
Ne pas aller trop loinApplication TV si nécessaireRester simpleNe pas utiliser de design « non tv »
3.1
@xebiconfr #xebiconfr
Développement sur Android TV : première approche
66
Java / Kotlin
Librairie de support Leanback
Android Studio
3.1
@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.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
@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
@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 pour la partie graphique
ou TVML + JS
3.2
@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
@xebiconfr #xebiconfr
Point commun entre ces frameworks ?
74
Photos
Multipeer connectivity
EventKit
Local Storage
Web ViewsAbsents de tvOS 9 !
3.2
@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 approche différente d’iOSPas de multitâche ni de push notifications
Absence de caméra
Pas de navigateur web disponibleTaille de l’application et stockage limités
3.2
@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
@xebiconfr #xebiconfr 79
Librairies non disponibles au lancement
Espaces entre éléments UI
: difficultés rencontrées
Problème majeur : le focus !
3.3
@xebiconfr #xebiconfr 81
Concept abstrait et non visible
: gestion du focus
UIFocusGuide pour rendre certaines zones accessibles
Possède plusieurs directions
3.3
@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
@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 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éniorsPas de smartphoneTextes gros et donc plus lisibles
@xebiconfr #xebiconfr
Recommended