Ergotest #06 : Asphalt 4 sur iPhone (Gameloft)


Il y a quelques jours de cela, j’assistai au FanDay Gameloft qui avait pour but de présenter 3 nouveaux jeux de leur gamme sur iPhone et iTouch. Développeur, designer et marketeux étaient présents pour nous faire une démonstration de Asphalt 4, Real Football 2009 et Block Breaker Deluxe 2. Un grand remerciement à  Doudou qui m’a permis d’assister à  cet évènement et à  Cyrille de Gameloft pour toutes ces explications.

A propos

Logo Gameloft


MAJ : 16 janvier 2009 – Selon une étude menée par le site PocketGamer.biz, Gameloft a été le meilleur éditeur de jeux mobiles en 2008 pour la qualité de ses jeux. Les jeux Gameloft sont en tête des classements des sites spécialisés depuis 2003.
Lire le communiqué de presse

Petite sÅ“ur d’Ubisoft, depuis 1999, Gameloft édite et développe des jeux vidéos sur mobiles et consoles. En 2001, elle se voit cotée en Bourse et se positionne comme une entreprise innovante dans son domaine. Aujourd’hui, Gameloft vend en moyenne 3 jeux par seconde dans le monde et comprend environ 4000 employés basés dans une vingtaine de villes telle que New York, Mexico, Bogota, Paris, Londres, Copenhague… Plus d’infos

Asphalt 4 Elite Racing (v1.2.0)

Asphalt

Les critères d’utilisabilité d’un jeu-vidéo ne sont pas si différents d’une interface web. D’autres facteurs viennent se greffer et prennent en considération des émotions typiquement liées au jeu : immersion, joie, challenge, nervosité, fierté… Le jeu a pour vocation d’être ludique et l’expérience utilisateur entraine un apprentissage du jeu différent dans son utilisation et son approche.

Introduction & Chargement

Une vidéo fait office d’introduction (40s.) et se joue à  chaque lancement de l’application. Malgré sa magnifique réalisation, elle devient répétitive. Heureusement, l’utilisateur peut la zapper… Nombreux sont les jeux qui obligent l’utilisateur à  visionner une introduction inlassablement longue. Ici, Gameloft nous laisse le choix. Ouf !

Asphalt Loading Lors d’un chargement, chaque fin de loading doit être validé par l’utilisateur par un « Touche l’écran pour continuer ». Nous pouvons avoir deux points de vue différents sur cette action :

  • L’application demande l’autorisation à  l’utilisateur de passer à  une étape suivante. Donc, le joueur contrà´le ses actions.
  • Cela peut-être aussi freinant car l’application implique une action d’interaction en plus qui peut ralentir l’utilisateur dans son usage et son enthousiasme.

Pendant le chargement, notons la présence de tips (accompagnés, bien sûr, d’une fille à  forte poitrine. Forcément, nous sommes dans un jeu de course, donc qui dit Auto dit GrolOlO). Ces astuces didactiques permettent de faciliter l’apprentissage du jeu au joueur.


Graphisme & Interface

D’un point de vue esthétique, Asphalt est assez bien conçu : les décors et véhicules sont réalistes et l’authenticité du jeu se concrétise grâce à  la présence des licences telles que Mini, BMW, Mercedes, Ducati… La satisfaction du joueur provient des récompenses qu’il acquiert au fur à  mesure des étapes franchies. Grâce à  l’acquisition de ces licences, Gameloft offre à  ses joueur des récompenses gratifiantes avec des nouveaux modèles de véhicules customisables, mais aussi des circuits, des accessoires, des filles, etc.

Attention de ne pas systématiquement récompenser le joueur avec des gains non-appropriées à  ses compétences. Cela pourrait affaiblir sa motivation face au challenge. Le jeu se doit d’évoluer avec le joueur avec des paliers de difficultés de telle sorte que le challenge soit maintenu tout du long.

En ce qui concerne les pictogrammes et leurs agencements, il y a certaines incohérences qui peuvent nuire à  la compréhension de l’interface :

Gameloft Asphat icon

Dans les entêtes des rubriques, chaque picto est trop éloigné de leur intitulé et ne permette pas une reconnaissance visuelle. Surtout quand le « bouton retour » s’intercale entre les deux. De plus, ce dernier n’est pas visible au premier coup d’Å“il et l’absence d’intitulé le rend incompréhensible. Son graphisme est inadapté car il est trop ancrée dans notre quotidien pour un usage ayant l’action « Repeat » d’une musique ou « re-chargement » d’une page web.

Compréhension de l’interface

L’absence de flèches directionnelles dans certaines rubriques (aide, choix des filles, à  propos, tuning…) occasionne parfois des incompréhensions du joueur. Même si cela va de soi pour les utilisateurs d’iPhone que toute la navigation se fait avec le Touch, un petit indicateur de direction ne fait jamais de mal 😉

Le but d’un jeu est de captiver l’utilisateur en l’immergeant dans un univers. Le jeu se doit de le tenir en haleine tout au long d’un fil conducteur sans perturber sa perception du jeu et l’interactivité qui lui offre. Les menus, options, éléments graphiques de l’interface doivent être suffisamment compréhensibles et facile d’utilisation pour laisser au joueur une totale attention au jeu. Le moindre obstacle peut être fatale.

Ici, par exemple, le volume et les 4 modes de visualisations :

Asphalt Volume Option du son
Sur chaque option du son, il manque un bouton on/off qui permettrait au joueur d’être plus rapide dans ses actions de configuration. Ces boutons sont des raccourcies qui amélioreraient l’usage du volume de la musique et des effets sonores.

Quatre mode de visualisation possible
L’absence de prévisualisation des 4 modes de caméras lors de leur sélection est un énorme frein pendant une partie. Cela ralenti et déstabilise le joueur lors de son changement de caméra en plein course. Absence de raccourcies sur l’écran du jeu.

3 modes de navigation lors du jeu

Grâce à  l’interface de l’iPhone, les concepteurs de jeu peuvent envisager de nouveaux modes de navigation et d’interactions. Ici, Asphalt en comporte trois :
Asphalt Navigation

Le coup du volant : Difficile à  manipuler car seul le pouce gauche doit interagir sur le volant afin de diriger au mieux l’auto. Il rappelle la manette d’une console avec son stick analogique.

Touch My Screen : L’interaction se fait en touchant le coté gauche et droit de l’écran. Personnellement, je n’y arrive pas du tout mais des amis n’utilisent que ce mode… donc…

Sans les doigts : L’utilisateur manipule directement l’iPhone grâce à  l’accéléromètre pour guider le véhicule. Le mode que j’utilise le plus et même dans le métro j’y arrive !


Tableau récapitulatif

Fonction Les + Les – Note
1. Design graphique – Design réaliste et adapté à  la cible
– Icà´nes compréhensibles
– Interaction facile avec des boutons de dimensions adapté au Touch
– La typographie de l’interface est parfois difficile à  lire 4/5
2. Efficacité
[pertinence de l’information]
– Accès à  l’info rarement insatisfaisant
– Hiérarchisation des rubriques compréhensible
– Absence d’accueil (icon course = HP : incompréhensible)
– Mode de visualisation
– Option volume
3/5
3. Efficience
[rapidité de navigation]
– Accès aux rubriques/option facile
– Les 3 modes fonctionnent assez bien en format portrait ou paysage
– Le jeu saccade souvent et rame au début de la course
– Le temps de chargement est assez long et doit être validé à  chaque fois
– Absence de repère visuel directionnel pour certaine rubrique
2/5
4. Satisfaction – Immersion dans le jeu grâce aux graphisme et difficultés des courses
– Récompenses gratifiantes
– Mode multi-joueur fonctionnant assez bien en wifi
– Saccadement du jeu
– Interface qui freine le joueur lorsqu’il décide de changer de configuration
4/5

Conclusion

13/20

Asphalt est un jeu au graphisme et réalisme assez bien réussi o๠le challenge est évolutif (circuits et voiture à  débloquer, fille à  GrolOlO et des kit de Tunning à  gagner). Grâce à  ce jeu, je redécouvre le plaisir de la conduite et le cà´té grande poursuite à  l’américaine avec hélicoptère. Asphalt me permet tous les jours, d’exploser des taxis, des voitures et d’abuser de la nitro dans le métro. Depuis que j’ai récupéré un iPhone, je me suis remise à  jouer et je n’arrête plus. L’AppStore est tout de même une très bonne plateforme de distribution d’applications/de jeux qui permet aux développeurs d’innover et de contribuer à  la communauté. Ma conclusion ne finit pas par des questions sur l’avenir de l’iphone comme console car dernièrement j’ai eu une forte discussion avec des amis qui considèrent l’iPhone comme un objet de consommation ostentatoire qui ne pourra jamais concurrencer une DS ou PSP.

Donc… 🙂

Les éditeurs de jeux devraient-ils commencer à  se méfier du pouvoir de la Pomme ? L’iPhone ne va-t-il pas de devenir l’objet unique qui risque de faire de l’ombre au console portable d’ici quelques années ?

Ergotests précédent :

Ergotest #06 : Asphalt 4 sur iPhone (Gameloft)

Ergotest #05 : Netvibes Ginger (pré-béta)

Deux grands évènements ont eu lieu ces dernières semaines pour l’équipe de Netvibes : la récompense de la meilleure startup internationale aux Crunchie Awards 2008 et très prochainement l’apparition de leur nouvelle version : Ginger. En toute honnêteté, j’ai quitté Netvibes pour Google Reader il y a moins de 6 mois car ce dernier comporte de nombreuses fonctionnalités supplémentaires. Depuis quelques jours, j’ai la chance de tester Ginger en bêta privée. Cela va-t-il me faire revenir vers Netvibes ? (cet Ergostest portera uniquement les nouvelles fonctionnalités)

MAJ : Cette version Ginger est actuellement qu’une pré-béta. Aujourd’hui, de nombreuses fonctionnalités sont en cours d’améliorations. Il ne s’agit en aucun cas de la version finale. Ces pré-tests sont mis en place afin d’avoir les feedbacks des utilisateurs pour améliorer Ginger. Donc n’hésitez pas à  contacter l’équipe de Netvibes.

A lire aussi le billet fort intéressant de Thomas Parisot.

A Propos

Netvibes Logo Netvibes, startup française basée à  Paris et Londres, est lancé en septembre 2005 par Tariq Krim et Florent Frémont. Leur startup du même nom est une page d’accueil / un agrégateur personnalisable. Aujourd’hui, de nouvelles fonctionnalités apparaissent. Pour en savoir plus je vous invite à  lire leur blog.

Ci-dessous la page d’accueil de Netvibes v1 :
Netvibes v1

Page d’accueil de Netvibes Ginger

Ci-dessous ma page privée Netvibes Ginger. Vous allez me dire : « pas grand changement à  première vue ». Et pourtant…
Netvibes Ginger ma page

Intégration de l’écosystème

L’écosystème de Netvibes est une base de données conséquente à  laquelle tout internaute peut : ajouter des modules Netvibes, agrémenter l’annuaire de flux RSS ou de Podcasts, créér des Univers en regroupant plusieurs flux RSS ou podcasts ayant des mêmes sujets comme Ergo IHM présenté dans un billet précédant.

Maintenant avec Ginger, cet écosystème est directement intégré dans notre page personnelle et nous permet une meilleure organisation et classification des widgets (entre autre).
Netvibes Ginger Ecosyteme

01Cette barre noire est le menu principale de l’écosystème. Ce repère permet une navigation globale par son omniprésence qui permet à  l’utilisateur d’accéder à  cet espace en permanence. Ses couleurs sombres lui permettent de se démarquer de l’espace personnalisable de l’utilisateur. Chaque icà´ne est accompagné de son libellé qui est explicite afin de permettre une meilleure compréhension de sa fonction.

02Cette zone est une navigation locale qui s’adapte aux rubriques en cours de consultation : il y aura 2 ou 3 fragmentations afin d’établir une hiérarchisation du contenu par raffinement. C’est-à -dire que les choix et les actions de l’utilisateur se feront étapes par étapes. Ici, par exemple, Ginger lui propose de :

  • 1er colonne : « trouver des amis ».
  • 2ème colonne : sélection de son client email.
  • 3ème colonne : l’utilisateur rempli les champs demandés pour faire sa requête.

Toute la navigation globale de cet écosystème s’établit sur une navigation horizontale et non verticale comme dans l’ancienne version de Netvibes. Cet écosystème est construis sur cette architecture afin d’éviter des changements d’éléments qui pourraient porter à  confusion l’utilisateur et surtout cela permet de créer une séparation net avec la page personnelle situé en-dessous.

03Cette séparation visuelle expliquée ci-dessus est aussi accentuée grâce une barre horizontale faisant office de fermeture de l’écosystème. Ce bouton est complété par le pictogramme traditionnel d’une croix sur fond rouge situé en haut à  droite.

04 Le graphisme est assez fin et joue sur des nuances de gris et de noir. Lorsque l’utilisateur ou un de ses amis se manifeste par des commentaires, le cadre qui s’affiche est en angle droit sous forme de bulle. En revanche pour une action ou une recherche, le bloc qui affiche le résultat est présenté sous forme de bloc aux angles arrondies. Ce changement de graphisme permet à  l’utilisateur de repérer visuellement les activités différentes.

Navigation Drag & Drop toujours aussi compréhensible

Dans mon billet précédent, j’avais évoqué les points importants pour l’utilisation du Drag & Drop. Ici, Netvibes a toujours très bien pratiqué cette navigation. Petit rappel :

Drag & Drop (glisser-déposer)

L’utilisateur étant confronté à  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.

Netvibes drag&drop

  1. L’élément qui s’identifie comme étant déplaçable est indiqué par une infobulle qui explique à  l’utilisateur l’action à  faire. Dans la partie personnalisable de Netvibes, le curseur se substitue par le symbole d’une croix qui indique aux utilisateurs que le module peut être déplacé.
  2. Lorsque l’utilisateur le déplace, l’élément est visible et l’emplacement de destination se manifeste par des pointillés de couleur qui délimitent la zone.
  3. L’élément est « aimanté » vers la zone de destination et s’affiche directement avec la mise à  jour de son contenu (Ajax) afin de valider à  l’utilisateur un résultat positif de son action.

Netvibes drag&drop alternative

Alternative au Drag&Drop

Si l’utilisateur ne pratique pas la navigation glisser-déposer, Netvibes a prévu une alternative : un seul clic sur la vignette permet l’ouverture d’une pop-up affichant l’aperçu du widget. Ce dernier est surmonté d’un bouton permettant l’ajout du widget dans la page privée ou public de l’utilisateur.

Loading et bouton

La barre de téléchargement se substitue à  la numérotation des pages. Son positionnement permet à  l’utilisateur de constater le comportement et l’activité qui est en cours d’exécution face à  la requête. Cela ne perturbe pas la lecture du contenu situé autour. Son affichage accentue sa visibilité tout en restant discret.
Netvibes bouton loading

L’options des onglets

'Netvibes onglet options

L’apparition des options pour modifier un onglet est similaire à  l’ouverture de l’écosystème. Une navigation horizontale apparait avec 6 bloc qui guident étapes par étapes l’utilisateur dans sa volonté de personnaliser cet onglet. Lorsque l’internaute établie un changement, l’action se fait en temps réel ce qui lui permet de constater l’efficacité du site.

En revanche, le bouton de fermeture est assez éloigné des 3 premiers blocs. Il faudrait peut-être envisager une barre horizontale de fermeture comme dans l’écosystème. Cela éviterai un déplacement inutile et rendrait plus efficace et rapide la navigation.

Notons la possibilité de copier le contenu total d’un onglet dans sa page public. Eh eh ! (De même pour un widget, l’icà´ne de l’enveloppe permet de le copier dans sa page privée ou public, ou bien de l’envoyer à  un ami ou sur un blog)

Favoris

Netvibes favoris

Aujourd’hui avec la Ginger, l’utilisateur peut ajouter en favoris un billet d’un widget. Toutefois cette nouvelle fonctionnalité n’est pas assez efficace par son manque de pragmatisme :

  • Difficulté de les retrouver dans l’écosystème : aucun icà´ne signale la rubrique o๠l’utilisateur peut les retrouver. Si ce dernier veut les consulter, il doit se diriger vers « Activities » puis « my private activity ou public ».
  • Impossible de les regrouper dans une seule et unique zone. Leur consultation ne peut que se faire dans 2 parties bien distinctes : « my private activity ou public ».
  • Impossible de les classer. Ils sont automatiquement organisés par ordre chronologique

Par contre, chaque favoris peut être commenté ce qui permet à  l’utilisateur d’annoncer à  son réseau pourquoi ce contenu lui a retenu son attention. Si je ne me trompe pas, cette fonctionnalité est impossible sur Google Reader à  l’heure actuelle.

Attention détail minime : Notons l’inversement des icà´nes pour mettre en favoris un billet. Sur le widget situé dans un onglet l’étoile est situé à  droite, par contre, lorsque le widget est ouvert et en cours de consultation, l’étoile (qui est de couleur différente) est située à  gauche. N’oublions pas que l’utilisateur navigue avec plus d’aisance si le site est cohérent dans les localisations de ses éléments.

Réseau social

Une des principale nouveauté de Netvibes Ginger est la création de son réseau social. L’utilisateur peut archiver, commenter et partager du contenu avec ses amis mais aussi suivre leurs actions et accéder à  leur page public que l’on nomme aussi “Univers”.
Netvibes ajout amis

Feedback utilisateur

Le but des feedbacks est d’informer et de prévenir l’utilisateur sur ses actions. Les feedbacks permettent une navigation rapide et compréhensible afin de renseigner et de rassurer l’internaute.

Ici, Netvibes confirme bien à  l’utilisateur son action : si l’utilisateur ajoute ou supprime un ami, l’action est validée et confirmée visuellement par un picto « validé » accompagné d’un libellé qui se substitue au bouton.
Netvibes friends
Ginger permet aussi à  l’utilisateur de voir les membres qui suivent son activité sans que ces derniers soient affiliés à  lui. Ses internautes se manifestent dans la rubrique « Followers » avec l’absence d’une pastille verte qui signale qu’ils ne font pas partie du réseau de l’utilisateur. Toutefois, il manque sans doute un bouton « add friend sur la vignette du membre non-affilié. Car si l’utilisateur connait et désire ajouter cet internaute à  ses contacts, il doit cliquer sur son avatar ce qui entraine l’ouverture de la page « activities public » de ce dernier. Ensuite, l’utilisateur peut l’ajouter à  son réseau. Un raccourci sur la vignette serait sûrement un gain de temps et une alternative bien pratique.

Mon univers : une page publique

Une autre nouveauté avec Ginger, la possibilité de créer sa propre page publique afin de partager à  tous ses flux rss, son actualité. Cette possibilité donne une présence en ligne (membre ou pas de Netvibes) qui reflètera chaque utilisateur, si ces derniers jouent le jeu. Voici ma page publique que je n’ai pas encore fini d’agrémenter : http://www.netvibes.com/jacinthe »

Tableau récapitulatif

Fonction Les + Les – Note
1. Design graphique – Design sobre et épuré
– Icà´nes et boutons compréhensibles
– Organisation visuelle cohérente et aérée
– Les boutons de type « add friend » ne sont pas cohérent à  l’écosystème 3/4
2. Efficacité
[pertinence de l’information]
– Accès à  la demande rapide et très rarement insatisfaisante
– Moteurs de recherche efficace
– Traduction française…aie ! 3/4
3. Efficience
[rapidité de navigation]
– Accès à  la demande fluide
– Rapidité grâce au drag&drop + alternative
– Infobulles pertinentes
– Long au chargement, version béta donc…
– Problème des infobulles qui se chevauchent ou qui ne disparaissent pas
3/4
4. Satisfaction – Possibilité d’avoir une page privée et une page publique
– Un écosytème compréhensible et agréable à  utiliser
– Réseau social
– Possibilité de partager ses favoris en les commentant
– Impossible de communiquer directement avec ses contacts
– Impossible de classer ses favoris
– Impossible de lire le contenu des billets à  la chaine (en scrollant uniquement)
– Impossible de régler l’écosystème dans sa hauteur
2/4
5. Accessibilité – Version mobile
– Inter-compatibilité navigateur
Conçu en Ajax 3/4

Conclusion

14/20

Cette nouvelle version de Netvibes était attendu depuis longtemps. L’ajout de la dimension sociale leur permet de s’aligner sur la tendance du moment. Il est dommage qu’il n’y est pas plus d’améliorations concernant l’outil de base. Et vous, qui avez eu la chance de tester cette version bêta, qu’en pensez-vous ? Déçu ou heureux ?

Derniers Ergotests :

Ergotest #05 : Netvibes Ginger (pré-béta)

Ergotest #04 : Sncf.com

Un lecteur m’avait déjà  écrit pour faire un Ergotest sur la SNCF et jeudi dernier j’ai découvert, grâce à  Wild Wild Web et Kinoa, la refonte du site sncf.com. Vu ma stupeur lors de ma première visite sur ce nouveau portail, je devais faire un Ergotest. Ci-dessous la page d’accueil de l’ancien site :

MAJ : Le site a été designé par l’agence G2 (grey interactive). Seule la partie Opinion & Débat a été pensée et gérée par Publicis consultants sur une idée de Fred Cavazza – infos de Lovny

Sncf ancien site

A propos

sncf logo
« Figurant parmi les leaders européens du transport et des services associés, le Groupe SNCF c’est 5 branches structurantes : Fret, SNCF Proximités, Voyageurs France Europe, Infrastructure / Ingénierie, Holding et autres. » Plus d’infos sur la SNCF

Page d’accueil

sncf page d’accueil

Un header rempli à  bloc

sncf header

01 Ce header est assez confus :

  • Le logo est bien positionné, ses couleurs pêchues et son dégradé sont mis en avant grâce au fond sombre qui conserve les nuances de la nouvelle charte graphique de la SNCF. Bien sûr, ce logo sert de retour à  la page d’accueil. Dommage que celui-ci est totalement cloisonné entre un lien vers « Groupe » et le moteur de recherche. Aucune respiration ce fait autour de lui.
  • Pourquoi les services (« voyager », « s’informer », « fret/logistique », « conseil/expertise », « carte de fidélité » et « voyages-sncf.com ») ne sont-ils pas mieux regroupés et organisés ? « Voyager » et « s’informer » devraient sans doute être plus rapproché de « cartes de fidélité » et du bouton « voyages-sncf.com ». Notons que l’onglet « acheter » sur le bouton « voyages-sncf.com » n’est peut-être pas compréhensible de suite : l’utilisateur ne comprend pas forcement qu’il doit cliquer dessus pour pouvoir acheter ses billets de train. Personnellement, je prend très peu le train, et auparavant mon premier réflexe était d’aller sur le site sncf.com puis de cliquer sur le premier onglet « Agence de voyage en ligne » (voir le visuel de l’ancien site ci-dessus) qui était bien positionné et faisait parti d’un ensemble de service cohérent. Dans cette nouvelle version, ce bouton est quasi imperceptible mais un onglet « billets & horaires » est présent dans le corps du site.

sncf menu déroulant

  • Toutes ces rubriques se présentent sous forme de menu déroulant de taille similaire et agréable visuellement. Seul la rubrique « fret/logistique » est indigeste et recouvre tout le site. Pourquoi ne pas avoir fait un menu déroulant comme pour la rubrique « voyager » ?

sncf lien accessibilité02 Dès la première connexion, ce qui m’a choqué pour un groupe tel que la SNCF c’est le choix d’avoir réalisé ce portail en Flash avec l’option en haut à  droite « bas débit/accessibilité ». Pourquoi ne pas avoir fait tout simplement un seul site accessible. Ici, le Flash n’apporte rien d’innovant à  ce portail qui est conçu comme un portfolio (d’accord, cela est très osé pour la SNCF et dynamise leur image. Un effort à  été fait d’un point de vue graphique et stratégique).

La mention « Accessibilité » est omniprésente et visible par son emplacement au-dessus du header. Cela permettra peut-être de démocratiser et sensibiliser l’accessibilité au grand public. Par contre, son association à  « bas-débit » n’est pas forcément judicieuse.

Un menu principal invisible

Sncf chaînes

03 « Vos chaînes » fait office de menu principal et est omniprésent sur toutes les pages. Malheureusement, son mode est toujours invisible. Son signalement se concrétise avec la mention écrite « Sélectionner vos chaînes », le pictogramme d’une flèche et 2 traits verticaux à  chaque extrémité. L’utilisateur n’a pas forcément le réflexe et l’habitude d’aller sur « sélectionner vos chaînes » pour naviguer à  travers un site. De plus, l’interactivité se fait seulement lors du rollover sur le lien textuel qui n’est pas assez visible par son positionnement en dessous du champ du moteur de recherche.

Un contenu mal agencé

sncf corps de la page d’accueil

04 Le contenu est assez confus comportant parfois des vignettes totalement illisibles. Lors du rollover sur certaines vignettes, un effet d’agrandissement superflu se crée et annonce déjà  des étapes et des clics inutiles pour accéder à  l’information :
sncf zoom sur les vignettes

  • 1) Un effet de zoom et de perspective dans un univers dit « 3D » apparaît et l’ensemble des vignettes se fondent pour ne laisser que celle sélectionnée.
  • 2) Un animation se joue lors du rollover sur cette vignette. Elle a pour but d’indiquer l’affiliation de cette rubrique à  une des chaîne.
  • 3) Enfin, lors du clic, une page se charge brutalement sans effet de transition.

Beaucoup d’étapes pour des effets qui apportent peu au contenu. Peut-être que cela offre à  l’utilisateur un cà´té ludique mais l’accès à  l’information est ralenti.

Pour revenir à  la page d’accueil deux possibilités existes : le curseur hors de la vignette est souligné par une infobulle qui indique « cliquez pour revenir ». Ou bien la solution traditionnelle, un clic sur le logo dans le header. Et là  dans les deux cas, de-zoom… ouah !

Un pied de page sobre mais trop animé

Sncf footer

05 Ce site est conçu pour un format 1024x768px donc aucun scroll n’est envisageable pour un affichage d’écran similaire. L’inconvénient de ce footer est la présence d’un « Tickler » (bandeau défilant) qui annonce (environs toutes les 5 secondes) les derniers titres de l’actualité SNCF. Même inconvénient pour les deux rubriques dans le header. L’Å“il de l’utilisateur peut être perturbé par ces deux animations présentes dans cet espace réduit.

Ce pied de page témoigne aussi des lacunes principales de ce site : Les informations du Tickler sont cliquables et malheureusement elles ne se chargent pas dans le site mais ouvrent des pdf. De même pour le lien utilitaire « contact », une nouvelle page en Flash s’ouvre a part. Et le plus fort, pour le lien « mentions légales » une page html apparaît.
Mais pourquoi ?

Page type du site

sncf page type

01 Présence du titre de la rubrique sélectionné ainsi que le retour à  la page d’accueil qui se figure par la présence du damier animé en bout de ligne. L’utilisateur peut sans doute croire que ce motif n’est pas un lien mais juste une ornementation graphique. Aucune infobulle n’indique sa fonction ni guide l’utilisateur.

02 Ce bloc correspond au sous-menu, au contenu disponible d’une chaîne. Chaque thème est indiqué par son titre et par le nombre de sujet qu’il contient. Cela permet à  l’utilisateur de constater les thèmes plus ou moins rempli. La navigation est fluide, simple et compréhensible. L’animation et les couleurs du rollover (correspondant à  la chaîne) sont assez fin et s’harmonisent avec l’ensemble de la page. Dommage que l’utilisateur soit obligé de scroller dans un bloc assez petit et étroit. Il doit se concentrer davantage sur sa lecture.

03 Lors d’une sélection d’un thème dans le bloc 2, le contenu s’affiche instantanément avec un fondu rapide. Cette partie est assez bien hiérarchisé mais est assez pauvre d’un point de vue contenu. Des blocs d’informations ponctuelles sont présents mais donnent un site léger en rédactionnel par rapport à  l’abondance des sous-menu des chaînes proposée.

04 Ces pictogrammes sont explicites et le champ texte en-dessous confirme à  l’utilisateur leur fonction. Graphiquement, ils sont homogènes et correspondent à  l’ambiance du site : coin arrondies, doux, transparent, léger… La SNCF a fait un véritable effort sur la variété des médias proposé avec une présence forte de la vidéo.

sncf média

Les seuls regrets par rapport à  l’accès à  ces médias :

  • Ouverture systématique d’une autre page web(html ou flash) ou d’un autre site web lors d’une sélection d’un média proposé
  • Lorsque l’utilisateur a la possibilité de visionner que la vidéo, il est inutile de charger une autre page. La vidéo et son player devrait être disponible immédiatement dès la sélection du sujet. Pas besoin d’avoir une page intermédiaire.

05 L’emplacement de « Réagir, participer » est judicieux et les éléments graphiques illustrent bien le rédactionnel. La véritable surprise de la part de la SNCF vient de leur rubrique « Opinions et débats » qui dirige l’utilisateur vers un nouveau site permettant un feedback concret et disponible à  tous sur http://debats.sncf.com/.

06 « Le saviez-vous », ce Tickler informatif est sympathique dans son utilité d’information ponctuelle. Toutefois les illustrations graphiques qui l’ornemente nuisent à  sa lisibilité mais elles ne dérangent pas plus que ça la lecture du site et l’humanise un petit peu plus.

Tableau récapitulatif

Fonction Les + Les – Note
1. Design graphique – Design épuré
– Bonne gestion des nuances de couleurs
– Pictos et boutons homogènes au site et compréhensible
– Organisation visuelle cohérente pour les pages des chaînes
– Effet d’animation parfois inutile 3/4
2. Efficacité
[pertinence de l’information]
– Utilisation de la vidéo – Manque d’information écrite dans ce site
– Organisation confuse de la page d’accueil
1/4
3. Efficience
[rapidité de navigation]
– Accès à  la demande fluide – Un manque de transversalité entre les pages
– Menu des chaînes manque de visibilité
– Ouverture trop nombreuse de page annexe
– Trop de clic
1/4
4. Satisfaction – incitation à  participation via feedback – Gestion du portail très mal exploité
– L’accès à  l’information n’est pas au rendez-vous
1/4
5. Accessibilité – Un site à  part à  été réalisé, donc un effort à  été fait
– Vidéo avec sous-titre
(Pertinence des alt, des intitulés des liens)
– Images intégrées en dur dans le menu 3/4

Conclusion

09/20

La SNCF a fait un effort de mise à  jour et une volonté exemplaire sur le dialogue qu’elle veut instaurer avec ces utilisateurs. Ce nouveau site à  une ligne graphique cohérente et plaisante mais son ergonomie est maladroite. Le site que la SNCF aurait du refaire bien avant celui-ci est sans nul doute Voyages-sncf.com. Merci d’avoir pris le temps de lire ce billet jusqu’au bout. Pour vous relaxer, je vous invite à  visionner une chanson du dimanche !

Ergotest #04 : Sncf.com

Ergotest #03 : Deezer.com (v1)

Enfin le 3° Ergotest ! Je suis désolée de ne pas être assez régulière dans mes publications mais je travaille actuellement sur un autre projet que je ne manquerais pas de communiquer dessus lorsque celui-ci sera en ligne.
Il y a moins d’un an j’utilisais Pandora, puis n’ayant plus accès je me suis tournée vers Last.fm, des webradios associatives comme KillTheFM.net et aujourd’hui je teste Deezer qui sera, bien sûr, ma nouvelle analyse ergonomique.

A propos de Deezer

Deezer Logo
Deezer est le premier site français légal de musique illimitée à  la demande ayant signé un accord avec la SACEM. Il permet d’écouter gratuitement et en streaming plusieurs centaines de milliers de titres dont une partie des recettes publicitaires est reversée aux artistes. Créé en juin 2006 par Daniel Marhely et Jonathan Benassaya, ex-Blogmusik.net Deezer fut parler de lui il y a quelques mois à  cause de ces problème de téléchargement, d’Universal et de Free. Dernièrement, Deezer a signé un accord avec SONY BMG qui apporte plus de 165 000 titres à  leur catalogue. Je ne ferais pas un récapitulatif historique mais je vous invite à  lire l’interview de ses fondateurs sur 01net.

Page d’accueil

Deezer Home Page

Le Header

01 Un header bien agencé avec une présentation propre et clairvoyante des éléments :

  • Un logo situé à  gauche qui correspond au sens logique de lecture.
  • Un moteur de recherche omniprésent et aligné au logo sans pour autant l’obstruer.
  • Un lien textuel juxtaposé au moteur de recherche. Cela permet à  l’utilisateur de faire une demande à  Deezer lorsque ce dernier ne trouve pas un artiste ou un titre. Heureusement que sa mise en forme n’est pas un bouton graphique car il aurait alourdi le header. Toutefois un effet lors du rollover n’aurait pas été de trop pour accentuer la compréhension de ce lien.
  • La disposition des 16 drapeaux permet à  l’utilisateur de comprendre le fort potentiel international de Deezer. Mais est-ce vraiment nécessaire que ces éléments soient toujours visible dans le header et le pied de page ?

deezer header connecté

  • Inexistence de menu, seul des liens utilitaires concernant le membre ou le fonctionnement du site sont disposés en haut du header aligné à  droite. Il aurait fallu centrer ces liens afin d’éviter un empiètement sur le logo lorsque l’utilisateur est loggé.

Player Audio

02 Un player simple et efficace :
Deezer player audio

  • Un carré blanc annonce l’affichage des jaquettes d’albums lors de l’écoute d’un titre. Absence de lien qui aurait pu ouvrir la playlist de l’album avec la discographie de l’artiste.
  • Ce player est compréhensible avec des options essentielles. Remarquons l’icà´ne iTunes qui propose l’achat du titre. Encore une fois la pomme a su s’infiltrer et s’imposer.
  • Blocs grisés qui annoncent à  l’utilisateur des fonctionnalités intéressantes lors de l’écoute : « votez pour ce titre », « blog et partage »

Deezer player audio mode connecté

  • « Blog et Partage » : l’utilisateur peut intégrer un player audio personnalisable à  son blog ou bien envoyer/copier le lien par email ou « messenger » du titre en écoute. Attention la personnalisation du player reste très rudimentaire et tant mieux car cela permet de conserver une homogénéité avec le site internet. Apparition dans une pop-up que je détaille plus bas dans ce billet.

deezer player personnalisable

  • Souvent lors de l’écoute d’un titre la SmartPlaylist apparaît. Cette dernière permet d’écouter pendant plus de 3 heures des artistes semblables au titre en écoute.

Deezer SmartPlaylist

  • Les mêmes fonctionnalités sont présentes dans la SmartPlaylist que sur dans sa playlist : sélectionner un titre pour l’ajouter à  une playlist ou l’acheter sur iTunes, consultation de la fiche de l’artiste. La jaquette de l’album est pleinement visible et met l’artiste en avant. Un seul regret : lorsque l’utilisateur décide de passer au titre suivant, clic sur le picto compréhensible la « flèche », la jaquette passe en arrière-plan grisé et l’utilisateur ne peut revenir dessus. Pourtant un rollover est actif mais rien ne se passe ?

Une colonne de publicité

03 La colonne de droite est dédiée à  la publicité. Affichage d’un pavé 300x250px signalé par une mention « publicité » et une liste juste en-dessous d’Adwords. Notons juste que Deezer utilise énormément et ingénieusement les Adwords sur leur site. Ils sont très bien intégrés et ne gêne pas l’utilisateur qui en fait facilement abstraction. Je ne m’étalerai pas sur l’intégration de la publicité car j’y ai déjà  consacré un billet dernièrement : « Pub et contenu, une cohabitation est-elle possible ? »

Auto-promotion

Deezer autopromo

04 3 mots illustrés à  l’aide de pictos explicites, une phrase proposant 2 options gratuites, un emplacement central bien défini, le tout sur un fond blanc qui se détache de l’ensemble du site et qui révèle son corps. Cette auto-promotion est pertinente par son choix de disposition que par son dépouillement. Le seul reproche serait l’effet ombré qui surcharge l’effet d’élévation lors du rollover.

Le Top des Top

05 Le « Top » des artistes est classé par styles musicaux sous forme de fiche ou répertoire finement travaillé aux niveau des ombres. L’utilisateur peut écouter le titre mit en avant ou accéder à  tous les titres de l’artiste. Sachant que le site est conçu en Flash, le rollover des rubriques aurait pu être travaillé avec une animation reflétant vraiment la notion de fiche comme sur le portfolio Checkland Kindleysides (voir l’animation sur les onglets)

Bloc infos

06 Ces deux blocs présentés comme les « Tops » permettent de tenir au courant l’utilisateur sur les dernières nouveautés liés à  Deezer ou à  un artiste mis en avant. Une présentation sobre et épuré dont le contenu reste lisible malgré un corps typographique de petite taille.

Pied de page

Deezer pied de page

07 Le pied de page a une mise en forme classique comportant un nombre insensé de liens utilitaires. Etant sur des nuances de gris, ce dernier n’endommage pas visuellement le site. Toutefois ces liens chargent une page contenant un header minimale sans les identifiants de l’utilisateur et sans player ce qui arrête l’écoute en cours. Regrettons le classement par ordre alphabétique des artistes qui devrait être davantage mis en avant sur le site.

Deezer Page mentions legales

Playlists

La colonne de gauche fait office de menu permettant à  l’utilisateur d’avoir accès à  sa dernière recherche, un lien retour vers la SmartPlaylist, ses playlists ou à  la possibilité d’en créer une. Toutefois, il y a un problème de transversalité entre l’utilisation de ses fonctionnalités et le retour à  sa playlist en écoute.
Les pictos illustrant les rubriques n’apportent rien à  leur compréhension. Attention, le pictogramme de la SmartPlaylist est similaire à  Mes mp3s.

Créer une playlist :
Deezer playlists

L’option pop-up pour créer une playlist est une très bonne idée (pas de chargement de page, pas d’arrêt du player, recouvrement partiel du site) le seul inconvénient est sa trajectoire et l’effet désuet lors de son apparition. Une ouverture de type lightbox aurait été tout aussi efficace et sobre ce qui correspond davantage aux choix graphique de Deezer.

Organiser sa playlist :
deezer classement d’un titre

L’utilisateur a la possibilité de déplacer et classer ses mp3 dans ses playlists à  l’aide de l’option « drag&drop ». Ou bien, d’ajouter un titre à  une playlist à  l’aide du bouton « + » qui ouvre un menu déroulant sur le titre en question. Ces 2 options ne gêne pas la lisibilité et évite un abus de pop-up.

Deezer bouton playlist

Les pictos utilisés pour la lecture du titre ou l’ajout dans une playlist sont assez instinctif et compréhensif grâce à  des infobulles qui apparaîssent lors du Rollover. Dommage que c’est boutons/pictos ne changent pas d’état lors du rollover, cela accentuerait leur compréhension. Le changement d’état de la souris ne suffit pas.

Blogger sa playlist :
Deezer Blogger sa playlist

Dans les « options de playlist » (voir visuel ci-dessus), Deezer permet à  l’utilisateur d’ajouter à  son blog sa playlist, en français ou anglais, dans un player à  l’effigie de Deezer. Pas de personnification cette fois-ci.

Ajouter des MP3

deezer telecharger mp3

Un service rapide offrant la possibilité d’uploader plusieurs mp3s en même temps. Peut-être que Deezer pourrait envisager par la suite une application similaire à  Box.net avec l’option « drag&drop » en java afin d’aller encore plus vite pour uploader plusieurs fichiers se trouvant dans différents dossiers.

Tableau récapitulatif

Fonction Les + Les – Note
1. Design graphique – Design épuré et luxueux
– Bonne gestion des nuances de gris avec d’autres couleurs
– Utilisation sobre des effets « cover flow » et « glossy »
– Mise en valeur des jaquettes
– Pictos et boutons homogènes au site
– Corps du texte parfois trop petit à  mon goût 4/4
2. Efficacité
[pertinence de l’information]
– Accès à  la demande rapide et très rarement insatisfaisante
– Moteurs de recherche efficace
– Options pour blog pratiques
– SmartPlaylist pertinente
– Manque d’information écrite sur les artistes 3/4
3. Efficience
[rapidité de navigation]
– Player efficace et simple
– Création et alimentation rapide de sa playlist
– Organisation facile de ses titres
– Simplicité efficace pour uploader ses Mp3s
– Structure et organisation du site équilibrées
– Un manque de transversalité entre les pages 3/4
4. Satisfaction – Données importantes de musique
– Publicité bien intégrée et non intrusive
– Service gratuit
Titres souvent ralentis avec des coupures lors de l’écoute
– Arrêt du player lors d’ouverture de certaines pages
– Absence régulièrement de jaquette
– Absence de Mise à  jour des « Top » sur la page d’accueil
– Accès impossible aux playlists des autres membres
– Pas de connections avec d’autres membres
– Bug de Flash parfois
– Absence d’un widget Deezer
2/4
5. Accessibilité Le site est conçu en Flash donc… 0/4

Conclusion

12/20

Deezer est un site sobre et épuré avec de nombreuses fonctionnalités utiles. Leur seule problème est la qualité d’écoute des mp3s qui sont souvent ralentis. Je ne rentrerai pas dans le débat de l’accessibilité avec l’utilisation de Flash mais je vous invite à  lire « Flash et l’accessibilité : halte à  l’hypocrisie » de Fred Cavazza qui argumente mieux que moi ce point de vu que je partage.

A lire aussi :

Derniers Ergotests :

Ergotest #03 : Deezer.com (v1)

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

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)