la minute du geek.net 

Je travail actuellement pour 3 clients dont les sites internet servent de relais d’information pour des entités physiques (agences ou magasins). Les 3 projets sont assez différents mais leur point commun est de proposer aux internautes l’accès à des fiches agence (ou magasin) avec des coordonnées complètes, certaines d’entre elles proposent des plans de quartier (sous forme d’image) pour positionner l’agence, mais si vous ne connaissez pas le quartier en question, ils ne seront pas d’une grande utilité (et si vous le connaissez, vous n’avez probablement pas besoin d’une carte !). Le choix de google map pour apporter un service supplémentaire aux utilisateurs s’est donc imposé de lui même dans le cadre de ces différents projets.

Dans cette première partie de l’article, j’aborderais les solutions pour intégrer une carte google map sur votre site, et éventuellement comment la personnaliser et la compléter pour apporter toujours plus de services à vos utilisateurs. Dans un second temps je vous proposerais la démarche inverse : comment alimenter la base de google map avec vos informations pour être présent dans les recherches de proximité.

Si vous n’y connaissez rien en cartographie, voici quelques astuces pour exploiter pleinement le potentiel de google map (outil formidablement puissant, et gratuit !) en apportant une véritable valeur ajoutée à votre page plan d’accès.

Quel que soit votre domaine d’activité, si vous êtes amené à recevoir des visites dans vos locaux, l’affichage d’un plan d’accès sur votre site sera un petit plus qui facilitera la vie de vos visiteurs. Il suffit de taper “plan d’accès” dans Google image pour constaté la diversité qu’il peut exister quand il s’agit de représenter son entreprise sur un plan.

Un des grands classique consiste a simplement récupérer (sauvagement) une image générée par le service mappy.fr (on notera sur la capture ci-dessous que l’éditeur a pris la peine de noter “source : mappy.fr” cela part sans doute d’une bonne intention, mais cela ne rend pas l’acte moins illégal). J’ai sorti cette image de son contexte, dans la page on précise l’adresse en toute lettre (rue de paradis à Argenteuil) et on y précise même les moyens de s’y rendre en transport en commun (une démarche écologique qu’on appréciera ;-)).

Voyons rapidement quelles sont les informations que m’apporte cette page. Prenons un exemple concret, imaginons que je vive à Colombes (de l’autre coté de la seine par rapport a Argenteuil) et que je cherche a me rendre dans cette entreprise. En examinant le plan, je constate qu’il y a un centre hospitalier a proximité (mais comment s’appelle-t-il ?), que la rue que je recherche est parallèle a ce qui semble être un grand boulevard et a une autre rue (rue de la…). Finalement, même en vivant à quelques kilomètres de la, cette carte ne m’apporte aucune information pouvant m’aider dans mon déplacement.

Voyons maintenant ce que j’ai pu créer en quelques clics, sans aucune compétence technique particulière et que je peux récupérer sur mon site en toute légalité, il m’a suffit pour cela de cliquer sur le lien “Obtenir l’URL de cette page” de copier le code proposé par google dans mon site.
Agrandir le plan

Non seulement ce plan est plus complet, mais il est dynamique. Je peux donc me déplacer dans le plan pour réaliser que cette adresse n’est qu’a quelques kilomètres de chez moi. D’ailleurs si je décide de m’y rendre en voiture, un simple clic sur le point d’arrivé et google me propose de saisir mon adresse de départ pour me définir le trajet.
Agrandir le plan

En quelques instants, nous avons transformé une page assez frustrante par le peu d’information qu’elle proposait, en un véritable service pour tous les utilisateurs qui souhaitent venir nous voir.

Cette première partie est très simple a mettre en place, elle ne nécessite aucune compétence technique du moment que vous avez accès à l’édition de vos pages web. Mais voyons comment encore améliorer les informations proposées sur cette page grâce a l’API de google map. Je n’ai malheureusement pas le temps de réaliser des exemples concrets au moment de la rédaction de cet article, je me contenterais donc de captures d’écrans. Ces améliorations nécessitent des compétences techniques un peu plus évoluées, mais je suis sûr que votre agence web (ou votre geek de voisin ou de neveu) se fera une joie d’implanter ce type d’amélioration, qui encore une fois apporte un véritable plus à vos visiteurs.

Cette agence web a simplement remplacer le picto habituellement utilisé par google pour positionner une adresse par son propre logo. Cela permet d’identifier le point plus rapidement sur la carte, toutes les fonctionnalité de zoom, déplacement et de recherche d’itinéraires sont conservées.

Le site photoservice dédié a l’iphone a choisi d’apporter les deux informations essentielles pour les acheteurs d’iphone 3G en manque… “Ou puis-je le trouver” et “En reste il en stock”. En tapant simplement mon code postal, tous les points de ventes Photoservice proche de chez moi s’affichent sur la carte, un cliquant sur un des point de vente, l’état des stocks s’affiche (en plus d’un logo, d’une photographie de la boutique et d’un rappel de l’adresse). Vous l’aurez compris, avec un peu de développement vous pouvez afficher toute information disponible sur votre site dans cette bulle (horaires d’ouverture, disponibilité d’un produit, promotion en cours, point d’intérêt aux alentours de votre établissement touristique, etc…). Ainsi vous évitez à vos utilisateurs de parcourir plusieurs pages pour répondre ses besoins.

Il ne s’agit la que d’exemples particulièrement simples, le développement nécessaire est très accessible, leur force réside dans leur efficacité pour l’internaute et non dans leur complexité technique.

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.

Dans un billet précédent, je parlais de la frustration née dans mon poste précédent du fait que je n’exploitais la veille que je faisais (au point d’arrêter temporairement d’en faire). L’exemple typique est que nous n’avons jamais pris le temps de créer des personas alors que nous gérons 4 sites e-commerce… Ces derniers mois j’ai vu beaucoup de billets qui traitaient d’expériences réussies d’utilisation de personas dans la conception d’IHM. C’est un sujet qui semble complexe à maîtriser efficacement, mais il n’en est pas moins passionnant. Pour rappel, les personas sont des représentations de vos internautes, un profil détaillé de leurs habitudes et de leurs objectifs en venant sur votre site (ma définition n’est peut-être un peu vague, je ne suis pas encore très bien documenté sur le sujet). Les retours d’expérience de Jean Claude Grosjean semblent très intéressants, son dernier article sur les améliorations concrètes que l’on peut apporter a des interfaces suite à l’étude de ses personas l’est tout autant. Je ne peux rester plus longtemps sans en savoir un peu plus, j’ai déjà commandé un ouvrage qui à déjà une excellente réputation dans le domaine de l’ergonomie web (d’après la présentation de l’éditeur, un passage traite de l’utilisation des peronas). J’espère pouvoir vous en dire un peu plus après cette lecture qui promet d’être passionnante.