Présentation faîtes lors du WordCamp Marseille le 15 septembre 2017.

1. Les 5 clés d’un E-COMMERCE GAGNANT !
#WCMarseille #Ecommerce #WooCommerce
Sandra Boulou

2. Sandra Boulou
@Web18_Paris
www.web18.net

3. AVANT-PROPOS : quelques chiffres…
1 - La page d’accueil : un design stratégique
2 - Une navigation et une ergonomie fonctionnelles
3 - Des fiches produits détaillées
4 - Optimiser le tunnel de commande
5 - La cerise sur le gâteau !
Extensions et sources

4. AVANT-PROPOS
Le E-Commerce en France
Solutions
Chiffres
Utilisateurs

5. LES SOLUTIONS E-COMMERCE
LES PLUS UTILISÉES EN FRANCE
28 % WooCommerce
27 % Prestashop
13 % Zencart
7 % Os Commerce
Source : Build with https://trends.builtwith.com

6. 2017 : 80 MILLIARDS € de CA
en prévision
2016 : 72 MILLIARDS € de CA
croissance annuelle : +14,6%
L’E-COMMERCE EN FRANCE EN 2016

7. Plus de 200 000 SITES MARCHANDS actifs en 2016
SOIT 1 SITE TOUTES LES 20 MN

8. 36,6 Millions de français achètent sur internet soit
82,7 % des internautes
1/4 sur mobiles soit 25 % des ventes
Le CA sur mobiles a été multiplié par 10 en 5 ans
Il faut offrir un PARCOURS et un DESIGN ECOMMERCE
orientés pour TOUS les utilisateurs
sources : Médiamétrie / FEVAD

9. Penser Accessibilité dès de la conception d’un site
Ecommerce est incontournable :
12 millions de Français sont en situation de handicap
soit 1 personne sur 6 qui achète régulièrement sur
internet (chiffres Insee)
Les consommateurs de + de 50 ans consomment
davantage en ligne que les autres tranches d’âges
(enquête Priceminister – Rakuten)

10. Les 65 ans et + achètent quasiment autant que les
18-24 ans avec un pouvoir d’achat plus important
(enquête Idaleo.fr)
Cette cible client est incontournable
Il est primordial d’OPTIMISER le PARCOURS
UTILISATEUR et le TUNNEL D’ACHAT :
COMMENCONS PAR LE DEBUT
DU PARCOURS DU CYBER ACHETEUR

11. 1 / LA PAGE D’ACCUEIL :
UN DESIGN STRATÉGIQUE

12. C’est une page SYMBOLIQUE FORTE
Le responsive est un Must (adapter les contenus)
Elle doit être attrayante : design, visuels…
Elle doit être convaincante et donner envie
Elle doit être rassurante : infos, messages, couleurs
Clarté et simplicité sont les meilleurs atouts

13. Hiérarchiser les informations
Tenir compte des zones de perception immédiates
(cf études de Eyes tracking déterminant les zones
« froides » et « chaudes » d’une page web)
Eyes tracking : technique qui permet de suivre les
mouvements de l’œil, parcours et points de fixation
Schéma des zones froides et chaudes (ci-après)

15. LE DIAPORAMA
CREATION D’APPELS À L’ACTION / CALL TO ACTION
Quelques exemples avec les sites les plus visités en France

16. Amazon – 5 slides vers les offres et services du moment

17. Cdiscount : slides vers les offres et remises du moment
+ utilisation de la couleur orange

18. Fnac : slides vers les bons plans du moment
+ lien vers les produits en promotions

19. Définir clairement l’univers de la boutique
Visibilité du logo, identité (en haut à gauche)
Les spécialités : souvent les catégories de produits
Les produits phares
Les Nouveautés
Les meilleures ventes / les mieux notés
Les produits en promotion / offres du moment

20. Les infos indispensables et rassurantes doivent être
présentes sur toutes les pages.
DANS LE TOP MENU ET LE HEADER :
Compte client / Favoris wishlist / Panier toujours visible

22. Les livraisons / le retrait rapide / click & collect / les
magasins
Un bouton aide / Besoin d’aide ? peut aussi rassurer
Voir les sites de la Fnac et Boulanger ci-dessous :

23. DANS VOTRE PIED DE PAGE / FOOTER
A propos : présentation / Contacts / Service client / FAQ
Conditions de livraisons / Retours / Remboursements
Abonnement Newsletter (fort impact en Ecommerce)
Les réseaux sociaux (79% des Ecommerçants utilisent Facebook)
Les Informations légales (CGV - mentions légales - cookies)
Les Moyens de paiement et la sécurité

24. Pied de page / footer site BOULANGER

25. Pied de page / footer site de la FNAC

26. 2 / UNE NAVIGATION
&
UNE ERGONOMIE FONCTIONNELLES

27. Avoir une NAVIGATION CLAIRE & INTUITIVE
Vous pouvez avoir le plus beau des sites si l’ergonomie
est nulle = faible taux de conversion = peu de vente
Respecter la règle des 3 clics pour trouver un produit
Intégrer un menu collant / sticky menu
Un retour vers le haut / scroll to top très pratique

28. Offrir un PARCOURS D’ACHAT SIMPLE, RAPIDE & EFFICACE
PLUSIEURS TYPES DE NAVIGATION sont possibles :
ü NAVIGATION SIMPLE par rubriques & thèmes
par catégories, sous catégories et produits
ü DOUBLE NAVIGATION (à gauche) et horizontale

29. L’UTILISATION DES MEGAS MENUS est très présente :
pratique quand vous avez beaucoup de catégories,
sous-catégories et produits.
On le voit parmi les sites les plus visités en France
et recensés par la FEVAD :
Amazon, Cdiscount, Fnac, Ebay, la Redoute, Darty…

30. Amazon : utilise un moteur de recherche interne central
Un méga menu Parcourir les rayons avec un menu latéral

31. La Fnac : menu vertical à gauche de l’écran, avec l’affichage
d’un méga menu à droite & des étiquettes de produits en haut

32. CDiscount : à nouveau un moteur de recherche central,
un menu thématique et un méga menu horizontal

33. Ebay : un méga menu horizontal épuré,
avec des Top catégories et catégories de produits
+ un visuel pour la catégorie et un bouton d’appel

34. La Redoute : méga menu horizontal noir, épuré et aéré
Offres du moment, Catégories, Marques et un visuel

35. Carrefour : double navigation + moteur de recherche central

37. COMME NOUS VENONS DE LE VOIR :
Intégrer un moteur de recherche dans le menu
Dans WooCommerce : laisser les filtres de recherche
en page Boutique / Shop qui offre une recherche par
popularité, Nouveautés, prix…
Proposez un filtre par marque si besoin (en widget)

38. 3 / DES FICHES PRODUITS DETAILLÉES

39. C’est l’élément ESSENTIEL et STRATEGIQUE du site
Elles doivent être compréhensibles et détaillées
Richement illustrées par des visuels de qualité
Répondre à toutes les interrogations du clients
Avoir un descriptif complet et exacte
Afficher les infos de réassurance = donner confiance :
avis clients, notes, livraisons, retours, garanties…

40. Les principales caractéristiques, les points forts…
Un bouton d’ajout au panier bien visible
Le stock disponible
La référence du produit
Une belle image produit, de grands visuels, zooms
Des vidéos ou même une visite 3D si besoin

41. La Fnac : tout pour avoir confiance !

42. Une liste de souhaits / liste de course / Wishlist
Un comparatif produits
Les produits similaires / apparentés
Les ventes croisées = cross selling
Les montées de gammes = up selling
Le partage sur les réseaux sociaux

43. DARTY
Un bel exemple de fiche produit
Complet et détaillé

46. LEROY MERLIN
Autre exemple de fiche produit intéressante
Avec la vidéo et un systeme de Tchat

49. CLARINS
Autre exemple de fiche produit intéressante
Avec une vidéo, des conseils…

50. Clarins
Vidéo
Conseils
Avis
Produits apparentés
Favoris
Livraison & Paiement

55. 4 / OPTIMISER
LE TUNNEL DE COMMANDE
&
LE TUNNEL D’ACHAT

56. Le parcours utilisateur est souvent long depuis
LA FICHE PRODUIT
Le tunnel classique est souvent composé de :
PANIER / IDENTIFICATION / CONNEXION
si besoin INSCRIPTION
LIVRAISON - PAIEMENT

62. Ces étapes sont fastidieuses surtout sur mobile
Tout faire pour réduire l’abandon de panier
(taux moyen d’abandon du 4e T 2016 : 76,8 % )
Par la fluidité des pages (cela tout au long du site)
Avoir un récapitulatif de commande clair & simple
Ne pas forcer la création du compte client

63. Annoncez clairement les frais & délais de livraison
Une offre de livraison rapide à bas prix (voire gratuite)
Un retrait en point de vente quand c’est possible
La livraison et le Retour en Point Relais
Des infos de contacts toujours visibles
Un lien vers les CGV en fin de commande

64. Proposez plusieurs solutions de paiement
Suivant le type de site, QUAND C’EST POSSIBLE :
Réduire les étapes permettant d’arriver au paiement
L’IDÉAL : 1 / 2 PAGES RÉCAPITULATIVES de checkout
Un processus de commande / paiement simplifié
= une hausse du taux de conversion

65. 5 / LA CERISE SUR LE GÂTEAU !

66. CONVERTISSEZ VOTRE SITE E-COMMERCE
EN APPLICATION MOBILE !

67. Le M-Commerce ne cesse de croître (chiffres Fevad)
80% des mobinautes possèdent 1 à 50 applications
Plus de 50% des tablonautes ont acheté sur le web
Les applis ont des taux de conversion supérieurs aux
desktop (étude Critéo)

68. Suivant l’activité et les produits que vous vendez la
conversion en application est gagnante
Il faut : vendre des produits récurrents et avoir une
bonne navigation (penser applis)
L’application est fluide & disponible hors connexion
On peut passer des commandes hors connexion
On peut créer un panier hors connexion

69. On peut bien sûr payer sur l’appli Ecommerce
Possibilité d’envoi de notifications push pour des
événements importants, des promotions…
Mise à jour automatique du contenu, produits, articles…
Possibilité de faire de la publicité sur mobile

70. EXTENSIONS WOOCOMMERCE
WooCommerce ;-) en un clic vous activez un Ecommerce
De nombreuses extensions gratuites et payantes existent
pour développer les possibilités de votre site Ecommerce

71. FICHES PRODUITS :
Custom Related Products for WooCommerce :
personnaliser les produits en relation - gratuit
WooCommerce brands : insérer un filtre de
recherche par marque
WooCommerce Product Add-ons : permet
d’ajouter des fonctionnalités à la fiche produit

72. FICHES PRODUITS - suite :
WooCommerce Tab manager : personnaliser et
ajouter des onglets aux fiches produits
YITH WooCommerce Wishlist : proposer une
liste de course - gratuit
YITH WooCommerce compare : comparer les
produits entre eux – gratuit

73. PAIEMENTS :
PAIEMENT SUR UNE SEULE PAGE :
WooCommerce one page checkout
SOLUTIONS DE PAIEMENT GRATUITES :
Stripe - Payplug – Paypal
PASSERELLES DE PAIEMENTS des banques françaises :
Absolute web – Nicolas Maillard

74. LIVRAISONS :
Colissimo : Colissimo delivery integration (CDI) - gratuit
Boxter (envoi moins cher) : permet de proposer
plusieurs transporteurs en un seul module - gratuit
WooCommerce Conditional Shipping and Payments :
Permet d’ajouter / gérer des règles de livraisons
spécifiques (catégories, pays…)

75. APPLICATIONS MOBILE & WOOCOMMERCE :
Wpapp.ninja : Solution française
Convertit votre Ecommerce en application mobile
Wordapp : Solution en anglais
Existe une version gratuite et une version pro payante

76. SOURCES :
Médiamétrie / Fevad : chiffres Ecommmerce 2016 et 1er trim. 2017
Insee / mars 2017 : les derniers chiffres sur le handicap en France
Salecycle.fr : tendance remarketing 4e trimestre 2016
Priceminister - Rakuten : les seniors et le Ecommerce
Etude Idaleo.fr comparatif de prix sur les seniors et le Ecommerce
Les Echos.fr « et si le Ecommerce était aussi une affaire de vieux »
Etude Critéo : rapport sur le Ecommerce mobile
Mobvalue : études et chiffres sur les mobinautes français
Remerciements à Claire Bizingre @accesbilis spécialiste en accessibilité