Ergotest #02 : Podemus.com

Voici enfin le deuxième Ergotest ! Celui-ci analyse le site Podemus, le média francophone du podcast audio et vidéo. Suite à  plusieurs emails de conseils, de recommandations de votre part (un grand merci au passage !), j’ai modifié certains critères de mise en forme et d’organisation. Je n’ai pas corrigé le premier ergotest afin de pouvoir constater l’évolution des billets au fil du temps. Pourquoi Podemus ? Etant friande de podcast, mais les écoutant principalement sur mon Netvibes ou iTunes, je me suis demandée pourquoi n’ai-je jamais adhéré à  Podemus qui est pourtant un site à  débordant de contenu. J’ai trouvé ma réponse dans cet Ergotest.

A propos de Podemus

Podemus_logo

Lancé en septembre 2005, Podemus est le premier portail des podcasts audio et vidéo francophone. Créé par Bertrand Lenotre et Ablaze, Podemus est un annuaire o๠l’utilisateur peut écouter, visionner, s’abonner, télécharger et effectuer des recherches par thèmes ou par mots clés. Une classification allant à  plus de 100 catégories est disponible pour que l’utilisateur puisse personnaliser sa liste de favoris. Podemus propose aussi un service d’hébergement destiné aux podcasteurs. Plusieurs formules sont proposées, dont une solution gratuite limitée en volume de stockage ainsi que deux formules payantes.

Page d’accueil

Podemus_HomePage

01 Point d’entrée principal pour Podemus, sa page d’accueil. Elle correspond à  l’espace personnalisable de l’utilisateur. Il est important que le logo soit toujours présent : il représente à  la fois le lien vers la page d’accueil et la marque du service que l’abonné utilise. Le logo est accompagné de son slogan ce qui identifie de suite la fonction du site. Le dégradé composant l’entête du site dirige notre regard du logo vers le menu et inversement. Cet élément est inconsciemment un guide visuel qui délimite aussi le haut de la page de son contenu. Notons l’absence du pied de page et de liens utilitaires du type « contact », « mentions légales », « à  propos »… L’utilisateur les trouvera dans le sous-menu de la rubrique « Aide » après plusieurs secondes de recherche. Tic-tac, l’heure tourne !

02Menu

  • A quoi sert le drapeau français ? Cet élément graphique obstrue la lisibilité du menu par son emplacement et son manque d’utilité : le site n’existe dans aucune autre langue. Est-il un indice pour signaler à  l’utilisateur qu’il se situe sur un site francophone ?
  • Rien n’indique à  l’utilisateur s’il est connecté. Son identifiant n’apparaît pas. Le seul signe lui permettant de le deviner est le lien « déconnexion ».

podemus_menu

  • Le sous-menu des rubriques principales comporte le double du nombre de clic nécessaire. C’est-à -dire : après un clic sur un bouton de la barre principale (ex: « mon espace« ), le sous-menu apparaît dans une fenêtre. A chaque accès d’une rubrique du sous-menu, la fenêtre disparaît. L’utilisateur perd donc du temps à  chaque clic quand il souhaite retourner au sous-menu d’une rubrique. Il aurait été plus judicieux d’utiliser un menu dont le rollover fait dérouler le sous-menu de la rubrique en question. Une petite incohérence se remarque dans la fenêtre du sous-menu : le bouton de fermeture (la croix) se situe à  gauche de la fenêtre et non à  droite comme sur l’ensemble du site.
  • L’utilisateur pourrait se servir de la flèche de navigation située dans l’angle droit en haut du module. Elle permet de retourner à  la sous-rubrique de gestion de son profil (rubrique « mon espace » seulement). Cette fonction n’est pas mise en valeur par sa petite taille, son emplacement et le seul sens de navigation qu’elle indique. L’utilisateur pourrait douter de sa fonction première. Comme cette flèche, les titres des modules sont très mal signalés.
  • Remarquons le bouton fermeture qui pointe vers la page d’accueil. C’est une fonction originale pour un site web car elle adapte un standard applicatif à  un lien hypertexte.

Podemus_navigation

  • Mon profil : Les illustrations des avatars par défaut sont un peu désuet. Il y a répétition des flux RSS. Une incompréhension de l’utilisateur pourrait se manifester lors du choix du flux : Lequels choisir ? That’s the question.

Podemus_profil

  • Mon blog : Possibilité de se créer un blog WordPress, hébergé par Podemus.
  • Publier un podcast : Cette notice manque de lisibilité. La taille du texte est trop petite, un rollover est obligatoire sur les images pour pouvoir les lire, problème de hiérarchisation des étapes.
  • Mes Stats : Il est intéressant pour l’utilisateur ou le podcasteur d’avoir accès à  ses statistiques qui permettent de savoir l’évolution de son profil.
  • Mobile : L’utilisateur peut enregistrer directement des podcats audio par téléphone. Le manque d’information sur cette rubrique ne permet pas d’avoir totalement confiance : combien coûte l’appel ? Etc.
  • Régie : Un clic pour rien. Cette partie devrait être dans la rubrique « mon profil » car elle est destinée aux podcasteurs en contrat avec la régie de Podemus.

Proposer un flux

Podemus_flux

  • Apparition d’une fenêtre nous proposant l’ajout du flux RSS. Ici, test avec la webradio KillTheFM.net.
  • Une page apparaît avec un formulaire descriptif à  compléter. Après l’ajout de l’URL du site, le formulaire est dupliqué 4 fois. S’agit-il d’un bug ? Car si l’utilisateur ajoute le lien du flux directement, il n’y a aucun problème.
  • Le formulaire proposé contient une sélection de catégorie pour la classification du flux. Un choix impréssionant de catégories, très bien répertorié pour l’utilisateur. Lorsque le premier choix est fait, un deuxième est possible et ainsi de suite. Cela permet une meilleure indexation du flux sur le site de Podemus.
  • Le seul regret est la validation du flux qui n’est pas immédiat. L’équipe de Podemus doit le valider. Cela est tout à  fait compréhensible dans une démarche de qualité.

Aide

    Cinq rubriques sont proposées en tant que sous-menu : Guide, forum, le blog, FAQ, contact.

  • Guide : ouverture de la page d’accueil avec le module « visite guidée ». Cette partie n’a aucune utilité et devrait peut-être se trouver dans la rubrique FAQ ?
  • La FAQ répond à  la plupart des questions liées au podcasting. Notons que l’apparition des réponses se font directement sous la question sans rechargement de la page. Ce système permet une meilleure consultations à  la fois au niveau des questions mais aussi des réponses. L’utilisateur n’est pas confronté à  un pavé de texte démotivant.
  • La partie contact devrait se trouver dans un pied de page ou dans le menu principal. Ce n’est pas très judicieux de l’avoir ajouté dans la rubrique « Aide ». Cela pourrait constituer un perte de temps pour l’utilisateur.

Recherche

    Podemus_bouton recherche

  • Le champs de la recherche est trop petit comme le bouton carré de validation. L’ensemble du site est conçu sur des formes arrondies, dommage que ce ne soit pas le cas pour le bouton « ok ».
  • La présentation des résultats est pertinente et claire : énumération des podcasts les uns en-dessous des autres, présence des logos permettant un repère visuel direct, fond blanc pour une meilleur lisibilité, séparation de chaque résultat par un trait fin correspondant à  la charte du site (dégradé allant du bleu au blanc).
  • Notons que les podcasts audio et vidéo ne sont pas assez repérables. Leurs pictos sont trop petits.

Podemus_Recherche Resultat

  • La numérotation des pages et le lien « suivant  » se situent seulement en bas de page. Cela éviterait des scrolls à  l’utilisateur si ces liens étaient présent aussi en haut de page.

03 Le module « Visite Guidée » décrit visuellement les 4 étapes d’inscription aux services Podemus. Chaque bloc affiche un encadré explicatif juste en-dessous. Efficacité et facilité sont les mots qui traduisent cette présentation.
Podemus_VisiteGuidee

04Mon média

Podemus_Mon media

  • Afin de permettre à  l’utilisateur de conserver et d’écouter régulièrement ses émissions préférées, le module « mon média » permet de sélectionner des émissions par leur avatar et de les glisser-déposer dans ce module qui les enregistre instantanément. Notons une petite incohérence dans les titres de ces modules : le module « mes dernières émissions » sur la page d’accueil contient le contenu de « mon média ». Pourquoi la page « mon média » ne s’appelle-t-elle pas « mes dernières émissions » ou inversement ?
  • Enumération des favoris avec la possibilité d’écouter les dernières émissions qui apparaissent lors du clic sur la flèche (situé entre l’avatar et le nom). Attention, la croix au bout de l’encadré n’est pas la fermeture de la fenêtre ouverte, mais la suppression du média parmi les favoris. Pour fermer, il faut re-cliquer sur la flèche d’ouverture. Cette procédure n’est pas évidente pour l’utilisateur lambda.
  • Possibilité d’écouter les podcasts directement sur le site grâce au player audio qui apparaît au même emplacement que les sous-menu. Lorsque l’utilisateur décide de naviguer sur le site, le player ne continue pas la diffusion. Il se stoppe dès que l’utilisateur charge une autre page. Cela freine considérablement la navigation sur le site en parallèle de l’écoute. Pour un podcast vidéo, le player s’ouvre dans une fenêtre pop-up qui n’indique pas à  l’utilisateur ce qu’il visionne. Le champs « envoyer à  un ami » ne se voit pas : typo blanche sur fond clair.
  • Les logos des différentes applications sont très mal intégrés : ils sont simplement juxtaposés les uns à  cà´té des autres, situés juste en dessous du flux RSS (qui est en doublon d’ailleurs)

050607Personnalisation et navigation
La réorganisation de la page se réalise grâce au « Drag and drop » des modules comme un agrégateur de type Netvibes. Cependant, le site n’est optimisé que pour la résolution 1024×768 ce qui restreint l’agencement de la page. Les modules ne sont pas redimensionnables et le changement de couleur se limite à  4 nuances. La disposition ainsi que le glissé-déposé sont assez archaà¯que dans leurs fluidités et leurs aimantations qui ne fonctionnent pas forcément.

Avatar_etapesLe module « nos recommandation », contenu sélectionné par l’équipe de Podemus, permet à  l’utilisateur de découvrir des podcasts inattendus. Ces podcasts sont présentés par leurs avatars. Aucune description, généralement l’image parle d’elle-même. Il est possible d’écouter les podcasts directement sur la page d’accueil grâce au bouton play qui apparaît lors du rollover.

Podemus_PlusdeChoixSi l’utilisateur supprime un des modules de sa page d’accueil, aucune liste est apparente pour faire réapparaître ce dernier. En fouinant bien, l’utilisateur trouve l’onglet dans le module « mon média » : le bouton « + de choix« . En cliquant dessus la liste en question apparaît. L’utilisateur pourrait ne pas deviner que « + de choix » correspond aux modules disponibles qui lui permet de personnaliser sa page. Lors d’une sélection dans cette liste, le module apparaît en pied de page. L’utilisateur ne voyant rien apparaître en haut de page, pourrait imaginer plusieurs hypothèses : « j’ai mal cliqué », « cela ne fonctionne pas », « pourquoi rien ne se passe », « un bug ? ». Notons que si l’utilisateur sélectionne un module déjà  existant sur sa page d’accueil, Podemus l’affiche en double.

08L’utilisateur doit scroller pour atteindre ces badges car ils sont situés sous la bannière de pub, en bas de page 🙁

Page d’une émission

Podemus_emission

01 Le module « mon média » est toujours présent et permet une facilité à  l’utilisateur de s’abonner à  des nouveaux podcasts.

02 Il est regretable que le nom du podcasteur ne soit pas assez mit en avant. Si l’utilisateur écoute un podcast dont le nom du podcasteur n’apparaît pas dans son avatar, il ne le voit pas du premier coup d’oeil. Pour pouvoir lire les commentaires, la page se recharge donc si l’utilisateur est en train d’écouter l’émission… tout se stoppe.

Dommage que la description de l’émission, le lien vers le site, le lien vers les commentaires, les étoiles permettant de voter et les tags soient séparés. Il y a un problème de hiérarchisation du contenu. Le langage familier des infobulles apparaissant lors du rollovers sur les étoiles sont précis et pertinents ce qui augmente la proximité avec l’utilisateur. Les avatars sont de bonne taille, pas trop grand ni trop petit. L’effet ombré les met en valeur juste comme il faut.

0306 La bannière de pub 160x600px se substitue au module : « vous aimerez aussi ». Toutefois, une bannière de pub ou de partenariat 300x250px est incluse dans le module du podcast sélectionné. Dommage, car cette dernière est mal intégrée.

04 Toujours le même problème pour ces visuels, ils sont entassés.

05 Lors du clic sur « Donnez votre avis » un champ de saisie apparaît (sans doute un peu trop haut). Si l’utilisateur décide de ne rien écrire, il n’a pas la possibilité d’annuler. C’est en tâtonnant la souris que l’utilisateur trouve la fermeture : re-clic sur le bouton « donnez votre avis ». Autrement, la date de publication est cependant séparé de son titre 🙁

Cette page présente les 5 derniers podcasts. En fin de page le lien « tout afficher » déroule les archives du podcasteur. Dilemne : quand tous les podcasts sont affichés, un long scroll de l’utilisateur est envisageable. La présentation actuelle ne permet pas un accès rapide aux archives. L’affichage du titre avec sa date de publication ainsi qu’un bouton comme dans la partie média (bouton flèche) peut-être une des solutions pour éviter une perte de temps à  scroller.

Tableau récapitulatif

Fonction Les + Les – Note
1. Design graphique – Couleurs pétillantes
– Design épuré permettant une meilleur lisibilité grâce au dégradé et à  la présence du blanc
– Bonne mise en valeur des avatars
– Taille du texte trop petit
– Titre pas assez visible
– Pictos audio et vidéo trop petit
– Manque de personnalisation des modules
3/5
2. Efficacité
[pertinence de l’information]
– Information instantanée grâce à  l’Ajax
– Classification des podcasts très pertinente
– Moteurs de recherche efficace
– Manque d’information écrite sur le podcasteur 4/5
3. Efficience
[rapidité de navigation]
– Liens avatars
– Le player vidéo
– Modules illimités sur la page d’accueil
– Trop de clic pour le menu
– Impossible d’écouter un podcast audio en naviguant sur d’autres pages du site
– Informations contextuelles illisibles
2/5
4. Satisfaction – Personnalisation de la page d’accueil
– Accès à  l’information
– Accès à  ses statistiques, à  la création des flux
– Accès aux flux de l’émission en cours d’écoute
– Service gratuit
– Absence d’une application Podemus permettant de lire l’ensemble de ses favoris au lieu de passer par iTunes
– Personnalisation réduite de la page d’accueil
3/5

Conclusion

12/20

Podemus est le seul portail francophone à  réunir autant de podcast audio et vidéo. Une application permettrait de fidéliser l’utilisateur au lieu de l’inciter à  utiliser iTunes qui a dorénavant le monopole. Elle permettrait la lecture continue de l’ensemble de ses favoris. Cela pourrait aussi encourager plus de partenariats avec les webradios, les webtv et les podcasteurs français.

Ergotest #02 : Podemus.com

évolution d’une profession

Le 8 août dernier, Etienne Mineur écrit un billet très intéressant sur l’avenir des graphistes : Peut-on encore être concepteur graphique ou graphiste auteur au pays des Templates ? Au lieu de poster un commentaire sur son site, je préfère lui répondre en postant à  mon tour un billet sur ma propre expérience.

« L’ergonomie et les aspects techniques rentrent désormais en compte. Nos productions vont être de plus en plus un mixte entre image, typographie, image en mouvement et objet manipulable par l’intermédiaire d’une souris, d’un écran tactile ou autres interface d’entrées. Les logiques employées vont se situer à  la convergence du design graphique et du design objet.[…] Mais pour cela les designers graphiques doivent s’impliquer techniquement afin de mieux appréhender les possibilités et les contraintes de ces nouveaux outils. »
Etienne Mineur

Artiste

Internet offre aux graphistes la chance et la liberté de modifier ou d’améliorer leur conception graphique à  volonté. Dans le domaine du Print, quand le magazine est imprimé, c’est trop tard !

Aujourd’hui, entant que graphiste web, je commence à  me soucier de mon devenir, et décide de m’apprivoiser à  l’ergonomie web et l’expérience utilisateur. Du haut de mes 3 ou 4 années d’expériences professionnelles (c’est peu mais déjà  pas mal), je me suis bien rendue compte de l’évolution de cette profession artistique face aux nouvelles technologies, et à  l’évolution fulgurante du web. J’ai vite compris que je ne devais pas avoir peur des lignes de codes, et que je dois y faire face en m’y intéressant si je souhaite garder le contrà´le d’un projet en collaboration avec des développeurs ou intégrateurs. Attention, je ne dis pas que j’ai la science infuse face aux codeurs, mais je comprend davantage certaines facettes de leur métier et certains termes techniques qui m’étaient inaccessibles auparavant.

« De toute façon si les graphistes et designers n’occupent pas la place et démontrent les possibilités créatives de ce support, d’autres le feront. » Etienne Mineur

A la fin de mes études, nos professeurs nous dirigeaient davantage vers le logiciel Flash pour la conception de nos sites. Ce logiciel était plus instinctif et offrait une certaine liberté de création graphique. Au cours de mon cursus, je fus confrontée à  certains problèmes liés à  Flash tel que l’accessibilité, les mises à  jour, etc. Maintenant avec l’apparition de l’actionscript 3 ou de Flex, les graphistes vont se heurter à  un nouveau mur comme pour le CSS et XHTML. Si Etienne Mineur dit « d’autres le feront » je pense qu’il parle des générations à  venir qui seront davantage flexible et actif à  l’utilisation de ces nouvelles technologies. Donc, plus efficace par rapport à  d’autres graphistes qui resteront sans doute sur la touche.

« Il faut tout de même signaler qu’il est beaucoup plus facile pour un ingénieur/développeur de devenir un bon designer que le contraire » Etienne Mineur

C’est vrai. Toutefois, si notre profession existe c’est que nous avons une approche plus artistique et sensible à  l’image. L’ingénieur ou le développeur n’aura pas forcément les bases du graphisme (qui me semble très importantes), du goût ou de la sensibilité pour concevoir une identité visuelle ou harmoniser des couleurs malgré tous ces sites existants tel que kuler, colourlovers, etc. Aujourd’hui, nous sommes davantage confronté à  des sites qui se ressemblent et non qui se distinguent.

« la vision de R. U Sirius, cofondateur de Mondo 2000 «.. on doit être constamment en alerte et sur nos pieds. C’est important d’acquérir une connaissance sophistiquée de ces outils. Il n’est pas possible de simplement tourner le dos et ignorer, il faut apprendre à  utiliser le Cyberespace, cet espace o๠nous sommes. Et si nous sommes concernés par la politique et les considérations sociales qui régissent ce monde, il faut agir au mieux dans cet espace ? C’est notre territoire, celui que nous devons assumer et dont nous devons préserver la liberté ». Personnellement sans être aussi CyberPunk 😉 je pense qu’investir ces nouveaux espaces électroniques est essentiels, même si cela veut dire perdre un peu du contrà´le et du pouvoir que nous avions sur la formalisation des choses. Investir, expérimenter, chercher, utiliser le détournement, le Hack, et accepter les accidents… » Etienne Mineur

Si un graphiste souhaite survivre et vivre de sa profession dans le domaine du multimédia et de l’Internet, je crois que ce dernier ne doit pas hésiter à  mettre la main à  la pâte et en aucun cas croire que sa mission s’arrête à  la conception d’un visuel. Il doit s’informer au maximun des nouvelles technologies, des derniers sites qui sont en vogue et savoir pourquoi. Ne pas oublier aussi de jeter un oeil sur les sites de marketing car bien souvent nous y découvrons des campagnes très bien ficelées alliant ingéniosité, graphisme et marketing virale. Et bien sûr, toujours regarder les portfolios des autres graphistes.

Conclusion, le graphiste doit toujours rester en veille et doit accepter de se remettre en question sur l’évolution de sa profession !

évolution d’une profession

Ergospeed #02 : Symbaloo.com

Symbaloo - logo

Apparu au mois de juin dernier, Symbaloo est une page de démarrage personnalisable qui permet de réunir ses flux RSS, ses favoris, ses podcats… Mais aussi différents outils de recherche. Seulement disponible en anglais et en néerlandais (son pays d’origine) Symbaloo est en version Beta pour le moment.

MAJ : A partir du 10 avril 2008, Symbaloo est disponible en français.

Symbaloo - home

Caractéristiques principales

Cette page d’accueil se présente sous forme de grille composée de plusieurs modules de couleur dont un central qui représente le résultat de la requête en cours. Chaque module correspond à  un service ou un outil qui hiérarchise selon sa classification de couleur. Par exemple, les modules de couleur rouge se rapportent aux recherches de type multimédia tel que la vidéo, la musique, la photographie, etc. Les modules blancs sont destinés aux services externes tel que Gmail, Facebook ou à  des flux RSS qui peuvent être lus dans le module central. Attention, seulement les titres des flux sont lisibles ! Pour lire l’ensemble de l’information, il faut cliquer sur le titre et une nouvelle page de votre browser s’ouvre sur le post en question. Idem pour une recherche sur Google, Yahoo!, etc.

Symbaloo - setting

  • Page de démarrage personnalisable
  • Les critères de customisation sont stockés dans les cookies de votre ordinateur
  • Page pétillante grâce aux choix des couleurs qui ressortent sur ce fond noir reposant
  • Icà´nes stylisées et efficaces qui font étrangement penser aux pictos de l’iPhone 😉
  • L’utilisateur a le choix entre 3 résolutions : 800×600 / 1280×1024 / 1280×1024
  • Ajout ou suppression de colonne, de ligne, ou la possibilité de remettre la page à  zéro

Navigation instinctive

Ce service fonctionne principalement par une navigation du type « drag and drop » (glisser-déposer). L’utilisateur agence les modules à  sa guise. Pour en ajouter, rien de plus simple que de cliquer sur un module gris et une fenètre de type « lightbox » s’ouvre. Il a la possibilité de choisir parmi une liste ou de compléter ses propositions en ajoutant son propre flux. Pour supprimer un module, un glissement suffit du bloc de couleur vers le module principale ou un picto « corbeille » apparaît.
Symbaloo- ajout_suprr

    Symbaloo - google01

  • Navigation naturelle par son “drag and drop”
  • Aspect simple permettant à  l’utilisateur d’avoir une page la plus complète possible
  • 1 click : apparition de la requête dans le module central
  • 2 click : ouverture d’une nouvelle page web vers le site sélectionné
  • Chaque recherche dans le module principal laisse à  l’utilisateur le choix du service parmi une liste mise à  disposition

Conclusion

Ce service est intéressant par sa navigation très instinctive, sa classification de couleur permettant une organisation des outils, et bien sûr, pour sa simplicité qui est accessible même à  un utilisateur lambda. Ma foi, je reste fidèle à  mon Netvibes, même si parfois ce dernier ne recharge pas tout le temps mes flux RSS. Symbaloo peut être pratique pour une recherche mais pas pour être un agrégateur. Symbaloo reste un service utile mais destiné à  un public non-technophile.

Ergospeed #02 : Symbaloo.com

Ergospeed #01 : Adaptation de Spotlight sur Apple.com

Spotlight

En attendant le prochain Ergotest, voici mon premier Ergospeed dont le sujet est l’adaptation de l’application Spotlight sur le site d’Apple.

Apple - mac

Qu’est-ce que Spotlight ?

  • Apparu sur la plateforme Mac OS X Tiger, c’est un moteur de recherche qui présente instantanément les résultats qui s’affichent pendant que vous tapez votre requête
  • Vos résultats se présentent sous forme de liste dans 2 colonnes : l’une pour l’emplacement du fichier, l’autre pour sa description avec son icone permettant une meilleure lisibilité et une connaissance de son format.
  • Indexation automatique de vos faits et gestes sur votre Mac
  • A savoir qu’une des particularités de Spotlight est sa recherche dans les métadonnées des fichiers images (jpeg, gif, tiff et png) à  l’aide des EXIF et IPTC contenues dans ces dernières.
  • Il reconnaît aussi les formats : txt, rtf, pdf, documents Word, Excel, PowerPoint, images photoshop, mail, les contacts du carnet d’adresses, calendriers iCal, présentations Keynote, applications, préférences système, journaux iChat, dossiers/répertoires, les polices, les MP3, AAC, MOV

Intégration de l’application sur un site web

La brillante idée et stratégie d’Apple est de réinvestir cette application sur leur propre site web en tant que moteur de recherche. La présentation reste la même à  la différence que la colonne correspondant à  l’emplacement disparaît, quant aux icones, ils se substituent aux pack-shots des produits bien intégrés : un détourage propre des photographies, un fond de couleur gris pour sa neutralité permettant de faire ressortir les couleurs des produits, qu’ils soient blanc ou noir. Le nom des produits est en gras avec un saut de ligne pour une courte description en caractère normal. Une présentation simple et efficace qui propose aussi des résultats sur iTunes. Pas fou la pomme !

Conclusion

Avec toutes ces caractéristiques, dont je ne vous fais l’éloge ici car Apple le fait très bien, Spotlight habitue les utilisateurs Mac a une nouvelle méthode de recherche, de hiérarchisation des informations enregistrées sur leur ordinateur. Une fois de plus, Apple ne laisse rien au hasard en injectant dans leur site certaines capacités d’OS X afin de séduire l’utilisateur potentiel.

A lire aussi :

Ergospeed #01 : Adaptation de Spotlight sur Apple.com

Ergotest #01 : Ziki.com (v2)

MAJ : Suite à  cette Ergotest, Ziki a changé de look début novembre 2007.

Depuis novembre 2006, j’utilise assez régulièrement Ziki. Le 25 juin dernier, je fus étonnée de la refonte du site. La version 1 n’était peut-être pas accessible ou compréhensible lors de la mise à  jour de son profil, mais esthétiquement elle se valait. De mon point de vue, cette version 2 n’a pas été améliorée pour l’utilisateur lambda, et l’esthétisme du site laisse à  désirer. Le premier « Ergotest » est donc consacré à  la nouvelle version de Ziki.

A propos de Ziki

« Ziki est à  la recherche de personnes ce que Google est à  la recherche de sites et ce qu’Amazon est à  la recherche de produits » (source : site Ziki – A propos)

Logo Ziki

Créé en janvier 2006 par Patrick Chassany et Olivier Ruffin, Ziki est un réseau social permettant de créer son identité numérique tout en y ajoutant ses publications (podcast, billets, photos…). Vous pouvez créer, administrer et gérer votre image en ligne. Votre profil et vos contenus sont accessibles aux internautes avec qui vous pouvez être directement en contact. Lors de la création de votre profil, Ziki achète pour vous les Adwords de vos prénom et nom, ce qui permet d’être sponsorisé en première position sur les moteurs de recherche : Google, Yahoo!, MSN (mais aussi les moteurs de recherches affiliés à  ces 3 majors).

L’agencement d’un site est très important pour son efficacité surtout pour un site de réseau social et d’identité numérique. Ziki se qualifie comme le moteur de recherche dédié aux personnes. L’idée est très bonne mais pas encore reconnue ni utilisé par un utilisateur lambda. Voici un aperçu de ce qu’était la v1.0 :

V1 ziki

Page d’accueil

La page d’accueil présente l’information et la navigation. Celle-ci doit avant tout représenter l’ensemble du site ainsi qu’aborder son contenu, son identité, sa fonction, son utilité, etc.

Récapitulatif des éléments figurant sur cette page :
HomePage

01 Présence de liens utilitaires (accueil, explorer, s’inscrire, se connecter) qui sont visibles en permanence et font office de header. Ces liens sont mis en valeur sur un fond de couleur orange assez fade. Lors du rollover de ces liens, nous apercevons des onglets à  angle droit et stricte. Ce choix ne semble pas correspondre à  la nouvelle communication de Ziki. Si nous prenons par exemple leurs nouvelles offres de cartes de visite, nous remarquons une incohérence de charte graphique par rapport au site web : utilisation d’effet et de volume avec des formes arrondies, utilisation des couleurs péchues et attrayantes du logo.

Carte de visite ziki

Notons que sur les cartes de visite, le logo Ziki n’apparaît pas dans son intégralité. Seule l’icà´ne est présente. De même sur l’ensemble du site, le logo n’apparaît quasiment pas. Nous pouvons seulement l’apercevoir dans le pied de page et sur l’encart de description du membre : « sponsored by ziki ». Est-ce un choix stratégique ? L’icà´ne de Ziki se suffit-elle à  elle-même pour que l’internaute l’identifie ? O๠est-ce un choix de transparence : l’identité numérique du membre doit-elle être mis en avant par rapport à  la marque ?

0203La présence du logo et de son slogan au centre de la page donnent à  l’utilisateur un descriptif du thème et de la fonction du site. A noter l’ingéniosité du bouton « rechercher » qui change de statut lors d’une requête : indication « en cours » lors du chargement de la page. Le bloc blanc et le positionnement du logo situés juste au dessus du moteur de recherche est un clin d’oeil à  la page d’accueil du leader mondial de la recherche sur le web, à  savoir Google. Toutefois, plusieurs problèmes se posent :

  • Ziki nous offre la possibilité de rechercher une personne, une société ou un groupe (onglet « Explorer »).
    Pourquoi l’utilisateur ne peut-il pas faire une recherche d’une société ou d’un groupe dans le moteur de recherche proposé en Home ?
  • Pourquoi avons nous deux champs textes pour la recherche ? Un seul serait plus agréable et plus simple à  utiliser.

04Cette présentation textuelle orientée vers les utilisateurs potentiels met bien en avant l’intérêt du site et compléte l’accroche afin de convaincre l’internaute à  s’inscrire.

05Un aperçu du contenu du site est présenté sur cette page avec les photos/avatars des membres. Nous comptons 24 photos, en fallait-il autant ? Même si la présence des membres humanise et affirme la sujet du site, est-ce indispensable et astucieux d’aligner 24 photos ? Le site étant optimisé en 1024, nous sommes malheureusement obligé de scroller pour voir la dernière ligne des photographies. Dommage !

06Le pied de page est toujours visible. Il est très simple, propre, avec une séparation du contenu manifesté par une ligne blanche dont les extrémités se finissent par un dégradé. Par contre, ce dernier porte à  confusion : l’utilisateur croit que la page s’arrête à  la délimitation du bas de son écran. Ce dernier ne comprend pas de suite qu’il faut scroller pour accéder à  l’ensemble du contenu de la page d’un profil par exemple. A noter que le lien « à  propos » dans la version française nous envoie sur la page anglaise, de même que les liens des fondateurs qui pointent vers la page 404. Oops !

Si nous nous basons sur les dires du reconnu Jakob Nielsen : « Le plus important est que la home page offre au visiteur les éléments fondamentaux permettant de comprendre ce qu’est le site et qu’elle représente le niveau le plus élevé de son infrastructure de contenu. » Ziki respecte ses notions, toutefois d’un point de vue ergonomique et graphique cette home page n’est pas du tout optimisée et expressive.

Structure et gabarit du site

Grille
Une maquette sur trois colonnes structure et hiérarchise l’information. Si nous comparons une grille de mise en page traditionnelle et celle de Ziki, nous constatons que les proportions ne sont pas respectées. Un déséquilibre se créé.

Grille

Palette de couleur – Gabarit simplifié

Si l’orange est présent dans la page, les autres couleurs ont quasiment disparue de la charte graphique web. Un gabarit simplifié indique les principaux types de contenu, les outils de navigation et leurs emplacements respectifs. Nous constatons une navigation contextuelle assez désordonnée alimentant ainsi une atmosphère froide et non-conviviale.

nuancier_gabarit

Recherche d’une personne (mode non loggé)

Recherche Personne

01La colonne de gauche est une arborescence qui fait office de recherche avancée. Cette présentation engendre une perte de temps pour l’utilisateur : 6 clics au lieu de 3 à  cause de la procédure d’apparition des champs de sélection (sur le clic).

btn_affiner

02Habileté pour cet encadré qui incite les non initiés à  rejoindre la communauté Ziki. Nous remarquons que le moteur de recherche reste affiché avec notre requête. Cela évite à  l’utilisateur de retourner sur la page d’accueil pour effectuer une nouvelle recherche.

03Ce troisième bloc liste plusieurs réponses provenant du web à  propos de la personne recherchée. En plus d’un aperçu visuel illustrant chaque lien de cette liste, le module Snap Shots apparaît lors du rollover. En dehors d’un zoom sur la miniature, ce module n’apporte pas grand chose à  l’utilisateur.

SnapShot

La liste de recherche était-elle bien appropriée pour Ziki ? Cela n’incite-t-il pas les visiteurs à  quitter le site ?

04 La colonne de droite à  pour but d’inciter les internautes à  créer leur compte. Etant mal agencée, les objectifs vendeurs de Ziki ne sont pas mis en valeur par ce simple texte aligné à  gauche.

Recherche d’une société ou d’un groupe

Page société

01020304Ces trois points se rejoignent pour la même fonctionnalité : la recherche. Pourquoi sont-ils séparés ? Ils pourraient être rassemblés dans la colonne de gauche qui a pour but « d’Affiner » la recherche de l’utilisateur.

02Le pavé orange contenant un bouton radio permettant de trier les profils Ziki avec ou sans contenu n’est pas assez explicite sur sa signification.

04Le module « Plus » est destiné d’avantage aux utilisateurs avertis. A noter que dans la liste proposée, nous avons le choix de sélectionner les profils les plus vus. Il serait judicieux de regrouper les choix par classement (par date, les plus vus) et par présentation (liste, vignette, pagination)

L’ensemble de ses fonctionnalités n’ont pas été assez réfléchis : un manque de travail et de finesse par rapport à  d’autres éléments graphiques du site. L’éparpillement de ces éléments prouve que des tests d’ergonomies n’ont pas été fait. Beaucoup de fonctionnalités utiles et intéressantes sont disponibles mais l’agencement de la page ralentit et disperse l’utilisateur.

05La liste des « mot-clés relatifs » manque de mise en valeur : une présentation stricte, linéaire, monochrome et trop longue.

06Cette infobulle ou info-contextuelle apparaît directement lors du survol de la souris et nous informe sur le contenu du profil, mais aussi ses statistiques à  l’aide de pictos simples, efficaces et surtout explicites.

InfoBulle

Consultation d’un profil (mode loggé)

Page profil

01« Mon tableau de bord » ou « Voir mon ziki » sont posés dans cet encart orange en haut à  gauche. Que l’on soit loggé ou non, ce pavé reste fixe et propose « d’ajouter » ou de « retirer aux favoris » le profil courant. Son positionnement est bon mais la couleur qui est redondante au header ne permet pas une distinction claire.

La partie contact mise à  disposition de l’utilisateur sans obligation d’inscription est sympathique de la part de Ziki. Néanmoins, la stratégie de Ziki de publier toutes les informations de contact reste une surcharge d’information non-nécessaire. Le surplus d’information perd l’utilisateur, il lui faut de la clarté et de la lisibilité pour avoir une navigation efficace et rapide.

02Le corps du site contient les informations principales du profil : l’encart noir présente le membre avec son avatar, le contenu se charge dans le bloc blanc constitué de divers onglets.

03Le moteur de recherche est toujours présent et permet une recherche dans son réseau ou dans son Ziki. Malgré ces options, notre demande n’est pas satisfaite. Les réponses obtenues nous renvoient aux résultats Google qui eux nous renvoie au lien ziki. Ce moteur de recherche n’est pas le même dans les pages sociétés ou groupes : chaque requête est mémorisée et bloque pour une autre demande. En effectuant ces tests, j’ai remarqué qu’on ne pouvait rechercher des personnes dans ces dernières rubriques. Mince alors !

recherche personne societe

040506La page d’accueil est pratique car elle récapitule les derniers contenus du membre sur la même page.

Si nous abordons le sujet des éléments graphiques, nous constatons une répétition des icà´nes dont certaines sont similaires mais ne donnent pas les mêmes informations. Il y a incohérence et duplicata des rubriques avec des pictos parfois différents.

pictos

Barre de navigation

Sur les pages profil, une barre de navigation fixée au dessus du pied de page apparaît pour faciliter la navigation d’un profil à  l’autre. Cette fonction est très utile mais très mal intégrée. Cette barre recharge uniquement l’ensemble des avatars, ligne par ligne. Les avatars ne défilent pas.

societe-01.jpg

Mise à  jour de son profil

tableau de bord

01Cette colonne est un amas de mots, de liens incompréhensibles qui ne donne pas envie au membre de mettre à  jour son profil faute du temps perdu à  rechercher les informations.

02Le bloc central contient les informations principales du profil. Certaines rubriques nous permettent de classer des informations par le biais du « drag and drop » (glisser-déplacer) ce qui n’est pas désagréable.

03Cette colonne reste identique à  la page profil.

Cette page reste pour moi la plus difficile et inaccessible à  un utilisateur. Il y avait sans doute une possibilité de rassembler plusieurs fonctionnalités afin d’éviter une accumulations de liens inutilisables.

Tableau récapitulatif

Fonction Les + Les – Note
1. Design graphique – Pictos efficace malgré certain duplicata
– Boutons de validation ergonomique
– Pas de bandeaux publicitaires
– Manque de couleur
– Maquette étroite et inexpressive
– Manque de respiration
– Un noir étouffant
1/5
2. Efficacité
[pertinence de l’information]
– Infos-bulle
– Page d’accueil du profil
– Moteur de recherche défaillant 2/5
3. Efficience
[rapidité de navigation]
– Avatars contextuels
– Liens du membre
– Contact du membre
– Moteur de recherche trop séquentiel
– Entassement des liens de mise à  jour du profil
– Accès à  l’information trop lent
2/5
4. Satisfaction – Identité numérique
– Alerte Email personnel informant des derniers visiteurs
– Manque de clarté 2/5

Conclusion

07/20

Le concept de Ziki est très intéressant mais mal exploité en raison de son manque de structure et de son design graphique. Espérons à  l’avenir que Ziki améliore l’efficacité de son moteur de recherche ainsi que la présentation et l’accès à  l’information s’il souhaite survivre à  ses homologues Facebook, Myspace et dernièrement Spock.

Ergotest #01 : Ziki.com (v2)