Rechercher
  • Des usages à la conception et autres
  • digressions autour de l'expérience utilisateur.
Rechercher Menu

Une étude de cas : la grille des programmes, concevoir pour la TV.

Nous vous présentons ici un travail concret, une étude de cas, pour la conception d’un service sur la télévision. Ce service est la grille des programmes. La grille des programmes a pour but de présenter l’intégralité des programmes sur l’ensemble des chaînes, sur une période de temps donnée.

C’est un service courant mais qui est rarement abordé de manière satisfaisante. Pour simplifier la problématique, nous intégrons une contrainte supplémentaire, la présence des programmes en “TV à la demande” dans le passé et le futur !

La demande.

La demande s’exprimait simplement : “Concevoir un “rétro” EPG (Guide des Programmes Electronique), sur 30 jours dans le passé, 15 dans le futur, pour l’ensemble des chaînes disponibles, faisant le lien avec le direct, le magnétoscope numérique et la TV à la demande”

Dans les grandes lignes les paramètres à prendre en compte sont les suivants :

  • Il y a environ 200 à 400 chaînes sur le “plan de numérotation”. En langage utilisateur cela se traduit par “beaucoup plus de chaînes que mon usage”.
  • Une chaîne présente 30 à 40 programmes par jour en moyenne. Dans le passé, tous les programmes ne sont pas disponibles, suivant les chaînes cela varie de 0 à 80 %. Suivant les chaînes, le nombre de programmes va varier de 450 (15 jours x 30) à 1 500 (30 jours x 30 + 15 jours x 40).
  • Il faut prévoir les fonctions “voir la chaîne en direct”, “voir le programme” et “enregistrer”.
  • Il faut prévoir une vue globale et une vue présentant le résumé du programme.
  • Certaines chaines n’ont pas de programmes connus (Par exemple : Luxe TV), d’autres des programmes très long (Par exemple, BFM).


Le tout doit respecter les normes et les autres règles déjà en place en terme d’ergonomie et design. Ces contraintes sont les suivantes :

  • L’interface est de type hiérarchique.
  • L’affichage doit pouvoir se faire en HD 16/9 (1280×720 pixels) ou en 4/3.
  • La taille des caractères doit être comprise entre 1/15 (47 pixels) et 1/25 (28 pixels) de la hauteur de l’écran.

Il est aussi précisé que la solution existante, une simple grille, n’est pas satisfaisante.

L’étude préliminaire.

Avant d’attaquer la partie conception, il est intéressant s’interroger sur les usages et l’existant en matière de grilles des programmes.

 

L’usage ?

Quel est l’usage de la grille des programmes sur la télévision ? L’utilisateur s’intéresse à la grille des programmes dans deux cas :

  • Il a identifié un programme, il veut le retrouver pour le voir si c’est un programme en Tv à la demande ou simplement programmer l’enregistrement.
  • L’utilisateur cherche un programme à regarder maintenant ou ce soir. Il se pose donc la question “Qu’est ce que je vais regarder ?”  et non “Qu’est ce qu’il y a à la Télé ?”. Dans le premier le cas, l’utilisateur va arrêter sa recherche après avoir identifié un ou deux programmes. Dans le deuxième cas, il devrait se faire une idée de l’ensemble de la grille.

Dans tous les cas l’utilisateur se construit une représentation mentale de la grille avec certains points clefs :

  • Les programmes récurrents connus : Vendredi soir, France 3 ? Thalassa ; A 20h sur TF1 ? Journal
  • Les programmes qu’il a identifiés, par exemple, en regardant un magazine TV.
  • Les chaînes qu’il regarde : par exemple, Equidia, canal 141.

Gardez à l’esprit cette image d’un tableau avec certaines cases plus ou moins remplies.

La grille des programmes.

La référence en matière de grille des programmes c’est les magazines TV. Ils présentent l’essentiel de la presse papiers avec 17 millions d’exemplaires hebdomadaire. L’organisation de ces grilles est relativement semblable.

Les chaînes sont affichées à l’horizontale, le temps à la verticale. L’espace est structuré en fonction de l’audience et de la récurrence.

  • Le matin ou l’après-midi, l’audience est faible. Peu d’espace est consacré à ces programmes.
  • En début de soirée, puis en deuxième partie de soirée l’audience est maximum. L’espace utilisé est important.
  • Les programmes récurrents et connus, comme le journal de 20h, prennent peu d’espace.

La grille est calée sur deux repères 13h et le début de soirée.

Sur la télévision, l’existant prend la forme illustrée ci-dessous. Les chaînes, souvent 5 ou 6, sont affichées à la verticale, le temps à l’horizontale.

EPG sur la Freebox.

Cette présentation à plusieurs défauts :

  • La taille de la case d’un programme est fonction de sa durée. Pour les programmes courts, nombreux entre 18h et 21h, il n’y a pas la place de mettre le titre.
  • La grille des programmes est découpée en une mosaïque de carrés de deux heures par six chaînes. La navigation se fait dans le carré puis en “sautant” de carré en carré. Si l’utilisateur veut balayer une chaîne ou une plage horaire, c’est dans les deux cas assez fastidieux.

Même si les axes chaînes et temps sont inversés, des problèmes semblables persistent.

La conception.

La grille des programmes peut être formalisée sous une forme graphique simple, quelques règles viennent compléter cela pour aboutir à un premier schéma d’interface. La navigation dans la grille est par contre un point complexe où deux solutions sont envisageables.

Le modèle conceptuel de la grille.

Une grille des programmes est donc un tableau, présentant des lignes (le temps) et des colonnes (les chaînes). L’utilisateur peu observer ce tableau de loin, au niveau global de la chaîne ou il peut zoomer et regarder au niveau du programme. Nous pouvons représenter cela sous la forme suivante :

Modèle de la grille des programmes.

Cela implique que les règles de navigations sont strictement identiques dans les deux vues car l’utilisateur est sur le même “objet”, la grille. A l’horizontal, l’utilisateur change de chaînes, à la verticale il navigue dans le temps.

La navigation.

La navigation est le point clef de la conception de cette grille des programmes. Elle pose différentes questions, notamment à cause de la présence des programmes disponibles dans le passé. Pour raisons de concision et d’action minimale, dans le passé, seul les programmes accessibles (en Tv à la demande ou enregistrés) sont affichés.

La problématique est la suivante «Comment proposer une navigation cohérente permettant à l’utilisateur de garder ses repères dans la grille ?» sachant que  :

  • La grille des programmes est irrégulière, tous les programmes n’ont pas la même durée et ne commence pas à la même heure.
  • Elle est discontinue, notamment dans le passé, certaines plages horaires sont vides.
  • Elle présente des cas particuliers : chaînes sans programmations, avec juste un libellé ou des cases horaires sans programmes ou très longues (plus de 3h).

Schéma de la grille des programmes.

Les schémas représentent une grille réelle. Le temps sur l’axe vertical, les chaînes à l’horizontale. En orange, la plage horaire de chaque programmes. “T0” : correspond à “maintenant”.

Deux cas d’usages.

Pour bien comprendre le besoin de l’utilisateur, nous allons l’illustrer avec deux cas d’usages.

Premier cas d’usage.

Premier cas :

  • Je cherche le programme, qui est passé avant hier sur France télévision.
  • Je vais donc chercher sur France 3 et 5, deux jours en arrières. Pour passer de l’une à l’autre, je passe sur Canal+ qui n’a pas de programme dans le passé.

Deuxième cas d’usage.

Deuxième cas :

  • Je regarde ce qu’il y a ce soir sur France 2 ou France 3
  • Je passe d’une chaîne à l’autre, en début de soirée et en début de 2éme partie de soirée.

Les navigations possibles ?

Il faut déterminer quel est le comportement de l’interface lors de l’utilisation des touches droites/gauches et haut/bas pour naviguer dans la grille. Deux solutions sont envisageables, qui respectent les critères ergonomiques : contrôle utilisateur, cohérence, …

Le fonctionnement doit aussi être  :

  • Identique pour le passé et le futur, pour la vue de loin (par chaîne) ou la vue par programme.
  • Générique, sans exceptions.
  • Simple à énoncer donc simple à comprendre par l’utilisateur. (et simple à programmer)

Ce qui nous amène aux navigations suivantes :

Choix A :Choix B :
  • Droite/gauche changement de chaînes et d’heure.
  • Haut/bas changement de programmes et d’heure.
  • L’heure de référence est l’heure de début du programme focussé.
  • Droite/gauche changement de chaînes.
  • Haut/bas navigation dans le temps, changement de programme.
  • L’heure de référence est celle du dernier programme sélectionné dans le temps (touches haut/bas).

Dans les deux cas, si il n’y a pas de programmes, le programme suivant dans le temps est sélectionné.

Sur les schémas suivants, chaque flèche correspond à un appui sur une touche (haut/bas, droite/gauche).

Comparaison des navigations sur le 1er cas d’usage.

Comparaison des navigations sur le 2éme cas d’usage.

Nous constatons les fonctionnements suivant :

Choix A :Choix B :
  • L’heure de référence est l’heure de début du programme focussé.
  • On contourne les trous dans la grille, d’où un nombre plus important d’actions pour l’utilisateur.
  • Les actions inverses à l’horizontale (« gauche » puis « droite ») ne sont pas toujours symétriques.
  • Les cas particuliers nécessitent de prévoir des exceptions.
  • Le contrôle explicite de l’utilisateur du déplacement dans le temps est respecté.
  • On saute les troues dans la grille.
  • Les actions « inverses » sont symétriques : « gauche » puis « droite » ramène au même programme.
  • La notion d’heure de référence n’est pas nécessairement explicite. L’utilisateur doit la comprendre.

Au final le choix B convient mieux car le fonctionnement est plus stable. Il ne sera pas nécessaire de prévoir des comportements spécifiques pour les cas particuliers et de gérer des exceptions. Les utilisateurs peuvent plus facilement gérer leurs hésitations sans être pénalisé.

Nous avons la structure, la navigation, le type d’interface, il ne reste plus qu’à réaliser les écrans !

La réalisation.

Après avoir décrit l’arborescence du service, nous l’illustrerons avec les principaux écrans.

L’arborescence du service.

Le service se compose en réalité d’un faible nombre d’écrans, même si les écrans peuvent contenir une quantité d’informations très variable en fonction des chaînes et des programmes.

Arborescence du service.

Par défaut, l’utilisateur accède au service par l’écran de présentation par chaînes. Les écrans de présentation par chaînes et par programmes sont des écrans “primaires”. Ils contiennent les ou l’objet du service, en l’occurrence le programme. Sur ces écrans, La touche “Ok” permet d’afficher le menu de commande qui va présenter les actions possibles. Dans le cas présent, nous avons les commandes suivantes :

  • “[nom de la chaîne] en direct” : renvoi vers la télévision sur la chaîne.
  • “voir” : permet de visionner le programme soit enregistré, soit en Tv à la demande, dans le service dédié.
  • “résumé” ou “liste des programmes” : sur la présentation par chaînes cela permet d’accéder à la présentation par programmes et vice versa.
  • “Enregistrer” : permet de programmer l’enregistrement dans un écran de dialogue “Enregistrer”.
  • “Revenir à maintenant” : La grille des programmes pouvant être vaste, cette commande permet de se repositionner sur l’instant présent après une longue navigation.

Les commandes qui renvoient vers d’autres services sont celles qui permettent d’accéder aux contenus audio-visuel.

Les écrans, enfin !

La charte graphique à la base de ces écrans a été réalisée par YUAN Tching-Yi.

Le titre des programmes étant un élément important de choix, une part importante de l’écran est dédiée à la liste. Un effet de zoom permet une bonne lisibilité du titre sélectionné tout en conservant une liste suffisamment longue.

Présentation par chaînes.

La télévision est toujours dans une petite vignette en bas à gauche, afin que l’utilisateur puisse utiliser le service pendant les publicités par exemple. Le son est aussi toujours présent.

Une chaîne sans Tv à la demande.

Un programme enregistré se retrouve accessible même sur une chaîne ne disposant pas de “Tv à la demande”.

Une chaîne avec la Tv à la demande.

Sur les chaînes disposant de la Tv à la demande, dans le passé, seul les programmes disponibles sont affichés.

Le menu de commande sur la liste.

Le menu de commande vient s’afficher sur le contenu afin de garder le contexte. Les items suivis d’un “>>” quitte le service, ceux suivis de “…” ouvrent un dialogue.

Présentation par programme.

La vue par programme présente le résumé. Les touches haut/bas permettent toujours d’afficher le programme précédent/suivant.

Le menu de commande sur un programme.

Le menu de commande  est similaire à celui de la présentation en liste. Les items non actifs peuvent être grisés. Le menu est alors permanent et stable.

Présentation en 4/3

En réduisant la largeur de la liste, les écrans s’adaptent facilement, sans avoir à faire une version spécifique pour l’affichage en 4/3.

Si une grande partie du travail de conception est réalisée, la phase suivante est la rédaction des spécifications détaillées de l’IHM. Elles devront contenir tous les détails sur les comportements de l’interface, tous les cas particuliers et bien d’autres éléments insignifiants ou invisibles qui font la qualité d’une IHM.

Pour conclure,

Cette étude de cas montre le déroulement de la création d’un service dans un cadre déjà défini. Le résultat peut paraître simple, mais il faut bien comprendre qu’en réalité, il faut parler de simplexité. C’est la mise en œuvre d’un processus complexe et long qui a permis d’aboutir à un tel résultat. Nous ne détaillons pas ici, par exemple, la réalisation du guideline utilisateur ou la structure de l’ensemble des services.

Auteur :

Lead UX designer en Freelance depuis le dernier millénaire ! J'aide à concevoir des services, des applications en étant centré sur l'utilisateur et ses usages.

13 commentaires Ecrire un commentaire

            Ecrire un commentaire

            Les champs obligatoires sont signalés * markiert.


            nunc vulputate, leo dapibus elit. in felis libero. ut id, Lorem