L'ergonomie facteur de croissance en e-commerce - Laurent Danflous

Comment améliorer l’ergonomie de votre site pour augmenter votre CA ? *
* en améliorant votre taux de conversion

Tél.: 06 63 09 45 17 www.success-store.fr
Interface Homme Machine, ergonomie, accessibilité… 
De quoi s’agit t’il exactement ?

Interface Homme Machine, ergonomie, accessibilité… De quoi s’agit t’il exactement ?
Ergonomie
déﬁnition : L’ergonomie consiste à adapter le travail, les outils et l’environnement à
l’homme (et non l’inverse).
Ce qui est ergonomique est donc ce qui est adapté.

Ergonomie
On la rencontre tous les jours dans notre quotidien pour nous faciliter la vie

IHM : Interface Homme Machine
déﬁnition : IHM est un acronyme utilisé pour désigner les interfaces homme/
machine, c’est à dire l’ensemble des moyens utilisés par l’homme pour
communiquer avec une machine.

IHM : Interface Homme Machine
le tableau de bord d’une voiture, peut être la première IHM

Ergonomie
ergonomie générale

Ergonomie
IHM

Ergonomie
IHM
ergo. informatique

Ergonomie
IHM
ergo. informatique
ergonomie web

Ergonomie web
déﬁnition : L’ergonomie web a pour objectif d’adapter un site internet à ses visiteurs,
de sorte que son utilisation soit ressentie comme facile, confortable et
que ceux-ci aient envie d’y revenir.

Ergonomie web
L’antithèse, la bille étant l’internaute :

ATTENTION

ATTENTION
ergonomie ne rime pas toujours avec :
BEAU / DESIGN

Philippe STARK a désigné un presse citron très design, le « Juicy Salif »

> magniﬁque
> atypique
> vendu à des millions d’exemplaires

> magniﬁque
> atypique
> QUID de la pulpe et des pépins ?

> magniﬁque
> atypique
> QUID de la pulpe et des pépins ?
Ils tombent dans le verre et sur la table

Pourquoi est il essentiel pour votre rentabilité d’améliorer votre
taux de transformation ?

Pourquoi est il essentiel pour votre rentabilité d’améliorer votre taux de transformation ?
Taux de conversion
déﬁnition : Nombre de commandes
Nombre de visiteurs
x 100

Un peu de maths Quelle est la formule mathématique du CA en e-commerce ?

Trafic

Trafic x Taux de
conversion

Trafic x Taux de
conversion
x panier moyen

Trafic x Taux de
conversion
x panier moyen( ) - retours

Trafic x Taux de
conversion
x panier moyen( ) - retours
Pour développer votre CA, vous avez 4 possibilités !

En 2014 et bientôt 2015, le trafic coûte cher…
> Il y a de plus en plus de sites marchands : 144 0000 en 2014 (+17%) selon Médiamétrie
• SEO : avec les algorithmes Google Panda, Penguin, il est plus difficile qu’avant de se
positionner. Plus de travail (en temps / prestataire) pour des résultats.
> Le trafic coûte (de plus en plus) cher
• Facebook : modification de l’algorithme d’affichage des posts de votre page Fan
(7,83%), moins de visibilité gratuite.

Baisse du panier moyen d’années en années
80,66 € (-5€ en 1 an)

Quel est le taux de conversion moyen ?
Tout dépend du secteur d’activité, en moyenne 2% selon la FEVAD

Quel est le taux de conversion moyen ?
Tout dépend du secteur d’activité, 1.76% en moyenne selon Capitaine Commerce
Etude réalisée auprès de 274 e-commerçants répondants en 2014.

Comment améliorer son taux de conversion ?
• améliorer son merchandising
• proposer de la recommandation 
personnalisée
Quelques pistes (non exhaustives) :
• améliorer son service client
• améliorer le temps de chargement
• proposer des avis clients
• améliorer son positionnement prix

Dessine moi une boutique en ligne

Comment améliorer son taux de conversion ?
• améliorer son merchandising
• proposer de la recommandation 
personnalisée
Quelques pistes (non exhaustives) :
• améliorer son service client
• améliorer le temps de chargement
• proposer des avis clients
• améliorer son positionnement prix
Améliorer son ergonomie pour des résultats DURABLES

L’intérêt chiffré de l’amélioration de sa conversion
nombre de VU Taux de conversion Panier moyen CA journalier CA mensuel CA annuel
Augmentation
annuelle
1 000 1,50 % 80 1 200,00 € 36 000,00 € 438 000,00 €
1 000 1,60 % 80 1 280,00 € 38 400,00 € 467 200,00 € 29 200,00 €
1 000 1,70 % 80 1 360,00 € 40 800,00 € 496 400,00 € 58 400,00 €
1 000 1,80 % 80 1 440,00 € 43 200,00 € 525 600,00 € 87 600,00 €
1 000 1,90 % 80 1 520,00 € 45 600,00 € 554 800,00 € 116 800,00 €
1 000 2,00 % 80 1 600,00 € 48 000,00 € 584 000,00 € 146 000,00 €

L’intérêt chiffré de l’amélioration de sa conversion
nombre de VU Taux de conversion Panier moyen CA journalier CA mensuel CA annuel
Augmentation
annuelle
1 000 1,50 % 80 1 200,00 € 36 000,00 € 438 000,00 €
1 000 1,51 % 80 1 208,00 € 36 240,00 € 440 920,00 € 2 920,00 €
1 000 1,52 % 80 1 216,00 € 36 480,00 € 443 840,00 € 5 840,00 €
1 000 1,53 % 80 1 224,00 € 36 720,00 € 446 760,00 € 8 760,00 €
1 000 1,54 % 80 1 232,00 € 36 960,00 € 449 680,00 € 11 680,00 €
1 000 1,55 % 80 1 240,00 € 37 200,00 € 452 600,00 € 14 600,00 €

D’autres intérêts de travailler son ergonomie
• plus d’inscription à la newsletter
• plus de création de comptes
On peut citer entre autre :
• plus de leads
• meilleure satisfaction client
• meilleure image de marque
• plus de productivité sur app SAAS…

Regardez votre taux de
conversion…

conversion…
Pas uniquement votre traﬁc

conversion…
Pas uniquement votre traﬁc
…VOTRE TAUX DE
CONVERSION !

Comment procède t-on pour optimiser l’ergonomie d’un site ?

Connaître vos (futurs) clients et leurs attentes / objectifs
source photo : http://rue89.nouvelobs.com/2010/11/09/voici-le-visage-moyen-des-habitants-de-sydney-175188

Connaître vos (futurs) clients et leurs attentes / objectifs
• Questionnaire clients
• Analyse des analytics
• Remontée d’informations de votre service client
• Analyse de votre CRM
• Remontée d’informations de vos vendeurs en retail…

Dans le but de réaliser des Personas
Un persona est un personnage imaginaire représentant un groupe cible avec un / des
objectif(s) spéciﬁque(s) à accomplir.
Il faut l’humaniser avec une photo et lui donner des caractéristiques propre à votre projet.

Dans le but de réaliser des Personas
• Age
• Métier
• Vocabulaire
• Aisance avec l’informatique
Un persona est un personnage imaginaire représentant un groupe cible avec un / des
objectif(s) spéciﬁque(s) à accomplir.
Il faut l’humaniser avec une photo et lui donner des caractéristiques propre à votre projet.
Exemples de caractéristiques
• Cadre de l’utilisation (au travail, à la maison)…
• Prénom
• Relation à la marque

Exemple de Personas
source : http://blog.octo.com/les-ux-bonnes-raisons-7-bonnes-raisons-de-faire-des-personas/

Utilisation des Personas
Une fois que vous avez réalisé vos personas, vous
devez les communiquer et communiquer sur eux
auprès des différentes équipes :
• Graphistes
• Intégrateurs
• Développeurs
• Marketing…

Utilisation des Personas
Une fois que vous avez réalisé vos personas, vous
devez les communiquez et communiquer sur eux
auprès des différentes équipes :
• Graphistes
• Intégrateurs
• Développeurs
• Marketing…
Pour ensuite travailler selon sa spécialité avec le
ﬁltre du persona devant les yeux.
C’est sous cette approche que l’ergonome / UX
designer doit travailler à la conception ou audit
d’un site, tout en se basant sur…

Des pratiques / règles et lois d’ergonomie établies

Exemple avec le tri de cartes
Une des principales méthodes en architecture de l’information, pour rendre le site facile à
naviguer.
Très brièvement, cela consiste à faire trier physiquement (ou informatiquement) à un
groupe de participants, des cartes en carton (ou des Post it) sur lesquels sont notés les
différentes rubriques d’un site. Le but ﬁnal est d’obtenir une navigation conforme au
schéma de pensée de vos utilisateurs, non des vôtres.

Exemple avec la loi de FITTS
La loi de Fitts a été proposée par Paul Fitts en 1954 suite
à une expérimentation en psychologie expérimentale
pour améliorer l’ergonomie des cockpits d’avion.

La loi de FITTS, un pilier fondamental
La loi de Fitts a été proposée par Paul Fitts en 1954 suite
à une expérimentation en psychologie expérimentale
pour améliorer l’ergonomie des cockpits d’avion.
Pas de panique ! Traduction :
Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande.
> Augmenter la taille/surface des éléments cliquables
> Les éléments cliquables doivent être proches de l’objet source

Une bonne conception des maquettes
1 - Le Zoning
Premier découpage pour décider de
l’organisation générale des pages.
Consiste à découper l’interface en type
de zones de contenus aﬁn de ﬁxer les
emplacements des différentes parties :
• logo
• navigation principale
• navigation secondaire
• coeur de page
• outils
• panier
• zone membre…

Une bonne conception des maquettes
2 - Le Wireframe
Une fois le zoning validé, cette étape
consiste à intégrer le contenu, les
fonctionnalités et l’ergonomie.
Ce sont des maquettes conceptuelles,
sans couche graphique, juste pour ﬁxer et
valider des concepts d’UX.
Lors d’une refonte, on peut y intégrer des
éléments du site existant.
L’étape suivante sera la création
graphique à partir de cet élément.

Test utilisateurs, test A/B, cartes de chaleurs… Quelles
solutions pour valider les choix ?

Test utilisateurs, test A/B, cartes de chaleurs… Quelles solutions pour valider les choix ?
Différents outils à disposition (non exhaustif)
Le Heatmap (ou clickmap) pour les cartes de chaleur
Plus la zone est intense
(vers le rouge) plus elle
est cliquée.

Le Heatmap (ou clickmap) pour détecter les clics de souris
On peut remarquer que
certains cliquent à côté
des boutons
(importance de la loi de
Fitts)

Le Heatmap pour détecter le scroll de ses pages
Comme la carte de
chaleur pour les clics,
permet de voir quelle
est la hauteur de page la
plus vue.

Le mousse tracking
Enregistre le
déplacement de la
souris, voire enregistre
en ﬁlm le parcours de
sessions des
internautes.

L’A/B testing
Consiste à créer une ou
plusieurs versions d’une page
de son site et y diriger
aléatoirement (selon certains
critères) des visiteurs pour en
analyser les différences de
résultats. 
 
A faire avec un minimum de
traﬁc sinon il faut laisser
durer ce tests plusieurs mois
(pas optimal)

Les tests utilisateurs
Consiste à faire tester toute ou
partie de son site /
application par un petit
nombre d’utilisateurs en leur
donnant des missions précises
à accomplir.

L’eyetracking
Enregistre les déplacements
des yeux pour analyser ce que
voit le regard.

Changer la couleur ou l’emplacement du bouton « ajouter au
panier » peut-il vraiment permettre d’augmenter durablement le
taux de transformation ?

Changer le bouton « ajouter au panier » peut-il vraiment permettre d’augmenter durablement le taux de transformation ?
La réponse est OUI !
Quelques règles à respecter :
• Au dessus de la ligne
• Assez grand
• Avec un libellé classique
• Assez grand (loid de Fitts)
• Un contraste fort avec le fond de page
• Le texte doit aussi avoir un contraste minimum
• En contraste avec la charte graphique
• Doit être plus visible que tout autre CTA à proximité

Un bon exemple, la boutique Jules
• Au dessus de la ligne
• Assez grand
• Avec un libellé classique
• Assez grand (loid de Fitts)
• Un contraste fort avec le fond de page
• Le texte doit aussi avoir un contraste minimum
• En contraste avec la charte graphique
• Doit être plus visible que tout autre CTA à proximité

Un mauvais exemple, la boutique VooStore

Un mauvais exemple, la boutique Better Ever After

Les smartphones et les tablettes obligent-ils à revoir totalement
l’ergonomie de votre site ?
Le responsive design est-il toujours une bonne solution ?

Doit on revoir totalement l’ergonomie de son site pour le mobile ? Le responsive design est-il toujours une bonne solution ?
Pensez Mobile First pour le mobile
Repenser l’ergonomie en partant non
pas du site desktop mais spéciﬁquement
pour l’utilisabilité sous mobile.
L’espace est restreint, il faut alléger au
maximum l’interface pour ne garder que
l’essentiel.
L’utilisabilité spéciﬁque du « touch »
doit être intégrée. Par exemple, les
sliders sont plus utilisables que sur
desktop.

Le Responsive Web Design, une bonne idée ?
Ce n’est pas la panacée mais à défaut,
mieux que rien.
• attention au merchandising, on ne fait
pas rentrer un supermarché dans une
supérette
• attention à la vitesse d’afﬁchage des
pages, encore plus déterminant que
sur desktop

Vous perdez de l’argent avec votre site actuel

L'ergonomie facteur de croissance en e-commerce - Laurent Danflous

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (7)

En vedette

En vedette (20)

Similaire à L'ergonomie facteur de croissance en e-commerce - Laurent Danflous

Similaire à L'ergonomie facteur de croissance en e-commerce - Laurent Danflous (20)

L'ergonomie facteur de croissance en e-commerce - Laurent Danflous