Rethinking UX

Repenser une fonctionnalité YouTube

Lors du workshop Rethinking UX à l’HEAJ de Namur, nous avons travaillé par groupe de 4 étudiants. Le but étant de repenser un site afin d’optimiser l’expérience de ses utilisateurs, nous avons analysé YouTube et les différentes fonctionnalités qu’il propose.

YouTube est un service d’hébergement sur lequel les utilisateurs peuvent regarder des vidéos de diverses catégories. Il intègre également des fonctionnalités sociales telles que le partage, l’appréciation ou le commentaire. Il fait partie des sites web les plus visités au monde. Ainsi, il atteint le milliard de vidéos vues au quotidien début 2017.

L’équipe

Gaëtan

Gaëtan

Étudiant en design web & mobile. Fan de metal rock et de jeux vidéo, pratique la reconstitution médiéval.

Créer une playlist
Cindy

Cindy

Fan d’animes, jeux vidéos, lecture, écriture et de musique. Trouve son bonheur dans le design web & mobile.

Publier une vidéo
Bryan

Bryan

Étudiant en design web & mobile, lancé en infographie depuis 2015, fan de jeux vidéo et de buffets à volonté.

Publier une vidéo
Émilie

Émilie

Graphiste et étudiante en design web & mobile, fan de micro - édition et de kitsch.

Rechercher et visionner une vidéo

Le processus

Personnellement, nous utilisons YouTube tous les jours. Ça a donc été difficile de trouver des faiblesses sachant que pour nous c’est instinctif de regarder ou publier une vidéo. Bien sûr, nous savons que la lecture automatique peut être insupportable, que regarder du contenu engendre un bombardement de contenu similaire, que liker nécessite la création d’un compte, que certaines vidéos ne sont en fait qu’une image… Mais en plaçant l’utilisateur au centre de notre analyse et en stimulant notre esprit critique, nous prenons conscience que cet outils comporte de nombreux défauts.

fleche

En listant et hiérarchisant toutes les fonctionnalités, nous nous sommes rapidement rendus compte qu’il y en avait énormément. Chacun s’est focalisé sur une en particulier et a déterminé en quoi elle était déficiente. Mais aussi comment la rendre plus claire, plus simple et plus utile pour l’utilisateur.

  • lire une vidéo ; 
  • rechercher une vidéo ; 
  • acheter des films ; 
  • visionner les tendances ; 
  • accéder aux abonnements ; 
  • publier une vidéo ; 
  • partager une vidéo ; 

Rechercher et visionner une vidéo

Choisir cette fonctionnalité peut sembler simple mais c’est la fonction principale du service. Les sous - fonctionnalités sont les plus utilisées et devraient donc être les plus adaptées. Pourtant, certaines pourraient être améliorées sur différents niveaux.

fleche

User testing

Grâce au user testing, nous avons examiné chaque étape du chemin effectué par un utilisateur. Nous avons déterminé avec quels contenus il interagit et où il rencontre des problèmes. Chaque sous - fonctionnalité a donc été pointée et ses avantages et ses inconvénients aussi.

  • faire une recherche ; 
  • supprimer un élément d’une liste de suggestions ; 
  • mettre sur pause / play ; 
  • passer à la vidéo suivante ; 
  • régler le volume ; 
  • régler la vitesse ; 
  • choisir la qualité de la vidéo ; 
  • passer en mode cinéma / plein écran ; 
  • ajouter des sous - titres / des traductions ; 
  • activer / désactiver la lecture automatique ; 
  • visionner un mix ; 
  • triez les cotmmentaires ; 
  • s’abonner à une chaîne ; 
  • like / dislike ; 
  • partager une vidéo ; 
  • intégrer une vidéo.

Avantages

  • l’indication du mot  « rechercher »  dans le champs de recherche ; 
  • les propositions aléatoires selon le texte entré dans le champs de recherche ; 
  • les propositions déjà consultées sont en mauves et la possibilité de les supprimer ; 
  • les fonction des boutons apparaissent lors du survol ; 
  • l’apparition de l’image d’un endroit précis au survol de la timeline.

Inconvénients

  • les propositions de la page d’accueil sont relatives à ce qui a déjà été visionné ; 
  • la surcharge cognitive ; 
  • le passage à la vidéo suivante via la vidéo possible mais pas d’accès à la précédente ; 
  • la lecture automatique activée automatiquement ; 
  • la nécessité d’avoir un compte pour certaines fonctionnalités, surtout pour signaler une vidéo ; 
  • l’insignifiance de la fonction  « intégrer » ; 
  • la surcharge d’icônes sociaux lors du partage ; 
  • certains boutons ne pas suffisamment explicites ; 
  • les différents contenus ayant la même fonction.

Améliorations

  • proposer une liste de suggestions en fonction de ce qu’on a déjà regardé et une liste aléatoire ; 
  • indiquer la possibilité de faire bouger le curseur ; 
  • ajouter un bouton qui permet d’aller à la vidéo précédente ; 
  • rendre certains boutons plus explicites.

Effectivement, quelques points peuvent poser problème. Quand nous nous trouvons sur une page destinée à une vidéo et que nous ne naviguons pas régulièrement sur le site, nous pouvons considérer qu’il y a une surcharge cognitive. De plus, de nombreuses informations ne sont pas toujours explicites si nous tenons compte de l’ensemble des utilisateurs. Et certains boutons ne sont compréhensibles que lors de leur survol. Ensuite, les suggestions tant dans la page d’accueil que dans les listes, sont redondantes et peuvent bloquer de nouvelles découvertes. Certaines actions sont irréversibles et la lecture automatique est, quant à elle, activée automatiquement. Pourquoi pas l’inverse, et l’activer seulement si on le souhaite ?

Lire plus

L'étude comparative

L’étude comparative a permis de voir ce que d’autres sites proposaient de plus, ou de moins, pour une même fonctionnalité. Les avantages de Vimeo, Instragram et Dailymotion ont réellement contribué à l’évolution des sous - fonctionnalités étudiées, principalement dans la clarification et la disposition des éléments.

Vimeo

  • la description de la fonction  « rechercher »  est explicite dans le champs de recherche ; 
  • le mode par défaut correspond au mode cinéma de YouTube ; 
  • le réglage du volume se fait avec des clics ; 
  • les sous - fonctionnalités principales sont accessibles en mode plein écran ; 
  • la création d’un compte pas nécessairement via Google ; 
  • les boutons sont plus explicites ; 
  • la vidéo en cours de lecture est démarquée des autres ; 
  • les infos principales restent visibles lors du scroll ; 
  • le passage d’une vidéo à l’autre via la vidéo en cours de lecture ; 
  • les solutions spécifiques pour chaque  « type »  de partage ; 
  • les paramètres de l’intégration.

Instagram

  • la loupe et le mot  « rechercher »  sont au même niveau ; 
  • la suppression d’un élément dans le champs de recherche ; 
  • le scroll de la liste de suggestions ; 

Dailymotion

  • la recherche engendre une opacité sur le reste de la page ; 
  • la mise en évidence du bouton play / pause ; 
  • la fermeture des réglages via une croix ; 
  • la liste de suggestions est infinie grâce à des flèches ; 
  • la vidéo en cours de lecture est mise en évidence.
Lire plus

Le persona et le user journey

Les personas ont permis d’établir les besoins précis des utilisateurs. Celui - ci me semble intéressant car son comportement avec YouTube diverge du nôtre. Se mettre à sa place nous force à observer tout et à chercher des défaillances auxquelles nous ne pensons pas forcément. Et si ceci ne fonctionnait pas ou cela ? De plus, les  “ user journey ”  relatifs à ces personas, ont également permis de trouver d’autres problèmes rencontrés par ces utilisateurs types.

Christophe, homme de 47 ans

Besoins et objectifs : Il utilise principalement YouTube pour regarder des vidéos sur plusieurs sujets comme la musique, la santé ou la nature.

Technologie : Il utilise Internet de façon régulière pour faire des recherches basiques. Tant que ça fonctionne, il ne s'inquiète pas mais peut perdre patience.

Contexte d’utilisation : Il utilise seulement YouTube chez lui sur son ordinateur de bureau pour passer le temps.

Interactions pour atteindre ses objectifs :

  • Il entre le site de YouTube dans son navigateur.
  • Il entre du texte dans le champs de recherche de YouTube.
  • Il valide son choix en cliquant sur la loupe.
  • Il choisit une vidéo parmi les propositions.
  • Il a des difficultés à régler le son.
  • Il regarde d’autres vidéos grâce à la liste de suggestions.
  • Il fait une nouvelle recherche car la liste de suggestions n’évolue plus beaucoup.

Ressentis : Il est plutôt satisfait du site. Il trouve la liste de suggestions avantageuse mais s’en lasse vite car les vidéos sont souvent les mêmes.

Attentes et besoins : Il souhaite visionner des vidéos.

Améliorations

  • proposer une liste de suggestions en fonction de ce qu’on a déjà regardé et une liste aléatoire ; 
  • régler le volume via des clics ; 
  • rendre certains boutons plus explicites ; 
fleche

Prototyping

En constituant une liste de tâches à réaliser, nous avons fait tester nos premiers wireframes papiers avec les améliorations qui nous paraissaient judicieuses.

En tenant compte des réactions et des commentaires, nous avons compris ce qui pouvait être encore modifié pour le bien de l’expérience utilisateur. Après avoir retravaillé nos wireframes, nous avons pris la peine de les faire tester à nouveau et ce jusqu’à ce que l’utilisateur ne rencontre plus de problèmes.

Prototyping rapide Prototyping rapide

Wireframes

Résultat final

Finalement, nous avons mis au net nos wireframes finaux sur Sketch ou Photoshop. Une animation montre comment l’utilisateur se comporte avec la fonctionnalité et ses améliorations. Nous avons également tester nos aboutissements sur InVision où nous avons créé des interactions afin de rendre les plus réelles possible.

Ce workshop a contribué, une fois de plus, à notre ouverture d’esprit sur l’univers du web. Créer un site ne se résume pas à faire un design attractif, notre rôle est aussi de penser des sites fonctionnels essentiellement pour ses utilisateurs.

fleche