Comment un en-tête qui réapparaît au défilement vers le haut a augmenté le revenu par utilisateur de 15,6 % pour Joseph Joseph

Client : Joseph Joseph Agence : Proof3 Page : En-tête sur tout le site Appareils : Ordinateur et tablette
  • +15,6 %Revenu par utilisateur
  • +6,3 %Conversion à l'achat
  • +2,9 %Ajout au panier

Introduction :

Joseph Joseph est une marque de design basée à Londres, connue pour ses produits de cuisine et d'équipement de la maison innovants et peu encombrants, vendus par des revendeurs dans le monde entier et dans sa propre boutique en ligne.

Joseph Joseph travaille avec l'agence britannique de CRO spécialisée en eCommerce Proof3, qui utilise Mida pour mener des expérimentations sur l'ensemble du site.

Le problème :

Le site de Joseph Joseph utilisait un en-tête fixe en permanence. Il gardait la recherche et la navigation à portée de main à tout moment, mais il occupait aussi de l'espace à l'écran tout au long du parcours d'achat, repoussant les visuels produits et le contenu plus bas dans la page.

Le défi consistait à donner plus de visibilité aux produits tout en gardant la navigation facilement accessible dès que les acheteurs en avaient besoin.

Analyses et approche :

Au lieu de tester une seule alternative, Proof3 a utilisé les tests A/B/n de Mida pour comparer l'en-tête existant à deux approches différentes en même temps, sur les mêmes URL :

  • Contrôle : l'en-tête existant, fixe en permanence.
  • Variante 1 (masqué) : un en-tête non fixe qui défile avec la page.
  • Variante 2 (dynamique) : un en-tête qui disparaît lorsque les acheteurs font défiler la page vers le bas et réapparaît dès qu'ils remontent.

1. Rendre l'écran aux produits, et la navigation à la demande.

Contrôle : page d'accueil de Joseph Joseph avec la barre de recherche et la navigation dans un en-tête fixé en haut de l'écran
Contrôle : l'en-tête reste fixé en haut de l'écran en permanence
Variante 1 : la même page d'accueil défilée un peu vers le bas, avec l'en-tête sorti de l'écran
Variante 1 (masqué) : l'en-tête défile avec la page et reste hors de vue
Variante 2 : plus bas sur la page d'accueil, l'en-tête est revenu à l'écran après que l'acheteur a remonté la page
Variante 2 (dynamique) : l'en-tête se masque au défilement vers le bas et réapparaît en glissant au défilement vers le haut

L'en-tête dynamique visait à combiner le meilleur des deux options : l'espace de navigation supplémentaire d'un en-tête non fixe, avec le confort d'une navigation qui revient quand les clients le souhaitent.

2. La variante 2 en action.

Animation du site Joseph Joseph où l'en-tête se masque au défilement vers le bas et réapparaît au défilement vers le haut

Lorsque les acheteurs descendent dans la page, l'en-tête s'efface. Dès qu'ils remontent, il revient : la recherche et la navigation sont toujours à un geste de distance.

L'expérience :

Proof3 a créé les trois expériences avec l'éditeur de code de Mida et les a menées sous forme de test A/B/n sur l'ensemble du site pour les visiteurs sur ordinateur et tablette, en répartissant le trafic de façon égale entre le contrôle et les deux variantes. Le test a duré 19 jours, avec la conversion à l'achat, l'ajout au panier et le revenu par utilisateur comme indicateurs clés.

Fonctionnalités Mida utilisées :

  • Tests A/B/n (plusieurs variantes sur les mêmes URL)
  • Éditeur de code HTML / JS / CSS
  • Ciblage sur l'ensemble du site avec ciblage par appareil (ordinateur et tablette)

Les résultats :

Après 19 jours, la variante 2 (dynamique), l'en-tête qui réapparaît lorsque l'on remonte la page, devançait le contrôle à en-tête fixe en permanence sur tous les indicateurs clés :

  • Revenu par utilisateur : +15,55 %
  • Conversion à l'achat : +6,27 %
  • Ajout au panier : +2,88 %

Analyse détaillée : pourquoi l'en-tête non fixe a perdu.

Tester trois expériences côte à côte a révélé ce qu'un simple test A/B n'aurait pas mis en évidence. L'en-tête totalement non fixe (variante 1) libérait autant d'espace, mais a obtenu de moins bons résultats que le contrôle, avec un ajout au panier en baisse de 15,10 % et une conversion à l'achat en baisse de 1,86 %.

Les acheteurs s'appuyaient clairement encore sur l'en-tête. Le supprimer complètement rendait la navigation plus difficile d'accès, alors que le faire réapparaître en remontant la page le gardait disponible au moment précis où les clients le cherchaient.

Points clés à retenir :

Le contexte compte plus que la visibilité. La navigation n'a pas besoin d'être à l'écran en permanence, mais elle doit apparaître dès que l'acheteur en a besoin. Un en-tête qui réagit au sens du défilement offre à la fois de l'espace pour parcourir la page et un accès facile.

Testez plus d'une alternative. Lancer un test A/B/n dans Mida a permis à Proof3 de comparer une approche « le supprimer » et une approche « le rendre plus intelligent » dans une seule expérience, montrant non seulement que l'en-tête fixe pouvait être amélioré, mais aussi quelle direction fonctionnait.

Essayez Mida pour des tests A/B ultra-légers

Si vous cherchez à optimiser les performances de votre site web et à simplifier votre processus de test A/B, Mida est la solution idéale.

Grâce à son script léger et à son attention portée aux performances, Mida garantit que votre site reste rapide et réactif tout en offrant de puissantes capacités de test A/B. Profitez dès aujourd'hui des avantages de Mida en intégrant notre script léger à votre site web.

---

Démarrez gratuitement sur Mida : jusqu'à 100 000 utilisateurs suivis par mois.

La plateforme de test A/B pour ceux qui
se soucient de la performance de leur site web

Mida est 10 fois plus rapide que tout ce que vous avez pu envisager jusqu'ici. Testez-le vous-même.

Graphique décoratifGraphique décoratifGraphique décoratifGraphique décoratif