ergonomie et web design au service des conversions
DESCRIPTION
Support de présentation de la société MyWebShop essayant d'exposer les fondamentaux de l'A/B Testing et des bonnes pratiques d'ergonomie web.TRANSCRIPT
![Page 1: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/1.jpg)
Design & Ergonomie webau service des conversions
Présenté par M. Pelissier
![Page 2: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/2.jpg)
Pourquoi vos utilisateurs vous quittent-ils?
La navigation
La publicité
La structure
Son / Vidéo trop intrusifs
Sérieusement ? On est obligé de s'inscrire pour voir le site ?
Du contenu ennuyeux, un design ennuyeux...
Une lisibilité médiocre
Tunnel de conversion trop fastidieux ou trop long
Dernière mise à jour 1999... ah quand même
![Page 3: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/3.jpg)
Les couleurs
![Page 4: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/4.jpg)
Coordination des couleurs
Couleurs chaudes
Couleurs Froides
Source : Kissmetrics
![Page 5: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/5.jpg)
Coordination des couleurs
Couleurs complémentaires Couleurs analogues
Source : Kissmetrics
La triade
“split” complémentaires La triade rectangulaire Le carré
![Page 6: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/6.jpg)
Coordination des couleurs
Coordination de Rouge
Source : Kissmetrics
Coordination de Gris
Beaucoup de Coordination
Moins de Coordination
Coordination de RougeCoordination de Gris
+ Bleu
![Page 7: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/7.jpg)
Coordination des couleurs
Coordination de Rouge
Source : Kissmetrics
Image de fond et Coordination
![Page 8: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/8.jpg)
Exemple de BEN & JERRY’S
![Page 9: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/9.jpg)
Comment les couleurs influencent la concrétisation ?
Impulser l’achat, souvent pour les publicités de Fast food, centres commerciaux, soldes
![Page 10: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/10.jpg)
Comment les couleurs influencent la concrétisation ?
![Page 11: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/11.jpg)
Comment les couleurs influencent la concrétisation ?
Cible : Personnes ayant un budget, souvent utilisées pour les banques, grands magasins
![Page 12: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/12.jpg)
Comment les couleurs influencent la concrétisation ?
![Page 13: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/13.jpg)
Acheteurs traditionnels, souvent utilisées pour les magasins de vêtements
Comment les couleurs influencent la concrétisation ?
![Page 14: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/14.jpg)
Comment les couleurs influencent la concrétisation ?
![Page 15: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/15.jpg)
Comment les couleurs influencent la concrétisation ?
![Page 16: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/16.jpg)
Comment les couleurs influencent la concrétisation ?
Optimisme et JeunesseAttirer l’attention de l’acheteur
Energie, souvent utilisé pour liquidations
Sécurité, confianceBanque et affaires
Richesse et relaxationPouvoir de l’acheteur
![Page 17: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/17.jpg)
Comment les couleurs influencent la concrétisation ?
Source Kissmetrics
Pouvoir et raffinementProduits de luxe
Romantisme et féminitéCible : femmes et jeunes filles
AgressivitéIncitation à l’action
Soucrire, Vendre Acheter
Calme et Apaisant, Produits de beauté
![Page 18: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/18.jpg)
LA STRUCTURE
![Page 19: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/19.jpg)
Anatomie d’une « landing page » efficaceHome Page
Les bases logo: Sa dimension et son positionnement
La navigation: Page d’accueil
claire pour guider l’utilisateur vers les
éléments importants
Option de recherche sur le site
Le contenu : précis et pertinent, doit
répondre aux attentes de l’utilisateur
![Page 20: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/20.jpg)
Logo
Navigation simple Recherche
amomuito.com
![Page 21: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/21.jpg)
amomuito.com
Et pas…
![Page 22: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/22.jpg)
Anatomie d’une « landing page » efficacePage Produit
Simplifiez le plus possible
Des "call to action" clairs et explicites
Des pages « rapides » pour que l’internaute ait une réponse rapide à ses questions
De la qualité de vos images / photos
Mettre en avant les bonnes choses
Donnez le choix
![Page 23: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/23.jpg)
Call to action
Photos de qualité
Roseindigo.com
![Page 24: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/24.jpg)
chaussettes.com
archiduchesse.com
Efficace ?
OU Efficace ?
![Page 25: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/25.jpg)
Anatomie d’une « landing page » efficace
Encart rouge : Surtout utile pour le clientEncart vert : Surtout utile pour vous
Mettre en avant les produits clés /
phares
Mettre en avant les objectifs (les vôtres / les leurs)
Recommander des produits intéréssants
pour eux
![Page 26: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/26.jpg)
Anatomie d’une « landing page » efficaceConversion : l’Inscription
Simplifiez le plus possible !!
headict.com
![Page 27: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/27.jpg)
Anatomie d’une « landing page » efficaceL’entonnoir de conversion
Une page « récapitulatif »
Call to action SIMPLES
Minimiser les demandes à l’utilisateur
Un design ergonomique et ludique
![Page 28: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/28.jpg)
Anatomie d’une « landing page » efficaceL’entonnoir de conversion
Archiduchesse.com
Des étapes claires
Repérage facile
![Page 29: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/29.jpg)
Anatomie d’une « landing page » efficaceL’entonnoir de conversion
madamechoup.com
Des étapes claires
![Page 30: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/30.jpg)
Anatomie d’une « landing page » efficaceL’entonnoir de conversion
One Page Checkout
![Page 31: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/31.jpg)
Anatomie d’une « landing page » efficaceL’objet de votre site
Logo“Vignette” e-commerce
Informe sur la nature du site
Image reflétant votre activité
infos sur votre activité visibles sans scroller la
page
![Page 32: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/32.jpg)
De l’importance des tests
Une mesure de vos choix
A/B testing
Analytics
![Page 33: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/33.jpg)
L’A/B testing
Deux types de design
Deux textes d’incitation différents
>> Quelle est celle qui convertit le mieux ??
![Page 34: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/34.jpg)
L’A/B testing
Anatomy d’une page A/B testable Parfaite
![Page 35: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/35.jpg)
L’A/B testing
Headline But principal : Intéresser l’utilisateur afin qu’il lise le reste de votre page
![Page 36: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/36.jpg)
L’A/B testing
La Photo Principale Les photos contenant des humains convertissent mieux Les photos “rotatives” aident à la conversion Evoquer des sentiments positifs
![Page 37: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/37.jpg)
L’A/B testing
Récupération des données Emails, formulaires de contact…. Doivent être facile à comprendre, instructions simples… Faire comprendre poliement s’il y a une erreur ou un oubli
![Page 38: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/38.jpg)
L’A/B testing
Incitation à l’action Bouton de couleur différente
Des mots simples, clairs et inspirant
![Page 39: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/39.jpg)
L’A/B testing
Les Bénéfices de votre produit/service Les utilisateurs sont des scanners, pas des lecteurs
Comprendre votre cible avant de penser aux bénéfices
![Page 40: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/40.jpg)
L’A/B testing
Une autre inciation à l’action…
… peut être un ensemble de boutons sociaux, de partage
Peuvent être placé sur votre page “confirmation” ou page de remerciements
![Page 41: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/41.jpg)
AnalyticsLe tunnel de conversion
fez
Inscrivez les étapes de votre tunnel de conversion
![Page 42: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/42.jpg)
AnalyticsLe tunnel de conversion
fez
Analysez les étapes où vous perdez vos
prospects
Pourriez-vous en simplifier certaines ?
Améliorer l’ergonomie ?
![Page 43: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/43.jpg)
RASSURER VOS CONSOMMATEURS
![Page 44: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/44.jpg)
Stucturation des contenus
• Le numéro de téléphone
Afficher le numéro de téléphone dans la page d’accueil pour augmenter la confiance
L’utilisateur sait qu’il peut s’adresser à une personne de vive voix
![Page 45: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/45.jpg)
Stucturation des contenus
• Module bancaire sécurisé
Mettre en avant que le site utilise un module de paiement sécurisé
Le paiement doit être facile d’accès et rapide
![Page 46: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/46.jpg)
Stucturation des contenus
• Module bancaire sécurisé
![Page 47: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/47.jpg)
Stucturation des contenus
Vous avez confiance ?
![Page 48: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/48.jpg)
Stucturation des contenus
• Labels et autres mentions rassurantes
![Page 49: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/49.jpg)
Stucturation des contenus
• Offrir différents types de contenus
Photos, videos, dessins…Plusieurs sortes de contenus offrent un détail du produit Plusieurs vues
L’internaute se sentira en confiance s’il peut voir des photos professionnelles et des avis d’autres utilisateurs
• L’avis des consommateurs !!
![Page 50: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/50.jpg)
tribord.com
![Page 51: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/51.jpg)
tribord.com
![Page 52: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/52.jpg)
L’impact « Social »
• Pensez aux “boutons sociaux”
www.atelierdelaceinture.fr
madamechoup.com
![Page 53: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/53.jpg)
Innovation : l’intéraction utilisateur
madamechoup.com
![Page 54: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/54.jpg)
Stucturation des contenus : Présentation de la société
• Présentation de la société
Date de création, localisation, structure de l’entreprise…Photos, représentations animées, dessins…
L’utilisateur sait qui se trouve derrière le site web, il aura donc plus de facilité à acheter s’il a une vision d’une structure solide
![Page 55: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/55.jpg)
Page « l’équipe »
Stucturation des contenus : Présentation de la société
Mywebshop.org
![Page 56: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/56.jpg)
Stucturation des contenus : Présentation de la société
comete.com
Page « l’équipe »
![Page 57: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/57.jpg)
Structuration des contenus : L’inscription
Simple, clair, concis et ergonomique : l’utilisateur sait instinctivement ce que l’on attend de lui !
![Page 58: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/58.jpg)
Structuration des contenus : Rassurer
• Le cadre légal
Le cadre légal doit se retrouver sur toutes les pages du site Mentions légales (inscription à la CNIL s’il y a lieu) Conditions Générales de Ventes Mise en place de « process » internes pour le respect de la loi « informatique et
liberté » Gestion de vos listes d’e-mailing « propre » et respectueuse de la réglementation en
vigueur (gestion des désabonnement, opt-in, etc.)
Les mentions légales et CGV assurent la bienveillance de l’entreprise
![Page 59: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/59.jpg)
Sarenza.com
glisshop.com
Structuration des contenus : Le cadre légal
![Page 60: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/60.jpg)
Structuration des contenus : Exemple de bonne pratique (Home)
![Page 61: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/61.jpg)
Structuration des contenus : Exemple de bonne pratique (Page de « listing »)
![Page 62: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/62.jpg)
Améliorer vos conversions : Le « P.E.T » design
1. Trop de choix tue le choix => Soyez concis + de choix = + de trafic MAIS moins de conversions Trouver l’équilibre en gardant cette maxime en tête
2. Les témoignages et avis sont vos meilleurs vendeurs, ceux de vos amis sont encore meilleurs !!
3. Faite ressentir l’urgence Plus que x jours pour… Seulement N articles en promos…
4. Capter l’attention “basique” de vos visiteurs Nouriture, Sexe, Danger
5. Soyez humain et personnel6. Racontez / Montrez des histoires plutôt que des faits7. Engagez vos utilisateurs
Récompensez / Encouragez les commentaires produits Programme de parainage et de fidélité, etc.
![Page 63: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/63.jpg)
Améliorer vos conversions : Le « P.E.T » design
![Page 64: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/64.jpg)
Les « 10 commandements » d’un design axé sur la conversion
Un contact téléphonique
Des formulaires de contact bien présents
Des photos et témoignages personnels
Des vidéos pour engager votre audience
Des signes de sécurité rassurants et crédibles
Des mots « choc »
Eviter les design « génériques »
Penser d'abord à votre objectif (le design ensuite)
De l'espace
Tester, tester et re…tester
![Page 65: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/65.jpg)
En conclusion
Innover oui mais n’oubliez pas les normes, les conventions et encore moins la législation (exemple : patrikervell ou madamechoup)
Web design, ergonomie et mise en page de vos contenus sont cruciaux
Ne copiez pas !! Ou alors dites-le ;-)
Evitez les fautes et soyez honnête
Produisez du contenu unique et de qualité
![Page 66: Ergonomie et web design au service des conversions](https://reader031.vdocuments.site/reader031/viewer/2022020105/547c4a3bb4af9fe2158b5124/html5/thumbnails/66.jpg)
Merci de votre attention