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.

1. Comment optimiser l’ergonomie
d’un site ecommerce ?
L’ergonomie comme levier marketing

3. QUELQUES NOTIONS À BIEN
COMPRENDRE

4. #1 : tous les êtres humains
obéissent à des lois immuables

5. Loi de fitts
Plus une cible est
proche et grande, plus
elle est facile à
atteindre
http://www.9eme-studio.com/2011/09/call-to-action-ergonomie-
web/

6. 1024x768

7. 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

8. Loi de la proximité et de similitude
1
2
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.

9. L’affordance
L'affordance est la capacité d’un objet à suggérer sa
propre utilisation.

10. Qu’est-ce qui est cliquable ? Qu’est-ce
qui ne l’est pas ?

11. #3 – Les conventions sont plus
fortes que l’ergonomie

12. Logo en haut à
gauche + baseline Accès au compte,
suivi de commande
Numéro de
téléphone Panier

13. Mentions légales,
Réseaux sociaux,
liens
newsletter
d’informations
Eléments de
rassurance

14. Les leaders créent les conventions

15. #4 Chaque site obéit à ses
propres lois

16. 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 confiance
facilement retours importants •La rassurance sera très forte
•Pas besoin d’infos sur le produit, •Promotions (notamment sur les frais de
les gens le connaissent livraison)
•Le produit devra être magnifié

17. Remy
Ajout rapide au
panier
Liste toujours
Petit visuel et présente à l’image
descriptif court

18. Mode superzoom
pour apprécier les
détails
Système
d’indicateur des
tailles
360 dans la page
liste
Filtres spécifiques
aux chaussures

19. Recherche par
moteur
uniquement
Résultats en temps
réel

20. La marque aussi influence sur
l’ergonomie

21. Moteur de
Logo en bas de page /
recherche menu caché dans le logo
caché

22. Menu trop complexe
Mélimélo de typos
Surcharge visuelle

23. Tous les internautes ne sont pas
les mêmes

24. 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

25. 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

26. 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)

27. RÈ L’
LES BONNES RÈGLES DE L’ERGONOMIE
EN ECOMMERCE

28. Pour la page d’accueil
Votre menu doit être bien rangé et
Correspondre au design de la montrer toute l’étendue de l’offre
marque
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

29. « Pousser » du produit en page
d’accueil pour faire entrer
l’internaute dans l’offre
Récapituler tous les éléments de
rassurance en bas de page Newsletter et réseaux sociaux
Liens « institutionnels »

30. Pour la page rayon
Pour une offre riche et
complexe, toujours proposer Eviter les aller-retours entre les
des filtres fiches produits
Toujours 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

32. Jouez sur la séduction
et soignez vos photos
Eviter les aller-retours entre les
fiches produits grâce à la mini fiche
produit

33. Evitez les effets déceptifs :
trop ou pas assez de
propositions

34. 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
flottaison
Toujours plusieurs photos
Permettre de rentrer en contact avec le
marchand quand le produit est complexe

35. Affichez des couleurs sans
ambiguité
Rassurez sur la livraison
Pour les sites de mode, utilisez les
photos les plus grandes possibles

36. Permettez de naviguer de
fiche à fiche
Descriptif doit être court,
mais efficace
Simplicité rime avec
efficacité

37. Pour le panier
Ici en principe démarre l’acte
d’achat. Rassurer :
Objectif du panier : - Faire penser que la commande
transformer le visiteur en doit aller vite et va être facile.
acheteur.
Doit récapituler clairement la Doit rappeller qu’il vaut mieux acheter
commande maintenant que plus tard
Rassurer sur la suite et sur la
livraison
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

38. Pour le tunnel de commande
Objectif : convertir, convertir, convertir !
Le choix des frais de port doit être
Doit être extrêmement clair et précis clair et les tarifs affichés sans
Pas d’ambiguité sur les libellés ambiguité.
Des champs textes qui donnent l’impression Le choix du relais-livraison doit
que le formulaire est facile à remplir et qu’il y être simple
a peu d’informations demandées (sous
entendu, ç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

41. L’OPTIMISATION

42. #1 Mesurer et analyser

43. Les webs analytics pour avoir une
vision d’ensemble
Taux de rebond du site
Taux d’ajout au panier
Conversions dans le tunnel de
commande
Taux de transformation de la page panier
Engagement des visiteurs
Utilisabilité du moteur de recherche
Définir les principaux KPI afin de définir un
tableau de bord mensuel

44. Les tests utilisateurs sont le
microscope
Analyse avec de vrais gens dedans
Qualitatif
Explique ce que les web analytics
n’expliquent pas

45. L’inspection ergonomique
Point de vue de l’expert
Analyse selon tous les best
practices

46. #2 Comment établir une feuille
de route ?

47. ROI du tunnel de commande
Tunnel de commande
Panier
ROI
Descente
produit
Plus on est proche de la
Landing page de confirmation,
pages
plus le ROI est grand
Position dans l’entonnoir de conversion

48. Relever les axes d’optimisation et les
classer

49. Prendre en compte les temps de
développement
3 niveaux de
développement

50. Optimiser progressivement

51. #3 L’optimisation dans la
pratique

52. Les tests A/B et multivariés
Génère 0,6 M€ de CA
Génère 0,5 M€ de CA pour 50,000 v.u.
pour 50,000 v.u.
Tester avant de
développer

53. 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

54. 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

55. Conception d’un test avec Visual
Website Optimizer

56. Création des variations directement
sur le site
L’éditeur permet de
modifier directement le
code à l’intérieur des
pages

57. Paramétrage
1 - Gestion du périmètre du test
2 - Gestion des variantes
3 - Gestion des objectifs de
conversion

58. Mesure des résultats
Un tableau de bord
donnant les résultats en
temps réel

59. Quand arrêter un test

60. 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

61. Que faut-il mesurer ?
En fonction de la page que vous testez, ce ne
sont pas les mêmes KPI
Tunnel •Taux de rebond entre les pages
•Taux de transformation
•Valeur du panier moyen
Panier •Taux d’entrée dans le tunnel de
commande
•Taux de transformation
•Valeur du panier moyen
Page produits et •Valeur moyenne du panier
rayons •Taux d’ajout au produit
•Nb de fiches produits vues
•Taux de transformation

62. Exemple d’optimisation

63. Exemple d’optimisation d’une fiche produit
Couleur dangereuse
du bouton
Frais de port pas visibles
12/5/2011 Offre optimisation Becquet.fr Page 63

64. Un test multivarié sur le bouton d’ajout
au panier
12/5/2011 Offre optimisation Becquet.fr Page 64

65. Résultats
Le gagnant n’est pas
toujours celui que l’on
croit
12/5/2011 Offre optimisation Becquet.fr Page 65

66. 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

67. Conclusion
• Connaître les bases de l’ergonomie
• Se fier à l’observation plutôt qu’à son
bon sens
• Optimiser progressivement
• Tester, toujours tester

68. Merci de votre attention
Et si vous avez des questions, c’est
maintenant qu’il faut les poser
www.capitaine-commerce.com
contact@capitaine-commerce.com
Twitter : @capitaine