Une barre d’annonce en haut de page est le moyen le plus direct de communiquer une offre limitée. Elle est aussi l’un des éléments les plus faciles à mal implémenter : mauvais fuseau horaire, décalage de mise en page, ou compte à rebours figé par le cache.
Ce que la barre doit dire
Un message, une action, une échéance. Trois éléments et pas davantage.
Le message tient en une ligne sur mobile, soit environ quarante caractères. « Livraison offerte dès 49 € » fonctionne, « Profitez de notre offre exceptionnelle de livraison » ne dit rien.
L’action est un lien vers la page concernée. Une barre qui annonce une promotion sans y mener oblige le visiteur à chercher.
L’échéance, si elle existe, sous forme de compte à rebours ou de date. Elle n’a de sens que si elle est réelle.
Point important : le compte à rebours doit correspondre à une fin d’offre effective. Un décompte qui repart à zéro à chaque visite est une pratique commerciale trompeuse, et elle se repère immédiatement par un visiteur qui revient.
Le problème du fuseau horaire
C’est l’erreur technique la plus fréquente, et elle produit des écarts d’une à deux heures selon la saison.
Trois horloges entrent en jeu : celle du serveur, celle configurée dans PrestaShop, et celle du navigateur du visiteur.
La règle qui évite les problèmes : calculez l’échéance côté serveur, transmettez-la en temps universel, et laissez le navigateur faire la conversion. Le visiteur voit alors le décompte dans son heure locale, ce qui est le comportement attendu.
Deux vérifications complémentaires. Le passage à l’heure d’été ou d’hiver, si votre offre chevauche un changement : une échéance calculée sans tenir compte du décalage saute d’une heure. Et le cas des visiteurs étrangers : une offre se terminant à minuit heure de Paris se termine à 23 heures pour un client portugais, ce qui est correct mais doit être assumé.
Le compte à rebours et le cache
Problème classique : la barre affiche « il reste 3 heures » à tous les visiteurs pendant deux jours, parce que la page est servie depuis le cache.
La cause est simple : le décompte a été calculé côté serveur au moment de la génération de la page, puis figé avec elle.
La solution : le serveur transmet la date de fin, pas la durée restante. Un script côté navigateur calcule l’écart avec l’heure courante et met à jour l’affichage chaque seconde. La date de fin peut être mise en cache sans dommage, la durée non.
Deux points complémentaires. Prévoyez le comportement à l’expiration : la barre disparaît, ou affiche un message de fin. Un décompte à zéro qui reste affiché donne une impression d’abandon. Et si votre page est en cache long, la barre elle-même peut être chargée séparément pour rester à jour.
Barre d'annonce & Compte à rebours — Bandeau promo PrestaShop 8 & 9Le bandeau promo qui crée l'urgence, sans alourdir votre thème€59.00
Le décalage de mise en page
Point technique qui affecte vos indicateurs de performance et qui est souvent découvert après coup.
Une barre insérée après le chargement de la page pousse tout le contenu vers le bas. Le visiteur qui allait cliquer sur un élément clique sur un autre, et votre mesure de stabilité visuelle se dégrade.
Trois façons de l’éviter.
Réserver l’espace dès le rendu initial, avec une hauteur fixe, même si le contenu arrive ensuite.
Afficher la barre en superposition plutôt que dans le flux, ce qui ne décale rien mais masque une partie du contenu.
Servir la barre avec la page, pas en chargement différé. C’est la solution la plus simple quand le contenu de la barre change peu.
Attention également à la hauteur variable : un message qui passe sur deux lignes sur mobile et une seule sur ordinateur produit un décalage si l’espace a été réservé sur la mauvaise valeur.
Le ciblage
Une barre affichée partout et à tout le monde perd son efficacité en quelques jours. Quatre axes de ciblage.
Par page. Une annonce de livraison offerte a du sens sur les fiches produits et le panier, moins sur les pages de contenu.
Par langue et par pays. Une offre limitée à la France ne doit pas s’afficher aux visiteurs étrangers. C’est une question de pertinence et parfois de conformité, si les conditions diffèrent.
Par groupe de clients. Une offre réservée aux professionnels ne concerne pas les particuliers.
Par comportement. Une barre affichée seulement aux nouveaux visiteurs, ou seulement après une première visite, selon ce que vous communiquez.
Le ciblage par langue est le plus souvent négligé, et il produit le résultat le plus visible : un message en français sur une version allemande de votre boutique.
La fermeture
Trois règles.
La barre doit être fermable. Un bandeau qu’on ne peut pas retirer et qui occupe un dixième de l’écran sur mobile est une gêne.
La fermeture doit être mémorisée, sur une durée raisonnable : la session, ou quelques jours. Rouvrir la barre à chaque page est agressif.
La mémorisation doit tenir compte du message. Si vous changez d’annonce, la nouvelle doit s’afficher même à ceux qui avaient fermé la précédente. Cela suppose un identifiant de version dans la mémorisation.
Ce troisième point est celui qu’on découvre en constatant qu’une nouvelle campagne n’est vue par personne.
L’accessibilité
Deux points, rapides à traiter.
Le contraste du texte sur le fond de la barre doit respecter le rapport minimal. Les barres promotionnelles utilisent volontiers du blanc sur des couleurs vives, qui passent souvent en dessous du seuil.
Le bouton de fermeture doit être atteignable au clavier et porter un intitulé explicite pour les lecteurs d’écran. Une croix sans texte alternatif est un bouton muet.
Ajoutez un point sur le compte à rebours : une mise à jour chaque seconde annoncée aux technologies d’assistance produit un flot verbal insupportable. L’élément ne doit pas être déclaré comme une région à annonce continue.
Mesurer
Trois indicateurs.
Le taux de clic sur la barre, rapporté aux affichages. En dessous de 1 %, votre message ou votre ciblage sont à revoir.
Le taux de fermeture. Un taux élevé signale un message perçu comme intrusif ou hors sujet.
Le chiffre d’affaires attribué aux sessions ayant cliqué sur la barre, à comparer aux autres. C’est le seul chiffre qui justifie de la garder.
Un quatrième point, à surveiller sur la durée : l’effet d’usure. Une barre permanente devient invisible en quelques semaines. Alterner les messages, ou n’afficher la barre que pendant les opérations réelles, conserve son efficacité.
Le module Barre d’annonce et Compte à rebours pour PrestaShop met en place ce dispositif sur PrestaShop 8 et 9 : compte à rebours calculé côté navigateur à partir d’une date de fin pour rester juste malgré le cache, ciblage par page, langue, pays et groupe de clients, réservation de l’espace pour éviter le décalage de mise en page, et mémorisation de la fermeture par version de message.