La semaine dernière j’ai découvert sur TechCrunch le nouveau service de gestion musicale Musana. Cette version béta permet entre autre aux utilisateurs de stocker ses musiques avec la possibilité de les écouter par le biais de leur mobile. Je vous invite à  écouter l’interview de son fondateur Frédéric Thuard qui explique davantage son fonctionnement. (Cet Ergospeed va s’attarder sur le manque de feedback de ce service.)

A propos

Musana est un service de gestion musicale en ligne qui permet à  l’utilisateur de gérer et de partager sa musique, d’écouter ses mp3 depuis n’importe quel ordinateur connecté ou par le biais de la 3G d’un téléphone mobile, mais aussi de découvrir de nouveaux artistes. Pour en savoir, plus je vous invite à  lire le blog de Musana.

Manque de force visuelle des feedbacks

Le but des feedbacks est d’informer et de prévenir l’utilisateur sur ses actions, d’anticiper son comportement face à  une interface nouvelle. Les feedbacks permettent une navigation rapide et compréhensible afin de renseigner et de rassurer l’internaute. Ici, Musana manque d’informations ponctuelles ou plutà´t elles ne sont pas assez visibles et risquent d’occasionner des actions inutiles à  l’utilisateur.

Upload de fichier mp3

Lorsque l’utilisateur veut uploader ses musiques, ce dernier arrive sur une page qui le renseigne clairement des étapes qu’il doit franchir. Ses indications sont mentionnées par des intitulés assimilés à  des boutons significatifs. Malgré cette présentation, l’utilisateur peut être susceptible d’être confronté à  des obstacles : une organisation visuelle diminuée, à  l’étape 2, qui manque de visibilité sur ses feedbacks pas assez apparents.

L’étape 2 : Aucun avertissement ou aucune information ponctuelle indique à  l’utilisateur ce qu’il doit faire après avoir sélectionné ses mp3. Après observation de l’interface, l’utilisateur perçoit en dessous de chaque morceau une indication qui lui permet de deviner le déroulement des évènements qui vont suivre :

• La mention « uploading… » s’affiche en-dessous du premier titre de la liste. Malheureusement, elle est trop petite et n’est pas assez mise en avant. Le corps typographique et sa couleur ne permettent pas une forte distinction visuelle par rapport à  l’ensemble du site.
• Un indicateur de progression de couleur bleu s’affiche juste à  cà´té de la mention « uploading ». Il s’agrandit au fur et à  mesure du chargement du morceau. Ce dernier apparaît souvent tard dans le processus et n’est pas perceptible de suite. La présence du bouton « stop » juste à  coté du titre n’est pas assez compréhensible même si l’utilisateur peut deviner son action : stopper l’uploading qui est en cours.
• A la fin du chargement, la mention « Complete. File successfully added » apparaît avant la disparition du morceau. Le titre suivant monte en première position et commence à  être uploadé. Notons que ces informations sont en anglais et pourtant le site est sur la version française. Ouille !

Ce manque de visibilité peut sans doute perturber l’utilisateur dans sa navigation et risque plusieurs comportements non-souhaité :

• L’internaute peut passer directement à  l’étape 3 sans s’apercevoir des actions qui se déroulent à  l’étape 2 : une nouvelle page se charge et supprime sa liste de mp3 préalablement sélectionnée. Le fait de ne pas voir distinctement les informations ponctuelles de l’étape 2 risque de faire croire à  l’utilisateur que l’affichage de ses mp3 sur le site signifie qu’ils sont déjà  uploadés sur Musana.
• Ou bien, l’utilisateur va perdre son temps à  chercher un bouton « valider le chargement de mes mp3 » qui n’existe pas. L’inefficacité de l’utilisateur face à  son problème entraînera sans doute un agacement non souhaité surtout lorsqu’il s’apercevra de la barre de progression par la suite.
• Le bouton « Annuler le chargement » est situé juste au-dessus de la liste de sélection. Son positionnement peut porter à  confusion : si l’internaute ne lit pas son intitulé. Il peut instinctivement cliquer dessus croyant qu’il valide le chargement de ses titres. Malheureusement cette action est l’inverse désirée et supprime l’ensemble de la liste.

Ecoutez sa playlist

Drag&Drop : L’utilisateur étant confronter à  une nouvelle interface, ce dernier va l’analyser afin d’identifier certains éléments qui lui permettront de comprendre son fonctionnement. Pour l’aider, il faut penser à  :

• Des éléments déplaçables et identifiables aussi bien dans leur déplacement que dans leur destination afin de rassurer l’utilisateur.
• L’internaute doit voir en temps réel l’action qu’il est en train de faire. Ce retour immédiat lui permet de constater l’efficacité du site.
• Lors du « déposer », l’interface doit montrer le résultat de l’action. Les éléments déplacés doivent se manifester visuellement afin de garantir à  l’utilisateur une validation de ses actes.

Quand l’utilisateur arrive sur la page permettant l’écoute de ses mp3, aucune information ou guide visuel lui indiquent l’action à  faire. Après plusieurs tâtonnements et clics, l’utilisateur va sûrement deviner et comprendre le fonctionnement de cette interface. La plupart des actions se font grâce à  une navigation glisser-déposer ce qui implique davantage l’utilisateur sur Musana.

Quelques difficultés sur cette page :

• Lors de la sélection d’un album ou d’un artiste, l’utilisateur doit diriger sa sélection vers le visuel qui symbolise un CD. Cela déclenche le player qui réapparaît lors du rollover de la souris pour agir dessus.
• Pour l’écoute d’un morceau de la playlist, un double-clic suffit pour lancer la lecture. L’organisation des titres se fait pas le biais d’un drag&drop limité à  la surface d’interaction de la playlist.

Attention à  la localisation du bouton « Accueil » qui permet à  l’utilisateur loggé d’aller sur la home page afin de découvrir la musique proposée par Musana. Son positionnement n’est pas assez voyant surtout qu’il ne figure que dans le pied de page.

Une présentation soignée

Lors du glisser-disposer de l’album une animation se joue et laisse apparaître une animation qui affiche la jaquette du cd avec ses informations. Une animation réussite et fluide qui dévoile l’ouverture tel un boîtier cristal ou un digipack. Les informations proviennent de GraceNote qui identifie et « normalise » les fichiers lors de l’upload (reconnaissance des tags, titres, jaquette, paroles…).

Conclusion

Ce que je regrette sur Musana est l’impossibilité de naviguer sur le site ou d’uploder des fichiers sans interrompre l’écoute de ma playlist. Une solution telle que la déjà  fait Box.net ou Steekr.com peut-être envisageable : un pop-up contenant une application en Java permettant de glisser-déposer des fichiers dedans. Elle peut résoudre cette frustration et améliorera le transfert des données. Ou encore prévoir un outil comme l’Uploadr que propose Flickr.

Après la lecture de cet Ergospeed, j’espère que j’ai été compréhensible et que vos neurones ou vos yeux ne vous brûlent pas de trop ? Sinon bon Aspro !

En décembre 2007, Adobe met en ligne leur nouveau site web : changement de stratégie, changement d’ergonomie et de choix graphique. Plusieurs éléments m’ont surprise et surtout fait sourire lors de ma première visite car Adobe s’est permis d’oser des changements et ils ont bien eu raison. (cet Ergospeed est consacré seulement à  la page d’accueil)

A propos

Adobe a été fondé en décembre 1982 par John Warnock et Charles Geschke qui avait quitté le Xerox PARC pour améliorer et commercialiser le langage de mise en forme PostScript refusé par ce dernier. Plus d’infos : Wikipédia est là  !

Un logo qui laisse place au contenu

Adobe s’est permis de bouleverser la localisation habituelle des éléments tel que le positionnement du logo qui est situé en haut à  droite et non à  gauche. Le logo est associé au moteur de recherche qui est positionné sur un module en hauteur, flottant à  droite Cette notion est accentué par l’ombre qui le souligne. Le module s’ajuste selon le format de votre fenêtre de navigation. Selon la distance qui le sépare de l’ensemble du contenu, qui lui est fixé sur la gauche, le logo Adobe s’estompe mais conserve sa fonction de bouton retour à  la page d’accueil grâce à  sa couleur forte qui constitue son identité depuis 1982.

Notons l’absence du bouton « ok » au moteur de recherche. Cela n’est pas un oublie d’Adobe mais une adaptation à  leur cible comme le choix de positionnement de leur logo.

Un site ciblé et affirmé

Un site web doit répondre et satisfaire la cible que vous souhaitez atteindre. Chaque personne a un profil, un passé et une profession différente. Il est important de cibler vos utilisateurs afin de répondre au mieux à  leurs demandes au cours de leur navigation sur votre site. Si vous essayez de concevoir un site pour tout type d’utilisateur vous risquez de provoquer une déception et la fuite de votre cible de départ.

Avec ce nouveau site web, Adobe a très bien su s’adapter à  sa cible :
Si la discrétion du logo est volontaire, cela est surement du au fait qu’Adobe n’a plus besoin de s’afficher. L’identité graphique de la gamme de leurs produits est connu et reconnu de leurs utilisateurs et de leurs clients. Cette discrétion permet aussi d’accentuer l’impact visuel des logotypes qui constituent cette gamme.

La vidéo d’introduction, qui est « très créative », affirme leur position, d’une part de sa qualité de réalisation mais aussi de son importance et de son emplacement sur la page d’accueil. Si la vidéo est tellement mise en avant, cela vient peut-être du faite qu’elle est devenu un format de consommation important sur Internet et qu’elle permet une information direct avec, comme ici, un contenu de qualité permettant de visualiser les performances d’utilisation des produits vendus par la marque.

Le menu est sobre, épuré avec des rubriques très sectoriel par le vocabulaire employé.

Pas de bouton « ok » pour lancer une requête dans le module recherche. Seule une action de la touche entrée sur le clavier valide la recherche. Cela permet à  l’utilisateur un gain de temps en n’encourageant pas à  l’utilisation de la souris.

Le bouton « fermer/rejouer » de la vidéo est aussi un élément qui est surement compréhensible par un bon nombre d’utilisateur habitué à  naviguer sur le web. Ce carré grisé flottant dans un espace vide et superposé à  la vidéo est tantà´t une croix pour stopper la lecture en cours, ou tantà´t une flèche (animée lors du rollover) signalant la possibilité de la rejouer. A aucun moment une infobulle nous informe de sa fonction. Preuve que même ce petit bouton à  une importance dans son utilisation et son absence de renseignement.
Les utilisateurs d’Adobe n’ont sans doute pas besoin de plus de détail… ?

Adobe s’est permis de réaliser un site web répondant au mieux à  leurs utilisateurs qui doivent sans doute être principalement :

• des personnes dîtes créatives
• des personnes ayant des profils liés ou bien travaillant dans le domaine créatif
• des personnes qui utilisent depuis un certains nombres d’années leurs produits
• des personnes qui sont habitués à  naviguer sur le web

Conclusion

Adobe est un éditeur de logiciel présent depuis 26 ans, leur monopole acquis au fil des années leur à  permis de se construire une identité forte avec une communauté qui s’est consolidée au fur et à  mesure de leur croissance. Pour conclure cet Ergospeed, il aurait été ingénieux de la part d’Adobe de substituer le bouton de validation du moteur de recherche par leur propre logo. L’utilisateur n’aurait pas cliqué sur le bouton « ok » ou utilisé la touche entrée de leur clavier pour valider une recherche sur l’ensemble du site mais sur le logo de la marque. Aujourd’hui la manière dont est présenté ce module avec la position du logo laisse envisager cette solution. Dommage qu’Adobe ne l’ait pas fait. Cela aurait été une mini-révolution ! (ok, j’exagère avec le mot « révolution » mais cela aurait été innovant)