14 Dec 2017 <   Tendance

Les fondamentaux de la conception d’une UI

Dans cet article, nous expliquerons comment l’équipe Wyplay Studio Design aborde les différentes étapes de la conception et de la mise en œuvre d’une expérience utilisateur pour le monde de la télévision.

  • Wyplay dispose d’une équipe dédiée à la conception d’expérience utilisateur (UX).
  • L’équipe Wyplay bénéficie de plus de 10 ans d’expérience sur le marché de la télévision payante.
  • Wyplay a développé deux interfaces utilisateur de référence (Frog Turnkey et Frog Premium).
  • Nous avons l’expérience du déploiement de nos solutions UX / UI sur tous les périphériques, y compris les STB bas de gamme.
  • Nous pouvons également conseiller sur votre interface utilisateur existante et fournir des recommandations.

LA TV D’AUJOURD’HUI
Au cours de ces 3 dernières années, le monde de la télévision s’est profondément modifié. Plusieurs phénomènes concomitants sont à prendre en compte dans la conception d’une interface utilisateur :

  • Une augmentation significative des sources de contenu,
  • Une consommation de plus en plus délinéarisée avec la croissance de catchup et de la VOD.
  • L’arrivée de formats courts popularisés par le mobile.
  • Le multi-écran avec un usage toujours de plus en plus important des smartphones, tablettes et PC portables,
  • Et enfin, des besoins d’échanges et de partages hérités des réseaux sociaux.

La télévision dans le salon n’est plus le seul moyen de consommer du contenu ; il sera nécessaire d’adapter l’expérience utilisateur pour répondre à d’autres dispositifs et modèles de contenu.

Frog By Wyplay UI

LA CONCEPTION
Avant de commencer à tracer les premières lignes, il est indispensable de suivre quelques étapes :

La prise en compte des besoins
Chez Wyplay, le Studio Design intervient principalement sur 3 missions :

  • La conception d’interface utilisateurs de référence pour accélérer la mise sur le marché de produits Wyplay,
  • La conception, pour le compte d’opérateurs, de leur interface utilisateur,
    Les besoins peuvent être également liés au matériel et à la communication avec d’autres appareils.
  • Le conseil auprès d’opérateurs pour améliorer l’expérience utilisateur de produits existants.

Quel que soit le donneur d’ordre, externe ou interne, le Studio Design écoute et capture les besoins en gardant toujours à l’esprit une ligne directrice ; la simplicité d’utilisation.

Au cours de cette phase de capture, les principaux thèmes abordés seront :

  • Les fonctionnalités standards à être proposées :
    - Télévision Linéaire,
    - Vidéo à la Demande,
    - Télévision de rattrapage,
    - Enregistrements locaux ou distants,
    - Présence d’application tierces…
    - …
  • Les fonctionnalités plus spécifiques :
    - Communication entre appareils,
    - Partage de contenus entre utilisateurs
    - Gestion de l’affichage des publicités dans l’interface utilisateur
    - …
Exemple d’intégration de la publicité sur Frog Turnkey
Partage d’un film à un autre utilisateur dans Frog Premium
  • Appareils concernés par l’interface graphique :

L’un des éléments importants dans la capture de ces besoins sera l’identification des dispositifs qui devront supporter cette expérience utilisateur (décodeur, tablette, smartphone ...).

Nous sommes habitués aux mobiles particulièrement puissants, ce n’est malheureusement pas la même chose pour les décodeurs qui sont majoritairement subventionnés par l’opérateur et pour lequel chaque euro compte.

La plupart du temps, Nous nous retrouvons avec des décodeurs qui ont peu de mémoire, pas d’accélération graphique et une puissance de calcul de 5 à 10 fois inférieure à celle d’un smartphone. Cela doit être pris en compte dans l’expérience utilisateur proposée.

First Frog by Wyplay Reference Hardware
  • Rassembler et traiter les données à afficher

Une fois les besoins définis et les contraintes bien identifiées, il convient de lister l’ensemble des informations à afficher. Puis, organiser ces différentes informations par catégorie, cela permettra de passer à l’ étape suivante.

  • Définir les scénarii

Ce sont les chemins utilisateur qui identifieront quand l’utilisateur aura besoin de la bonne information et surtout, comment y accéder.
Quelques exemples :
- Par quelles interactions accéder aux informations d’un programme vu en Direct ?
- Par quelles interactions lancer un enregistrement ?
- Comment effectuer une recherche ?

LA RÉALISATION

Nous pouvons maintenant commencer à donner vie à cette UI.

Proposition de UI pour Frog Premium
  • Définir le style graphique

Tous les scénarii sont définis ?

Parfait, nous pouvons passer à la définition du style graphique de la UI. Il est très important de respecter les conclusions des étapes antérieures car il va falloir :

- Avoir une direction artistique au service de l’expérience utilisateur, tout en respectant les tendances actuelles.
- Respecter les demandes des différentes sources.
- Prendre en compte les contraintes matériel afin d’avoir une expérience la plus fluide possible.
- S’assurer d’une expérience homogène sur tous les supports.

  • Définir les animations

L’interface utilisateur est animée mais cette animation doit servir l’expérience utilisateur et non juste pour un effet waow. Elle accompagne l’utilisateur pour l’aider à comprendre ses actions, lui signifier un travail en cours, renforcer un élément graphique, etc.

Exemple de micro interaction aidant à la compréhension
  • Réaliser des prototypes

Afin de valider certaines idées d’interaction, il est important de créer des prototypes aidant à tester ces concepts. Peu importe la technologie utilisé.
Cela permet d’éviter les erreurs et d’affiner la navigation. Ces prototypes sont aussi la meilleure façon d’inclure l’opérateur dans le processus, les phases précédentes étant assez abstraites.

  • Ecrire les spécifications graphiques

C’est le cahier des charges de la UI. Ce sont toutes les étapes précédentes réunies dans un document. Tous les écrans y sont parfaitement détaillés.
Une fois ces spécifications graphiques rédigées et validées par le client, il est temps de passer la main aux équipes de développement et d’intégration de la UI.

Specifications graphiques de la Channel list, Frog Turnkey
  • Un support permanent pour terminer le projet

Il y aura toujours des ajustements à effectuer liés aux contraintes de développement. L’équipe Studio Design travaille donc en étroite collaboration avec les équipes de développement ou d’intégration pour s’assurer de la bonne implémentation des directions artistiques et des performances attendues.
Et au bout de quelques mois, la UI voit le jour en version finale, parfaitement intégrée à son produit.

Aujourd’hui deux produits Wyplay on une UI réalisée par le Studio Design, Frog Premium & Frog Turnkey.


< Précédent