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 ?

http://www.success-store.fr


Interface Homme Machine, ergonomie, accessibilité… De quoi s’agit t’il exactement ?

Ergonomie

définition : 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éfinition : 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 Machinele 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éfinition : 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 webL’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 »





> magnifique

> atypique

> vendu à des millions d’exemplaires





> magnifique

> atypique


> QUID de la pulpe et des pépins ?





> magnifique

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




Taux de conversion

définition : Nombre de commandes

Nombre de visiteursx 100




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





Trafic





Trafic x Taux de conversion






x panier moyen






x panier moyen( ) - retours






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ées80,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 annuelAugmentation 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 annuelAugmentation 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…





Pas uniquement votre trafic





Pas uniquement votre trafic

…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


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 PersonasUn persona est un personnage imaginaire représentant un groupe cible avec un / des objectif(s) spécifique(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écifique(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/


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



Utilisation des PersonasUne 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 PersonasUne 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 filtre 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 final 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 maquettes1 - 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 afin de fixer les emplacements des différentes parties :

• logo• navigation principale• navigation secondaire• coeur de page• outils• panier• zone membre…




Une bonne conception des maquettes2 - 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 fixer 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 ?




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.




Différents outils à disposition (non exhaustif)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)




Différents outils à disposition (non exhaustif)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.




Différents outils à disposition (non exhaustif)Le mousse tracking

Enregistre le déplacement de la souris, voire enregistre en film le parcours de sessions des internautes.




Différents outils à disposition (non exhaustif)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 trafic sinon il faut laisser durer ce tests plusieurs mois (pas optimal)




Différents outils à disposition (non exhaustif)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.




Différents outils à disposition (non exhaustif)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écifiquement 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écifique 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’affichage 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

Internet