Comment optimiser l’ergonomie d’un site ecommerce ?

L’ergonomie comme levier marketing

QUELQUES NOTIONS QUELQUES NOTIONS QUELQUES NOTIONS QUELQUES NOTIONS ÀÀÀÀ BIEN BIEN BIEN BIEN COMPRENDRECOMPRENDRECOMPRENDRECOMPRENDRE

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

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/

1024x768

Loi de la proximité et de similitude

«««« Notre cerveau tend Notre cerveau tend Notre cerveau tend Notre cerveau tend àààà regrouper les regrouper les regrouper les regrouper les choses qui sont proches choses qui sont proches choses qui sont proches choses qui sont proches physiquementphysiquementphysiquementphysiquement »»»»

• 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

Loi de la proximité et de similitude

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.

1

2

L’affordance

L'affordance 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 + baselineLogo en haut à

gauche + baseline

Numéro de téléphoneNuméro de téléphone PanierPanier

Accès au compte, suivi de commandeAccès au compte, suivi de commande

Mentions légales, liens

d’informations

Eléments de rassurance

Réseaux sociaux, newsletter

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�peu impliquant�pas cher

�Achat annuel�Emotionnel�Vecteur d’image�Prix important

�Achat rare�Très émotionnel�Coût élevé

•Mémoriser l’article

•Pouvoir le recommander

facilement

•Pas besoin d’infos sur le produit,

les gens le connaissent

•Pouvoir comparer facilement

•Disponibilité importante et

retours importants

•Promotions

•Le site devra inspirer un haut

niveau de confiance

•La rassurance sera très forte

(notamment sur les frais de

livraison)

•Le produit devra être magnifié

Ajout rapide au panier

Liste toujours présente à l’imagePetit visuel et

descriptif court

Remy

Filtres spécifiques aux chaussures

360 dans la page liste

Mode superzoompour apprécier les

détails

Système d’indicateur des

tailles

Recherche par moteur

uniquement

Résultats en temps réel

La marque aussi influence sur l’ergonomie

Logo en bas de page / menu caché dans le logoLogo en bas de page /

menu caché dans le logo

Moteur de recherche caché

Moteur de recherche caché

Mélimélo de typosMélimélo de typos

Surcharge visuelleSurcharge visuelle

Menu trop complexeMenu trop complexe

Tous les internautes ne sont pas les mêmes

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 earlyadopter

•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

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

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)

LES BONNES RLES BONNES RLES BONNES RLES BONNES RÈÈÈÈGLES DE LGLES DE LGLES DE LGLES DE L’’’’ERGONOMIE ERGONOMIE ERGONOMIE ERGONOMIE EN EN EN EN ECOMMERCEECOMMERCEECOMMERCEECOMMERCE

Pour la page d’accueilCorrespondre au design de la marque

Séduire pour diminuer le taux de rebond

Votre menu doit être bien rangé et montrer toute l’étendue de l’offre

Rendre le site vivant avec de l’actualité

Bien respecter les conventions de la page d’accueil

Récapituler tous les éléments de rassurance en bas de page Newsletter et réseaux sociaux

Liens « institutionnels »

« Pousser » du produit en page d’accueil pour faire entrer l’internaute dans l’offre

Pour la page rayon

Pour une offre riche et complexe, toujours proposer des filtres

Toujours indiquer à l’utilisateur oùil se trouve

Eviter les aller-retours entre les fiches produits

Affichez vos best-of en tête de gondolePermettez d’afficher tous les produits sur une page

Eviter les aller-retours entre les fiches produits grâce à la mini fiche produit

Jouez sur la séduction et soignez vos photos

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

Pour la fiche produit

Toujours plusieurs photos

Permettre de rentrer en contact avec le marchand quand le produit est complexe

Le bouton d’ajout au panier doit être proéminent et placéau-dessus de la ligne de flottaison

Affichez la disponibilité àcôté du bouton « Ajouter »

Pour les sites de mode, utilisez les photos les plus grandes possibles

Affichez des couleurs sans ambiguité

Rassurez sur la livraison

Descriptif doit être court, mais efficace

Permettez de naviguer de fiche à fiche

Simplicité rime avec efficacité

Pour le panier

Ici en principe démarre l’acte d’achat.Objectif du panier : transformer le visiteur en acheteur.

Rassurer :- Faire penser que la commande doit aller vite et va être facile.

Doit rappeller qu’il vaut mieux acheter maintenant que plus tard

Doit récapituler clairement la commandeRassurer sur la suite et sur la livraison

C’est l’endroit de la promo.Informez si possible sur les frais de livraison

On peut encore faire du upselling dans le panier, mais ça doit être fait judicieusement

Pour le tunnel de commande

Objectif : convertir, convertir, convertir !

Doit être extrêmement clair et précisPas d’ambiguité sur les libellésDes champs textes qui donnent l’impression que le formulaire est facile à remplir et qu’il y a peu d’informations demandées (sous entendu, ça va aller vite)

Le choix des frais de port doit être clair et les tarifs affichés sans ambiguité.Le choix du relais-livraison doit être simple

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

LLLL’’’’OPTIMISATIONOPTIMISATIONOPTIMISATIONOPTIMISATION

#1 Mesurer et analyser

Les webs analytics pour avoir une vision d’ensemble

Taux de rebond du site

Conversions dans le tunnel de commande

Taux d’ajout au panier

Taux de transformation de la page panier

Utilisabilité du moteur de rechercheEngagement des visiteurs

Définir les principaux KPI afin de définir un tableau de bord mensuel

Les tests utilisateurs sont le microscope

Analyse avec de vrais gens dedans

Qualitatif

Explique ce que les web analyticsn’expliquent pas

L’inspection ergonomique

Point de vue de l’expert

Analyse selon tous les bestpractices

#2 Comment établir une feuille de route ?

ROI du tunnel de commande

Position dans l’entonnoir de conversion

ROI

Landing pages

Descente produit

Panier

Tunnel de commande

Plus on est proche de la page de confirmation, plus le ROI est grand

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

Tester avant de développer

Génère 0,5 M€ de CA

pour 50,000 v.u.

Génère 0,5 M€ de CA

pour 50,000 v.u.

Génère 0,6 M€ de CA

pour 50,000 v.u.

Génère 0,6 M€ de CA

pour 50,000 v.u.

Les tests multivariés

Afficher ou ne pas afficher (2 combinaisons)

Taille du prix (4 combinaisons)

Couleur du bouton (4 combinaisons)

Permettent d’optimiser plus vite, mais demandent plus de trafic

Quel outil choisir pour optimiser ?

�Intégré avec Google Analytics�Gratuit�Intégration complexe�Pas d’éditeur visuel

�Payant,mais version d’essai gratuite (permet de mener des petits tests)�Très simple à intégrer�Très puissant (segmentation possible du trafic)�Résultats faciles à lire

Conception d’un test avec Visual Website Optimizer

Création des variations directement sur le site

L’éditeur permet de modifier directement le code à l’intérieur des pages

Paramétrage

1 - Gestion du périmètre du test

2 - Gestion des variantes

3 - Gestion des objectifs de conversion

Mesure des résultats

Un tableau de bord donnant les résultats en

temps réel

Quand arrêter un test

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

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 rayons

•Valeur moyenne du panier

•Taux d’ajout au produit

•Nb de fiches produits vues

•Taux de transformation

Exemple d’optimisation

Exemple d’optimisation d’une fiche produit

12/5/2011 Offre optimisation Becquet.fr Page 63

Frais de port pas visibles

Couleur dangereuse du bouton

Un test multivarié sur le bouton d’ajout au panier

12/5/2011 Offre optimisation Becquet.fr Page 64

Résultats

12/5/2011 Offre optimisation Becquet.fr Page 65

Le gagnant n’est pas toujours celui que l’on

croit

And the winner ize !!!

12/5/2011 Offre optimisation Becquet.fr Page 66

La valeur par visite est la plus importante sur le bouton orange.

Conclusion

• Connaître les bases de l’ergonomie• Se fier à l’observation plutôt qu’à son bon sens

• Optimiser progressivement• Tester, toujours tester

Merci de votre attentionEt si vous avez des questions, c’est maintenant qu’il faut les poser

www.capitaine-commerce.com

contact@capitaine-commerce.com

Twitter : @capitaine