Checklist : Augmenter sa conversion avant Noël

Vous avez travaillé votre taux de conversion toute l’année, très bien surtout continuez ! Mais est-ce que vous avez pensé à vérifier l’impact de vos modifications de noël sur votre eCommerce ? Comment réagit votre taux de mise au panier ? 9 milliards d’euros, c’est le montant que devrait dépenser les Français pour Noël selon la Fevad. Voici une checklist pour (re)vérifier des petits points qui ont une forte incidence sur votre chiffre d’affaires, et s’assurer une part importante du gâteau. Bonne lecture.

Sommaire de cet article :

La beauté peut nuire à votre conversion

Navigation

Trop habiller un site peut avoir un effet négatif sur la navigation, repérer un moteur de recherche, le fil d’Ariane etc.. C’est 2 exemples ci-dessous n’aident pas l’utilisateur puisque toutes les informations d’accès au compte, de panier, menu (..)  sont incrustées dans un fond coloré, avec un nombre important de petits détails ( étoiles, neige, lueur ). Le menu du second visuel est plus visible grâce à une hauteur de police plus importante, et la présence d’une couleur de fond. Son bouton de recherche nommé « Ok » est invisible, et juste à droite y a t’il une étoile après la phrase de paiement en plusieurs fois ? ou est-ce une décoration dans le fond ?

optimisation navigation ecommerce

Ayez toujours en tête que l’accessibilité de votre site doit être prédominante sur le visuel. Passer l’effet « Wow c’est beau ça ! », si il est difficile d’accéder au moteur de recherche, il est toujours très simple pour l’utilisateur de fermer cette page !

Des calls-to-action moins performants.

Voici 2 boutiques où le call-to-action ( ajout au panier ) devient difficilement repérable du premier coup d’œil sous l’influence du background. De quelle couleur sont-ils justement ? ( J’ai volontairement flouté les images à 4 pixels sous Photoshop pour balayer les détails, et faciliter la perception des couleurs / formes entre elles. )

Probleme couleur ergonomie bouton Fauveaux Mathieu

Vous aviez dit vert pour la première boutique ? Perdu, c’est orange comme beaucoup d’autres éléments de la page. Les nombreux produits et les 2 personnages qui composent le background attirent le regard au détriment du contenu de la fiche produit.

Sur le second visuel l’influence est moins importante avec l’absence de produits, mais un père noël est présent et peut gêner la mise au panier pour plusieurs raisons : Sa taille importante, sa couleur rouge trop proche de celle du call-to-action, et pour finir c’est une silhouette humaine. Il faut savoir que les visages, regards ou personnages attireront l’attention de vos utilisateurs et les éléments autour ne seront peut-être pas vu autant que vous le souhaitez.

Eyes tracking by Australian UsableWorld

Je vous laisse découvrir ce billet de Testapic : Utiliser des images pour diriger le regard de l’utilisateur.

Voici 2 autres boutiques avec un fond décoré mais plus discret, et surtout un call-to-action identifiable rapidement :

Noel 2012 respect regle ergonomie bouton

Décathlon a modifié son background pendant l’écriture de cet article et la comparaison est intéressante. Comme le père Noël, la boule rouge va attirer le regard par sa taille et sa couleur, mais à l’inverse d’un humaine, l’utilisateur ne fera pas une fixation dessus. L’avantage possible est de rendre cette zone plus chaude ( plus attirante visuellement ) qui est placée autour du bouton d’ajout au panier et du message marketing de livraison offerte :

nouveau background ergonomie bouton Mathieu Fauveaux

L’utilisation du flou sur une partie du fond est intéressant pour gommer les détails sans modifier l’ambiance souhaitée. J’ai surtout parlé de call-to-action pour illustrer ce paragraphe mais de nombreux éléments sont concernés comme vos messages marketing, de réassurances, réductions, informations de livraisons (…) ou tout autres éléments importants aux yeux de VOS utilisateurs.

Les points à vérifier pour l’habillage du site :

  • Ne pas utiliser la couleur de vos call-to-action dans vos background et décoration.
  • Évitez de mettre trop d’éléments dans vos fonds.
  • Attention à l’utilisation d’humains, et à la position de leur regard.
  • Les côtés du site sont un bon espace pour afficher un message commercial mais visible part une partie de vos utilisateurs seulement ( résolution faible ).

1 seconde d’attente = 7% de conversion en moins !

Les utilisateurs à la recherche d’idées sont pressés pour trouver la pépite. Pour remplir cette mission ces prospects peuvent utiliser les comparateurs de prix si vous y êtes et parcourir un nombre important de sites. Si votre marque n’est pas connue et qu’il faut attendre 3 fois plus de temps que votre concurrent pour ouvrir une page produit, vous avez un gros problème ! Vos utilisateurs auront perdu patience et je ne parle même pas des personnes sur tablette / mobile..  Vous avez déjà mesuré la vitesse de vos concurrents ? Est-ce que toutes vos animations sont indispensables pour cette période ? et vos pop-up ? Pour une seconde d’attente, vous perdez environ 7% de conversion. Vous trouverez 2 infographies avec des données assez proches, la première de KISSmetrics, et la seconde de StrageLoop. Vous pouvez aussi estimer votre perte de CA avec cette calculatrice « Conversion Loss Calculator ».

Infographie optimisation conversion temps chargement Fauveaux Mathieu

Comme le montre cette infographie: 1 seconde de chargement = 7% de conversion en moins – 11% de pages vues en moins – 16% de satisfaction client. Si vous souhaitez en savoir davantage sur le sujet, Capitaine Commerce à rédiger: Augmentez la vitesse de votre site pour augmenter sa conversion.

Un autre document intéressant en pdf : Building Faster Websites

Comment tester la vitesse du site ?

  • Mesurer la vitesse de chargement du site avec Tools PingDom, GTmetrix, ou le plugin Page Speed de Google.
  • Compresser vos images, bannières, pictos, background…  Jusqu’à 65% de compression pour une image .jpg sous Photoshop permet de réduire le poids sans différence visible pour l’utilisateur.
  • Vérifier tous les fichiers chargés sur vos pages, et supprimez ceux qui ne sont plus utilisés, liens cassés, doublons.
  • Les tags des différents comparateurs, analytics etc… utilisez un système comme Google Tag Manager, ou Tag Commander pour limiter les requêtes.
  • Utiliser la compression Gzip pour réduire le poids et les requêtes de vos fichiers HTML, CSS, JS, ainsi que le système de cache.

L’animation et la musique réservées aux pochettes cadeaux ?!

A votre anniversaire c’est toujours touchant d’ouvrir une carte musicale et d’y lire des messages d’amitié. Mais est-ce qu’une mélodie va permettre de rassurer et d’inciter votre utilisateur d’ajouter une machine à laver à 500€ dans son panier ? Pas sur et pour résumer, un site eCommerce n’est pas prévu pour faire de la musique ou lire une vidéo !

Le déclenchement d’une animation peut partager l’attention de votre utilisateur entre celle-ci et sa recherche d’un produit. Si celle-ci devient trop gênante, il cherchera un moyen de l’arrêter, et faute de trouver il quittera le site. ( Pensez aussi aux personnes qui font leurs courses au bureau discrètement, et qui ne savaient pas qu’il y avait des enceintes sur le moniteur.. c’est gênant ! )

En 2011 Zara avait réussi à créer une animation de neige très agréable à l’œil sans porter atteinte à la navigation, à la différence de Celio :

Analyse ergonomie animation visuelle Mathieu Fauveaux

L’enseigne 123 propose un effet sur le curseur de la souris, d’un autre temps ? à voir !

Si vous devez mettre en place une animation ou un fond sonore ( ce que je déconseille ), voici quelques règles :

  • Ne lancer pas une animation, ou une bande sonore sans laisser le choix à l’utilisateur.
  • Donner la possibilité à l’utilisateur de couper cette animation, c’est bien l’utilisateur qui dirige le site et non l’inverse.
  • Une animation aura une incidence sur le temps de chargement de votre page ( cf. chapitre précédent )

Réduire le taux d’abandon : donner des réponses à vos utilisateurs.

Plusieurs raisons favorisent le taux d’abandon d’un panier, et les plus connues sont :

  • Le coût élevé de la livraison ( 44% )
  • L’utilisateur qui n’est pas prêt à acheter pour le moment ( 41% )
  • L’utilisateur qui fait du repérage ( 27% )
  • Le produit coûte plus cher qu’espéré ( 25% )

( source : http://blog.crazyegg.com/2012/11/21/reasons-for-shopping-cart-abandonment/ )

Pendant cette période les utilisateurs sont plus enclin à acheter mais comparent aussi davantage pour trouver la meilleure affaire. Si vous êtes bien placé au niveau du prix, il serait dommage de perdre une vente pour une information de livraison pas assez précise.

La livraison.

Le tarif de livraison et le délai sont 2 informations importantes avec la deadline du 25 décembre. Si vous pouvez garantir une livraison avant noël ou gratuitement, mettez la en avant sur vos fiches produits, tunnel de commande, newsletter etc.. C’est un excellent argument marketing. Votre utilisateur doit être rassuré pour être converti.

A l’approche du 25 décembre, n’hésitez pas à mettre en avant les transporteurs qui pourront livrer avant cette date dans votre tunnel de commande. Une simple mention facilitera le choix et rassura même si le coût est supérieur.

La Maison de Valérie utilise cet argument dès l’entrée de la boutique, mais aucun rappel n’est fait sur la fiche produit :

reassurance livraison garantie noel ergonomie

Pour information voici les taux d’utilisation des modes de livraison en France :

Type livraison ecommerce

Une technique classique d’optimisation consiste à offrir la livraison à partir d’un montant minimum. Il est intéressant de tester cette technique pendant l’année sur des newsletters, ou en test A/B sur du marketing et d’en mesurer l’impact. A combien est votre panier moyen ? est-il possible de le faire grimper de quelques euros ? A vous de jouer.

Le stock.

Dans le cas où le stock serait épuisé et donc la livraison impossible avant le 25, indiquez-le le plus rapidement possible. Votre utilisateur ne sera pas déçu à la fin du processus d’achat et pourra chercher un produit de remplacement, ou validera le reste de son panier. Même si cette situation reste gênante, ne laisser jamais une mauvaise impression de votre site, cet utilisateur reviendra peut-être pendant les soldes sans apriori pour acheter.

Le service après-vente.

Vous devez démontrer à vos clients que votre service client est facilement joignable, et qu’il sera aussi facile d’échanger un produit chez vous que dans un magasin physique. Ces éléments basiques de réassurance doivent être visibles depuis n’importe quelle page de votre site, et davantage encore dans le tunnel de commande pour limiter le taux de d’abandon.

Quelques conseils pour la réassurance :

  • Mettez en avant vos délais de livraison, et assurez la réception avant noël tant que c’est possible pendant toute la commande.
  • A l’approche de noël, n’hésitez pas faire la promotion d’un transporteur plus cher mais qui assure une livraison pour le 25.
  • Indiquez clairement les stocks disponibles ( délais de réapprovisionnement, sur commande etc.. ).
  • Si la neige vient à tomber abondamment, prévenez-vos clients d’une possible augmentation des délais de livraison.
  • Indiquez votre politique de retour, les délais et conditions.
  • Indiquez votre service client le numéro, son coût, et ses horaires.

Une landing page qui converti pour votre boutique.

Si vous utilisez une boutique spéciale Noël pour vendre une sélection de produits ou donner des idées cadeaux, utiliser un modèle de landing page qui convertit ! Si vous avez testés vos landings pages ( pages d’atterrissages ) cette année avec un test A/B, vous utiliserez le même modèle, sinon il va falloir y penser en 2013.

La page des 3suisses est séduisante avec de la réassurance sur les délais de livraisons et sur l’échange gratuit du produit. Le message commerciale d’une sélection de produits jusqu’à -40% est bien visible. L’enseigne a aussi pensée à séparer son offre en 3 catégories pour faciliter la navigation et donner envie aux indécis : la décoration, la mode, et les cadeaux.

Optimisation ergonomie conversion landing page noel

Si vous souhaitez en savoir davantage sur la création d’une landing page, Unbounce a créé une infographie intéressante ( en anglais ) avec de bons basiques.

Les éléments à ne pas oublier sur une landing page :

  • Un gros titre avec votre message commerciale.
  • Visuellement séduisante, mais le visuel ne doit pas gêner le contenu
  • Un call-to-action bien visible pour entrer dans votre boutique.
  • Vos éléments marketing, et de réassurance.
  • Séparer vos entrées pour faciliter la navigation, ou la recherche d’idée ( homme/femme, décoration/high-tech, … ).

Bonne conversion pour 2012, et 2013 !

Vous l’aurez compris pour tirer le meilleur de votre boutique, Noël se prépare toute l’année en testant des hypothèses sur vos méthodes marketing, votre navigation, structures etc.. Vos données analytics, un audit des points noirs et des tests utilisateurs ( si vous en avez les moyens ) seront indispensables pour trouver vos points faibles. A défaut des tests utilisateurs des outils comme Clicktale, ou CrazyEgg peuvent être utiles. Les tests A/B quand à eux seront intéressant pour tester le résultat de ces hypothèses avec un minium de risque.

J’ai très peu évoqué le mobile et c’est une erreur puisqu’il sera de plus en plus présent dans les achats, ou simplement pour comparer les prix en magasin. Malheureusement aujourd’hui peu de sites sont adaptés à ces appareils et 2013 va surement être un tournant dans ce domaine. N’hésitez pas à venir discuter de vos techniques et solutions dans les commentaires, ou en privée par le formulaire de contact. Cet article arrive un peu tard avant les fêtes, mais le temps me fait défaut avec notamment un projet en cours de lancement en tant qu’indépendant.

Bonne conversion à tous et bonnes fêtes de fin d’années !

 

Partager sur facebook
Facebook
Partager sur pocket
Pocket
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Articles en relation :

Newsletter

Recevez les 10 meilleures actualités autour du CRO tous les mois: articles, process, outils, conférences, ...

Vous voulez savoir où et comment démarrer l'optimisation de votre site ?

Je peux détecter vos opportunités d'optimisation et vous délivrer les recommandations à appliquer, mais êtes-vous prêt ?

6 Comments

Charles · 5 décembre 2012 at 16 h 41 min

Une belle synthèse, déja faire ca c’est pas mal, après ne pas oublier également d’estimer son trafic afin que son site puisse tenir la charge (et la logistique).

Baptiste · 6 décembre 2012 at 17 h 26 min

Très intéressant mais un peu long avec plusieurs sujets différents abordés et oui faire tout bien c’est déjà pas mal, surtout quand on voit que même les « plus gros » sont loin d’être irréprochables à ce niveau là.

Sinon, je ne pense pas que le trafic et encore moins la logistique soit dans la ligne éditoriale, raison d’être de ce blog..

Laurent DEMONTIERS · 19 décembre 2012 at 17 h 26 min

Bonjour Mathieu,

Merci pour cet article très documenté qui sera une bonne base de réflexion pour beaucoup d’entre nous.

Je reviens juste sur la formulation de ton 1er paragraphe qui me semble un peu maladroite parce que je suis un peu chiant et pointilleux 🙂
…. ça n’est pas la « beauté » d’un site qui nuit à la conversion ou à la compréhension d’un gabarit. Par contre une trop forte densité informationnelle si.

Au delà de l’esthétisme d’une interface (qu’est-ce que la beauté?), c’est bien sa densité informationnelle qui conditionne sa lisibilité et son utilisabilité. Alors tu as raison, ajouter des éléments graphiques augmente la densité d’information visuelle et peut noyer les éléments fonctionnels ou navigationnels importants pour l’utilisateur dans un fatras d’éléments décoratifs.

Savoir gérer les espaces blancs et le rythme de la respiration dans la lecture entre les éléments visuels d’un interface c’est certainement l’enjeu majeur des designers d’interfaces.

Fauveaux Mathieu · 20 décembre 2012 at 10 h 14 min

Merci pour vos commentaires Charles, Baptiste et Laurent.

Le sujet est un peu (trop?) long et aurait pu être découpé en plusieurs articles comme tu dis Baptiste. J’y penserai la prochaine fois 🙂

Laurent tu as entièrement raison et je suis d’accord avec ton raisonnement ! La formulation est simplifiée pour rester accessible à tous, avec des exemples simples.

Toutes les personnes qui travaillent dans le domaine vont admettre qu’il faut faire attention à la surcharge d’information sur une page, tout comme les espaces blanc. Et pourtant, c’est difficile à faire admettre l’utilité à un client. ( je suis sur que tu as déjà eu le cas :p )

Merci pour ton commentaire Laurent, c’est toujours un plaisir d’ouvrir le débat.

Bonne fêtes de fin d’année à tous 🙂

Augmentez votre taux de conversion avec votre page Qui sommes nous. · 9 février 2013 at 4 h 39 min

[…] les fêtes de fin d’année vous allez être nombreux à vouloir augmenter vos revenus en utilisant le trafic comme levier […]

Comment augmenter la performance de la fiche produit de Grosbill - Fauveauxm · 12 juin 2013 at 9 h 01 min

[…] à sa fiche produit, porte d’entrée de ce type de site friand de comparateurs de prix. Alors comment optimiser cette landing page et inviter les visiteurs à mettre le produit au panier ? Début de […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.