Bonnes pratiques d’ergonomie web appliquées au commerce en ligne

9,879 views
9,964 views

Published on

L’ergonomie web est aujourd’hui capable d’apporter de réels bénéfices aux sites de e-commerce. Une bonne ergonomie permet de faciliter la navigation, l’accès aux bons produits et l’utilisabilité. La finalité d’une bonne ergonomie : générer une bonne expérience client et optimiser les revenus générés par votre boutique en ligne.

Published in: Design
2 Comments
17 Likes
Statistics
Notes
No Downloads
Views
Total views
9,879
On SlideShare
0
From Embeds
0
Number of Embeds
4,629
Actions
Shares
0
Downloads
226
Comments
2
Likes
17
Embeds 0
No embeds

No notes for slide

Bonnes pratiques d’ergonomie web appliquées au commerce en ligne

  1. 1. FredCavazza.netBonnes pratiquesd’ergonomie web appliquéesau commerce en ligneEcommerce Live12 juin 2013
  2. 2. FredCavazza.netLe commerceen ligne en 2013
  3. 3. FredCavazza.netQuels changements en 10 ans ?
  4. 4. FredCavazza.netUn web en perpétuelle évolutionSocial commerceMobile commercePression asiatique
  5. 5. FredCavazza.netUne concurrence toujours plus forteAtomisation du marché
  6. 6. FredCavazza.netPourquoi l’ergonomie est votremeilleur levier de rentabilité
  7. 7. FredCavazza.netTaux de transfo. par secteurs(source : CCM Benchmark)Taux de transformation moyens(source: Adobe)La transformation au coeur des préoccupations
  8. 8. FredCavazza.netLa progression n’est pas assurée(source: CCM Benchmark)Les gros sites s’en sortent mieux(source: CCM Benchmark)La rentabilité des petits sites en question
  9. 9. FredCavazza.netAméliorer l’ergonomie est latactique la plus rentable
  10. 10. FredCavazza.netErgonomie ?
  11. 11. FredCavazza.netDéfinitions• Ergonomie = Optimiser le bien-être et laperformance des utilisateurs en rendant lessystèmes d’informations compatibles avec lesbesoins, capacités et limites des personnes• Utilisabilité = La faculté d’un produit ou service àêtre utile (réponse à un besoin réel exprimé),utilisable (simplicité et confort d’usage) et utilisé(mesure, analyse et optimisation)
  12. 12. FredCavazza.netUne approche holistiqueAnthropologie,Sciences,pour,,l’ingénieur,Psychologie,Médecine,Sciences,de,,l’informa:on,ERGONOMIE,Sociologie,Physiologie,Sta:s:ques,+ SEO / SEM+ CRM+ Temps de chargement+ Expérience utilisateur+ Analyse d’audience+ ...
  13. 13. FredCavazza.netLes points de vigilanceImpacts sur le taux de transformation(source: Adobe)•Page d’accueil•Page catégorie•Page produit•Panier•Tunnel de commande•Page de confirmation•Email de confirmation...•Lisibilité•Intitulés•Couleurs•Formes•Incitations...
  14. 14. FredCavazza.netTest à distance EnregistrementEye / mouse tracking Digital analyticsTests A/B et multi.SondageVos outils
  15. 15. FredCavazza.netÉtude de cas etbonnes pratiques
  16. 16. FredCavazza.netPage d’accueilPardon ?Tous lesmercredi quoi ?Ils recyclentdes cartons ?Le paimentsécurisé est unservice ?Ça bave !???Oui jesais lire !
  17. 17. FredCavazza.netPage d’accueilAccrochesimple àcomprendreGrille delecture bienmarquéeTrès boncontrasteLes élémentscritiques isolésdu reste
  18. 18. FredCavazza.netPage catégoriePas assezde contraste??Je gagne 3€ ?Trop petit !Trop sérré !Trop sérré !Ça se bouscule !
  19. 19. FredCavazza.netPage catégorieAccrochesimple àcomprendreGain deplaceGrille de lecturebien marquée parles gouttièresInformationbien structuréeRéassurancecorrectementformulée
  20. 20. FredCavazza.netPage produitTrop petit !Impossible à lireTrop petit !Trop serréTrop petit !
  21. 21. FredCavazza.netPage produitTexte facileà lireRepérageévidentBons retoursvisuelsRéassuranceBonne hiérarchisationLiens bienisolés
  22. 22. FredCavazza.netPage produitParfaitegrille delectureTrès bonnehiérarchie visuelle
  23. 23. FredCavazza.netPanierTrop de place perdue?Des stimuli visuels quiparasitent la venteC’est la Suisse ?OK et sinon, çacoûte combien lalivraison ?Guarantipar qui ??
  24. 24. FredCavazza.netPanierEstimation desfrais de livraisonIncitation simpleà comprendreC’est toujours mieuxde prévenir avantPermet degagner un clicTrès bonnehiérarchie visuelle
  25. 25. FredCavazza.netTunnel de commandeInutile !Trop debla bla !Trop loinJe suis où ?On vaemprisonnerma CB ?
  26. 26. FredCavazza.netTunnel de commandeUn seul champde saisiListe des moyensde paiementÉchappatoirepour les frileuxÉtapes clairementaffichéesHeader nettoyé de tous leséléments inutiles
  27. 27. FredCavazza.netConclusion
  28. 28. FredCavazza.netQuelques principes ergonomiques• Privilégiez la clarté et la lisibilité• Renforcez le guidage à l’aide d’espaces blancs• Groupez les éléments de façon logique• Appliquez une hiérarchie visuelle, mais limitezle nombre de traitements graphiques différents• Utilisez des retours visuels pour inciter au clic• Ne compliquez pas la vente
  29. 29. FredCavazza.netRetour d’expérience• La courbe d’apprentissage sera longue, maistrès gratifiante !• Faite confiance à votre intuition• Trop de réassurance peut faire peur• Le processus d’optimisation doit être continu(mesure d’audience, tests A/B et muti-variantes)• Jouez la carte de la proximité
  30. 30. FredCavazza.netQuestions ?

×