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 MiraultArnaud 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 TVApple TV


Un petit retour en arrière

1976

1976

1983



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 TV1.1


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 !


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 TV1.2


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


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

RokuAutre

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 TV2.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

Applications TV Natives

34


35


36


37


2.1 Design sur Android TV : Généralités

38

Des templates « cachés »

Des designs innovants

Dépasser les recommendations


39


40


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.2Design 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érentePas de notificationsPas de contenu textuelPas de navigateur web disponibleTaille 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 loinApplication TV si nécessaireRester simpleNe 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 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


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


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 ViewsAbsents 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’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



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éniorsPas de smartphoneTextes gros et donc plus lisibles


Technology

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