Leitfaden
Die Kategorieseite ist eine der wichtigsten Seitentypen eines Online-Shops. Hier stöbern Besucher oder spezifizieren mithilfe von Filtern genau, welche Anforderungen ein gesuchtes Produkt erfüllen soll.
Dieser Leitfaden gibt Ihnen eine konkrete Anleitung an die Hand, wie Sie diese wichtige Seite Ihres Online-Shops durch A/B- und multivariate Tests verbessern können.
Autor
Julian Kleinknecht
Die Kategorieseite ist eine der wichtigsten Seitentypen eines Online-Shops. Hier stöbern Besucher oder spezifizieren mithilfe von Filtern genau, welche Anforderungen ein gesuchtes Produkt erfüllen soll.
In unseren Praxisguides beschreiben wir Best Practices, Tipps und verschiedene Möglichkeiten, wie Kategorieseiten verbessert werden können (siehe Kapitel 2.4 für eine Übersicht).
Dieser Leitfaden gibt Ihnen nun eine konkrete Anleitung an die Hand, wie Sie diese wichtige Seite Ihres Online-Shops auch durch A/B-Tests verbessern können.
Wir empfehlen diesen Leitfaden wie folgt zu verwenden:
(1) Überprüfen Sie zuerst, ob bei Ihnen alle Voraussetzungen für A/B-Tests auf Kategorieseiten erfüllt sind. Treffen Sie gegebenenfalls die entsprechenden Vorkehrungen. Das 2. Kapitel schlägt konkrete Schritte vor und verweist auf weitere Dokumente.
(2) Studieren Sie im zweiten Schritt nacheinander die einzelnen Testkonzepte. Notieren Sie dabei,
(3) Die Reihenfolge der Konzepte basiert auf verschiedenen Überlegungen, unter anderem dem Potential und der Schwierigkeit der Umsetzung. Erstellen Sie deshalb im dritten Schritt basierend auf den oben gesammelten Notizen eine individuelle Test-Roadmap.
Lesen Sie auch unseren Leitfaden zu A/B-Tests auf der Produktdetailseite
Bevor mit der Umsetzung von Tests begonnen werden kann, müssen einige Voraussetzungen erfüllt sein. Wir haben die folgenden vier Voraussetzungen identifiziert und zeigen, wie diese erfüllt werden können.
Um Tests erfolgreich durchzuführen, muss ein professionelles Testing-Tool eingesetzt werden. Wenn dieses auch noch mit dem Webanalyse-Tool integriert ist, können die Ergebnisse der Tests noch ausführlicher betrachtet werden.
Unsere Checkliste „Testing-Tool implementieren“ zeigt, wie eine korrekte Implementierung gelingt.
Damit die hier vorgestellten Tests ausschließlich auf Kategorieseiten ausgeführt werden, wird ein Kriterium benötigt, das alle Kategorieseiten eindeutig identifiziert. Dieses Kriterium muss auf alle Kategorieseiten – und nur auf diese – zutreffen. In anderen Worten muss das Kriterium eine notwendige und hinreichende Bedingung dafür sein, dass die Seite eine Kategorieseite ist.
Diese Informationen können als Kriterien zum Targeting verwendet werden:
Prüfen Sie, ob das Targeting anhand der URL möglich ist. Benutzen Sie „Regular Expressions“ (RegEx), um alle Kategorieseiten mit einem Ausdruck zu erfassen und andere Seiten auszuschließen. Hilfreiche Tools zum erstellen von RegEx finden Sie zum Beispiel unter regex101.com oder regexr.com–
Einige der A/B-Tests lassen sich mithilfe von Point-and-Click-Editoren umsetzen, die in vielen Testing-Tools enthalten sind. Unser Praxisguide „Point&Click-Editoren: Nutzen und Limits in der Praxis“ erläutert, wann und für welche Zwecke die Editoren eingesetzt werden können. Informieren Sie sich darüber.
Für andere Tests benötigen Sie jedoch Kenntnisse und Fähigkeiten in der Webentwicklung mit JavaScript und im Grafikdesign bzw. müssen Sie Zugriff auf diese Ressourcen haben – entweder intern oder durch Freelancer oder Agenturen. Klären Sie, auf welche Ressourcen Sie zurückgreifen können. Starten Sie währenddessen mit weniger aufwendigen Tests.
Der Praxisguide „Herausforderungen in der Conversion-Optimierung überwinden“ gibt weitere praktische Tipps, wie Sie im Unternehmen für mehr Ressourcen für die Conversion-Optimierung argumentieren können.
A/B-Test ist nur dann sinnvoll, wenn die Produktdetailseite schon auf einem guten Stand ist. Anders gesagt: Mit Testen bringen Sie Websites von gut zu sehr gut.
Falls Ihre Kategorieseite also noch nicht gut ist, verändern Sie diese basierend auf Best Practices. Unsere Praxisguides zur Kategorieseite helfen dabei:
Eine Herausforderung bei A/B-Tests der Kategorieseite sind verschiedene Ausprägungen der Kategorieseite. Sind Kategorieseiten für „Außenlampen“ und für „Innenlampen“ verschieden aufgebaut, bedeutet dies zusätzlichen Aufwand bei der Programmierung der Testvarianten. Bevor Sie einen Test planen, überprüfen Sie, ob Kategorieseiten alle gleich aufgebaut sind.
Eine Alternative besteht darin, A/B-Tests nur auf bestimmten Kategorieseiten durchzuführen. Dies hat jedoch große Nachteile:
Testen deshalb nur auf Template-Ebene.
Die wichtigsten Ziele für A/B-Tests auf der Kategorieseite sind und bleiben Ihre E-Commerce-Ziele:
Messen Sie zusätzlich, wie oft die getesteten Elemente verwendet werden. Werden Filter mehr in den Vordergrund gestellt, messen Sie, ob diese häufiger verwendet werden.
Messen Sie auch, wie oft Besucher den nächsten Schritt im Conversion-Trichter erreicht haben. Für die Kategorieseite ist dies in der Regel der Besuch der Produktdetailseite.
Die folgenden Elemente, Eigenschaften und Themen einer Kategorieseite sind sinnvolle Kandidaten für A/B-Tests:
Die nächsten Kapitel enthalten Testkonzepte (inklusive Beispielen) für genau diese Testzonen. Studieren Sie die Testkonzepte und beantworten Sie diese Fragen:
Erstellen Sie darauf aufbauend eine Test-Roadmap, die definiert, wann welche Konzepte getestet werden sollen. Diese beiden Praxisguides unterstützen Sie dabei:
Idealerweise erkennen Besucher schon auf der Kategorieseite, ob ihnen ein Produkt gefällt. Je größer Produktbilder dargestellt werden, desto besser können Besucher diese Entscheidung treffen. Große Produktbilder erweckend außerdem bei manchen Besuchern erst ein Interesse an bestimmten Produkten.
Testen Sie deshalb verschieden große Produktbilder auf der Kategorieseite.
Asos bietet Besucher beispielsweise diese beiden Optionen; standardmäßig werden vier (kleinere) Produktbilder angezeigt:
Bei dieser Kachelansicht (siehe das 9. Kapitel für Alternativen) reduziert bzw. erhöht sich bei größeren Produktbildern natürlich die Anzahl der Produkte pro Zeile.
Falls Sie wie bei Asos schon über verschiedene Ansichten verfügen, ist der A/B-Test mit relativ wenig Aufwand aufgesetzt. Besteht nur eine Ansicht, klären Sie zuerst, ob die Produktbilder in höherer Auflösung vorliegen.
Segmentieren Sie bei der Auswertung auch nach den Kategorien der gekauften Produkte. Gegebenenfalls funktionieren größere Bilder in manchen Produktkategorien besser als in anderen.
Vor allem im Modebereich können Produktbilder auf verschiedene Arten aufgenommen werden:
Produktbilder mit Models sind teurer als nur auf einer Büste oder gelegt. Überprüfen Sie deshalb in einem A/B-Test, ob diese Darstellung einen Einfluss auf die Conversion- sowie Klick-Rate hat.
Zwei Beispiele: Bei strellson.de kommen nur Models zum Einsatz:
Auf conleys.de sind die Produkte jedoch gelegt:
Nur in wenigen Shops werden alle Produktbilder in beiden gewünschten Varianten verfügbar sein. Ermitteln Sie deshalb zuerst, für wie viele Produkte auf eine andere Ansicht ausgewichen werden muss (fallback). Ist diese Zahl hoch, hat der Test keine Aussagekraft. Verzichten Sie dann lieber auf ihn.
Auch für andere Branchen können diese Testvarianten übertragen werden. Möbelstücke oder Lampen können beispielsweise „in Aktion“, das heißt in einem Wohnzimmer, oder freigestellt dargestellt werden.
Auf manchen Shops sind auf den einzelnen Produktkacheln neben Bild, Name und Preis viele weitere Elemente platziert. Auf dieser Zeile einer Kategorieseite von lampenwelt.de gibt es neben den Rabattsymbolen noch viele weitere Symbole zum Beispiel für „Energiesparlampe“ oder „24h Lieferzeit“.
Vielleicht lenken diese Elemente jedoch vom eigentlichen Produktbild ab. Oder Besucher werden von vielen Elementen überfordert und suchen lieber auf einem anderen Shop.
Testen Sie deshalb eine reduzierte Produktkachel gegen eine Variante mit den entsprechenden Elementen. Falls Sie noch keine solcher Elemente einsetzen, fügen Sie diese in einer Testvariante ein. Mögliche Informationen sind:Rabatt-Informationen, Kundenbewertungen, Neu/Aktion Störer, Streichpreis, Produktvarianten, Größenauswahl, Markenlogo sowie Produkttexte.
Ein Beispiel von theladen.de. In der aktuellen Ansicht sind viele Elemente auf den Produktkacheln platziert:
Auf einer von uns entwickelten Variante wurden die Störer, Artikelnummern und Markenlogos entfernt, nur die Streichpreise angezeigt sowie einheitlicher Produktnamen verwendet:
Eine Variante mit noch weiter reduzierten Produktkacheln verwendet Zalando. Zusätzliche Informationen (wie die vorhandenen Produktvarianten) werden erst nach einem MouseOver angezeigt:
Besucher suchen häufig nach spezifischen Produkten oder kennen Auswahloptionen für ihr gesuchtes Produkt. Filter helfen dabei, die angezeigten Produkte weiter einzugrenzen. Der Praxisguide Kategorieseiten – Filter richtig einsetzen zeigt, worauf auf ankommt.
Je nachdem an welcher Stelle Filter platziert sind, werden diese schneller und häufiger wahrgenommen. Testen Sie deshalb, ob eine andere Platzierung zu einer besseren Conversion-Rate sowie einer höheren Verwendung der Filter führt.
Es bieten sich zwei Bereiche für die Platzierung an:
Euronics.de positioniert die Filter links neben den Produkten:
Bei esprit.de sind die Filter dagegen oberhalb der Produkte platziert:
Zeigen Ihre Webanalyse-Daten, dass Besucher, welche Filter verwenden, eine höhere Conversion-Rate aufweisen? Dann scheinen diese besser oder schneller ein gewünschtes Produkt zu finden.
Fordern Sie deshalb in einer Testvariante Besucher zum Verwenden der Filter auf. Neben verschiedenen Positionierungen (siehe voriges Unterkapitel) kann eine solche Aufforderung auch direkt geschehen. Mister Spex tut dies mithilfe einer kleinen Box auf misterspex.de/brillen:
Eine solche Aufforderung kann zu verschiedenen Zeitpunkten ausgespielt werden:
Sobald Besucher auf den meisten Kategorieseite scrollen, geraten die Filter aus dem sichtbaren Bereich. Wenn die Ergebnisse dann verfeinert werden sollen, müssen Besucher wieder nach oben scrollen.
Wenn die Filter dagegen mitscrollen, besteht dieses Problem nicht. Fixieren Sie die Filter deshalb in einer Testvariante. Dies ist nur sinnvoll, wenn die Filter in der Marginalspalte links oder rechts platziert sind
Die Sortierung spielt beim Finden von relevanten Produkten eine große Rollte. Sind die für den Besucher relevanten Produkte erst weit unten platziert, findet er sie vielleicht gar nicht, weil er die Kategorieseite schon verlassen hat.
Testen Sie Testvarianten mit Sortierungen gegeneinander, die schon aktuell im Shop verfügbar sind. Hierzu gehören:
Achten Sie bei der Auswertung der Ergebnisse auf Unterschiede für verschiedene Segmente. Vielleicht weisen wiederkehrende Besucher eine höhere Conversion-Rate bei der Sortierung „Neueste zuerst“ auf, während für neue Besucher die Sortierung „Topseller“ zur höchsten Conversion-Rate führt.
Große Kategoriebilder wie hier bei Zalando scheinen viele Vorteile zu haben:
Andererseits beanspruchen sie Platz, der für eigentliche Produkte verwendet werden könnte.
Überprüfen Sie in einem einfachen A/B-Test, ob das Ausblenden bzw. Einblenden von Kategoriebilder einen Einfluss auf die Conversion-Rate hat. Messen Sie außerdem diese Metriken:
Es gibt zwei verschiedene Möglichkeiten, wie Produkte auf einer Kategorieseite dargestellt werden können.
(1) Galerieansicht: Mehrere Produkte werden in Kacheln nebeneinander angezeigt (meist drei oder vier in einer Zeile). Besucher sehen viele Produkte auf einmal und können stöbern.
(2) Listenansicht: Es wird ein Produkt pro Zeile angezeigt. Es können mehr Details zum Produkt dargestellt werden und der Besucher wird nicht abgelenkt.
Häufig wird erstere Ansicht für Produkte verwendet, die vor allem wegen ihres Aussehens genauer betrachtete werden (insbesondere Kleidung und Schuhe), die Listenansicht jedoch für Produkte, für welche andere Eigenschaften wichtiger sind (zum Beispiel Elektronik).
Überprüfen Sie in einem A/B-Test, ob diese gewöhnlichen Annahmen zutreffen. Das heißt listen Sie Produkte in der jeweils anderen Darstellungsart. Dies ist besonders einfach umzusetzen, wenn beide Ansichten schon vorliegen. Beispiel von cyberport.de:
Listenansicht
Galerieansicht
Prüfen Sie im Webanalyse-Tool, wie viele Seitenaufrufe die zweiten Seiten der Kategorieseiten aufweisen. Ist diese Zahl signifikant, gibt es anscheinend viele Besucher, die sich viele Produkte einer Kategorie ansehen.
Machen Sie es diesen Besuchern einfacher, mehr Produkte anzusehen, indem Sie die Anzahl der Produkte pro Seite erhöhen. Je mehr Produkte auf einer Seite, desto größer ist die Wahrscheinlichkeit, dass Besucher ein Produkt entdecken, welches sie sich näher ansehen wollen.
Am besten werden Produkte weiter unten per „Lazy Load“ geladen, um die Ladezeiten nicht negativ zu beeinflussen.
In vielen Shops können Besucher schon die Anzahl der Produkte pro Seite anpassen. Sie wird häufig über einen URL-Parameter umgesetzt. Ein entsprechender A/B-Test zwischen diesen beiden Varianten ist also mit relativ wenig Aufwand umgesetzt.
Paginierung, also die Aufteilung aller Produkte auf mehrere Seiten auf der Kategorieseite, führt ggf. dazu, dass sich Besucher nur die ersten paar Seiten einer Kategorie ansehen. Finden Sie dort nicht ihr gesuchtes Produkt brechen Sie ab.
Hypothese: Werden immer weitere Produkte nachgeladen („Infinite Scrollt“), erlebt der Besucher keinen Bruch in seinem Einkaufserlebnis. Dies führt zu einer höheren Conversion-Rate. Besucher kennen diese Technik von Websites wie Facebook, Twitter oder Tumblr.
Ein Beispiel für diesen Ansatzfinden Sie bei Nivea: https://www.nivea.de/shop/gesicht/gesichtscreme/#user=1 (Stand Februar 2015)
Vielleicht führt das automatische Nachladen jedoch dazu, dass Besucher überfordert werden und sich nicht alle angezeigten Produkte genau ansehen („Weiter unten gibt es schließlich noch mehr.“). Websites wie Amazon oder Etsy haben negative Erfahrungen mit Infinite Scroll gemacht. Außerdem kann der Footer von der Kategorieseite nicht erreicht werden, was manche Besucher stört.
Die Kategorieseite ist eine häufige Einstiegsseite im Online-Shop. Bevor sie sich Produkte genauer ansehen, entscheiden Besucher, ob der Shop überhaupt vertrauenswürdig ist und ob man bei ihm letztendlich einkaufen würde.
Indem Sie relevante Vorteile kommunizieren, können Sie Besucher von sich überzeugen und Bedenken ausräumen. Eine horizontale Box mit 2-4 Bullet Points oder Icons kann hier zum Einsatz kommen.
Achten Sie neben der Conversion-Rate auch auf die Bounce-Rate. Sinkt diese signifikant, scheinen die Vorteile Besucher zum weiteren Einstieg in den Shop zu animieren.
Überprüfen Sie außerdem, ob die Vorteile nur bei Einstiegen in den Shop oder bei allen Aufrufen der Kategorieseite angezeigt werden sollte.
In gewissen Fällen benötigen Besucher nur wenige Informationen, um sich für ein Produkt zu entscheiden. Statt Besuchern also einen möglicherweise überflüssigen Schritt über die Produktdetailseite aufzuzwingen, könnten sie Produkte in einem Layer direkt auf der Kategorieseite genauer ansehen.
Auf diese Weise können Besucher direkt wieder auf der Kategorieseite weitermachen und das Stöbern im Sortiment wird nicht unterbrochen. Besucher erreichen ihr Ziel also schneller.
Bieten Sie Besuchern in einer Testvariante deshalb eine abgespeckte Variante der Produktdetailseite als Schnellansicht (auch „Quickview“ genannt) an. Stellen Sie sicher, dass es Besucher in der Schnellansicht möglich ist, zur „vollen“ Produktdetailseite zu wechseln.
Button zur Schnellansicht über dem mittleren dem Produkt (edited.de):
Geöffnete Schnellansicht (edited.de):
Verfügt Ihr Shop noch über keine Schnellansicht, ist ein solcher Test relativ aufwendig umzusetzen. Setzen Sie diese Möglichkeit jedoch schon ein, testen Sie sie unbedingt. Vielen Besucher ist oft nicht klar, dass noch weitere Informationen verfügbar sind.
Nur wenige Kategorieseiten verfügen über Handlungsaufforderungen, das relevante Produkt näher anzusehen. Testen Sie, ob eine solche Aufforderung in Form eines Buttons dazu beiträgt, mehr Besucher auf Produktdetailseiten zu bringen.
Der Button kann entweder in der Produktkachel platziert werden oder auch erst bei einem MouseOver über das Produkt eingeblendet werden.
Fast alle Shops leiten Besucher von der Kategorieseite zur Produktdetailseite. Sie verkaufen jedoch „low involvement“-Produkte? Dann wissen Besucher vielleicht bereits auf der Kategorieseite, ob sie ein bestimmtes Produkt kaufen möchten.
Platzieren Sie in einer Testvariante einen „In den Warenkorb“ -Button direkt auf der Kategorieseite.
In den meisten Fällen ergänzen Sie einen bestehenden „Zur Produktdetailseite“-Button um einen zusätzlichen „In den Warenkorb“-Button wie bei euronics.de. Das komplette Entfernendes des „Zur Produktdetailseite“-Button führt wahrscheinlich dazu, dass einige Besucher nicht verstehen, dass es noch weitere Informationen zu dem Produkt gibt.
Verfügt Ihr Shop über eine Vergleichs- und/oder Merkfunktion? Dann lassen Sie Besucher diese direkt von der Kategorieseite verwenden. Auf diese Weise können sich Besucher im Fashion-Bereich zum Beispiel ein komplettes Outfit zusammenstellen und im Technik-Bereich Produkte sehr schnell miteinander vergleichen.
Ein Beispiel von asos.de:
Auf notebooksbilliger.de befinden sich Symbole zum Merken und Vergleichen unterhalb des Call-to-Actions:
Wie stark sind Artikel mit Angebotspreisen aktuell hervorgehoben? Wenn Sie die Sale-Artikel noch stärker kenntlich machen, werden diese noch eher gekauft. Dies führt ggf. zu einer besseren Conversion-Rate.
Heben Sie Angebotsprodukte zum Beispiel deutlich durch rote Störer hervor. Dies können entweder Banner sein, die in eine Ecke der Produktkachel gelegt wird, ein roter Kreis mit Prozentzeichen/Sale oder Angebot oder direkt die in Rot geschriebene Ersparnis des Kunden.
Bei Beispiel von odlo.de:
Ihre Besucher brauchen sehr lange und viele Besuche bevor sie zum Kaufabschluss kommen? Erhöhen Sie, gerade bei teuren Produkten, die Dringlichkeit, sofort den Kaufabschluss zu suchen, und nicht noch bei der Konkurrenz zu vergleichen.
Hypothese: Rabatt-Aktionen und Countdowns erhöhen die Dringlichkeit der Bestellung. Dies führt zu einer höheren Conversion-Rate und einem schnelleren Kauf. Testen Sie Dringlichkeitsbotschaften oder Rabatt-Aktionen auf der Kategorieseite.
Bei Beispiel von teufel.de:
Auch die Subnavigation auf der Kategorieseite kann durch A/B-Tests optimiert werden.
Die Subnavigation in der linken Marginalspalte ist entweder alphabetisch oder nach Anzahl der Zugriffe sortiert.
Sortieren Sie die Kategorien nach ihrer Wichtigkeit für die Besucher, wenn sie aktuell alphabetisch sortiert sind. So muss ein Großteil der Besucher nicht lange die Kategorieliste durchlesen, um zu der bevorzugten Kategorie zu kommen.
Falls die Anzahl der Kategorien für viele Kategorien hoch ist, dann kann es Besucher viel Zeit kosten, diese zu verstehen.
Reduzieren Sie in einer Testvariante die Anzahl der gelisteten Kategorien und verstecken weniger wichtige Kategorien hinter einem Link „Weitere“.
Beispielhafter Wireframe:
Aus vielen Produkten auf der Kategorieseite das passende auszuwählen, ist manchmal schwierig. Falls Besucher viele Kategorieseiten ansehen, aber keine Produktdetailseite ansehen, deutet dies darauf hin, dass sie etwas nicht finden. Sehen Sie sich hierfür den entsprechenden Trichter an (siehe Praxisguide „Conversion-Trichter definieren“).
Durch das Einblenden eines Live-Chats, kann der Besucher schnell zum gesuchten Produkt geleitet werden. Spielen Sie nach einer bestimmten Anzahl aufgerufener Kategorieseiten eine solche Aufforderung aus. Weisen Sie hier darauf hin, dass Support-Mitarbeiter bei der Suche nach passenden Produkt helfen können. Voraussetzung hierfür ist natürlich, dass die Mitarbeiter entsprechend geschult sind.
Der Praxisguide „Live-Chat für Vertrieb und Support“ erläutert alle Anforderungen und erste Schritte für den Einsatz eines Live-Chats. Eine Anbieter-Auswahl finden Sie hier: https://conversionboosting.com/markt/software/live-chat/
[1] Unser Praxisguide „Implementierung eines Data Layers“ zeigt weitere Vorteile eines Data-Layers.