Ergonomie et référencement d'un blog : les meilleures solutions

Vous avez été plus de 300 à nous suivre lors de la conférence du salon e-Commerce Paris 2012. C’est avec un grand plaisir que nous vous livrons ici les Best Practices 2013 en matière d’optimisation du référencement et de l’ergonomie.

Tout d’abord, un bref rappel des conventions et règles ergonomiques déjà en vigueur…
Conventions et règles en ergonomie


Les conventions et règles à respecter dans une démarche ergonomique pour le haut de page (header)

Vous remarquerez que beaucoup de ces éléments relèvent désormais du bon sens. Bon sens ne voulant pas dire évidence, il est bon de rappeler certaines choses, même si elles peuvent sembler acquises à beaucoup d’entre-nous. Faites-vous une check-list au besoin, car ces points ne doivent plus faire l’objet d’un oubli, ou pire d’une erreur, pour 2013.

Ci-dessous, les éléments pour le footer :


Les conventions et règles à respecter dans une démarche ergonomique pour le bas de page (footer)

Les conventions en Ergonomie : des règles de bon sens qui doivent être adoptées et appliquées par tous en 2013.


Les conventions et règles à respecter dans une démarche ergonomique

Christian Bastien & Dominique Scapin, chercheurs en ergonomie des IHM à l’INRIA ont procédé en 1997 à la synthèse de plus de 900 recommandations en 18 critères regroupés en 8 dimensions.

Leur étude a prouvé qu’une analyse ergonomique était plus efficace (plus de problèmes de conception détectés) lorsque cette liste de critères était utilisée plutôt qu’une évaluation libre ou une évaluation basée sur la partie 10 de la norme ISO 9241.
18 critères répartis en 8 groupes :
Guidage : Incitation – Groupement/ Distinction entre Items – Feedback immédiat – Lisibilité
Charge de travail : Brieveté – Concision – Sections minimales
Contrôle explicite : Actions explicites – Contrôle utilisateur
Adaptabilité : Flexibilité – Prise en compte de l’expérience utilisateur
Gestion des erreurs : Protection contre les erreurs – Qualité des messages d’erreur – Correction des erreurs
Homogénéité / Cohérence
Signifiance des Codes et Dénominations
Compatibilité
Voici les autres règles que nous vous proposons :
#1 Law Of Usability : Don’t Make Me Think / Ne me Faites Pas Réfléchir
#2 Law Of Usability : Don’t Waste My Time / Ne me Faites Pas Perdre Mon Temps
#3 Law Of Usability : Get Rid Of 50% Of The Words On Each Page, then get rid of half what’s left / Débarrassez vous de 50% des mots de chacune de vos pages, puis retirez encore la moitié de ce qu’il reste.
Fact Of Life #1 : On ne lit pas les pages. On les “scanne”.
Fact Of Life #2 : Nous n’optimisons pas nos choix. Nous faisons des choix “au mieux”, quelque part entre satisfaisant et suffisant. (satisficing)
Fact Of Life #3 : Nous ne lisons pas les manuels. On apprend la façon dont ça fonctionne sur le tas.
Architecture de l’information : organisation du contenu

Comment bien lister son contenu et ses fonctionnalités grâce à la méthode du tri de cartes :


La Méthode du tri de cartes (“Card Sorting”)

Cette méthode simple et efficace fonctionne de la façon suivante :
Inscrivez vos contenus envisagés sur des cartes de dimensions identiques. Laissez des cartes vierges (afin que le testé puisse rajouter du contenu). Laissez également un stylo à disposition pour que le testé renomme à volonté le contenu.
Vous avez également la possibilité de laisser toutes les cartes vierges.
Demandez au testé de rassembler les cartes en grande catégories par associations d’idées.
Dernière étape : une fois les catégories bien définies, demandez lui de les relier entre-elles. Votre organigramme apparaitra « comme par magie ».

Répétez ce test à l’envie, avec ou sans guide, avec ou sans contraintes.
Outils de conception web : pour une ergonomie réussie

Voici les outils permettant de travailler à l’ergonomie de votre projet web en amont du projet :


Le maquettage comme outil ergonomique : zoning et wireframe


Le maquettage comme outil ergonomique : le mock-up



Parmi les outils et techniques permettant d’optimiser l’ergonomie durant la phase de conception, on retrouve le maquettage avec :
Le Zoning (sert à délimiter les principaux blocs de fonctionnalité)
Le Wireframe (littéralement « fil de fer », il permet de rentrer dans le détail des fonctionnalités en question. A noter qu’il est encore souvent effectué manuellement, alors que de très bon programmes existent aujourd’hui, comme Mockflow par exemple)
Le Mock-Up (la maquette visuelle de la charte graphique) permet d’obtenir un rendu extrêmement fidèle visuellement à ce que sera le produit final.

Il est important de travailler en N&B afin d’éviter toutes les tergiversations liées aux problématiques couleurs (les goûts et les couleurs ne se discutant pas, comme on le sait bien, ou alors le plus tard possible pour ne pas perdre trop de temps durant la conception).


Comparatif d’outils pour la conception ergonomique d’un site web : zoning, wireframe, mock-up, prototype

Voici un récapitulatif des outils vus précédemment et de leur fidélité/coût.
A noter que le prototype est moins coûteux que le Mock-up, même si l’investissement et le temps passé peut être supérieur, car une partie du code est pratiquement toujours réutilisée pour le produit final.
Outils de tests ergonomiques : le test utilisateur


Optimisation de l’ergonomie grâce aux utilisateurs : tests exploratoires et scenarisés

On rentre ici dans la partie « qualitative » de l’ergonomie.
Nous allons chercher à « débusquer » des problèmes ergonomiques en mettant des utilisateurs face au site e-Commerce qui nous intéresse (ces tests peuvent être faits également sur le prototype, et même sur Mock-up ou Wireframe, mais l’intérêt est moindre pour ces derniers).
Pour se faire, il y a 2 sortes de tests…
Le test exploratoire
Il met l’utilisateur face à la Landing Page, sans autorisation de cliquer, mais avec possibilité de scroller.


Le but de ce test est de demander à l’utilisateur de « penser à voix haute » et de voir s’il a bien compris l’utilité du site.
Quel est l’offre, quel est le positionnement ? Pourquoi ce site est mieux que le concurrent qui est à un clic de distance ?
Tous ces éléments sont vérifiés à travers le flot de remarques de l’utilisateur.
Gardez vous bien d’intervenir pour ne pas l’influencer. S’il vous pose des questions, dites lui que pour le bien du test vous répondrez à la fin à ses questions (que vous n’oublierez pas de noter), mais que pour le moment le « but du jeu » est de le laisser tel qu’il serait en conditions réelles : livré à lui-même.
Les tests scénarisés

Dans cette 2nd phase, on va demander à l’utilisateur d’effectuer certaines actions sur le site.
Le but de ce test est de vérifier l’utilisabilité du site ou d’une fonctionnalité bien précise de celui-ci. La complexité de ces actions est librement paramétrable par la personne guidant le test. Il est néanmoins souhaitable d’établir une progression logique dans la difficulté, qui prend en compte l’effet d’apprentissage.


Dans les 2 cas, ces tests devront faire l’objet d’un accompagnement par un guide-fil.
Ils devront être enregistrés tant pour la vidéo (affichage de l’écran) que l’audio (réactions de l’utilisateur).
A noter qu’un enregistrement de l’utilisateur lui-même peut être un plus si vous le souhaitez (et s’il en donne l’autorisation écrite).

Il est particulièrement pertinent que les équipes de développement et marketing observent le test soit en temps réel (à travers une vitre teintée ou en diffusion simultanée de l’écran de l’utilisateur dans une autre pièce). Ils pourront alors réagir entre eux librement, sans impact sur l’utilisateur, et échanger entre eux sur ce qu’ils observent « en live ».

Notez que la même chose en différé (diffuser l’enregistrement de l’affichage écran) ne donne bizarrement pas un résultat aussi « vivant ».
Enfin retenez 2 choses extrêmement importantes…
Les tests d’utilisabilité ne sont pas une option.

Ils ne coûtent pratiquement rien, et peuvent rapporter très très gros.

Best-Buy (géant américain de la distribution en ligne) en a fait les frais avec son fameux « bouton à 300 millions de $ » (si vous ne connaissez pas cette anecdote, je vous suggère de la rechercher sur Google)
Il vaut mieux en faire un peu tout au long du projet que beaucoup à la dernière minute.

Exemple : Un test avec 8 utilisateurs à la fin du projet et qui trouve 4 problèmes ergonomiques, c’est certes mieux que rien du tout.
Mais 3 tests avec 4 utilisateurs à 1 mois d’intervalle tout au long du développement, ça fera environ 12 à 15 problèmes trouvés PARCE QUE d’autres problèmes ergonomiques sont fatalement cachés derrière les 1ères découvertes et que tant qu’ils ne sont pas corrigés, les utilisateurs ne les verront pas durant les tests…
Comprendre les cycles d’analyse et d’optimisation

Aussi bien en Ergonomie qu’en matière de référencement le cycle d’analyse est un processus long fondé sur le retour d’expérience.


Cycle d’analyse des données analytiques : Mesurer – Reporting – Analyser – Optimiser – Innover

Les webanalytics permettent essentiellement en ergonomie de repérer des problèmes.
Une fois ces problèmes repérés, il va bien falloir émettre des hypothèses de solution.

L’ennui, c’est que généralement les personnes concernées par un projet sont rarement d’accord entre-elles sur les solutions, ce qui est compréhensible vu que chacun les étudiera en fonction de son point de vue et donc de sa psyché propre à son domaine d’activité…

En référencement, l’analytique permet de mesurer les effets des optimisations et l’amélioration de la stratégie avec l’ensemble des canaux d’acquisition. Il est donc possible de tirer parti des informations des autres leviers pour l’ensemble du dispositif.

C’est à l’image d’une stratégie de référencement naturel couplée à une campagne d’achat adwords, le but étant d’optimiser aussi bien le coût d’acquisition que le fameux taux de clics en prenant en compte les positions occupées par le SEO. L’ensemble donne donc une redoutable solution si celle-ci est correctement gérée.
Outils de tests ergonomiques : le test A/B et les tests multivariés

Une fois les problèmes découverts, les solutions proposées doivent donc être départagées. Pour cela, il existe un outil qui s’appelle le « A/B testing ». Les tests multivariés n’en sont qu’une variante un peu plus complexe.

Nous sommes ici dans la partie « quantitative » de l’ergonomie.


Test de deux versions différentes d’une page : tests A/B et multivariés

Cet outil consiste en un test de 2 versions différentes d’une page (ou d’un élément de cette page) et d’observer, après un laps de temps ou un nombre de visiteurs donné, le résultat en terme de taux de transformation (ou tout autre critère pertinent).
La pratique habituelle dans le business tourne entre 2 et 3 semaines (hors saisonnalités impactantes sur le business).

Le test multivarié propose X combinaisons possibles de différents éléments d’une même page.
Outils de tests ergonomiques : Eyetracking


Eyetracking et carte de chaleur

L’eyetracking est un outil fort coûteux. Non-indispensable mais particulièrement utile lorsqu’il s’agit de savoir si l’information que l’on souhaite passer à l’utilisateur lui arrive bien, et à quel moment elle lui arrive.

L’avantage de l’eyetracking comparé à, disons, le mousetracking, c’est que ce dernier résulte d’un traitement cognitif : le cerveau aura déjà « digéré » l’information perçue et aura demandé (ou non) à la main de faire bouger la souris.
A travers les yeux, on a le récepteur primaire d’informations AVANT-MÊME que le cognitif ait eu l’occasion d’intervenir.
Bien-sûr, cela se traduit en nanosecondes, mais dans les faits vous obtenez une information brute, tout à fait pertinente au regard des sujets qui nous préoccupent.

Vous obtenez donc à gauche une carte de chaleur agrégée, indiquant où le regard de utilisateur s’est porté et avec quelle intensité.
Si l’on applique un « négatif » sur cette image, on obtiendra une page toute noire, sauf sur les points de chaleur qui deviendront des « trous » par lesquels l’utilisateur a « vu » la page. Cette dernière technique est sûrement la plus visuellement parlante.

A droite, on a le parcours chronologique de l’œil de l’utilisateur qui s’est baladé sur toute l’image. La taille du cercle indique l’intensité, le numéro l’ordre chronologique et il est un jeu d’enfant de retracer le parcours visuel de l’utilisateur.

Notez que beaucoup d’autres informations statistiques sont disponibles au cours d’une telle séance (taux de clics, intensité du regard, délai entre chaque déplacement d’œil, moyen, etc… tout est mesurable et plus encore !), et que l’on peut tester tant des sites internet que des vidéos, des Mock-up, des Wireframe, etc…
Les algorithmes de Google : rappel des faits


Chaque mise à jour de Google (Caffeine, Panda, Pinguin) rectifie un défaut de pertinence et/ou d’exhaustivité de l’information

Les différentes mises à jour de Google sont une suite d’intégrations de solutions répondant à une seule problématique : la pertinence.
Caffeine : changement dans la manière dont Google…
Crawle
Indexe
Charge
Affiche les résultats

La solution est d’augmenter considérablement l’exhaustivité des données de l’index. Pour cela il faut une base de données capable de recevoir plus d’information des données collectées (Googlebot) et de gérer l’immense flux de demandes en répondant à l’immédiateté de l’information. Fort heureusement, 80% des internautes lancent les mêmes requêtes.
Panda : l’algo tueur, le filtre à café ?

La problématique est la suivante : nous avons un super système capable de crawler et d’indexer une quantité pharaonique de données et donc autant de contenu de bonne comme de mauvaise qualité, car un crawler n’a pas la capacité de comprendre la pertinence des pages (c’est un raccourci, en fait nous ne lui demandons pas de comprendre mais simplement de suivre et de récupérer des URL, des GET plus exactement).

Alors notre Panda va filtrer le bon du mauvais selon un principe simple, la pertinence selon des critères d’usage, de popularité et d’environnement au sens large.
Au sens large comme :

historique de l’url dans le temps
moyenne de crawl, de pagerank
nombre de clics, taux de rebonds…

J’en passe, tellement il y en a (ma dernière présentation PANDA ne faisait que 40 diapos sur cette seule mise à jour).

Pour résumer, PANDA filtre les urls des sites en se fondant sur la qualité des pages et la structure de l’information au sein d’un site. Ce qui était une duplication devient une pénalité voire sanction indirecte de la mauvaise qualité structurelle de vos pages (c’est d’ailleurs visible dans l’état d’indexation de Google WebmasterTools)
Google Pinguin, en mode tux padawan

Une simple rustine pour empêcher la fraude au pagerank et à l’abus de linking. Après les nombreux aveux d’échec de Google, Pinguin règle (partiellement) la problématique des fraudeurs. L’analyse est portée sur la qualité et la relation réelle entre la popularité de la page et son environnement de liens. Pour résumer, si une page à beaucoup de liens mais qu’elle est invisible des réseaux sociaux, a un taux de rebond énorme ou n’est pas cliquée, c’est la porte des SERPs (Search Engine Results Page)

Effet de bord de cette mise à jour, les SEO BlackHat (le coté obscur du référencement), pourront user de ce principe pour éliminer un concurrent. En filigrane, c’est une technique de e-réputation pour éliminer un résultat gênant.

Exemple : Marque + “arnaque”
Le crawl est LE chantier SEO 2013

Il était déjà le chantier de 2006, 2007… Mais vous pouviez vous rattraper par un excellent linking.
Nous parlons ici et de référencement et de e-commerce, l’objectif étant de référencer un catalogue complet ET COMPLÈTEMENT !
La concentration de l’action n’est pas sur une expression mais sur une multitude comprenant les populaires, les larges et le non prédictible.

Donc, le crawl est le gros chantier car il représente 90% des problématiques d’indexation des pages d’un marchand.

Sur le principe que 1% des pages crawlées par Google sont cliquées, il est fortement recommandé d’avoir 100% de ces pages dans l’index de Google plutôt que la moitié.
Enfin, à titre indicatif, seule une étude de votre site pourra préciser l’agrégat exact, la rétention de crawl qui définit la période nécessaire au crawl de l’ensemble des pages de votre site, voire une rétention des pages actives (qui génèrent au moins une visite).


Il est fortement recommandé d’avoir 100% des pages dans l’index de Google plutôt que la moitié…

L’état d’indexation des pages est un indicateur présent depuis août 2012 dans la suite WebmasterTools de Google. Il donne une idée générale sur la manière dont Google crawle et prend en compte vos contenus dans son index.


Indexation des pages indiquée dans Google Webmaster Tools (GWT)

Il permet ainsi de vérifier en un coup d’oeil ou de valider une optimisation ou bien un problème d’accessibilité moteur.
Lorsque nous travaillons sur la problématique de Crawl et d’indexation, il existe deux choix : réduire le nombre de pages, augmenter le nombre de pages.
J’évite ici les nuances en prenant les cas à l’extrême. Donc soit il faut réduire au maximum le nombre de pages pour avoir une bonne corrélation entre pages crawlées/pages indexées soit rendre visibles les pages que Google ne peut pas crawler (robots.txt, pages inactives…)
Gérer le flux d’acquisition vers le panier


Points utiles à l’optimisation du flux d’acquisition vers le panier


Optimisation du parcours-client

Cf. la diapo « flux d’interactions ».
Trouver ce que l’on cherche

Il faut que le site soit « utile » à l’utilisateur, qu’il comprenne tant son offre que son positionnement de façon intuitive. Et la raison pour laquelle il fait bien d’être là que plutôt chez la concurrence. N’oubliez pas que chaque offre et chaque cible ont leur spécificités. On ne vend pas sur chronodrive (achat fréquent, peu impliquant, pas cher) comme l’on va vendre sur Sarenza (achat annuel, émotionnel, image, prix conséquent), ou comme l’on va vendre sur GIVENCHY (achat rare, très émotionnel, prix très conséquent).

Il faut également respecter les conventions avec notamment un moteur de recherche interne intuitif et efficace.
Savoir où nous sommes

25% seulement des visiteurs arrivent sur la landing page. Donc, pour prendre en compte ce phénomène : identité visuelle partout avec logo + baseline, le fil d’ariane doit être également présent partout. La navigation et ses menus doivent également prendre en compte ce détail.
Avoir un bouton “Panic”

Le clic sur le logo pour retourner à la Page d’accueil est là pour ça et l’utilisation intensive de la fonction “Page Précédente” impose une stricte analyse de la bonne marche de ce bouton sur l’ENSEMBLE des pages du site (formulaires compris, et surtout même !)
Savoir quel est le contenu du site

Les grandes familles de produits, la hiérarchie du contenu doit être claire : onglet avec catégories, menus de sous-catégories.
Savoir comment utiliser le reste

Il faut que le point d’entrée par où la navigation va débuter, ainsi que les différentes étapes et options qui vont se présenter, soient intuitifs et clairs. Personne ne va lire la FAQ, le plan du site ou le guide de 1ère visite. Et si quelqu’un le fait, c’est que vous avez mal fait votre boulot.
Donner confiance dans le site

Eléments de réassurance, personnification de l’e-Commerçant, donner de la valeur ajoutée dans le rédactionnel, afficher votre “expertise” produits, …
Les facilitateurs d’achat

Les cadeaux, les codes réduction, les avis utilisateurs, frais de livraison offert, paiement en plusieurs fois…


Ergonomie et référencement : les meilleures pratiques pour 2013 par The e-Commerce Academy