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

@xebiconfr #xebiconfr
Le futur de la télévision :
les applications !
Fabien Mirault
Arnaud Piroelle

Speakers
2
Fabien Mirault
@magici1
Arnaud Piroelle
@ArnaudPiroelle

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

Un petit retour en arrière

Pourquoi tous ces services
sont aujourd’hui fermés ?

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

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)

Présentation des plateformes

La plateforme Android TV
1.1

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 !

La plateforme Android TV : présentation
14
Sharp Aquos Sony Bravia
Freebox Mini 4k Bbox Miami Razer Forge
Nvidia Shield
1.1

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

La plateforme Android TV : principal atout
16
Play Store & Services
1.1

La plateforme Apple TV
1.2

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

La plateforme Apple TV : une console de jeux
19
Mais aussi une console de jeux vidéo !
1.2

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

La plateforme Apple TV : principal atout
21
App Store
1.2

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

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

Conception / Design

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

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
Penser au recul entre utilisateur et écran
Penser convivialité
Design homogène entre les applications

28
Favoriser les commandes vocales
Connexion simplifiée aux services en
ligne
Miser sur l’intuition utilisateur

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

Design sur Android TV
2.1

Design sur Android TV : Généralités
32
Pas de comptes multiples
Pas d’animations inutiles
2.1
Deux résolutions (720p / 1080p)

Design sur Android TV : spécificités
33
2.1

2.1 Design sur Android TV : Généralités
38
Des templates « cachés »
Des designs innovants
Dépasser les recommendations

est né en prenant en compte tout cela !
41
Utilisation des templates
Respect des guidelines
2.1

: Accueil
42
2.1

: Ecran de détail
43
2.1

: Player vidéo
44
2.1

2.2
Design sur tvOS

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 !

2 L’exemple d’airbnb
47

L’exemple d’airbnb
48
2.2

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

Design sur tvOS : spécificités
52
Ne pas hésiter à mettre du flou
Parallaxe : design en couches
2.2

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

est né en prenant en compte tout cela !
59
2.3
Affichage des vidéos en catégories

: détail d’une vidéo
60
2.3
Avec du flou un peu partout !

: player vidéo
61
2.3
Le player vidéo natif donne accès à la description du média en cours de lecture

Le développement d’applications

Développement Android TV
3.1

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

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

Développement sur Android TV : première approche
66
Java / Kotlin
Librairie de support Leanback
Android Studio
3.1

Qu’est ce qui change pour un développeur ?
67
Absolument rien !
3.1

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
<intent-filter>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
3.1

Qu’est ce qui change pour un développeur mobile ?
69
Enfin presque…
<activity
<intent-filter>
<category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
</intent-filter>
</activity>
3.1

3.2Développement tvOS

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

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

Point commun entre ces frameworks ?
74
Photos
Multipeer connectivity
EventKit
Local Storage
Web Views
Absents de tvOS 9 !
3.2

Développement sur tvOS : différences avec iOS
75
Plusieurs frameworks iOS non
disponibles
3.2

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

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

Développement sur tvOS : une approche alternative
84
TVML + JS
Balises HTML reprenant les
composants natifs
Mises à jour à la volée viables
3.4

Exemple d’architecture TVML3.4

Des plateformes durables ?

4 De grands noms présents sur les stores
88

4 Des possibilités infinies !
89
Infuse 4

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

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (12)

Destacado

Destacado (17)

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

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

Más de Publicis Sapient Engineering

Más de Publicis Sapient Engineering (20)

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