Wie ein Header, der beim Hochscrollen wieder erscheint, den Umsatz pro Nutzer bei Joseph Joseph um 15,6 % steigerte

Kunde: Joseph Joseph Agentur: Proof3 Seite: Header auf der gesamten Website Geräte: Desktop & Tablet
  • +15,6 %Umsatz pro Nutzer
  • +6,3 %Kaufconversion
  • +2,9 %In den Warenkorb

Einleitung:

Joseph Joseph ist eine Designmarke aus London, bekannt für innovative, platzsparende Küchen- und Haushaltsprodukte, die über Händler weltweit und den eigenen Online-Shop verkauft werden.

Joseph Joseph arbeitet mit der britischen eCommerce-CRO-Agentur Proof3 zusammen, die Mida einsetzt, um Experimente auf der gesamten Website durchzuführen.

Das Problem:

Die Website von Joseph Joseph nutzte einen dauerhaft fixierten Header. Er hielt Suche und Navigation jederzeit in Reichweite, beanspruchte aber auch während des gesamten Einkaufserlebnisses Platz auf dem Bildschirm und drängte Produktbilder und Inhalte weiter nach unten.

Die Herausforderung bestand darin, Produkte sichtbarer zu machen und die Navigation trotzdem immer dann leicht erreichbar zu halten, wenn Käufer sie brauchen.

Erkenntnisse & Vorgehen:

Anstatt nur eine einzelne Alternative zu testen, verglich Proof3 mit dem A/B/n-Testing von Mida den bestehenden Header gleichzeitig mit zwei verschiedenen Ansätzen, alles auf denselben URLs:

  • Kontrollgruppe: der bestehende, dauerhaft fixierte Header.
  • Variante 1 (Ausgeblendet): ein nicht fixierter Header, der mit der Seite wegscrollt.
  • Variante 2 (Dynamisch): ein Header, der beim Runterscrollen verschwindet und sofort wieder erscheint, sobald Käufer hochscrollen.

1. Den Bildschirm den Produkten zurückgeben und die Navigation bei Bedarf wieder einblenden.

Kontrollversion: Joseph-Joseph-Startseite mit Suchleiste und Navigation in einem am oberen Bildschirmrand fixierten Header
Kontrollgruppe: Der Header ist jederzeit am oberen Bildschirmrand fixiert
Variante 1: dieselbe Startseite, ein Stück weit nach unten gescrollt, mit aus dem Bildschirm herausgescrolltem Header
Variante 1 (Ausgeblendet): Der Header scrollt mit der Seite weg und bleibt außer Sicht
Variante 2: weiter unten auf der Startseite, der Header ist nach dem Hochscrollen des Käufers wieder ins Bild gerutscht
Variante 2 (Dynamisch): Der Header verschwindet beim Runterscrollen und gleitet beim Hochscrollen wieder ein

Der dynamische Header sollte das Beste aus beiden Optionen vereinen: den zusätzlichen Platz eines nicht fixierten Headers und den Komfort einer Navigation, die zurückkommt, wenn Kunden sie wollen.

2. Variante 2 in Aktion.

Animation der Joseph-Joseph-Website, bei der sich der Header beim Runterscrollen ausblendet und beim Hochscrollen wieder erscheint

Während Käufer die Seite herunterscrollen, gleitet der Header aus dem Weg. Sobald sie wieder hochscrollen, kehrt er zurück, sodass Suche und Navigation immer nur eine Geste entfernt sind.

Das Experiment:

Proof3 hat alle drei Varianten mit dem Code-Editor von Mida erstellt und als A/B/n-Test auf der gesamten Website für Desktop- und Tablet-Besucher durchgeführt, wobei der Traffic gleichmäßig auf die Kontrollgruppe und beide Varianten aufgeteilt wurde. Der Test lief 19 Tage, mit Kaufconversion, Warenkorb-Hinzufügungen und Umsatz pro Nutzer als wichtigsten Kennzahlen.

Verwendete Mida-Funktionen:

  • A/B/n-Testing (mehrere Varianten auf denselben URLs)
  • HTML-/JS-/CSS-Code-Editor
  • Websiteweites Targeting mit Geräte-Targeting (Desktop und Tablet)

Die Ergebnisse:

Nach 19 Tagen lag Variante 2 (Dynamisch), der Header, der beim Hochscrollen wieder erscheint, bei allen wichtigen Kennzahlen vor der dauerhaft fixierten Kontrollversion:

  • Umsatz pro Nutzer: +15,55 %
  • Kaufkonversion: +6,27 %
  • In den Warenkorb gelegt: +2,88 %

Ein genauerer Blick: warum der nicht fixierte Header schlechter abschnitt.

Der Vergleich von drei Varianten nebeneinander brachte etwas ans Licht, das ein einfacher A/B-Test übersehen hätte. Der vollständig nicht fixierte Header (Variante 1) schaffte genauso viel Platz, schnitt aber schlechter ab als die Kontrollversion: Die Warenkorbrate sank um 15,10 % und die Kaufkonversion um 1,86 %.

Offensichtlich verließen sich die Käufer weiterhin auf den Header. Ihn komplett zu entfernen erschwerte den Zugriff auf die Navigation, während sie beim Hochscrollen genau dann wieder verfügbar war, wenn Kunden danach suchten.

Wichtigste Erkenntnisse:

Der Kontext ist wichtiger als die Sichtbarkeit. Die Navigation muss nicht ständig auf dem Bildschirm zu sehen sein, aber sie muss in dem Moment erscheinen, in dem ein Käufer sie braucht. Ein Header, der auf die Scrollrichtung reagiert, bietet sowohl Platz zum Stöbern als auch einfachen Zugriff.

Testen Sie mehr als eine Alternative. Mit einem A/B/n-Test in Mida konnte Proof3 den Ansatz „Entfernen“ und den Ansatz „Intelligenter machen“ in einem einzigen Experiment vergleichen. So zeigte sich nicht nur, dass sich der fixierte Header verbessern ließ, sondern auch, welche Richtung funktionierte.

Testen Sie Mida für schlankes A/B-Testing

Wenn Sie die Performance Ihrer Website optimieren und Ihren A/B-Test-Prozess verschlanken möchten, ist Mida die ideale Lösung.

Dank seines schlanken Skripts und seines Fokus auf Performance sorgt Mida dafür, dass Ihre Website schnell und reaktionsfähig bleibt, und bietet gleichzeitig leistungsstarke A/B-Test-Funktionen. Erleben Sie die Vorteile von Mida und binden Sie unser schlankes Skript noch heute in Ihre Website ein.

---

Starten Sie kostenlos mit Mida: bis zu 100.000 monatlich erfasste Nutzer.

Die A/B-Test-Plattform für Menschen, denen
Website-Performance wichtig ist

Mida ist 10-mal schneller als alles, was Sie je in Betracht gezogen haben. Überzeugen Sie sich selbst.

Dekorative GrafikDekorative GrafikDekorative GrafikDekorative Grafik