Design & Ergonomie webau service des conversions                             Présenté par M. Pelissier
Pourquoi vos utilisateurs vous        quittent-ils?   La navigation   La publicité   La structure   Son / Vidéo trop i...
Les couleurs
Coordination des couleurs    Couleurs chaudes                            Couleurs FroidesSource : Kissmetrics
Coordination des couleurs Couleurs complémentaires   Couleurs analogues        La triade “split” complémentaires    La tri...
Coordination des couleurs                       Beaucoup de Coordination                              Coordination de Roug...
Coordination des couleurs                           Image de fond et Coordination   Coordination de RougeSource : Kissmetr...
Exemple de BEN & JERRY’S
Comment les couleurs influencent la        concrétisation ?         Impulser l’achat, souvent pour les publicités de Fast ...
Comment les couleurs influencent la        concrétisation ?
Comment les couleurs influencent la        concrétisation ?      Cible : Personnes ayant un budget, souvent utilisées pour...
Comment les couleurs influencent la        concrétisation ?
Comment les couleurs influencent la        concrétisation ?         Acheteurs traditionnels, souvent utilisées pour les   ...
Comment les couleurs influencent la        concrétisation ?
Comment les couleurs influencent la        concrétisation ?
Comment les couleurs influencent              la concrétisation ?    Optimisme et Jeunesse           Energie, souvent util...
Comment les couleurs influencent          la concrétisation ?       Agressivité          Romantisme et féminité    Pouvoir...
LA STRUCTURE
Anatomie d’une « landing page » efficace               Home Page                           logo: Sa dimension et sonLes ba...
LogoNavigation simple               Rechercheamomuito.com
Et pas…amomuito.com
Anatomie d’une « landing page » efficace              Page Produit Simplifiez le plus possible Des "call to action" clai...
Photos de                  qualité                             Call to                             actionRoseindigo.com
Efficace ?                  archiduchesse.comchaussettes.comOU Efficace ?
Anatomie d’une « landing page »               efficaceMettre en avant les objectifs (les vôtres / les leurs)Encart rouge :...
Anatomie d’une « landing page » efficace                     Conversion : l’Inscription         Simplifiez le plus possibl...
Anatomie d’une « landing page » efficace       L’entonnoir de conversion Une page « récapitulatif » Call to action SIMPL...
Anatomie d’une « landing page » efficace                 L’entonnoir de conversion                                        ...
Anatomie d’une « landing page » efficace              L’entonnoir de conversion                       Des étapes clairesma...
Anatomie d’une « landing page » efficace      L’entonnoir de conversion              One Page Checkout
Anatomie d’une « landing page » efficace                 L’objet de votre site                                       “Vign...
De l’importance des testsUne mesure de vos choix   A/B testing   Analytics
L’A/B testing Deux types de design Deux textes d’incitation différents>> Quelle est celle qui convertit le mieux ??
L’A/B testingAnatomy d’une page A/B testable Parfaite
L’A/B testing                                 HeadlineBut principal : Intéresser l’utilisateur afin qu’il lise le reste de...
L’A/B testing                           La Photo Principale Les photos contenant des humains convertissent mieux Les pho...
L’A/B testing                        Récupération des données Emails, formulaires de contact…. Doivent être facile à com...
L’A/B testing                                Incitation à l’action Bouton de couleur différente Des mots simples, clairs...
L’A/B testing                 Les Bénéfices de votre produit/service Les utilisateurs sont des scanners, pas des lecteurs...
L’A/B testing                     Une autre inciation à l’action… … peut être un ensemble de boutons sociaux, de partage...
Analytics       Le tunnel de conversion                            fezInscrivez les étapes de votre tunnel de conversion
Analytics           Le tunnel de conversionAnalysez les étapes où   fez vous perdez vos    prospects   Pourriez-vous en si...
RASSURER VOS CONSOMMATEURS
Stucturation des contenus• Le numéro de téléphone   Afficher le numéro de téléphone  dans la page d’accueil  pour augment...
Stucturation des contenus• Module bancaire sécurisé    Mettre en avant que le site utilise un module de paiement     sécu...
Stucturation des contenus• Module bancaire sécurisé
Stucturation des contenusVous avez confiance ?
Stucturation des contenus• Labels et autres mentions rassurantes
Stucturation des contenus• Offrir différents types de contenus    Photos, videos, dessins…    Plusieurs sortes de conten...
tribord.com
tribord.com
L’impact « Social »• Pensez aux “boutons sociaux”    www.atelierdelaceinture.fr    madamechoup.com
Innovation : l’intéraction                 utilisateurmadamechoup.com
Stucturation des contenus :       Présentation de la société• Présentation de la société    Date de création, localisatio...
Stucturation des contenus :          Présentation de la société                  Page « l’équipe »Mywebshop.org
Stucturation des contenus :             Présentation de la société                     Page « l’équipe »comete.com
Structuration des contenus :              L’inscriptionSimple, clair, concis et ergonomique : l’utilisateur saitinstinctiv...
Structuration des contenus :                Rassurer• Le cadre légal    Le cadre légal doit se retrouver sur toutes les p...
Structuration des contenus : Le           cadre légal     Sarenza.com                        glisshop.com
Structuration des contenus :Exemple de bonne pratique           (Home)
Structuration des contenus :Exemple de bonne pratique (Page         de « listing »)
Améliorer vos conversions : Le           « P.E.T » design1.   Trop de choix tue le choix => Soyez concis      + de choix ...
Améliorer vos conversions : Le      « P.E.T » design
Les « 10 commandements » d’un  design axé sur la conversion Un contact téléphonique Des formulaires de contact bien prés...
En conclusionInnover oui mais n’oubliez pas les normes, les conventions et encore moins la législation (exemple : patrike...
Merci de votre attention
Prochain SlideShare
Chargement dans…5
×

Ergonomie et web design au service des conversions

3 669 vues

Publié le

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.

Publié dans : Design
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 669
Sur SlideShare
0
Issues des intégrations
0
Intégrations
35
Actions
Partages
0
Téléchargements
66
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ergonomie et web design au service des conversions

  1. 1. Design & Ergonomie webau service des conversions Présenté par M. Pelissier
  2. 2. Pourquoi vos utilisateurs vous quittent-ils? La navigation La publicité La structure Son / Vidéo trop intrusifs Sérieusement ? On est obligé de sinscrire 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
  3. 3. Les couleurs
  4. 4. Coordination des couleurs Couleurs chaudes Couleurs FroidesSource : Kissmetrics
  5. 5. Coordination des couleurs Couleurs complémentaires Couleurs analogues La triade “split” complémentaires La triade rectangulaire Le carréSource : Kissmetrics
  6. 6. Coordination des couleurs Beaucoup de Coordination Coordination de Rouge Coordination de Gris Moins de Coordination Coordination de Rouge Coordination de Gris + BleuSource : Kissmetrics
  7. 7. Coordination des couleurs Image de fond et Coordination Coordination de RougeSource : Kissmetrics
  8. 8. Exemple de BEN & JERRY’S
  9. 9. Comment les couleurs influencent la concrétisation ? Impulser l’achat, souvent pour les publicités de Fast food, centres commerciaux, soldes
  10. 10. Comment les couleurs influencent la concrétisation ?
  11. 11. Comment les couleurs influencent la concrétisation ? Cible : Personnes ayant un budget, souvent utilisées pour les banques, grands magasins
  12. 12. Comment les couleurs influencent la concrétisation ?
  13. 13. Comment les couleurs influencent la concrétisation ? Acheteurs traditionnels, souvent utilisées pour les magasins de vêtements
  14. 14. Comment les couleurs influencent la concrétisation ?
  15. 15. Comment les couleurs influencent la concrétisation ?
  16. 16. Comment les couleurs influencent la concrétisation ? Optimisme et Jeunesse Energie, souvent utilisé Sécurité, confiance Richesse et relaxationAttirer l’attention de l’acheteur pour liquidations Banque et affaires Pouvoir de l’acheteur
  17. 17. Comment les couleurs influencent la concrétisation ? Agressivité Romantisme et féminité Pouvoir et raffinement Calme et Apaisant, Incitation à l’action Cible : femmes et jeunes Produits de luxe Produits de beautéSoucrire, Vendre Acheter filles Source Kissmetrics
  18. 18. LA STRUCTURE
  19. 19. Anatomie d’une « landing page » efficace Home Page logo: Sa dimension et sonLes bases positionnement Option de recherche sur le site La navigation: Page Le contenu : précis d’accueil et pertinent, doit claire pour guider répondre aux l’utilisateur vers les attentes de éléments importants l’utilisateur
  20. 20. LogoNavigation simple Rechercheamomuito.com
  21. 21. Et pas…amomuito.com
  22. 22. Anatomie d’une « landing page » efficace Page 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
  23. 23. Photos de qualité Call to actionRoseindigo.com
  24. 24. Efficace ? archiduchesse.comchaussettes.comOU Efficace ?
  25. 25. Anatomie d’une « landing page » efficaceMettre en avant les objectifs (les vôtres / les leurs)Encart rouge : Surtout utile pour le clientEncart vert : Surtout utile pour vous Mettre en avant les produits clés / phares Recommander des produits intéréssants pour eux
  26. 26. Anatomie d’une « landing page » efficace Conversion : l’Inscription Simplifiez le plus possible !!headict.com
  27. 27. Anatomie d’une « landing page » efficace L’entonnoir de conversion Une page « récapitulatif » Call to action SIMPLES Minimiser les demandes à l’utilisateur Un design ergonomique et ludique
  28. 28. Anatomie d’une « landing page » efficace L’entonnoir de conversion Des étapes clairesRepérage facileArchiduchesse.com
  29. 29. Anatomie d’une « landing page » efficace L’entonnoir de conversion Des étapes clairesmadamechoup.com
  30. 30. Anatomie d’une « landing page » efficace L’entonnoir de conversion One Page Checkout
  31. 31. Anatomie d’une « landing page » efficace L’objet de votre site “Vignette” e-commerce Logo Informe sur la nature du site Image reflétant votre activitéinfos sur votre activitévisibles sans scroller la page
  32. 32. De l’importance des testsUne mesure de vos choix A/B testing Analytics
  33. 33. L’A/B testing Deux types de design Deux textes d’incitation différents>> Quelle est celle qui convertit le mieux ??
  34. 34. L’A/B testingAnatomy d’une page A/B testable Parfaite
  35. 35. L’A/B testing HeadlineBut principal : Intéresser l’utilisateur afin qu’il lise le reste de votre page
  36. 36. L’A/B testing La Photo Principale Les photos contenant des humains convertissent mieux Les photos “rotatives” aident à la conversion Evoquer des sentiments positifs
  37. 37. 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
  38. 38. L’A/B testing Incitation à l’action Bouton de couleur différente Des mots simples, clairs et inspirant
  39. 39. 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
  40. 40. 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
  41. 41. Analytics Le tunnel de conversion fezInscrivez les étapes de votre tunnel de conversion
  42. 42. Analytics Le tunnel de conversionAnalysez les étapes où fez vous perdez vos prospects Pourriez-vous en simplifier certaines ?Améliorer l’ergonomie ?
  43. 43. RASSURER VOS CONSOMMATEURS
  44. 44. 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
  45. 45. 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
  46. 46. Stucturation des contenus• Module bancaire sécurisé
  47. 47. Stucturation des contenusVous avez confiance ?
  48. 48. Stucturation des contenus• Labels et autres mentions rassurantes
  49. 49. 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 !!
  50. 50. tribord.com
  51. 51. tribord.com
  52. 52. L’impact « Social »• Pensez aux “boutons sociaux” www.atelierdelaceinture.fr madamechoup.com
  53. 53. Innovation : l’intéraction utilisateurmadamechoup.com
  54. 54. 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
  55. 55. Stucturation des contenus : Présentation de la société Page « l’équipe »Mywebshop.org
  56. 56. Stucturation des contenus : Présentation de la société Page « l’équipe »comete.com
  57. 57. Structuration des contenus : L’inscriptionSimple, clair, concis et ergonomique : l’utilisateur saitinstinctivement ce que l’on attend de lui !
  58. 58. 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
  59. 59. Structuration des contenus : Le cadre légal Sarenza.com glisshop.com
  60. 60. Structuration des contenus :Exemple de bonne pratique (Home)
  61. 61. Structuration des contenus :Exemple de bonne pratique (Page de « listing »)
  62. 62. Améliorer vos conversions : Le « P.E.T » design1. 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ête2. 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, Danger5. 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.
  63. 63. Améliorer vos conversions : Le « P.E.T » design
  64. 64. 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 dabord à votre objectif (le design ensuite) De lespace Tester, tester et re…tester
  65. 65. 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é
  66. 66. Merci de votre attention

×