Comment optimiser l’ergonomie   d’un site ecommerce ?  L’ergonomie comme levier marketing
QUELQUES NOTIONS À BIENCOMPRENDRE
#1 : tous les êtres humainsobéissent à des lois immuables
Loi de fitts                                                               Plus une cible est                             ...
1024x768
Loi de la proximité et de similitude      « Notre cerveau tend à regrouper les         choses qui sont proches         phy...
Loi de la proximité et de similitude12    De manière générale, la vision regroupe instinctivement les objets vus selon leu...
L’affordanceLaffordance est la capacité d’un objet à suggérer sa                  propre utilisation.
Qu’est-ce qui est cliquable ? Qu’est-ce           qui ne l’est pas ?
#3 – Les conventions sont plus    fortes que l’ergonomie
Logo en haut àgauche + baseline         Accès au compte,                         suivi de commande                    Numé...
Mentions légales,                                  Réseaux sociaux,      liens                                     newslet...
Les leaders créent les conventions
#4 Chaque site obéit à ses      propres lois
Tous les produits ne sont pas les                           mêmes           Achat fréquent                   Achat annuel ...
Remy                   Ajout rapide au                       panier                                       Liste toujours P...
Mode superzoom                           pour apprécier les                                 détails            Système    ...
Recherche par   moteur uniquement       Résultats en temps              réel
La marque aussi influence sur        l’ergonomie
Moteur de             Logo en bas de page /recherche   menu caché dans le logo  caché
Menu trop complexeMélimélo de typos                                   Surcharge visuelle
Tous les internautes ne sont pas           les mêmes
La eshoppeuse professionnelle                Pressée                Vorace                Elle compare tout               ...
L’artisan occasionnel          Il ne passe pas sa vie sur Internet          Il n’est pas très à l’aise avec son ordinateur...
La rurale populaire       Elle est plutôt réfractaire à     Internet       Elle a l’habitude de commander     par courrier...
RÈ        L’LES BONNES RÈGLES DE L’ERGONOMIEEN ECOMMERCE
Pour la page d’accueil                                        Votre menu doit être bien rangé etCorrespondre au design de ...
« Pousser » du produit en page                                             d’accueil pour faire entrer                    ...
Pour la page rayonPour une offre riche etcomplexe, toujours proposer                     Eviter les aller-retours entre le...
Jouez sur la séductionet soignez vos photos                         Eviter les aller-retours entre les                    ...
Evitez les effets déceptifs :trop ou pas assez depropositions
Pour la fiche produit                                                                     Affichez la disponibilité à     ...
Affichez des couleurs sans                                               ambiguité                                       R...
Permettez de naviguer de                                         fiche à ficheDescriptif doit être court,mais efficace    ...
Pour le panierIci en principe démarre l’acted’achat.                                                        Rassurer :Obje...
Pour le tunnel de commandeObjectif : convertir, convertir, convertir !                                                    ...
L’OPTIMISATION
#1 Mesurer et analyser
Les webs analytics pour avoir une              vision d’ensembleTaux de rebond du site                                    ...
Les tests utilisateurs sont le                      microscopeAnalyse avec de vrais gens dedans                           ...
L’inspection ergonomique                      Point de vue de l’expert                    Analyse selon tous les best     ...
#2 Comment établir une feuille        de route ?
ROI du tunnel de commande                                                  Tunnel de commande                             ...
Relever les axes d’optimisation et les               classer
Prendre en compte les temps de        développement                   3 niveaux de                   développement
Optimiser progressivement
#3 L’optimisation dans la         pratique
Les tests A/B et multivariés                             Génère 0,6 M€ de CAGénère 0,5 M€ de CA            pour 50,000 v.u...
Les tests multivariés                    Taille du prix (4 combinaisons)                                          Couleur ...
Quel outil choisir pour optimiser ?   Intégré avec Google Analytics     Payant,mais version d’essai   Gratuit             ...
Conception d’un test avec Visual      Website Optimizer
Création des variations directement             sur le site                          L’éditeur permet de                  ...
Paramétrage          1 - Gestion du périmètre du test          2 - Gestion des variantes          3 - Gestion des objectif...
Mesure des résultats                  Un tableau de bord                donnant les résultats en                      temp...
Quand arrêter un test
Qu’est-ce qu’il faut tester et comment                    ?• Faites des tests simples    –   Couleurs et formes des bouton...
Que faut-il mesurer ?En fonction de la page que vous testez, ce ne  sont pas les mêmes KPITunnel                       •Ta...
Exemple d’optimisation
Exemple d’optimisation d’une fiche produit                                                          Couleur dangereuse    ...
Un test multivarié sur le bouton d’ajout               au panier12/5/2011      Offre optimisation Becquet.fr   Page 64
Résultats Le gagnant n’est pastoujours celui que l’on         croit12/5/2011                 Offre optimisation Becquet.fr...
And the winner ize !!!            La valeur par visite est la plus importante sur le bouton orange.12/5/2011              ...
Conclusion• Connaître les bases de l’ergonomie• Se fier à l’observation plutôt qu’à son  bon sens• Optimiser progressiveme...
Merci de votre attention  Et si vous avez des questions, c’est    maintenant qu’il faut les poserwww.capitaine-commerce.co...
Rendre son site plus persuasif et utiliser l'ergonomie pour améliorer la conversion de son site ? - Conférence pleinière E...
Rendre son site plus persuasif et utiliser l'ergonomie pour améliorer la conversion de son site ? - Conférence pleinière E...
Rendre son site plus persuasif et utiliser l'ergonomie pour améliorer la conversion de son site ? - Conférence pleinière E...
Rendre son site plus persuasif et utiliser l'ergonomie pour améliorer la conversion de son site ? - Conférence pleinière E...
Prochain SlideShare
Chargement dans…5
×

Rendre son site plus persuasif et utiliser l'ergonomie pour améliorer la conversion de son site ? - Conférence pleinière EMK 2011

2 131 vues

Publié le

Avoir beaucoup de visiteurs, c'est bien … mais les convertir, c'est encore mieux ! En France, le taux de conversion moyen plafonne à 2%. Comment le dépasser pour vous placer parmi les e-commerçant les plus performants ?
Le Capitaine Commerce vous dévoilera tous ses secrets en vous expliquant comment analyser et optimiser votre page d’aceuil, vos fiches produits, et le tunnel de vente en y intégrant les éléments essentiels qui augmenteront l’efficacité commerciale de votre site internet.

Publié dans : Business
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 131
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
59
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Rendre son site plus persuasif et utiliser l'ergonomie pour améliorer la conversion de son site ? - Conférence pleinière EMK 2011

  1. 1. Comment optimiser l’ergonomie d’un site ecommerce ? L’ergonomie comme levier marketing
  2. 2. QUELQUES NOTIONS À BIENCOMPRENDRE
  3. 3. #1 : tous les êtres humainsobéissent à des lois immuables
  4. 4. Loi de fitts Plus une cible est proche et grande, plus elle est facile à atteindrehttp://www.9eme-studio.com/2011/09/call-to-action-ergonomie-web/
  5. 5. 1024x768
  6. 6. Loi de la proximité et de similitude « Notre cerveau tend à regrouper les choses qui sont proches physiquement » • Objets proches physiquement ont des points conceptuels communs • A contrario : objets éloignés = objets différents La loi de proximité fait que l’on perçoit 2 groupes d’objets
  7. 7. Loi de la proximité et de similitude12 De manière générale, la vision regroupe instinctivement les objets vus selon leur similitude graphique, leur proximité relative et leur régularité spatiale.
  8. 8. L’affordanceLaffordance est la capacité d’un objet à suggérer sa propre utilisation.
  9. 9. Qu’est-ce qui est cliquable ? Qu’est-ce qui ne l’est pas ?
  10. 10. #3 – Les conventions sont plus fortes que l’ergonomie
  11. 11. Logo en haut àgauche + baseline Accès au compte, suivi de commande Numéro de téléphone Panier
  12. 12. Mentions légales, Réseaux sociaux, liens newsletter d’informations Eléments de rassurance
  13. 13. Les leaders créent les conventions
  14. 14. #4 Chaque site obéit à ses propres lois
  15. 15. Tous les produits ne sont pas les mêmes Achat fréquent Achat annuel Achat rare peu impliquant Emotionnel Très émotionnel pas cher Vecteur d’image Coût élevé Prix important•Mémoriser l’article •Pouvoir comparer facilement •Le site devra inspirer un haut•Pouvoir le recommander •Disponibilité importante et niveau de confiancefacilement retours importants •La rassurance sera très forte•Pas besoin d’infos sur le produit, •Promotions (notamment sur les frais deles gens le connaissent livraison) •Le produit devra être magnifié
  16. 16. Remy Ajout rapide au panier Liste toujours Petit visuel et présente à l’imagedescriptif court
  17. 17. Mode superzoom pour apprécier les détails Système d’indicateur des tailles 360 dans la page listeFiltres spécifiques aux chaussures
  18. 18. Recherche par moteur uniquement Résultats en temps réel
  19. 19. La marque aussi influence sur l’ergonomie
  20. 20. Moteur de Logo en bas de page /recherche menu caché dans le logo caché
  21. 21. Menu trop complexeMélimélo de typos Surcharge visuelle
  22. 22. Tous les internautes ne sont pas les mêmes
  23. 23. La eshoppeuse professionnelle Pressée Vorace Elle compare tout Elle se laisse facilement tenter Elle a l’habitude du web Elle connaît tous les bons plans Elle achète même sur mobile. C’est une early adopter •Site doit être très réactif pour répondre à la vitesse l’internaute •Doit respecter le plus possible les conventions •Doit être séduisant et savoir surprendre •Doit intégrer des fonctionnalités de réseaux sociaux
  24. 24. L’artisan occasionnel Il ne passe pas sa vie sur Internet Il n’est pas très à l’aise avec son ordinateur hormis pour les applications bureautique Les sites ecommerce l’embête, mais il a compris leur intérêt Il n’a pas beaucoup de temps et ça l’ennuie •Site doit être plus pédagogique •Les typos doivent être plus grosses •Il ne doit pas avoir l’impression d’être oppressé par l’offre •Il faut lui faciliter absolument le passage dans le tunnel de commande •Il doit être rassuré •Ne paye pas forcément en CB
  25. 25. La rurale populaire Elle est plutôt réfractaire à Internet Elle a l’habitude de commander par courrier ou par téléphone Elle est mal équipée Elle a peur d’internet Elle a plus de 50 ans •Le site doit la rassurer et proposer des moyens de commandes autres que par le web •Elle fera confiance à quelque chose qu’elle connaît déjà •Le paiement par carte n’est pas dans ses habitudes (il faut peut-être proposer un autre moyen de paiement)
  26. 26. RÈ L’LES BONNES RÈGLES DE L’ERGONOMIEEN ECOMMERCE
  27. 27. Pour la page d’accueil Votre menu doit être bien rangé etCorrespondre au design de la montrer toute l’étendue de l’offremarque Rendre le site vivant avec de l’actualité Séduire pour diminuer le taux de rebond Bien respecter les conventions de la page d’accueil
  28. 28. « Pousser » du produit en page d’accueil pour faire entrer l’internaute dans l’offreRécapituler tous les éléments derassurance en bas de page Newsletter et réseaux sociaux Liens « institutionnels »
  29. 29. Pour la page rayonPour une offre riche etcomplexe, toujours proposer Eviter les aller-retours entre lesdes filtres fiches produitsToujours indiquer à l’utilisateur oùil se trouve Permettez d’afficher tous les Affichez vos best-of en tête de gondole produits sur une page
  30. 30. Jouez sur la séductionet soignez vos photos Eviter les aller-retours entre les fiches produits grâce à la mini fiche produit
  31. 31. Evitez les effets déceptifs :trop ou pas assez depropositions
  32. 32. Pour la fiche produit Affichez la disponibilité à côté du bouton « Ajouter » Le bouton d’ajout au panier doit être proéminent et placé au-dessus de la ligne de flottaisonToujours plusieurs photos Permettre de rentrer en contact avec le marchand quand le produit est complexe
  33. 33. Affichez des couleurs sans ambiguité Rassurez sur la livraisonPour les sites de mode, utilisez lesphotos les plus grandes possibles
  34. 34. Permettez de naviguer de fiche à ficheDescriptif doit être court,mais efficace Simplicité rime avec efficacité
  35. 35. Pour le panierIci en principe démarre l’acted’achat. Rassurer :Objectif du panier : - Faire penser que la commandetransformer le visiteur en doit aller vite et va être facile.acheteur.Doit récapituler clairement la Doit rappeller qu’il vaut mieux achetercommande maintenant que plus tardRassurer sur la suite et sur lalivraison On peut encore faire du upselling dans C’est l’endroit de la promo. le panier, mais ça doit être fait Informez si possible sur les frais de livraison judicieusement
  36. 36. Pour le tunnel de commandeObjectif : convertir, convertir, convertir ! Le choix des frais de port doit êtreDoit être extrêmement clair et précis clair et les tarifs affichés sansPas d’ambiguité sur les libellés ambiguité.Des champs textes qui donnent l’impression Le choix du relais-livraison doitque le formulaire est facile à remplir et qu’il y être simplea peu d’informations demandées (sousentendu, ça va aller vite) Evitez toutes les actions qui font sortir du panier Affihcez clairement le nombre d’étapes. Corrigez clairement les erreurs de saisie sans que l’internaute ait à s’interroger
  37. 37. L’OPTIMISATION
  38. 38. #1 Mesurer et analyser
  39. 39. Les webs analytics pour avoir une vision d’ensembleTaux de rebond du site Taux d’ajout au panierConversions dans le tunnel decommande Taux de transformation de la page panier Engagement des visiteursUtilisabilité du moteur de recherche Définir les principaux KPI afin de définir un tableau de bord mensuel
  40. 40. Les tests utilisateurs sont le microscopeAnalyse avec de vrais gens dedans Qualitatif Explique ce que les web analytics n’expliquent pas
  41. 41. L’inspection ergonomique Point de vue de l’expert Analyse selon tous les best practices
  42. 42. #2 Comment établir une feuille de route ?
  43. 43. ROI du tunnel de commande Tunnel de commande PanierROI Descente produit Plus on est proche de la Landing page de confirmation, pages plus le ROI est grand Position dans l’entonnoir de conversion
  44. 44. Relever les axes d’optimisation et les classer
  45. 45. Prendre en compte les temps de développement 3 niveaux de développement
  46. 46. Optimiser progressivement
  47. 47. #3 L’optimisation dans la pratique
  48. 48. Les tests A/B et multivariés Génère 0,6 M€ de CAGénère 0,5 M€ de CA pour 50,000 v.u. pour 50,000 v.u. Tester avant de développer
  49. 49. Les tests multivariés Taille du prix (4 combinaisons) Couleur du bouton (4 combinaisons) Afficher ou ne pas afficher (2 combinaisons) Permettent d’optimiser plus vite, mais demandent plus de trafic
  50. 50. Quel outil choisir pour optimiser ? Intégré avec Google Analytics Payant,mais version d’essai Gratuit gratuite (permet de mener des Intégration complexe petits tests) Pas d’éditeur visuel Très simple à intégrer Très puissant (segmentation possible du trafic) Résultats faciles à lire
  51. 51. Conception d’un test avec Visual Website Optimizer
  52. 52. Création des variations directement sur le site L’éditeur permet de modifier directement le code à l’intérieur des pages
  53. 53. Paramétrage 1 - Gestion du périmètre du test 2 - Gestion des variantes 3 - Gestion des objectifs de conversion
  54. 54. Mesure des résultats Un tableau de bord donnant les résultats en temps réel
  55. 55. Quand arrêter un test
  56. 56. Qu’est-ce qu’il faut tester et comment ?• Faites des tests simples – Couleurs et formes des boutons – Wording – Taille des champs – Taille des images – Taille des caractères• Ensuite travaillez des choses plus complexes – Organisation de la page – Visuels – Fonctionnels• Dépend de l’endroit du site : – Tunnel : rassurance, ergonomie des formulaires – Panier : incitation à l’achat, push de promotions – Fiche produit : information, clarté, incitation à ajouter au panier – Rayons : trouvabilité, capacité à séduire et à aider à trouver – Landing pages et homepage : séduction, information, impulsion
  57. 57. Que faut-il mesurer ?En fonction de la page que vous testez, ce ne sont pas les mêmes KPITunnel •Taux de rebond entre les pages •Taux de transformation •Valeur du panier moyenPanier •Taux d’entrée dans le tunnel de commande •Taux de transformation •Valeur du panier moyenPage produits et •Valeur moyenne du panierrayons •Taux d’ajout au produit •Nb de fiches produits vues •Taux de transformation
  58. 58. Exemple d’optimisation
  59. 59. Exemple d’optimisation d’une fiche produit Couleur dangereuse du bouton Frais de port pas visibles12/5/2011 Offre optimisation Becquet.fr Page 63
  60. 60. Un test multivarié sur le bouton d’ajout au panier12/5/2011 Offre optimisation Becquet.fr Page 64
  61. 61. Résultats Le gagnant n’est pastoujours celui que l’on croit12/5/2011 Offre optimisation Becquet.fr Page 65
  62. 62. And the winner ize !!! La valeur par visite est la plus importante sur le bouton orange.12/5/2011 Offre optimisation Becquet.fr Page 66
  63. 63. Conclusion• Connaître les bases de l’ergonomie• Se fier à l’observation plutôt qu’à son bon sens• Optimiser progressivement• Tester, toujours tester
  64. 64. Merci de votre attention Et si vous avez des questions, c’est maintenant qu’il faut les poserwww.capitaine-commerce.comcontact@capitaine-commerce.comTwitter : @capitaine

×