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.

Accès à la page d’inscription

Sur la page d’accueil, bien que le visuel invitant les internautes à s’inscrire à la newsletter soit positionné directement sous le logo, il est animé et proche d’un bandeau qui lui aussi est animé. Lors de ma première consultation de la page, j’avoue être passé complètement a coté (pensant sans doute instinctivement qu’il s’agissait d’un encart publicitaire). De plus, l’animation est organisée de telle manière que tout le texte disparaît pendant la moitié de son cycle, ce qui fait que la moitié du temps, l’information n’est pas présente à l’écran.

Plus bas dans cette même colonne, un encart bien isolé visuellement annonce « La minute marketing », c’est ce point qui a attiré mon attention et générer un clic. Il s’avère que la minute marketing est une des deux newsletter proposée par la société.

Dans certaines pages intérieures (malheureusement pas toutes) l’appel à l’inscription à la newsletter se fait de manière plus claire avec un visuel sobre et très lisible sous les menus contextuel (à droite), le rose (couleur de la marque) sur fond blanc rend le visuel quasi impossible a rater.  On regretta cependant que dans d’autres pages, les menus contextuels soient tellement longs que le visuel est relayé beaucoup plus (trop) bas dans la page.

Un positionnement dans le bandeau supérieur de la page (qui n’est quasiment pas exploité) permettrait de l’afficher en permanence au même endroit et de manière bien visible.

Page d’inscription

2 newsletters sont proposées aux internautes, c’est clairement indiqué dans le titre (Nos newsletters). On informe aussi rapidement sur la fréquence d’envoi dans la baseline (L’actualité du site TNS Sofres toutes les semaines). Un descriptif rapide est proposé pour chacune des deux lettres (les éditeurs ont souvent tendance à l’oublier, mais c’est toujours intéressant de savoir à quoi on s’abonne !), ces descriptif servent aussi à attribuer un code couleur aux deux lettres, qui nous permettra de faire un choix plus instinctif lors de l’inscription plus bas dans la page.

Et (comble du luxe) des exemples sont disponibles ! Dans le cas de la minute marketing, rien à dire… le lien renvoi vers la page d’archive qui permet de consulter la dernière minute publiée et de consulter la totalité des archives. Dans le cas de la newsletter par contre, quelques petits points pourrait être améliorés. Tout d’abord, il semble qu’il n’y ait pas d’archive pour cette lettre. Comme je le disais dans mon billet sur les bonnes pratiques, l’archivage d’une lettre d’information permet de revenir consulter une lettre que l’on a supprimée par erreur, il permet aussi d’améliorer le référencement d’un site en proposant plus de contenus et de liens aux moteurs de recherche. Ensuite l’exemple proposé date d’un peu moins d’un an, il peut être difficile de juger de la pertinence d’une lettre qui traite de sujets qui étaient d’actualité il y a un an. La dernière version de la lettre (à défaut d’avoir accès a des archives) serait sans doute plus pertinente. Et enfin, dans l’entête de cet exemple, on trouve un lien vers « la minute marketing », quel peut bien être l’intérêt de s’inscrire aux deux lettres si l’une affiche systématiquement un lien vers la minute hebdomadaire ?

Formulaire d’inscription

Le formulaire est très clair, très aéré ce qui facilite la saisi d’information. On retrouve le code couleur de nos deux lettres au moment de choisir la ou les lettres auxquelles on souhaite s’inscrire. Les champs obligatoires sont très clairement identifiables, ce qui permet de s’inscrire en ne laissant qu’un minimum d’information si on le souhaite. Mais la quantité d’information demandée reste raisonnable et la clarté du formulaire doit inciter les internautes à remplir tous les champs (données que j’imagine précieuses pour un organisme comme TNS Sofres). Seul bémol de ce formulaire, la présence du bouton « recommencer » n’est absolument pas nécessaire.  Il y trop peu de champs pour automatiser la réinitialisation du formulaire, et cela risquerait même (en étant cliqué par erreur) de forcer l’internaute a ressaisir toutes les informations demandées.

Confirmation d’inscription

Après avoir validé le formulaire d’inscription, une confirmation s’affiche à l’écran et vous invite a revenir sur la page d’accueil du site. Étant donné que j’ai pris la peine de saisir mes noms et prénom, cette confirmation aurait pu être personnalisée en rappelant aussi l’email saisi afin de me permettre de contrôler que j’ai bien communiqué la bonne adresse. Le message aurait aussi pu préciser qu’une confirmation d’inscription à été envoyé, cela permettrait d’inviter les internautes a vérifier qu’elle n’a pas été filtrée par un anti-spam.

Mail de confirmation

Le mail de confirmation est arrivé immédiatement après avoir validé le formulaire, ce qui est une bonne chose. La encore, alors que j’ai pris la peine de saisir mes noms et prénoms aucun champs de personnalisation n’apparaît (ni dans le destinataire du mail, ni dans le sujet ou le corps du message). Le corps du message écrit en très (trop) petits caractères m’informe que mon inscription à la newsletter à bien été prise en compte, mais le fait que j’ai souscris aux deux abonnement n’est précisé nul part ce qui pourrait me faire douté d’avoir coché les deux cases et éventuellement recommencer l’opération en ne cochant que l’abonnement à la minute marketing. C’est d’ailleurs ce que je me suis amusé à faire (oui je sais… je suis un sacré marrant moi !). Lors de cette deuxième inscription, a aucun moment le système n’a vérifié si j’avais déjà été inscrit… le formulaire à bien été validé et j’ai de nouveau reçu une confirmation d’inscription…

J’attends de voir si les contacts mails sont dédoublonnés avant l’envoi ou si je vais du coup recevoir deux exemplaires de la même lettre chaque semaine.

Conclusion

Quelques très bonnes pratiques suffisamment rares pour avoir attirés mon attention : L’accès a deux lettres clairement dissociées, des informations sur la fréquence d’envoi, sur le contenu, l’accès aux archives pour l’une des deux, à un exemple pour l’autre. Un formulaire bien conçu rapide à remplir (même en saisissant toutes les informations non obligatoires) qui permet sans doute de récolter des données utiles.

Quelques petits défauts, pas très gênants certes, mais avec une correction rapide ils pourraient apporter un peu plus de confort aux utilisateurs : Donner accès aux archives de la newsletter principale, vérifier si l’email n’est pas déjà en base, personnaliser les messages quand les noms et prénoms ont été saisis, améliorer le mail de confirmation (typo plus lisible, rappel des abonnements souscrits), supprimer le bouton recommencer, positionner les boutons d’inscription à la newsletter au même endroit sur toutes les pages du site.

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.

Notre façon d’interpréter une page web n’est pas très éloignée de cet exemple, nous identifions immédiatement les mots clés que nous avons a l’esprit pendant la consultation d’une page. Si ces mots clés sont fondus dans la masse, ils seront plus difficiles à identifier, en ajoutant ce que vous pensez être un complément d’information à l’attention de vos internautes, vous ajoutez parfois du bruit, vous compliquez l’interprétation des pages et l’accès à une information essentielle. En pensant bien faire, vous augmentez donc la frustration de vos internautes et risquez de les voir quitter votre site sans avoir atteint leur but.

Bien entendu le contenu a son importance, il permet de rassurer et de renseigner l’internaute qui vient parfois chercher votre expertise dans un domaine. Il faut donc procéder en trois étapes :

- Séparer le contenu rédactionnel et les éléments qui doivent déclencher une action.
- Simplifier au maximum le contenu rédactionnel, aller à l’essentiel, reprendre les textes avec un style plus journalistique que littéraire
- Après avoir isoler les CTA (call to action) il faut jouer sur la taille des caractères, sur la mise en gras. Attention cependant à conserver des textes courts, si vos accroches sont trop longues, leur mise en avant n’aura pas la même efficacité. Si elles ne peuvent être réduites à une expression simple sans perdre leur sens, essayez d’extraire les mots principaux (qui seront captés par le regard) pour les mettre en avant et ajoutez une « baseline » en plus petit caractère pour préciser leur sens en faisant bien attention que les deux textes (l’accroche et la baseline) soit associés visuellement.

Le blog UsabilityPost vient de publier un très bon exemple de suppression du bruit dans une page. La page ainsi modifiée gagne considérablement en clarté ce qui permet aux visiteurs d’être plus efficace et d’atteindre leur but plus rapidement.

Avant tout j’ai une mauvaise nouvelle à vous annoncer, certains visiteurs arriveront sur votre page d’accueil… et repartiront aussitôt. C’est la vie, et tant que vous n’aurez pas accepté l’idée que tous les visiteurs ne sont pas des prospects potentiels, la lecture de vos statistiques de fréquentation continuera à vous déprimer. Par contre (et heureusement !) certains utilisateurs seront vraiment intéressés par les services ou produits que vous proposez, l’objectif est donc de leur faire comprendre très vite ce que vous pouvez leur apporter et de les orienter vers la page qui leur permettra d’en savoir plus. Imaginez un vendeur venir à votre rencontre dès votre entrée dans une boutique pour vous lister tous les produits qu’il peut vous proposer, mais aussi la carte du magasin, les possibilité de crédit, le service après vente et que sais-je encore… La fonction de cette page est d’accueillir vos visiteurs, d’indiquer clairement vos activités, vos points forts, et d’orienter vers la rubrique recherchée.

Aujourd’hui j’ai découvert le site de partage de captures d’écran scrnshots.com [via le journal du blog] parmi les quelques excellentes captures mises en avant, 3 captures de page d’accueil on particulièrement attirées mon attention.

http://onwired.com/

« Biensûr, OnWired réalise des sites internet professionnels, mais nous sommes aussi des experts en e-commerce, marketing et gestion de contenu. Nous rendons le web plus facile. Comment pouvons-nous vous aider ? »

Cette accroche suffit largement à définir l’activité de la société, de plus la forme interrogative de la dernière phrase permet d’initier un dialogue avec l’internaute. Cette forme interrogative est d’ailleurs reprise dans les 3 colonnes situées juste après l’accroche : Qui sommes-nous, Que faisons-nous, Où l’avons-nous déjà fait. La navigation (très claire) reprend elle aussi cette forme interrogative ce qui assure une cohérence avec le reste de la page. Enfin les derniers articles du blog trouvent naturellement leur place plus bas dans la page.

Cette page traite l’internaute avec respect, si une personne souhaite prendre contact avec cette agence, elle saura sans doute trouver les coordonnées, mais avant, elle pourra prendre connaissance (sans se sentir agressée) des différents métiers et référence de cette agence web.

http://www.weeatt.com/

Dans cet exemple, il s’agit d’expliquer le concept du site très rapidement… 3 phrases suffisent pour laisser l’internaute choisir s’il souhaite aller plus loin. Après avoir compris qu’il s’agit d’un outil de partage et de stockage de recettes de cuisine, il peut, sur la même page, visualiser la recette du jour, les derniers articles du blog ou les recettes les plus populaires.  Le seul reproche que je pourrais cependant faire à cette page, c’est le manque de visibilité du bouton « Start here », une page d’accueil épurée permettra d’orienter un internaute dans la bonne direction, mais encore faut-il que les indications soient visibles.

http://www.teehanlax.com/

La aussi, un message clair et sobre qui définit l’activité, une navigation très bien placée, un pavé pour indiquer « ce qui fait leur différence », et la remonter du blog pour donner un peu de vie a la page. Au passage, je vous conseil de jeter une œil à leurs références, vous y trouverez beaucoup d’inspiration.

Pour résumer, une page d’accueil ne doit pas forcément tout mettre en avant.  Un message clair qui permet de comprendre ce que vous faites, une navigation compréhensible qui laisse l’internaute choisir ou il veut aller, éventuellement un « call to action » pour l’orienter plus précisément et quelques éléments bien hiérarchisés par l’utilisation des bonnes règles typographiques (a ce sujet, je vous conseille l’excellent article de webdesignerwall sur l’utilisation des typographies sur le web).  Et si certains visiteurs ne dépassent cette page d’accueil, c’est tout simplement qu’ils cherchaient autre chose…

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.

Une petite mise au point s’impose avant de débuter, si j’utilise les termes newsletter ou bulletin d’information, c’est qu’il s’agit bien d’une lettre d’information à destination de vos adhérents et non de la diffusion d’email commerciaux (visant a faire connaître des promotions, l’arrivée de nouveaux produits ou autres), certains des points ci-dessous s’appliquent dans les deux cas, mais cet article traite exclusivement des email non commerciaux (je traiterais probablement les points à prendre en compte pour la gestion de campagnes d’email commerciaux dans un prochain article).

Pourquoi une newsletter ?

Comme tout projet, il faut commencer par se poser la question du pourquoi ? Souvent la réponse est « parce que l’on peut » mais c’est loin d’être suffisant. En effet toute agence web qui se respecte propose parmi ses outils un petit module qui vous permet d’envoyer des mails à tous vos abonnés, donc pourquoi s’en priver ? À l’heure du spam, l’envoi d’un email doit apporter une réelle information, un véritable plus a vos chers internautes, inutile de prévoir d’envoyer un mail par semaine si vous n’avez rien de particulier à raconter ! Dans le cas d’une mairie par exemple, l’envoi mensuel d’un agenda culturel du mois à venir à une véritable valeur ajoutée. Pour déterminer la pertinence d’une newsletter, essayer de lister les points qui pourront y être abordés, assurez-vous que ces points sont susceptibles de changer régulièrement dans le temps. Cela vous permettra de définir la fréquence d’envoi et de valider avec vos publics si ces informations leur semblent utiles. Notez qu’il est tout à fait possible de créer plusieurs lettres différentes pour contenter chaque segment de votre lectorat.

Comment s’organiser, qui rédige ?

Et oui ! Vous ne pensiez tout de même pas que vous n’auriez pas de travail ? Certes, certains outils de gestion de contenu, particulièrement bien pensés, permettent de sélectionner une liste d’articles ou d’actualités pour composer automatiquement votre lettre, mais cela nécessite d’être définit très tôt dans la conception du site et dans la charte éditoriale. Dans le cas d’un bulletin rédigé de façon manuelle, il faudra définir dès la conception du site (ou de l’ajout de la fonction newsletter) la personne en charge de l’alimenter, comment cette personne doit récupérer l’information, quel points doivent être prioritaires. Cette personne devra aussi dégager du temps chaque semaine ou mois (en fonction de la fréquence d’envoi) pour se consacrer à la consolidation des contenus et pour tester que l’envoi et la lecture se feront dans de bonnes conditions. N’oubliez pas que certains internautes attendront cette lettre avec impatience, il est important que la fréquence de diffusion soit clairement indiquée et respectée.

Faire un numéro zéro

La meilleure façon de se rendre compte de la pertinence de cette lettre et de l’organisation à mettre en place est de réaliser un numéro zéro. Ce premier numéro ne sera envoyé qu’a un échantillon de personnes qui seront ensuite interviewés pour éventuellement améliorer ce qui peut encore l’être. Ce numéro permettra de définir la charte graphique de la lettre, de tester toutes les plateformes de traitement des emails (différents clients mail, webmail) et de proposer sur le site un exemple de ce que vont recevoir les internautes après s’être inscrit.

Archiver et informer

« Inscrivez-vous ! C’est gratuit ! », les accroches pour convaincre vos visiteurs de vous confier leurs adresses e-mail redoublent d’imagination, mais que vais-je recevoir si je saisis effectivement mon email ? Pour répondre à cette question, il est souhaitable de dédier une page de votre site à la newsletter. Elle permettra d’expliquer ce que contiennent vos bulletins, à quelle fréquence ils sont envoyés, profitez-en aussi pour indiquer l’adresse d’envoi et invitez vos internautes à l’enregistrer dans les contacts sûrs, pour éviter de passer en spam lors du premier envoi. Cette page pourra aussi proposer de consulter les news déjà parue, cela a de nombreux avantages : Informer plus précisément sur le contenu que vous proposez, permettre à un utilisateurs de retrouver une information lue dans une lettre précédente (mais qu’il aura peut-être supprimée) et enfin cela donne du contenu qui sera indexés par les moteurs de recherche. Avant le premier envoi, le numéro zéro pourra être utilisé pour alimenter ces archives.

À chaque inscription, une confirmation

Si votre lettre est diffusée tous les deux mois, votre internaute a largement le temps de vous oublier entre son inscription et la réception du premier envoi. À chaque inscription, l’envoi d’un mail automatique permet de contrôler immédiatement si votre envoi n’est pas passé en spam. Lors de l’inscription, indiquez à votre visiteur qu’il va recevoir immédiatement une confirmation, invitez le a vérifier qu’elle n’est pas passée en spam (et à corriger si c’est le cas), vous pouvez aussi demander une confirmation de l’adresse email (en demandant de cliquer sur un lien dans le mail pour confirmer son adresse). Ce premier envoi est encore une occasion de rappeler la fréquence d’envoi et le contenu de la lettre à laquelle il vient de s’inscrire, et de l’inviter à consulter les archives sur votre site.

La personnalisation, le petit plus qui fait la différence

Dans le cas d’une campagne d’emailing commerciale, le taux d’ouverture est un des points qui qualifient son succès, pour un bulletin d’information, cette information est évidemment intéressante, mais elle ne doit pas nuire à la qualité des différents éléments de votre email. Viadeo, par exemple, m’envoie toujours des mails avec l’objet suivant : « David Jason, votre Actu Viadeo ». Toutes les études sur le sujet sont formelles, une personnalisation de l’objet du message augmente considérablement les taux d’ouverture, mais dans le cas ci-dessus la phrase perd son sens au profil de l’optimisation du taux d’ouverture. J’ai choisi de recevoir ce mail, un simple « Votre actu viadeo » aurait largement suffi.

Pour résumer, si vous pouvez personnaliser l’objet de façon cohérente, je vous y encourage, mais dans le cas contraire, ne perdez pas de vu que l’internaute s’est inscrit volontairement à votre bulletin et qu’un objet simple (indiquant ce que l’on va trouver dans le mail) est parfois préférable. Si vous optez pour de la personnalisation (dans l’objet ou dans le corps du message) portez une attention particulière à la casse (Première lettre en capitale, le reste en bas de casse) et à l’inversion Nom / Prénom (c’est une erreur courante lors de la saisi, l’internaute saisi son nom dans le champ prénom et inversement), une personnalisation du type « Bonjour DUPONT, » n’est pas très glamour vous en conviendrez.

Une désinscription intelligente

Tout le monde le sait maintenant, le lien de désinscription est obligatoire dans toute newsletter. Cette page de desinscription est cependant l’occasion d’interroger vos utilisateurs sur les raisons de son désabonnement, un questionnaire rapide sur ses motivations (une simple liste de choix à cocher, et éventuellement un champ texte pour les réponses de type « autre ») vous permettra d’améliorer vos lettres. C’est aussi l’occasion de proposer une alternative à la réception de vos bulletins (Fil RSS, modification de fréquence d’envoi, etc…).

Une adresse de réponse valide

En envoyant un email d’information à un utilisateur, vous entamez une relation avec lui. Imaginez qu’une personne vienne vous parler dans la vraie vie, qu’il vous donne une information et se bouche immédiatement les oreilles pour ne pas risquer d’avoir une réponse… vous seriez probablement sidéré d’une telle réaction. En indiquant « Ne répondez pas à cet email, il est expédié par un robot » vous avez la même attitude que ce personnage peu courtois. L’idéal est de proposer une adresse de réponse qui sera effectivement traité par un être humain.
Sur certaines listes de diffusion, les répondeurs automatiques des destinataires et autres erreurs renvoyées par le serveur peuvent imposer l’utilisation d’une adresse de réponse spécifique pour éviter de se retrouver engloutis sous des centaines de mails automatiques quelques heures après l’envoi de la newsletter. Dans ce cas vous pouvez simplement indiquer une adresse valide dans le corps du message afin que les utilisateurs puissent prendre contact avec vous. N’oubliez pas de vérifier l’adresse de réponse de temps en temps pour purger votre base de contact des adresses invalides, inutile de continuer à envoyer des mail sur des adresses qui ne fonctionnent pas (cela utilise de la bande passante pour rien, et cela fausse vos statistiques de consultation de vos bulletins).

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

[flashvideo filename=video/000635.webinar_eyetracking.800x500.en.flv /]

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.