Mes meilleurs vœux avec Sketchtravel

Je vous souhaite à  tous mes meilleurs vÅ“ux pour cette année 2008 avec cette superbe illustration de Sylvain Marc pour un projet ambitieux qui a commencé en 2006 avec de très grands artistes de renoms: Sketchravel : 1 carnet de croquis – 50 artistes – 0 frontières

Sketchtravel 2008

Suite à  l’email de Gérald Guerlais et Dice Tsutsumi (fondateurs de ce projet), je tenais à  partager ma joie vis-à -vis de ce projet fabuleux en vous le faisant découvrir :

« Cette année 2007, le carnet a commencé au Japon, puis s’est rendu à  New-York, San Francisco, San Diego, et Los Angeles. Il a pris 6 avions, 14 bus, 15 métros et 17 taxis pour rencontrer les artistes. Le bilan de cette année écoulée est très encourageant. 30 000 visiteurs sur le site officiel. 22 007 consultations du clip animé sur les sites Youtube et Dailymotion.
[…] Le voyage est loin d’être fini. Prochaines destinations attendues : d’autres artistes hétéroclites à  Los Angeles, Bogota (Colombie), Buenos Aires (Argentine), New-York (2nd round), Tokyo (2nd round), Paris (2nd round), Lille (France), Oslo (Norvège), Bruxelles (Belgique), Neuchâtel (Suisse), Barcelone (Espagne) et Londres (Angleterre)
[…] Sketchtravel est toujours une opération indépendante sans financement public et basée sur le volontariat. De nombreux savoir-faire issus de domaines de compétences variés associent leur effort pour concrétiser ce projet international.
 »
Gérald Guerlais & Dice Tsutsumi

Le carnet de croquis original sera exposé à  la Galerie Arludik à  Paris. Puis, il sera vendu aux enchères afin que les gains soient reversés à  une association caritative sélectionnée par les auteurs.

Mes meilleurs vÅ“ux à  tous ces artistes qui se sont réunis pour ce merveilleux projet.

Blog de Sketchtravel : WorldTravelerBook
Interview de Gérald Guerlais sur Jamais203.net

Mes meilleurs vœux avec Sketchtravel

Ergonomie web, pour des sites web efficaces

Je viens de recevoir le livre d’Amélie Boucher qui est, avec toute sincérité, très bien écrit. Avant de vous en parler je tiens à  évoquer mon avis sur le livre de Patricia Gallot-Lavallée que je vous avais mentionné dans un billet précédent.

« Internet donne moi ce que je veux ! »

internet, donne moi ce que je veux Patricia Gallot-Lavallée donne 60 modèles de navigation en se basant sur des points précis de sites existants : barre de navigation, formulaire d’incription, moteurs de recherche, widgets… Elle décortique un élément qui est complété par une interview, des conseils ou des notes. Toutefois je ne suis pas satisaite. On n’y apprend plein de choses mais on ne sait pas pour autant comment les appliquer. Ok ! Ce n’est pas le but de ce livre et c’est facile de critiquer sachant que mes Ergotests manquent d’approfondissement.


Je le sais bien mais je crois avoir trouver « Le livre » qui va m’aider :

« Ergonomie web, pour des sites web efficaces »

Ergonomie web On vient de me l’offrir hier soir et je suis déjà  en train de le dévorer. A peine au chapitre 3, qu’il est déjà  rempli de post-it, de note, de pense-bête qui vont m’aider à  appliquer ce que je sais déjà  par rapport à  mon cursus mais surtout ce que j’y découvre dans cet ouvrage : fondements de l’ergonomie, méthodes, processus, règles, théories, bonnes pratiques, applications…

Des connaissances vulgarisées que seul un ergonome peut avoir eu lors de ses études et de son expérience professionnel. J’apprécie énormément la qualité d’écriture d’Amélie Boucher qui est simple, efficace et accessible. Chaque propos sont illustrés d’exemples concrets ce qui permet une meilleure compréhension.

J’espère pouvoir réutiliser ses conseils dans mes futurs Ergotests et surtout dans mes projets professionnels à  venir. Je vous le conseille vivement car il est à  porté de tous et bénéfique à  n’importe quel profil.

En vous souhaitant de bonnes fêtes de fin d’années et à  bientà´t en 2008.

A lire aussi :

Ergonomie web, pour des sites web efficaces

Univers ErgoIHM

Logo ergoIHM

La semaine dernière j’ai reçu un email fort sympathique de Sébastien Médard et Alexandre Huete pour m’avertir qu’un nouveau projet était né : l’univers de la liste de diffusion Ergoihm. Ergophile en fait partie. Cet environnement créé sous Netvibes est une très bonne idée et permet d’avoir plusieurs ressources de blogs qui aborde l’ergonomie.
Univers Ergo IHM

Afin d’expliquer davantage ce projet Alexandre a accepté avec gentillesse de répondre à  3 petites questions :

Comment vous est venue cette idée et dans quel but ?

Cette idée nous est venue en discutant avec les autres modérateurs de la manière la plus simple (pour nous) et efficace (pour la communauté ergoihm) de partager du contenu. Nous avons la chance d’être dans un contexte culturel et technique favorable au partage de contenu ; il ne nous manquait plus qu’à  trouver une plate-forme la mieux adaptée à  une telle expérience. Le choix s’est arrêté sur Netvibes car leur manière de présenter les univers correspondait parfaitement à  la manière dont nous imaginions notre espace : quelque chose en libre accès avec la possibilité d’intégrer ces blogs à  nos propres outils de veille (plus facile pour les utilisateurs de netvibes, car manuelle pour les utilisateurs d’autres lecteur de flux rss).
Quant au but, je pense que les membres de la communauté des ergonomes (au sens large) auront compris que cet univers vient compléter la liste de diffusion d’ErgoIHM en y apportant le cà´té partage d’information.

Votre profession est-elle liée au domaine de l’ergonomie ?

Je pense que nous pouvons l’affirmer dans la mesure o๠je suis ergonome et que je me suis spécialisé dans les Interactions Hommes Machines 😉
C’est vrai que la discipline « ergonomie » est plus connue que le métier mais je vous assure que ça existe… ou alors on m’aurait menti !!! Notre métier au sein d’un projet informatique est d’accompagner le choix de différents acteurs (informaticiens, clients, chefs de projet, graphistes, marketings) tout en mettant en avant le point de vue de l’utilisateur final.

Pour représenter les utilisateurs on nous demande souvent de nous « mettre à  leur place » (pour donner encore plus de poids à  ces guillemets, il faut m’imaginer faire la même chose avec mes index et majeures des deux mains) sauf que nous ne sommes pas dotés de facultés extra-sensorielles, ni d’une empathie à  toute épreuve ! Nous allons donc interroger directement les utilisateurs finaux et déployer notre boite à  outil pour travailler avec eux : tests utilisateurs, entretiens, analyse de l’activité, tri par cartes, etc. (lire à  ce sujet le très bon article sur Ergolab)

En fonction de la place que nous allons occuper dans le projet nous allons avoir plus ou moins de marge de manœuvre :

  • Si la demande arrive dès la phase de conception, et dans la mesure du possible, on intègre les utilisateurs dans la boucle et on mène une conception centrée utilisateur ; c’est à  dire considérer leurs besoins tout au long du processus de développement d’une application et non pas à  la fin !!! Puis présenter ces résultats lors des itérations réalisées entre les différents acteurs du projets,
  • Si la demande arrive bien en amont, nous allons pouvoir aider les demandeurs à  formaliser leur besoin. La possibilité de réaliser l’analyse de l’activité des utilisateurs finaux ciblés permet de confronter leurs besoins et leurs contraintes à  ceux du demandeur,
  • Si la demande arrive après la phase de conception, c’est dans ce cas o๠nous avons le moins de marge de manÅ“uvre et notre rà´le consiste à  limiter la casse ! Nous faisons des tests ainsi que des recommandations qui ne seront pas forcément prise en compte sur la v1 du projet mais sur une version ultérieure.

En fait ce qu’il faut retenir de tout ça, c’est que plus tà´t on intègre un ergonome dans un projet de conception, et plus tà´t, lui pourra intégrer l’utilisateur final dans ce projet !

Comment avez vous sélectionné les sources de cet environnement ?

En fait nous avons bouclé en interne avec les autres modérateurs pour savoir quelles étaient les lectures quotidiennes de chacun. Il nous a fallu ensuite trouver les catégories de notre univers ergoihm et faire la répartition des flux en fonction des thèmes choisis. Nous nous sommes retrouvés avec du contenu déséquilibré, notamment sur les facteurs humains, et avons rapidement mis à  contribution des collègues ciblés afin qu’ils diffusent également leurs sources. Actuellement nous attendons les retours des utilisateurs d’ergoihm sur le partage de leurs sources et sommes prêts à  faire vivre cet espace en fonction de leurs remarques.

Merci à  Sébastien et Alexandre pour ce projet qui va en aider plus d’un 🙂

Univers ErgoIHM

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

Mon premier test utilisateur

Illustration clavier
Cette semaine, j’ai eu la chance de participer à  un test utilisateur formel. Ce test a eu lieu dans une pièce fermée contenant une vitre sans tain, 4 caméras, 3 micros, 2 écrans plasma (reliés à  l’ordinateur que j’ai manipulé) et un ergonome qui a surveillé, avec sympathie, mes faits et gestes. Pour clauses de confidentialité je ne dévoilerai pas le site testé, ni les questions, ni le lieu…

Les étapes

Ce test utilisateur a duré deux heures, o๠la notion de partage et de découverte a occupé mon attention :

  • 10 minutes à  apprivoiser seule le service. L’ergonome n’était pas dans la pièce.
  • 1h50 o๠l’ergonome m’a demandé d’agir sur le site en suivant ses requêtes.
  • 10 minutes de questions sur la satisfaction d’utilisation du site testé.

« Partage & Découverte » : l’utilisateur participe à  l’amélioration d’un service. Il donne son avis, son approche par ses commentaires et ses actions qu’il commente à  voix haute. Il découvre une nouvelle navigation qui lui est inconnu et se doit d’être attentif, spontané mais aussi naturel dans ses actions. L’ergonome étant présent avec l’utilisateur, une relation amicale se créé et le dialogue se construit au fil du test. Des échanges et des questions apparaissent afin de construire et d’établir des solutions qui peuvent être envisageables.

Conclusion

Si vous avez la possibilité un jour de participer à  un test utilisateur, n’hésitez pas une seconde, allez-y ! Une expérience inattendue vous y attend. En aucun cas j’ai eu l’impression d’être surveillée ou épiée par les caméras ou l’ergonome. Si votre profession est lié au web, vous constaterez que, peu importe votre place dans le processus de création d’un service, les tests utilisateurs sont primordiaux dans l’appréhension et l’approche de l’utilisateur face à  un nouveau projet inconnu. Ces tests permettent de corriger des erreurs et même d’apporter des fonctionnalités qui n’étaient pas prévues.

Mon premier test utilisateur