Depuis quelques semaines, j’ai le lien de Issuu.com en réserve et je viens enfin de tester ce service. Issuu permet de transformer un PDF en « livre virtuel » (au format Flash) tout en ayant la possibilité de le partager avec d’autres internautes que se soit dans son blog ou sur le site de Issuu.

Partager et consulter

Une des grande qualité du site d’Issuu est son interface simple et épurée permettant une publication rapide et facile du PDF que l’on désire mettre sous format « magazine ». Par la suite, l’utilisateur peut prendre plaisir à  consulter rapidement et de manières multiples son « ouvrage » :

1. L’apparition d’un bouton juxtaposé au bord des pages permet d’informer l’internaute de l’action qui lui permet de faire tourner automatiquement les pages d’un simple clic.
2. Situé dans le menu principale, des flèches permettent aussi de feuilleter le livre.
3. Entre ces deux flèches (2) est situé un picto (non-explicite) qui a pour but d’offrir à  l’utilisateur une consultation du livre sous forme de « planche de contact« . « L’imposition » du livre se superpose au site à  l’aide d’un fond grisé permettant de faire ressortir les previews.
4. Un « Dock » similaire à  la plateforme Macintosh permet aussi une consultation plus rapide du livre avec les previews des pages du livres omniprésentes.
5. Lorsque l’utilisateur désire zoomer sur le livre, il doit simplement cliquer au centre d’une des pages…
6. …ou bien, l’option FullScreenest visible dans le sous-menu.

---

Noter à  la fin du screencast la possibilité de créer un widget ou une page personnalisable : une bonne solution pour les photographes ou graphistes ne pouvant se faire un site web.

Un exemple de widget que l’utilisateur peu importer dans son blog ou un site web.
(photos du site Chairsoftheworld.com)

---

Une qualité FullScreen

Le mode plein écran est bien pratique pour visualiser et voir des détails du document.

La navigation en mode zoom (disponible aussi en mode FullScrenn) est instinctive mais assez inconfortable et peut-être déstabilisant pour lire des écrits.

Conclusion

Ce service est utile pour concevoir un book, une brochure ou un magazine mais certaines contraintes peuvent freiner une utilisation courante : impossible de copier du texte, de télécharger le pdf sources, de partager un livre en public ou privé, l’utilisateur doit préparer un pdf contenant toutes les pages car il n’est pas possible d’uploader pages par pages. Néanmoins, le site est fort agréable à  utiliser et la représentation graphique/animation du livre est très subtile et fine.

---

Le weekend dernier, j’ai eu la chance d’avoir accès à  un OLPC : One Laptop Per Child. Voici mes impressions face à  ce petit bijoux à  moins de 200$ destiné seulement aux enfants situés dans les pays en voie de développement.

A propos

Créé en 2005 aux états-Unis, l’association à  but non lucratif, One Laptop Per Child, a pour but de créer un ordinateur portable peu cher pour permettre à  chaque enfant dans le monde d’avoir accès à  la connaissance et à  une forme d’éducation moderne. Ce projet est financé avec le soutien de plusieurs entreprises (eBay, Google, Marvell…) qui participent à  l’activité de l’association en lui fournissant des expertises et des moyens dans certains domaines comme la logistique, la chaîne de fabrication etc.
Plus d’infos sur Wikipédia ou le site officiel OLPC.

A Savoir : préjugé à  proscrire

Prise en main intuitive mais…

En effet, ayant l’habitude d’utiliser un système Windows ou OS, j’étais assez hésitante sur cette navigation principalement constituée de pictogramme (sans intitulé) avec des localisations totalement différentes des systèmes habituels. Toutefois, après quelques secondes d’observations, la prise en main a été très facile et mes pré-acquis ont été vite oubliés.

Caractéristique : objet destiné aux enfants

Quelques détails qui confirment que ce produit est destiné à  un enfant vivant dans des conditions environnementales rudes :

• Plastique léger, robuste et épais afin de l’impact des chocs et une utilisation brutale.
• Coins arrondis pour éviter des blessures.
• Couleurs péchues, dynamiques et attrayantes.
• Sécurité d’ouverture : l’enfant ne peut ouvrir le laptop sans avoir déplié les antennes wifi.
• Un clavier Qwerty au touché doux et agréable grâce à  sa matière en caoutchouc qui résiste au sable et à  la pluie.
• Poignée ergonomique pour le transport, pour se servir de cet ordinateur comme d’un livre grâce à  son écran pivotable qui peut passer en mode noir/blanc pour une lecture en plein soleil.
• (Ecran 7,5pouces, résolutions 693x620px)
• (Système Linux, processeur / WiFi faible consommation, mémoire Flash.)

Plus d’informations et d’explications sur le wiki de l’Olpc

Pictogramme et rollover

L’OLPC n’a pas d’application mais des Activités : l’association préfère utiliser un langage davantage destiné à  l’apprentissage et à  la pédagogie au lieu d’utiliser des termes technique. Cela permet de familiariser l’enfant à  son nouvel outil. Ce choix est soutenu par une représentation visuelle du système de navigation qui utilise principalement des pictogrammes « ultra-culturel » (universel) permettant une meilleure compréhension pour l’éducation de l’enfant.

Pour illustrer cette idée de l’icà´ne « ultra-culturel », le wiki de l’Olpc donne comme exemple le pictogramme de l’Å“il (ci-dessus) qui identifie la webcam de l’ordinateur. Cette Å“il est celui de l’ordinateur et non de l’utilisateur. Il représente ce que peut voir et saisir l’ordinateur. Dans notre culture occidentale, on aurait tendance à  mettre une camera ou un objectif. Ici, l’association a préféré créer un pictogramme pouvant parler à  tous en humanisant l’ordinateur.

La navigation sur le système de l’Olpc se fait principalement grâce aux pictogrammes et aux rollovers qui permettent d’afficher les actions ou options des activités qu’ils proposent.

Note : Le raccourcie pour retourner au bureau est situé seulement à  la troisième position dans la barre d’environnement. La priorité est mise sur la communication, le réseau et le partage avec d’autres enfants qui auront eux aussi un Olpc.

Le centre d’activité est un repère visuel par sa position centrale sur le bureau mais aussi par la disposition des activités qui s’affichent chronologiquement autour du logo.

J’ai noté un raccourci fort utile qui permet de superposer le cadre de la barre d’environnement et des activités par dessus l’activité en cours.

Le touchpad manque parfois de précision, les activités sont longues au chargement et la barre de défilement verticale (scroll) est trop fine par rapport au curseur qui est de taille importante. Je ne m’avancerais pas plus car je ne correspond pas à  la cible de cette ordinateur et j’ai de forte habitude sur PC ou Mac ce qui n’est pas le cas de ces enfants. Cette initiative est toutefois honorable et mérite qu’on s’y intéresse.

Conclusion en vidéo

Pour finir ce billet je vous invite à  regarder 2 vidéos fortes intéressantes. La première est l’interview de Nicholas Negroponte, fondateur du Media Lab du MIT, qui a eu lieu le 2 février dernier sur France24. Ce reportage est très instructif car il confronte, entre autre, l’Olpc et l’arrivée des ordinateurs à  moins de 300$. Nicholas Negroponte défend son association avec justesse et conviction. La deuxième vidéo est un reportage sur les designers de FuseProject. Ils expliquent comment ils ont conçu l’Olpc avec ses étapes d’évolutions, ses contraintes, les différentes maquettes…

La semaine dernière Alexandre Huete, que vous avez découvert avec l’univers ErgoIHM, m’a envoyé un lien vers un nouveau « moteur de recherche » qui permet de soutenir gratuitement une à  quatre ONG de son choix : Hooseek.com

MAJ : « Mardi 27 mai 2008, nouvelle version d’Hooseek »

« Aujourd’hui le 10 avril 2008 hooseek vient de dépasser les 2 000 000 de recherches effectuées par les internautes. Nous avons de plus en plus d’utilisateurs, et les sommes récoltées pour les associations de votre choix sont de plus en plus importantes. BRAVO & MERCI à  Tous et à  Toutes. L’équipe d’Hooseek »

A propos

Fondée en novembre 2006, Hooseek est un « moteur de recherche » offrant la possibilité aux internautes de soutenir plusieurs ONG de leur choix gratuitement. Grâce aux partenariats signés avec des moteurs de recherche, l’échange du trafic établie et l’affichage des annonces commerciales des moteurs, Hooseek reverse la moitié de leur chiffre d’affaire aux ONG. Plus d’infos…

L’Innovation par le confort

La qualité du service vient de la possibilité de consulter les résultats d’une requête sur Google, Yahoo, Live Search ou Ask sur une seule et même page avec le choix de chercher par différents thèmes (image, dico, web et emploi).

Cette page d’accueil, sobre et épurée, reprend le logo de Hooseek au centre de la page et installe au mieux le champ de saisie du moteur. Toutefois des petits défauts subsistent (surtout en accessibilité visuelle) :

• Lorsque l’utilisateur sélectionne un des thèmes de recherche, la sélection reste perceptible pour l’utilisateur car le picto change de couleur mais malheureusement son intitulé disparait. Il manque une information omniprésente qui permet de guider l’utilisateur.
• Le champ de saisie du moteur est de dimension trop importante par rapport au bouton de validation qui est de taille insuffisante.
• Ce problème de taille se retrouve sur les pictos du bas qui font office de menu principale. Malheureusement, ils sont illisibles à  cause de leur petite taille.

Le Seeker & le SeekEasy

Le Seeker : l’efficacité d’Hooseek vient entre autre de son « ascenseur universel » qui permet de dérouler à  l’infini les résultats de sa recherche. Cette particularité, fortement pratique, permet de supprimer la pagination ou le fameux « pages suivante ».

Le SeekEasy : L’utilisateur a la possibilité de conserver des résultats qu’il trouve pertinent d’une de ses recherches. Il ajoute sa sélection au « pense-bête » grâce au picto situé à  cà´té du lien. La sélection faite, elle sera affichée sur la colonne de droite. Ce pense-bête interactif se trouve sur chaque thème et permet de s’organiser selon la recherche par thème.

Le SeekCare

Le SeekCare est le service principale que propose Hooseek qui peut se résumer en 1 recherche = 1 don grâce à  ce compileur de moteurs.

Ici, comme sur la page d’accueil, un problème de lisibilité peut freiner l’utilisateur dans sa navigation :

• Les pictogrammes et logos des services sont trop petits
• L’absence de légende ne permet pas de renseigner au mieux l’utilisateur. L’intitulé des thèmes, lors du rollover, s’affichent en dessous du champ texte du moteur à  la différence de l’intitulé des logos qui s’affichent dans la colonne de droite. Un problème de visibilité et de perception s’annonce surtout pour un site élastique.

Pour la recherche d’emploi, un module complémentaire au moteur apparaît et permet de sélectionner la région o๠l’utilisateur veut effectuer sa demande. Toutefois, il ne peut pas rechercher dans plusieurs régions en même temps, ni par contrat, par date de parution…

Menu Principale & bouton retour

Juste une petite remarque sur le logo qui est à  la fois un bouton retour vers la page d’accueil mais aussi le menu principal. Chaque picto est situé juste en dessous et affiche leur intitulé (lors du rollover) en-dessous du logo comme s’ils devenaient la signature du service. Sinon, toujours la même remarque : problème d’accessibilité visuelle.

Conclusion

Un petit clic pour l’homme, un petit geste pour l’humanitaire !
Magnifique conclusion je trouve. En tout cas, j’ai adopté Hooseek et je l’utilise en permanence.

Liens complémentaires :

• Blog Synerg’he tic – Mathieu Crucq
• Adviso.ca/blog – Thomas Tixier
• Groupe Facebook

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)

Comme dit dans un billet précédent, voici un Ergospeed sur le Jukebox3D de Dailymotion mis en ligne hier. Vous allez me dire que je ne suis pas objective car je vis avec la personne qui est à  l’initiative de ce projet. Et surtout que j’ai pu suivre tous les jours son évolution. Oui, j’ai vu son évolution mais je ne l’ai pas testé véritablement. Donc aujourd’hui, jour de congé, j’ai pris mon temps et voici ce que j’en pense :

A propos

En juillet dernier, Dailymotion organise un Hackaton qui permis la création du Dailymotion Labs, véritable laboratoire de l’équipe de développement : une version compatible iPhone dès sa sortie US, une API pour FaceBook, une carte de géolocalisation des vidéos uploadées en temps réel, et aujourd’hui une première version du jukebox 3D.

Cet outil permet de consulter l’intégralité des vidéos de Dailymotion dans un espace tri-dimensionnel sous forme de carrousel. Un cercle représente une page de résultat. Pour accèder aux pages suivantes, un simple clic sur la barre de navigation horizontale permet à  l’utilisateur de voir en 3D le saut d’une page à  l’autre. Il peut aussi naviguer d’une preview à  l’autre à  l’aide des flèches du clavier. Les technologies utilisées pour ce projet sont l’ActionScript 3, Papervision, Flex, et Blender.

Interface et navigation

Cette interface minimaliste, au ton gris, est légère et positionne le contenu des vidéos différemment que dans des blocs bleu et imposant du site actuel de Dailymotion. Le but de ce jukebox n’est pas de remplacer le site (et ne pourra le remplacer) mais permet d’explorer une nouvelle manière de consommer de la vidéo sur le web.

Recherche et preload

La particularité de cet outil est la possibilité pour l’utilisateur de rechercher et de consulter les résultats d’une requête tout en continuant de visionner une vidéo, ce qui est impossible aujourd’hui sur Dailymotion. La recherche du Jukebox est déclinée du site actuel tout en ayant des filtres différents : recherche des vidéos ou des favoris d’un utilisateur, accès aux chaines thématiques, ou tout simplement une recherche classique.

La barre de téléchargement se substitue au champ de saisi lors d’une requête. Son positionnement permet à  l’utilisateur de voir le comportement de cet outil sans gêner la lecture de la vidéo en cours. Son animation et sa couleur accentue sa visibilité tout en restant discret.

Navigation

La navigation est assez intuitive toutefois beaucoup de lacune en ressorte :

• Les barres de navigation qui servent à  passer d’une vidéo à  une autre, ou à  la page suivante, ne sont pas assez voyantes et se confondent avec le cadre du navigateur. Des boutons en surimpression ou qui apparaissent lors du passage de la souris auraient sans doute été un bon compromis. Je pense à  Flickr qui utilisent cette solution dans le diaporama qu’il propose à  leur utilisateur. Même si des infobulles apparaissent, cela n’est pas suffisant pour comprendre directement leur fonction.
• Il n’y a pas non plus de défilement ou de rotation des previews lors d’un rollovers de souris. Dommage, cela aurait permis une navigation plus fluide et rapide, comme cela est le cas au clavier.
• Aucune fenêtre ou panneau option ne s’affiche dès l’ouverture de ce Jukebox afin de signaler à  l’utilisateur la possibilité de naviguer à  l’aide du clavier.
• L’absence d’un player vidéo pourrait frustrer l’utilisateur en ne lui offrant pas le contrà´le du contenu. Un player transparent avec le titre de la vidéo intégré serait idéal et règlerait le problème d’information qui pour l’instant s’affiche en haut dans le coin gauche.
• Le temps de chargement des vidéos est parfois long surtout si l’utilisateur décide d’afficher 50 résultats d’une recherche.

Affichage

Lors du visionage d’une vidéo, les previews deviennent transparente ce qui allège le champs de vision et laisse une place plus importante au contenu en cours de lecture. Les vidéos s’enchainent automatiquement l’une après l’autre comme un véritable jukebox, sans interventions de l’utilisateur, ce qui lui évite toutes actions inutiles si ce dernier désire voir l’ensemble des vidéos d’une chaine ou des favoris.

Lors du zoom plein navigateur, le mouvement fluide et « métaphorique » d’une caméra (merci Flash) sublime la vidéo et accentue la profondeur de l’espace tri-dimensionnel o๠se situe le carrousel. Toutefois, lors de cette action, la vidéo se met en pause (seulement sur Windows). Je pense que cela n’était sans doute pas désiré par Sylvain. Mais ça, l’utilisateur ne le sait pas et donc il y a un risque d’agacement.
Le bouton + qui apparait lors du rollover sur une vidéo, de part sa position et son symbole, signale une option à  l’utilisateur. Lors du clic, il se transforme en croix pour devenir un bouton de retour, de fermeture. Merci qui, merci Macintosh ?

Aie !

Lors de l’ouverture du Jukebox, la vidéo se lance automatiquement. Serait-il possible dans la prochaine version, s’il y a une, de couper le son ou bien de ne pas jouer la vidéo d’ouverture, tout simplement. Cela évitera d’agacer l’utilisateur qui n’en pas forcément l’envie sur le moment.

Ma WhishList pour le mois de Noà«l

En espérant que cet outil sera amélioré et qu’il y aura de nouvelle fonctionnalité comme :

• Importation dans les blogs
• Pourquoi pas un Widget sur le bureau ou dans Netvibes
• Un défilement des previews comme pour un diaporama
• Une « Roulette russe » : un clic et op! le carrousel tourne super vite jusqu’à  ce qu’il s’arrête sur une vidéo sélectionnée en aléatoire

Conclusion

Si nous suivons l’exemple de Dailymotion et de plusieurs société sur Internet qui ont les moyens et la possibilité d’avoir un département expérimental, nous constatons qu’il en découlent des outils et services ingénieux. Cette valorisation de l’innovation remet en questions l’organisation et la possibilité qu’offre ses sociétés à  leurs employés d’expérimenter leurs idées. Il est dommage que cette pratique ne se démocratisent pas dans les agences ou studios web. Elle pourrait être bénéfique pour l’entreprise tout en motivant les équipes de travailler sur des projets plus libres, en s’affranchissant des contraintes liés au client. Vous allez me dire que pour certaine PME, cela est impossible par faute de temps et de budget. Idée surement utopique mais pas impossible.

Merci à  Régis Freyd de m’avoir fait découvrir Songza il y a 10 jours déjà . J’ai pris mon temps mais un Ergospeed était bien évidemment requis pour ce moteur de recherche de musique qui a fait beaucoup parler de lui dernièrement.

A propos

Créé par Aza Raskin, président de Humanized, une société spécialisée dans le domaine de l’ergonomie. Ce jeune homme de 23 ans n’est autre que le fils de Jez Raskin (1943-2005) spécialiste des interfaces homme-machine : participation à  la création du projet Macintosh pour Apple, de l’interface du premier Mac OS et créateur du « glisser-déposer ». Eh ben… tel père, tel fils.

Moteur de recherche performant

Une des particularité de Songza est son moteur de recherche qui va puiser ses sons dans la base de donnée des vidéos de Youtube. La qualité des morceaux laisse parfois à  désirer (n’oublions pas que YouTube est en Monophonique) mais la réactivité et la rapidité hallucinante de se moteur offre aux utilisateurs un service efficace. Toutefois, la satisfaction n’est pas forcément au rendez-vous : tous les albums des artistes ne sont pas répertoriés et une recherche avec un classement par artistes, groupes et genres musicaux ne serait pas de trop.

8 actions possibles dans une interface transparente

L’absence de menu est l’atout de ce service. Les options apparaissent seulement en surimpression lors d’un clic sur le morceau désiré. Les options s’affichent dans une croix dont les cà´tés sont des pentagones qui font aussi office de repère visuel afin de guider l’utilisateur visuellement.

« Play », lecture du morceau sélectionné. « Add to playlist », ajout du morceau dans sa playlist. « Rate », l’utilisateur vote afin de donner son appréciation sur le titre en question. Lors du rollover, une simple question apparait laissant la possibilité à  2 réponses possibles qui s’illustrent par des pictos explicites. « Share », 4 actions sont possible :

• Send to a friend : envoyer un mail à  un ami contenant le lien du morceau sélectionné via un formulaire simpliste qui apparait sous forme d’une popup CSS grisant le contenu du site.
• Link to a song : possibilité de récupérer le lien en dur du morceau choisi (même présentation que « Send to a friend »)
• Watch on Youtube : ouverture d’une nouvelle page vers YouTube si l’utilisateur désire visualiser le clip du morceau sélectionné
• Embed on website : l’utilisateur peut mettre le morceau en libre écoute sur son blog ou site (même présentation que « Send to a friend »)

Un player et une assistance omniprésente

• Player : Lors de l’écoute d’un morceau, le player s’affiche et reste fixe en bas de page (toujours en transparence). Ce player d’une simplicité efficace contient des informations et des actions nécessaires à  une écoute rapide et contrà´lé par l’utilisateur.
• La playlist : La playlist s’affiche dans la colonne de droite en face des résultats du moteur de recherche. Cette playlist est préservé grâce aux cookies mis en mémoire sur son ordinateur. L’utilisateur peut classer à  sa guise les morceaux grâce au « glisser-déposer ». Toutefois, cette notion de drag&drop n’est pas possible avec les résultats de la requête vers la playlist. Dommage.
• Assistance explicite : Songza a un feedback mettant en confiance son utilisateur. Même si cette assistance est quasi-transparente, elle est finement intégrée et guide l’utilisateur dans ces décisions sans qu’il s’en rende compte. Un affichage ponctuel des actions en cours apparait, une structuration du contenu dans 2 colonnes aérées renforce un impact visuelle sobre et clair par une présentation en liste et un fond de couleur fort.
• Google est ton ami : une possibilité de se renseigner ou d’acheter l’album d’un artiste avec les 2 liens « Discography » et « Buy » présent sous l’information ponctuel « Currently playing ». Ces liens envoient l’utilisateur vers les services de Google. Bizarre pas de pomme à  l’horizon…

Conclusion

Le succès de Songza est son interface transparente, sa qualité d’être minimale tout en restant efficace mais aussi sa notion de liberté : l’utilisateur n’a pas besoin de s’enregistrer pour utiliser ce service, aucune pub n’est présente, la navigation est légère, rapide et satisfaisante. En espérant que par la suite la qualité du son s’améliore et qu’il y aura la possibilité de créer plusieurs playlists tout en y accédant de n’importe quel ordinateur. Une des questions qui se pose est surement juridique. Vu tous les problèmes liés à  la rémunérations des auteurs en ce moment. Que va-t-il se passer pour Songza ?