Aller directement au contenu

Ergonomie des players de musique en ligne

19/08/2010
2

Les plateformes de streaming de musique sont aujourd’hui entrées dans les habitudes de millions d’internautes, attirés par la possibilité d’accéder gratuitement à une multitude de titres. Ces plateformes permettent une écoute immédiate des musiques, sans téléchargement préalable. Notre consommation de musique est ainsi passée d’une expérience « desktop » (traditionnellement iTunes ou Windows Media Player) à une expérience « web », une interface unique autorisant un accès depuis n’importe quel ordinateur et des fonctions de partage avancées.

Les plateformes de streaming de musique sont nombreuses et se différencient via la richesse de leur catalogue, mais également par leur confort d’utilisation.

Dans cet article, nous nous intéressons principalement à l'ergonomie des players, c'est-à-dire l’interface de contrôle de lecture et d’affichage des informations. Quelles sont les meilleures pratiques en termes d'interface, quelles sont celles à éviter ? A quoi pourrait ressembler l'interface du player idéal ?

Ne noyez pas l’utilisateur sous les fonctionnalités

récepteur-radio-90s
Récepteur radio des années 90

Dans les années 90, les récepteurs radio et lecteurs CD se sont progressivement enrichis d’une quantité de fonctions avancées, donnant lieu à des produits acnéiques… pardon, couverts de boutons. Cette multiplication des fonctionnalités a surchargé les récepteurs, rendant leur utilisation parfois trop complexe. Lors de la réalisation d’un player web, la tentation peut être forte d’intégrer un grand nombre de fonctionnalités (shuffle on/off, repeat 1X, equalizer…etc). Si ces fonctions peuvent intéresser une minorité d’utilisateurs, elles risquent surtout d’encombrer le player, et nuiront à son confort d’utilisation.

Prenons l’exemple de Wormee, le site de musique à la demande d’Orange. Celui-ci a été lancé en avril 2009, il s’agit donc d’une plateforme qui souffre de quelques erreurs de jeunesse. Le parti pris a été d’intégrer l’ensemble des informations et fonctions dans un même cadre, à la manière d’un écran LCD. Le résultat peut être assez déroutant pour l’utilisateur, dans la mesure où :

  • les informations sont trop nombreuses et insuffisamment hiérarchisées
  • le fait d'employer la métaphore d'un écran LCD laisse supposer que l'on ne peut pas agir directement dessus
  • la taille réduite et l'aspect des contrôles situés sur l'écran n'incitent pas à cliquer dessus.

lecteur-player-Wormee
Le player de Wormee

En effet, alors que l’interaction avec un player se limite souvent à : « play », « morceau suivant/précédent » et « volume », ces trois éléments sont ici noyés dans la masse d’informations au sein du player. Par exemple, l’icône de réglage du son est limitée à sa portion congrue, alors même qu’elle est capitale. De même, l’écran du player est tellement chargé qu’il n’y a pas suffisamment de place pour afficher la pochette de l’album (il faut cliquer sur le symbole à droite).

A l’inverse, le player de Spotify est un modèle de simplicité et de sobriété (Spotify fait figure d’exception dans notre analyse, n’étant pas un site mais un logiciel de streaming musical). Les fonctions essentielles sont les seules affichées : le bouton le plus important, « Play » est en surbrillance, les fonctions « play » et « pause » sont regroupées dans un même bouton, le bouton « stop » (peu utile en plus de la fonction « pause ») n’existe pas, les réglettes de volume et d’avancement du morceau sont suffisamment grandes…etc.

lecteur-player-Spotify
Le player de Spotify

Recommandations

  • Définir/prioriser les usages principaux et secondaires et y associer une taille et une place relative
  • Profiter de l’espace disponible pour les fonctions les plus utilisées plutôt que de compacter des fonctions principales et secondaires ensemble

Ne proposez pas un player trop « encombrant »

lecteur-player-Deezer
L'ancien player de Deezer

Les premiers sites de musique à la demande, qui ont émergé à partir de 2006-2007 (Pandora, Deezer…etc), ont tous commencé par offrir des players traditionnels : de forme carrée avec les informations dans la partie supérieure du cadre, et les boutons de contrôle dans la partie inférieure (voir l’ancienne version de Deezer ci-contre –V2–).

Ce type de présentation semble être progressivement abandonné au profit d’une présentation à l’horizontal (voir le nouveau player de deezer ci-dessous), comme le proposent les logiciels Itunes ou Spotify.

lecteur-player-barre-lecture-Deezer
Le player actuel de Deezer

Quels sont les avantages de cette mise en forme ? Elle est avant tout cohérente avec la manière dont on se représente classiquement le temps : à l’horizontal. De plus, elle permet de dégager un maximum de place pour le reste du contenu du site. Si le player est l’élément le plus important dans un site de streaming musical, cela ne signifie pas qu’il doit occuper un maximum d’espace. Or, la forme carrée a tendance à rendre peu utilisable la zone en dessous de celui-ci. Par exemple, sur le site de Wormee, une large marge à gauche est occupée par le player, la droite de la page est occupée par la publicité… et il ne reste plus qu’une étroite zone au milieu de la page pour afficher le contenu-même du site : les résultats de recherche et les recommandations. Cette mise en forme se base sur l’idée que tout ce qui est important doit apparaitre en début de page, ce qui entraine un manque de cohérence graphique.

Wormee-zoning
L’interface de Wormee

A l’inverse, la forme «horizontale» (voir Deezer ci-dessus) est particulièrement efficace, puisqu’elle permet d’afficher plus de contenu sur une hauteur de page. De plus, cette forme permet d’étirer en longueur les deux réglettes importantes pour l’utilisateur: l’avancement du titre et le réglage du volume.

Idée originale, chez Grooveshark, les informations sur le titre ainsi que les options de partage n’apparaissent que lorsque l’utilisateur survole la barre d’avancement. Cette mise en forme ne permet pas un accès très intuitif aux informations sur le titre et aux fonctions sociales, mais rapproche l’interface de celle d’un logiciel. Ce concept rend l’interface de Grooveshark bien plus sobre que celle de Wormee

lecteur-player-Grooveshark
Le player de Grooveshark

Ainsi, les players ont tendance à devenir plus simples, et à adopter une forme tout en longueur. Cette plus grande sobriété ne signifie pas que le player devient moins visible, au contraire, un bon player doit être simple, mais bien placé dans la page.

Recommandations

  • L’utilisation d’un bandeau horizontal permet de représenter la continuité temporelle, et permet de dégager de l’espace pour le reste des contenus du site.
  • Préférez une identité graphique sobre, proche de celle d’un logiciel.

Privilégiez un player toujours visible

Un player « traditionnel » (de forme carrée, positionné en haut de la page) présente l’avantage d’être bien visible, mais est très consommateur en termes d’espace. En effet, si l’utilisateur souhaite par exemple consulter une longue liste de résultats de recherche, il peut être obligé de scroller de haut en bas pour accéder à l’ensemble des fonctions.

Le choix d’un player de forme horizontale permet d’économiser cet espace précieux et limite ainsi la nécessité de scroller. Mais une autre solution est bien plus habile : le player fixe, ancré dans la fenêtre du navigateur. C’est par exemple le choix de WeAreHunted, un site mettant en avant les titres les plus discutés et plébiscités sur les réseaux sociaux. L’interface du site est un modèle de sobriété. Le contenu occupe la totalité de la page, alors qu’un player très fin et ancré en haut n’apparait que si on lance la lecture d’un titre.

Lecteur-player-Wearehunted
L'interface de Wearehunted

Cet ancrage dans la fenêtre apparait comme la meilleure solution pour concilier accès au contenu du site, et rapidité d’accès au player. Ce parti-pris est également celui de Jiwa, qui a ancré son player en bas de la page :


Le player de Jiwa

Sur le site Grooveshark, le player n’est pas le seul élément ancré dans la page : les menus ainsi que la playlist en cours occupent également une position fixe dans la page. De plus, lorsque l’utilisateur change la taille de la fenêtre de son navigateur, la taille de la barre de progression s’adapte à la taille de l’écran. Ainsi, l’expérience utilisateur offerte par Grooveshark est-elle très proche de celle d’un logiciel, à la manière de Spotify ou iTunes.

Recommandations

  • Un player ancré dans la fenêtre du navigateur permet à l’utilisateur de toujours pouvoir contrôler la lecture, où qu’il soit dans la hauteur de la page.

Pour conclure, « less is more »

En guise de conclusion, plusieurs bonnes pratiques se dégagent, mais il est également nécessaire de poser les bases d’une analyse des besoins de l’utilisateur. Cette analyse permet d’une part de prioriser les fonctions les plus utiles et attendues, et d’autre part de dégager les fonctions secondaires, ou qui pourraient faire l’objet d’un compte payant par exemple.

Le player le plus ergonomique est souvent le plus sobre. Sans pour autant éliminer certaines fonctions, le plus important est de concevoir une interface centrée sur les besoins prioritaires de l’utilisateur. La définition de ces besoins doit passer par une analyse de la tâche, permettant d’identifier les besoins réels de l’utilisateur (besoins exprimés comme besoins latents) (voir la méthode Usabilis d’analyse de la tâche).

En termes de présentation, la forme horizontale est à privilégier (car cohérente avec la représentation mentale de la temporalité), alors que l’ancrage dans la fenêtre du navigateur permet un accès en permanence au player ; offrant ainsi une expérience proche de celle d’un logiciel.

Notre player idéal ? Comme Spotify, il ne mettrait en avant que les fonctions essentielles de lecture, il serait presque aussi sobre que celui de WeAreHunted, et aussi proche de l’expérience logicielle que Grooveshark. Pour l'heure, nous attendons avec impatience le player qui sortira du prochain rapprochement entre Wormee et Deezer.

En termes de méthodes, Usabilis propose notamment l’enquête utilisateur ou le focus group, afin de connaitre les besoins et leurs priorités. Ces méthodes s'inscrivent dans une démarche centrée utilisateur où la conception d'une interface est directement guidée par les objectifs d'utilisation.

Si la plupart des sites de musique à la demande sont construits autour du trio « un champ de recherche, un player, des playlists », certains ont opté pour une remise à plat totale de cette organisation de l’information. En attendant, Musicovery vaut le détour, ne serait-ce que pour le choix de ses couleurs acidulées ! Le résultat est original… mais pour le moins déroutant.

2 Commentaires

  • katsoura dit :

    Je me souviens de Nielsen et sa recommandation pour labelliser les icônes de lecture (icône + texte). Je suis plutôt d’avis que les boutons de base (play, stop, pause, suivant, précédent) sont intégrés par tous. Les plus anciens se souviennent de ces symboles sur les radiocassettes, les plus jeunes et leur mp3 sont habitués à ces symboles universels.

    Spotify, souvent entendu parlé mais jamais essayé pour la simple et bonne raison qu’il est impératif de s’enregistrer. « We are Hunted » c’est simple: tu vas sur le site, tu choisis et tu lances la musique.

    Il y a quelque temps, j’avais fait un post sur les players vidéo:

  • coldplay dit :

    musicovery.com déroutant… c’est pour cela que l’interface vient d’évoluer pour quelque chose de plus sobre…

    less is more a été ici aussi la ligne de conduite.

    à noter que contrairement à beaucoup de site, musicovery a été prévu pour ne pas avoir à scroller verticalement dans la page… cela sera un plus lorsque les utilisateurs accédereont au site sur des ecrans avec des resolutions moins importantes (mobile, tablette, netbook)

Laisser un commentaire