Ergonomie et référencement, les meilleures pratiques pour 2013
1. LE E-COMMERCE ET SES SOLUTIONS ONT LEUR ACADEMY.
SEO
ERGONOMIE
LES BEST PRACTICES DE L’E-COMMERCE ACADEMY POUR 2013
Samuel Dubois Richard Cohen
Expert ergonomie Expert référencement
2. Depuis plusieurs mois, nous avons passé en revue l'ensemble
des méthodologies et leviers d’optimisation, cela nous
permet de vous livrer les meilleurs chantiers pour 2013.
L’e-Commerce Academy
TECHNOS Magento, Oxid eSales, PrestaShop, Drupal Commerce
& ECOMMERCE Référencement, ergonomie, e-marketing
Focus des technologies et des méthodes
Les indicateurs de prédiction, augmentez vos visites qualifiées
Gérer le flux d’acquisition vers le panier
Comprendre en 5 min une baisse de CA
Check-list d’optimisation 2013
3. Focus des technologies et des méthodes
Conventions ERGONOMIE & SEO
Architecture de l'information
• Organisation du contenu & flux d’interactions
Maquettage & tests utilisateurs
• test exploratoire
• test scénarisé
Webanalytics
Tests A/B et multivariés
Analyse SEO
• Interne ( Logs, WEBA, CRAWL)
• Externe (WMT, ADWORDS, SERPS...)
4. Les conventions & règles en ergonomie
Onglets de
catégories
Accès au compte
Logo + baseline
en haut à gauche
Panier
Moteur de
menus de sous
recherche interne
catégories
Salon e-Commerce Paris 2012 - The e-Commerce Academy
5. Les conventions & règles en ergonomie
Rassurance Suivi de commande
Livraisons Mentions légales + et SAV
infos
Rassurance
Paiement Réseaux sociaux
Pourquoi vouloir réinventer ce qui fonctionne ?
En Ergonomie, le Mieux est souvent l’ennemi du Bien
Salon e-Commerce Paris 2012 - The e-Commerce Academy
6. Les conventions & règles en ergonomie
18Bastien et Scapin
critères de 3 Lois de
l’Utilisabilité
3 « Fact Of Life »
Les règles existent
pour être brisées…
Salon e-Commerce Paris 2012 - The e-Commerce Academy
7. Organisation du contenu
En fonction du type de site, il convient de :
Enumérer
Lister les fonctionnalités
Inventorier les contenus
Catégoriser le tout
Hiérarchiser / Structurer :
• Accueil
• Univers 1 / Rubrique 1 / Rubrique 2 ...
Univers 2 / Rubrique 1 / Rubrique
Salon e-Commerce Paris 2012 - The e-Commerce Academy
9. Méthode du tri de cartes ("Card Sorting")
1 Identifier 2 Catégoriser 3 Structurer
Et aussi :
• focus-groups
iCardsort
• Entretiens
• Mindmapping…
Salon e-Commerce Paris 2012 - The e-Commerce Academy
10. Flux d'interactions / Parcours client
Est-ce si simple ? ?
Salon e-Commerce Paris 2012 - The e-Commerce Academy
11. Flux d’interactions : organigrammes logiques
75% des visiteurs
arrivent sur une page
intermédiaire
Salon e-Commerce Paris 2012 - The e-Commerce Academy
12. Maquettage : Zoning & WireFrame
Zoning Wireframe
Salon e-Commerce Paris 2012 - The e-Commerce Academy
13. Maquettage : Wireframe simple
Exemple : Mockflow
Salon e-Commerce Paris 2012 - The e-Commerce Academy
15. Maquettage : Mock-up
Source : IAFactory
Salon e-Commerce Paris 2012 - The e-Commerce Academy
16. Quel outil pour quoi faire ?
Zoning
Wireframe €
Mock-up €€€
Prototype €€
Salon e-Commerce Paris 2012 - The e-Commerce Academy
17. Tests utilisateur : exploratoire & scénarisé
Tests Tests
exploratoires scénarisés
Salon e-Commerce Paris 2012 - The e-Commerce Academy
18. Tests utilisateur : exploratoire & scénarisé
Développeur observant
le déroulement d’un test
utilisateur
Ce n’est pas à l’utilisateur de s’adapter au site,
c’est le site qui doit s’adapter à l’utilisateur
Salon e-Commerce Paris 2012 - The e-Commerce Academy
19. Cycle d’analyse des données
analytiques
5- Innover: 1- Mesurer :
Tester de nouvelles idées Capturer les KPI,
pour générer plus de valeur indicateurs clés de
(ou minimiser les coûts) Mesurer performance
Innover Reporting
4- Optimiser : 2- Reporting :
Exploiter les Tableaux de bord,
stratégies alertes.
gagnantes, Leviers générant les
Éliminer les freins.
Optimiser Analyser meilleurs RSI
3- Analyser :
Identifier les facteurs du succès de votre site et
Salon e-Commerce Paris 2012 - The e-Commerce Academy les points bloquants
20. Tests A/B & Tests multivariés
Salon e-Commerce Paris 2012 - The e-Commerce Academy
21. Cas Blume2000.de
+6% de C.A
Les internautes étaient plus intéressés par l'offre avec les chocolats (version B) malgré son prix plus élevé
L'équipe a cherché à savoir si les internautes préféreraient associer des fleurs à un CD de chants de Noël (version A) ou choisir
une offre légèrement plus chère, comprenant des fleurs et une boîte de chocolats (version B)…
Salon e-Commerce Paris 2012 - The e-Commerce Academy
22. Eyetracking
Amélioration
de la navigation par :
Salon e-Commerce Paris 2012 - The e-Commerce Academy
23. Les indicateurs de prédiction,
augmentez vos visites qualifiées
Salon e-Commerce Paris 2012 - The e-Commerce Academy
24. Caffeine, Panda, Pinguin & Serp
Structure
Linking
Salon e-Commerce Paris 2012 - The e-Commerce Academy
25. Crawl
VOLUMETRIE
GESTION
TAUX
INDEX
Salon e-Commerce Paris 2012 - The e-Commerce Academy
26. Indexation
90% 1%
Gestion du crawl Des pages crawlées
sont cliquées
SEO
85% Des visites proviennent de pages
crawlées sous 15 jours*
Salon e-Commerce Paris 2012 - The e-Commerce Academy
27. Rétention : du crawl à l'indexation
50% Des contenus sont invisibles pour les moteurs*
…dommage !
Salon e-Commerce Paris 2012 - The e-Commerce Academy
28. Gérer le flux d’acquisition vers le
panier
Optimisation du parcours-client
Trouver ce que l'on cherche
• Provenance de l’internaute !
Savoir où nous sommes
• Provenance de l’internaute !
Savoir quel est le contenu du site
Savoir comment utiliser le site
Avoir un bouton "Panic"
Donner confiance dans le site
Les facilitateurs d'achat
Salon e-Commerce Paris 2012 - The e-Commerce Academy
29. Comprendre en 5 min une baisse de CA
404
Salon e-Commerce Paris 2012 - The e-Commerce Academy
31. Prioriser le SEO pour 2013
1 seconde
• Le temps de téléchargement ‘MAX’ d’une page
5e position
• Le rang minimum de transformation et d’indexation persistante
80%
• De la réussite d’un site est liée à l’état de crawl des pages
55% ‘Seulement’
• Du catalogue marchand est visible en permanence dans l’index de Google
175%
• Des problématiques de SEO sont liées à la méconnaissance des algorithmes
80%
• Des landing pages ne transforment pas correctement la provenance
Salon e-Commerce Paris 2012 - The e-Commerce Academy
32. Taux et causes d’abandons de panier
en 2012
44% des abandons > Frais de livraison
• Frais de livraison : gratuité, diversité, rapidité
41% des abandons > Interruption de l’achat
• Persistance du panier
25% Prix / Spam & Crash
• Positionnement, ethique e-marketing, audit technique
14% Tunnel d'Achat : complexité & coercition
• Processus d’évolution par étapes
• Aucune navigation ou arborescence
• Guest Checkout
12% Formulaires : Trop d'infos tue l'info
• Le minimum utile
7% Moyens de paiement
• Diversité, tiers de confiance (Paypal, et cie), Paiement en plusieurs fois
Salon e-Commerce Paris 2012 - The e-Commerce Academy Source : Invesp.com
33. A tout de suite : Stand N57
Formation. Conseil. Audit.
Le centre e-Commerce de référence.
blog.academy-ecommerce.com
www.academy-ecommerce.com
contact@academy-ecommerce.com
Twitter @ecommerce_acdmy
Samuel Dubois : @sdubois_teca - samuel.dubois@ecommerce-academy.fr
Richard Cohen : @richardcohenbiz – richard.cohen@ecommerce-academy.fr
Salon e-Commerce Paris 2012 - The e-Commerce Academy
Notes de l'éditeur
Bonjour, Merci de votre présence sur cette 7° édition du Bargento , merci de votre intérêt pour cette conférence.
Les conventions en Ergonomie : des règles de bon sens qui doivent être adoptés et appliqués par tous en 2013 L’architecture de l’information : comment lister vos contenus et leurs fonctionnalités grâce à la Méthode du tri de cartes : présentation et explications rapides Conception : Utilisation du Maquettage avec les outils de Zoning – Wireframes – Mock-Up – Prototype ==> présentation Tests utilisateurs : présentation et explications rapides Webanalytics : les KPI et les statistiques clés à vérifier Tests A/B & tests multivariés : présentation et explications rapides Eye tracking : présentation, explications , coûts
Les conventions en Ergonomie : des règles de bon sens qui doivent être adoptés et appliqués par tous en 2013
Bastien & Scapin : 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é plutôt qu'une évaluation libre ou une évaluation basée sur la partie 10 de la norme ISO 9241 18 critères : 1. Guidage : Incitation - Groupement/ Distinction entre Items - Feedback immédiat - Lisibilité 2. Charge de travail : Brieveté - Concision - Sections minimales 3. Contrôle explicite : Actions explicites - Contrôle utilisateur 4. Adaptabilité : Flexibilité - Prise en compte de l'expérience utilisateur 5. Gestion des erreurs : Protection contre les erreurs - Qualités des messages d'erreur - Correction des erreurs 6. Homogénéité / Cohérence 7. Signifiance des Codes et Dénominations 8. Compatibilité #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 qui reste Fact Of Life #1 : On ne lit pas les pages. On les "scan". 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.
Afin de bien identifier le contenu de votre site et d’en lister toutes les fontionnalités , il conviendra de mettre en place des organigrammes verticaux de contenu. L’un de ces organigrammes, dit « macro », devra représenter l’ensemble des contenus & fonctionnalités de votre site. Il est souhaitable en suite d’établir des organigrammes « micro » pour les principales fonctionnalités : Landing Page, Page Catégorie, Fiche Produit, Panier, etc
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.
Voici un schéma exposant un flux d’interactions très basiques pour un e-consommateur. Les choses sont un peu plus complexes en fait….
Afin d’optimiser le « parcours client », il convient de mettre à plat le « flux d’interactions » sous la forme d’organigrammes logiques. Partez du point d’entrée du visiteur (quelque soit ce point d’entrée et quique soit ce visiteur) et listez toutes les interactions possibles. Amusez-vous à établir toutes ses possibilités en raisonnant logiquement : « si il clique sur ça, il pourra accéder à ça. Sinon, il pourra faire ça ». Là encore, on peut l’établir au niveau macro et micro. Notez que pour un site disposant d’un nombre de fonctionnalités importantes, la complexité et la charge de travail peut demander une simplification du macro et de se concentrer sur les principales fonctions pour le micro. Notez également que les organigrammes logiques ne sont pas forcément verticaux (exemple : Paypal , process de check-out).
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 effectuer manuellement, alors que de très bon programmes existent aujourd’hui)
Mockflow n’est que l’un des nombreux logiciels existant permettant d’obtenir un Wireframe professionnel et d’une fidélité déjà intéressante. A noter que ces logiciels peuvent être en application à télécharger ou en Saas .
Comme l’on peut le constater ici, le Wireframe peut être d’une fidélité très avancée.
Avant dernière étape d’un projet, le Mock -up (toujours en noir et blanc) 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 l’on le sait bien, ou alors le plus tard possible pour ne pas perdre trop de temps durant la conception).
Voici un récapitulatif des outils vus précédemment et de leur fidélité/coût. A noter que le prototype est moins couteux 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é pour le produit final.
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 qui 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 question (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. Tests scénarisés : dans cette 2 ème 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étrables 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éagit 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ème ergonomiques, c’est certes mieux que rien du tout. Mais 3 tests avec 4 utilisateurs à 1 mois d’ interval 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 1ers découvertes et que tant qu’ils ne sont pas corrigés, les utilisateurs ne les verront pas durant les tests…
Lors des diffusions en simultanée aux équipes de développement et de marketing, vous serez souvent confrontés à ce genre de réaction. Il est presque « normal » pour un développeur de « penser » un site à travers son expérience, son feeling et sa vision personnelle. Néanmoins, il faudra toujours autant que faire se peut garder en tête que l’expérience utilisateur prévaut sur toute autre considération, et qu’il n’existe pas « d’utilisateur moyen », mais plutôt des « utilisateurs lambda » ce qui peut recouper à peu près tout et n’importe quoi. Jamais il ne faudra partir du principe que c’est à l’utilisateur de s’adapter à l’outil, mais que c’est bel et bien l’outil qui doit s’adapter à l’utilisateur. C’est ce qui s’appelle « penser orienté utilisateur ».
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é…
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. 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.
Voici le résutat d’un test A/B sur le site blume2000.de
L’ eyetracking est un outil fort couteux. 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érer » 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 l’ utilisteur s’est porté et avec quelle intensitée . 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 balladé sur toute l’image. La taille du cercle indique l’intensité, le numéro l’ordre chronologique et il est un jeu d’ enfait de retracer le parcours visuel de l’utilisateur. Notez que beaucoup 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, moyenne, etc etc 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…
- 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 cile 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, emotionnel, 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 l es conventions avec notamment un moteur de recherche interne intuitif & 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 bonn e 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 êter 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 : éléments de réassurance, personnification du 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…
Taux de rebond du site Conversions dans le tunnel d'achat Taux d'ajout au panier (valeur et volume) Taux de transformation de la page panier Utilisabilité du moteur de recherche interne Engagement des visiteurs Taux d’erreurs 404
- Frais de livraison : gratuité ou offerts à partir de XX€ (ne pas oublier d'ajouter une "milestone" dans le panier) - Persistance du panier : laisser la possibilité à l'acheteur de différer son achat (plutôt que le perdre) - Prix : La raison pour laquelle un consommateur va choisir de passer par le commerce électronique - Moyens de paiement : trop de sites ne proposent toujours pas un tiers de confiance (Paypal, et cie) ===> réassurance et spontanéité - Informations personnelles : attention à ne pas demander trop d'infos persos ===> dealbreaker - Tunnel d'Achat : un processus d'évolution dans le tunnel clairement indiqué. Pas de navigation/arborescence du site apparente durant le tunnel d'achat. Attention à respecter le "eyeflow". Bannir la multiplication des boutons et des sollicitations : 1 bouton = 1 étape. Pas de code de réduction en aval du processus d'achat. Proposer de la vente croisée ou options dans le tunnel d'achat. La sécurisation du processus d'achat est inconditionnelle.