UX, Télévision, Google TV, Design – Introduction au design de créations pour la télévision connectée

by Posted on


UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée Copyright © Google TV

Une fois n’est pas coutume, on va abandonner un peu les productions de webdoc pour se consacrer dans cet article aux évolutions des usages et des technologies en s’intéressant notamment à un support “d’à venir” : la télévision connectée, plus précisément d’ailleurs à la Google TV. Il faut se rendre à l’évidence, on est bien au coeur de la convergence, qui pourrait se définir comme suit par un rapprochement inéluctable des terminaux Web, Mobile & TV, des usages (prescription, recommandation, recherche) et par la même des technologies (HTML5, Javascript). En effet, le navigateur moderne devient l’application à tout faire, la fenêtre du monde multimédia, multiplate-forme, accompagnant ce glissement géographique (mobilité) et temporel (à tout moment). Notre propos n’est pas de plonger dans l’exploration des technologies mais bien de donner la possibilité de concevoir et de réaliser une oeuvre interactive et enrichie (site, application, expérience) sur ce support de télévision connectée à venir pour tous les candidat(e)s aux webdocs ou webdocumentaires en fournissant quelques éléments pour présenter leurs futurs créations à des producteurs, des diffuseurs, des developpeurs, des agences…. La démarche est simple, très Lean UX, sans compétences techniques particulières, vous souhaitez concevoir vos webdocs ou narrations enrichies et interactives pour le Web, le mobile ou la TV connectée. On se concentre sur la télévision connectée, car bien que tout le monde en parle, il n’existe jusqu’à présent pas réellement de ressources (libraires) pour designer des IHM (écrans) via les outils classiques de wireframing pour la télévision connectée.

Building Web Apps for Google TV

Building Web Apps for Google TV

Les publications d'O'Reilly Media sont toujours un gage de sérieux. Ne serait-ce que pour connaitre les espèces en danger, celles de la couverture cela va sans dire.

Genre(s) : , , , , , ,
Auteur(s) : , ,
Edition(s) :
+ d'infos

Or la télévision connectée comme le web ou le mobile connait ses règles, ses contraintes, ergonomiques, graphiques et d’usage. Ce questionnement nous a été soufflé par l’excellente présentation faite par Ed Mansfield (@elmansfield) et Kyle Outlaw (@koutlaw) de Razorfish sur la télévision connectée.

Ils posent à un moment la question simple à laquelle ils tentent de répondre de manière pragmatique avec un Call to action for UX, on vous la livre in-extenso et on tache d’y répondre modestement mais de manière tout aussi pragmatique.

For most of us, connected TV remains unchartered territory.
How do we get started?

Source : http://fr.slideshare.net/koutlaw/the-ux-of-tv

Se lancer dans une création pour la TV connectée

On choisit Google TV, car c’est l’environnement le plus complet, tant d’un point technique (SDK Android) que de la documentation sur les bonnes pratiques (ergonomique, graphique, narrative…etc.) , on aurait donc tort de s’en priver.

On retiendra de la réponse formulée par Ed Mansfield (@elmansfield) et de Kyle Outlaw (@koutlaw) quelques points essentiels notamment dans méthodologie parce que ces points rentrent en résonance avec l’approche Agile et UX tout à fait applicable à la conception de webdoc comme à toute création mobile, web.

Les points essentiels

Ed Mansfield (@elmansfield) et de Kyle Outlaw (@koutlaw) posent un postulat simple que la télévision connectée est une 10 ft experience qu’ils définissent comme suit :

What is the 10 ft experience?
It’s a software user interface designed for display on a
large television with interaction using a regular televisionstyle
remote control.

Source : http://fr.slideshare.net/koutlaw/the-ux-of-tv

Cela étant dit, ce n’est pas encore ce qui nous intéressent vraiment.

L’approche Lean UX
Très inspirée par Lean UX, qui est aussi une source d’inspiration pour Hecube comme 3WDOC, Ed Mansfield (@elmansfield) et de Kyle Outlaw (@koutlaw) détaillent les étapes suivantes :

  • Concept
  • Prototype
  • Valider en interne
  • Testez interne
  • Apprendre de comportement de l’utilisateur
  • Itération

Les chose à retenir sur le rapprochement TV et Web

  • Claviers et Télévisions ne font pas bon ménage.
  • La hiérarchie ou taxonomie doit être aussi plate que possible.
  • Tout doit être plus grand en terme graphique.
  • Moins de texte plus d’images, l’adage Less is more prévaut plus que jamais en matière de texte.
  • Les comportement des navigateurs varient considérablement selon les dispositifs, rassurez-vous c’est aussi le cas pour le mobile.

Leurs conclusions
La TV connectée est le prochain grand problème UX à résoudre et pas seulement UX pourrait-on rajouter.

  • Vous faites face à un écosystème très fragmenté. Une normalisation serait de bon aloi, Google TV peut-être la solution quand on extrapole les chiffres d’Android sur le mobile.
  • Connaître les défis avec la conception de la télévision. Une télévision c’est grand et c’est jusqu’à présent dans le salon.
  • Comprendre les opportunités et de nouvelles capacités. Toujours difficile.
  • Evangéliser en interne et avec les clients. On pariait pas grand chose sur le mobile en son temps !
  • Adopter le prototype, c’est chose faite après la lecture de cet article et de la présentation.

Source : http://fr.slideshare.net/koutlaw/the-ux-of-tv

Le design original de la Google TV
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée

Source : https://developers.google.com/tv/android/docs/gtv_emulator

Le résultat de notre Mockup sous Balsamiq
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée

Pour les plus fanatiques, on essaye de faire les choses bien, on a donc “porté” sous deux autres logiciels “leaders” du marché, cette bibliothèque ou ressource à savoir : Axure & OmniGraffle avec les explications correspondantes.

Notre retour d’usage sur les 3 outils de wireframe testés

  • Pourquoi Balsamiq ?
    Parce que les éléments sont très facilement manipulables.
  • Pourquoi Axure ?
    Parce que la notion de “sketchiness” est beaucoup plus développée notamment pour faire l’ensemble de la “boutonnerie”, on est donc certain que le client ne prendra pas pour argent comptant les IHM qu’on lui soumet ni même l’équipe de développement !
  • Pourquoi OmniGraffle ?
    Parce qu’on peut manipuler des objets vectorisés sorti tout droit de Illustrator donc on a très grand niveau de précisions. C’est que la synergie entre Illustrator et OmniGraffle se révèle intéressant pour les graphistes. Il suffit de créer les éléments dans Illustrator puis de les importer dans OmniGraffle au format PDF à partir d’Illustrator. OmniGraffle récupère les PDF mais conserve néanmoins les fonctions vectorielles d’édition comme dans Flash en quelque sorte. Un comble !

Les boutons à la découpe

01_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		02_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		03_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		04_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée
05_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		06_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		07_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		08_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée
09_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		10_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		11_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		12_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée
A1_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		A2_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		A3_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée		A4_google_tv_btn.png
UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée

L’image complète de notre fichier .bmml

UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée

Les deux écrans de notre prototype d’application Google TV

UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée

UX, Télévision, Google TV, Design - Introduction au design de créations pour la télévision connectée

Les librairies Google TV pour les 3 logiciels de Wireframing : Balsamiq, OmniGraffle, Axure

La librairie Balsamiq Mockups pour Google TV

La version de cette librairie est à télécharger au format .zip ici. Pour fonctionner, elle nécessite d’utiliser Balsamiq Mockups 2.1.11 ou +. Télécharger balsamiq_Google-TV-screens_and_buttons-v5.zip

La librairie OmniGraffle pour Google TV

La version « à la hache » de cette librairie est à télécharger au format .zip ici. Pour fonctionner, elle nécessite d’utiliser OmniGraffle Pro 5.4.2 ou +. Télécharger OmniGraffle_Google-TV-buttons-v1_stencil_4.zip

La librairie Axure pour Google TV

La version de cette librairie est à télécharger au format .zip ici. Pour fonctionner, elle nécessite d’utiliser Axure RP Pro V6.5 ou +. Télécharger axure_Google-TV-screens_and_buttons-v3.zip

La librairie étendue avec les 2 écrans de l’application Google TV Balsamiq Mockups pour Google TV

La version de cette librairie est à télécharger au format .zip ici. Pour fonctionner, elle nécessite d’utiliser Balsamiq Mockups 2.1.11 ou +. Télécharger Treets_Google-TV-screens_and_buttons-v5.zip

En savoir plus

Published by Bruno Flaven

By now, Bruno Flaven works as AI Coordinator. He has been a project manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://www.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He has also worked as P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts