la minute du geek.net 

Vous avez sans doute vu passer l’article de capitaine commerce sur la complexité des interfaces dés qu’il s’agit de récupérer un mot de passe oublié.

Ce matin, je me suis retrouvé dans une situation du même genre. J’ai reçu dans la nuit la lettre d’information du site Marketing-etudiant.fr qui me proposait (entre autre) de télécharger un document dont la description avait l’air très intéressante (Méthode de l’audit marketing en B2B, B2C). En cliquant sur le lien très explicite “Télécharger ce document” je suis arrivé sur une page qui détail le contenu de la méthodologie, décidément très intéressé, je décide de le télécharger et clique sur le lien qui m’y invite.

Les documents téléchargeables sur le site marketing-etudiant sont réservés aux inscrits (ce qui est tout à fait compréhensible), en cliquant sur le lien de téléchargement, je me retrouve donc sur cette page :

Je dois vous préciser que j’ai consulté cette page vers 8h du matin, un dimanche, j’écoutais la radio d’une oreille et mon café était encore entrain de couler, donc j’avoue que ma concentration n’était pas au maximum. Voilà ce que j’ai perçu lors de ma première lecture :

Comme j’étais persuadé d’être déjà inscrit (car j’avais reçu la lettre d’information), je relu le texte, et j’ai finalement vu le message destiné aux adhérents, j’ai très largement balayé la page pour trouve le “menu” ou le “menu à droite” ? Non c’est sous le menu, à droite… Ok très bien je l’ai… heu… mon identifiant c’est quoi déjà ? Mon navigateur me propose un des identifiants que j’utilise régulièrement, je le tente, j’ajoute mon mot de passe… raté !

J’ai donc saisi un nom d’utilisateur incorrect ou inactif ou un mot de passe invalide. Alors que j’étais entrain de me demander ce que pouvais bien vouloir dire “nom d’utilisateur inactif” la page ne m’a pas laissé le temps de la réflexion car elle s’est rechargée pour m’afficher un nouveau formulaire d’identification.  Cela revient à dire : “Vous avez fait une erreur, mais je ne vous dirais pas laquelle… démerdez vous !” après le rafraîchissement automatique de la page (qui estime que tous les utilisateurs ont eu le temps de lire le message) le formulaire me propose de récupérer mon mot de passe.

Je résume, une page m’indique que j’ai commis une ou plusieurs erreurs (j’ai pu saisir un mauvais identifiant ET un mauvais mot de passe, sans parler du fait que mon compte est peut être inactif) et ne me propose aucune solution. Elle se rafraîchit ensuite pour me reposer la même question et me proposer une solution pour 1 des 3 problèmes potentiels.

Il est intéressant de constater à quel point les aberrations d’une interface sont flagrantes et facile a corriger quand on prend la peine de les décrire de manière simple. Si le développeur décrivait ces pages, il se contenterait d’expliquer leur fonction avec une articulation logique : Mauvais nom d’utilisateur ou mot de passe > Page informant de l’erreur > Nouveau formulaire d’identification > Fonction de récupération de mot de passe. Mais en étudiant le processus parcouru par un utilisateur (privé de café ) qui doit comprendre et interagir avec l’interface, on réalise très rapidement que les textes et les enchaînements de pages manquent de cohérence.

Étant d’un naturel borné, je continue ma quête d’un mot de passe me permettant de télécharger le fameux document. Je clique donc sur le lien (qui devrait me sauver) “J’ai oublié mon mot de passe”. Et la… c’est le drame… Le nom d’utilisateur est obligatoire !!! Alors que l’application vient juste de me dire que j’ai potentiellement commis une erreur dans la saisi du nom d’utilisateur, voilà qu’elle me demande de le saisir pour générer un nouveau mot de passe !

Une dernière tentative, je saisi un nom d’utilisateur, puis mon adresse mail :

Bon ok… je vais prendre un café…

Update à 11h30 : Après un certains nombre de café J’ai finalement réussi a retrouver le login et mot de passe que j’avais utilisé pour m’inscrire sur Marketing-etudiant.fr et j’ai pu télécharger le document (qui à l’air très complet). L’objet de ce billet n’est bien entendu pas de critiquer Marketing-etudiant qui propose un excellent contenu. Ce sont là des erreurs de conception régulièrement constatées sur différents sites, mais elles pourraient être simplement corrigées en réalisant des tests utilisateurs.

Lors de mon passage sur le salon e-commerce cette année, deux évolutions m’ont marquées par rapport aux années précédentes : Une offre de plus en plus large sur la production de contenu vidéo (j’y reviendrais sans doute dans un prochain billet) et une présence plus important de sociétés spécialisées dans l’ergonomie des interfaces (ou une mise en avant de cette compétence par les agences). Selon Erwan LAGEAT (Responsable de l’Architecture de l’Information chez Nurun) c’est l’arrivée à maturité des autres problèmatiques qui entrent dans la conception d’un site web (socles techniques, CRM, CMS, emailing…) qui permet aujourd’hui de se focaliser avec plus d’attention sur les questions d’ergonomie. En effet, de plus en plus d’agences ne se contentent plus d’utiliser le terme “ergonomie” pour faire bien dans leurs propositions, elles intègrent progressivement de véritables compétences dans ce domaine, voir même, dans le cas de Nurun, la création d’un service entier dédié à l’architecture de l’information. C’est évidement une excellente nouvelle, en particulier depuis l’arrivée des “rich media” et son lot de fonctionnalités, certes très sexy, mais parfois trop complexe à comprendre pour être utilisées efficacement.

Je le rappel pour ceux qui ont trouvé le moyen de passer a coté, pour des premiers pas réussis dans le fabuleux monde de l’ergonomie ;-), le livre d’Amelie Boucher est un passage obligé. Il est complété depuis quelques jours par le memento ergonomie web et puisque vous en êtes la, je vous conseil aussi la lecture de l’interview d’Amélie Boucher diffusée sur designers interactifs. Voilà, vous n’avez plus d’excuse pour mettre l’ergonomie en second plan dans vos projets web.

Je suis tombé par hasard sur la page de “webinars” (séminaire web) de la société de conseil Omniture. Le titre d’un extrait de ces webminars a particulièrement attiré mon attention : “Eye Tracking, Click Mapping, Conversion Pathing”. Et je n’ai pas été deçu ! Vous le savez sans doute, l’eye tracking est une technique utilisée pour l’analyse de l’ergonomie des sites web. Une caméra (enfin je pense, je ne connais pas précisément les détails du dispositif) fixe la rétine de l’utilisateur pendant la consultation d’un site, le logiciel est ensuite capable de représenter graphiquement les zones qui ont été physiquement lues durant la consultation, il affiche de façon très claire les parties du site qui ont simplement été balayés du regard et celles sur lesquelles l’utilisateur a passé plus de temps. Cela permet de comprendre avec plus de précisions comment vos internautes interprète votre site, quels sont les éléments qui ont véritablement attiré son attention.

J’insiste sur le “véritablement” car cette méthode enregistre de manière scientifique l’endroit ou se porte le regard, par opposition à la méthode déclarative où l’on demande à un internaute de commenter (de penser à voix haute) sa navigation : “Tiens ce titre me dit quelque chose, c’est probablement là que je vrais trouver ce que je cherche, non, ce n’est pas ça… ou peut bien être le moteur de recherche… “. Aussi bien intentionnées soient elles, les personnes ne vont pas forcément vous donner de véritables informations, elles auront tendance à vous dire que ce que vous attendez d’elles, en tout cas ce qu’elles imaginent que vous attendez d’elles. La participation à un test d’utilisabilité flatte l’égo de vos testeurs d’une certaine manière, vous leur demandez de participer à l’amélioration de votre produit, il est donc normal qu’elles veuillent trouver quelque chose à dire, même si la navigation est parfaitement fluide.

Dans le premier exemple de l’extrait ci-dessous, la société Marketing Sherpa a fait intervenir Steve Krug (si vous ne savez pas qui est Steve Krug courrez vite acheter son merveilleux livre “Je ne veux pas chercher” vous y apprendrez énormément de choses simples à mettre en Å“uvre pour améliorer l’ergonomie de vos sites web). En analysant la première disposition de la page d’accueil du site de Sun microsystems avec un système d’eye tracking on constate que le point de départ du regard est bien celui que l’on attend, mais ensuite l’attention de l’internaute se disperse rapidement, elle se dilue dans différentes directions. Ce n’est pas dramatique en soit, la plupart des éléments forts sont bien “vus” par le visiteur. Mais si vous cherchez a positionner un CTA à un endroit fort du site, vous ne disposez que de très peu d’espace ou vous pourrez être sûr de faire un carton.

La réorganisation de la page en colonne apporte une lecture logique qui incite l’internaute a balayer les colonnes de haut en bas et d’enchaîner avec la colonne suivante, notre subconscient reconnaît cette mise en page, c’est celle d’un journal papier, et il nous apparaît donc naturel d’adopter une méthode de lecture cohérente avec notre expérience de lecture du journal. Le résultat de la seconde étude d’eye tracking est vraiment impressionnant, vous disposez non seulement de plus d’espace pour solliciter l’attention de l’internaute, mais en plus le comportement de tous les visiteurs testés est sensiblement le même.

Dans la seconde page analysée (une page du site microsoft), on apprend aussi plusieurs choses très utiles.
Tout d’abord, notre cerveau ne traite pas les images et les textes de la même manière, les images vous nous permettre de nous situer dans la page, elles vont être lu mécaniquement et analysée de façon beaucoup plus rapide que du texte.
Dans notre exemple, les visages des intervenants servent uniquement à “ancrer” le regard et à l’orienter vers les textes correspondants. Le processus de lecture nécessite plus d’attention, et notre regard va donc s’attarder plus longuement pour lire et comprendre le texte (alors que l’image à été interprété de façon plus intuitive). Vos images devront donc êtres utilisés dans une logique de pictogramme, elles apportent une information rapide permettant de comprendre de quoi le texte traite. Dans notre exemple le visage des intervenants permet d’identifier rapidement qu’il s’agit de conférences (dans le contexte de la page), l’Å“il peut donc très facilement découper les différentes manifestations proposées et passer de l’une à l’autre sans effort (le même motif est utilisé pour chaque conférence, une fois qu’on a identifié le modèle, on comprend qu’il est affiché à plusieurs reprises). Ensuite le regard s’attardera sur le titre, si celui si à un intérêt pour le visiteur, son regard continuera sur le texte descriptif. On retrouve la aussi le mode de lecture d’un journal papier.

La fin de la vidéo ne semble pas fonctionner normalement (mais l’animateur enchaîne sur un sujet différent de l’eye tracking), vous pouvez consulter la présentation dans son intégralité sur la page des webinars : SEM Insights into B2B Buyers: Using Search to Understand Your Sales Cycle

Get the Flash Player to see this player.

Un des points qui permet de se rendre compte très rapidement qu’un site n’a pas subit de vérification basée sur une grille de qualité (du type Opquast) est l’absence d’une page 404 véritablement personnalisée. C’est une erreur courante, on laisse généralement “ce genre de détail” pour la fin de la production du site et malheureusement on oublie souvent de la mettre en ligne ou, dans le meilleur des cas, elle est réalisée rapidement sans attention particulière.

Il est regrettable de consacrer autant d’énergie sur l’optimisation de votre navigation, de vos pages de transformation (validation du panier, inscription à votre newsletter, etc…) et de laisser l’internaute se débrouiller dés qu’il se perd dans votre site…

Un excellent livre blanc à été publié récemment par la société Converteo pour indiquer les bonnes pratiques à mettre en place sur vos pages 404. Un sondage publié dans cette étude indique que près de 40 % des internautes décident de quitter le site après avoir rencontré une page d’erreur 404. Si vous ramenez ce pourcentage a vos taux de transformation… vous réaliserez sans doute qu’il est temps de vous soucier de remettre ces internautes perdus sur la bonne voie.

Je vois que j’ai su toucher un point sensible, voici donc les quelques éléments à prendre en compte sur la préparation de vos pages 404 :

Ne redirigez pas vos internautes sans les prévenir

Beaucoup de sites optent pour la facilité en redirigeant l’internaute sur la page d’accueil ou sur le plan du site sans même leur demander leur avis. C’est grossier… et très frustrant ! Imaginez vous perdu dans les rues d’une grande ville, avant même que vous ayez eu le temps de sortir votre plan (ou votre iphone ;-)) un bus vous embarque et vous dépose sur votre lieu d’arrivée sans vous demander votre avis ! Beaucoup d’internautes n’auront pas le reflex de refaire tout le chemin qui les a menés à la page sur laquelle ils se trouvaient juste avant l’erreur et abandonneront donc la navigation sur votre site.

N’utilisez pas le terme 404

En effet si votre audience n’a pas de sang geek qui lui coule dans les veines, cela ne lui parlera pas. Personnellement j’aurais aussi tendance a éviter le terme “Erreur” qui a une connotation négative.

Conservez la navigation du site, proposez un contenu clair et rapidement compréhensible

Si votre navigation est bien conçue autant l’exploiter au moment ou vos utilisateurs en ont le plus besoin. Inutile de déclencher des questions inutiles, ils sont encore sur votre site, ils doivent trouver les repères qui le confirment. L’espace initialement réservé au contenu (ou catalogue produit) doit simplement être remplacé par un texte court expliquant la situation. Vous pouvez éventuellement faire preuve d’un peu d’humour sur cette page et transformer la frustration due a l’erreur en moment de détente, attention cependant… l’humour de geek, les jeux de mots sur la page 404 ne sont pas forcément compris par tous les internautes. Je me souviens d’une page 404 ou l’on indiquait à l’internaute qu’il avait atteint la fin du web, qu’il n’y avait plus d’autre page a voir, et qu’il pouvait donc éteindre son ordinateur et faire quelque chose de plus constructif… Amusant… mais pas très constructif pour le coup.

Expliquez et prenez la responsabilité pour vous

Ranger quelques instants votre égo de webmaster irréprochable de côté et expliquez à votre internaute que la page qu’il cherche a atteindre n’a pas été trouvée, ne l’accusez pas d’avoir fait une erreur (même si vous savez que c’est de sa faute ;-)), exprimez vos regrets pour la gène occasionnée, n’en faites pas des tonnes non plus ! Le contenu de cette page ne doit servir qu’a renvoyer l’internaute sur une autre page, le texte ne doit pas être trop long.

Proposez d’autres options

Votre internaute est perdu, il faut donc lui donner suffisamment d’information pour qu’il puisse reprendre sa navigation, mais pas trop pour ne pas l’assommer avec des informations non sollicitées. Les éléments principaux à proposer sont : le plan du site (si votre plan de site est trop important, préférez un lien vers le plan), le moteur de recherche (assurez vous que le moteur de recherche est clairement identifié dans votre page, n’hésitez pas à préciser ou il se trouve dans la page si nécessaire). Si la technologie de votre site le permet, analysez l’URL qui a été saisie par l’internaute pour proposer des mots clés à saisir dans le moteur de recherche, encore mieux, proposez des liens (qui existent !) en rapport avec les mots clés de l’URL. La page 404 est susceptible d’être consultée par les robots des moteurs de recherche, veillez à ce que le contenu alternatif proposé soit lisible par les robots. Si vous souhaitez voir un très bel exemple je vous conseil la page 404 d’Apple.fr (et oui on est fan ou on ne l’est pas !)

Tenez compte du feedback

Ne perdez pas de vu que c’est une erreur qui a conduit à l’affichage de cette page, il y a donc probablement un point à corriger. Pensez à bien tagguer votre page 404 avec les scripts de votre outil d’analyse de trafic. Vous devrez récupérer l’URL de la page recherchée et l’URL de la page d’origine. Au lancement d’un site surveillez de près les statistiques de cette page, elle vous donnera des informations précieuses sur les corrections à apporter rapidement, ensuite notez dans votre planning une vérification mensuelle de ces analyses pour ne pas oublier d’y revenir régulièrement. Dans le cas d’une erreur provenant de votre propre site la correction sera rapide, si l’internaute à été mal orienté a partir d’un site partenaire, envoyez simplement un mail au webmaster du site concerné, dans le cas d’un moteur de recherche (si vous avez changé le nom d’une page) mettez en place une redirection de type 301 (qui indique au navigateur et aux robots des moteurs de recherche que la page a été déplacée de façon permanente).

Vous pouvez aussi profiter du fait que des internautes vont forcément consulter cette page pour leur demander de vous remonter les erreurs. Dans ce cas privilégiez des interfaces très simple et rapide d’utilisation (vos visiteurs sont peut-être plein de bonnes intentions, mais ils n’ont pas que ça à faire), insistez sur le fait qu’ils vous rendent service. Le plus simple est d’ajouter une fonction “déclarer un lien briser” dans votre page, celle-ci enverra une fiche de bug par mail au webmaster sans rien demander à l’internaute (toutes les informations nécessaires peuvent êtres récupérées automatiquement en javascript), n’oubliez pas d’indiquez à l’internaute que le message a bien été pris en compte et que vous le remerciez pour son aide. Si vous optez pour un formulaire de contact, cela implique de démarrer une relation avec l’internaute, dans ce cas n’oubliez pas de répondre a son message dès que l’erreur aura été effectivement corrigée.

En plus du livre blanc de la société Converteo, je vous conseil la lecture de l’article du site A list apart sur l’optimisation de vos pages 404, le blog de la société Varien qui propose 26 exemples de pages 404 de sites e-commerce américain et le site 404 research lab qui liste quelques exemples de pages 404.