Praxisguide

Kategorieseiten in Online-Shops: Filter richtig einsetzen

Filter sind einer der wichtigsten Bestandteile fast jeder Kategorieseite in Online-Shops. Mit diesen können Nutzer die großen Produktlisten in Kategorien innerhalb weniger Sekunden individuell eingrenzen. Je mehr Produkte ein Shop anbietet, desto wichtiger ist es, die Auswahl eingrenzen zu können.

In diesem Praxisguide stellen wir eine umfassende Liste aller Empfehlungen zur Umsetzung von Filtern vor. Außerdem zeigen wir, wie deren Verwendung am besten gemessen und analysiert werden kann.

1. Einleitung

Filter sind einer der wichtigsten Bestandteile fast jeder Kategorieseite in Online-Shops. Mit diesen können Nutzer die großen Produktlisten in Kategorien innerhalb weniger Sekunden individuell eingrenzen. Je mehr Produkte ein Shop anbietet, desto wichtiger ist es, die Auswahl einzugrenzen. Insbesondere für Besucher mit einer relativ klaren Vorstellung davon, welches Produkt sie suchen, sind Filter relevant.

Sinnvoll ist deren Einsatz jedoch nur, wenn das Sortiment auch ausreichend groß ist. Sollte eine (Unter-)kategorie nur fünf Produkte beinhalten, braucht der Kunde auch keine Filteroptionen. Blenden Sie Filter hier aus.

Für alle anderen Shops bzw. Kategorien stellen wir in diesem Praxisguide eine umfassende Liste aller Empfehlungen zur Umsetzung von Filtern vor. Außerdem zeigen wir, wie deren Verwendung am besten gemessen und analysiert werden kann.

Zur weiteren Optimierung von Kategorieseiten verweisen wir auf diese Dokumente:

2. Technische Umsetzung: AJAX statt Reload

Bei der Implementierung einer Faceted Search bestehen zwei Möglichkeiten:

  • 1.Bei der klassischen Lösung, die man heutzutage bei den großen Shops kaum noch findet, wird nach jedem Klick des Anwenders auf einen Filter die komplette Seite neu geladen und die Produktliste aktualisiert.
  • 2.Bei den meisten Shops werden jedoch, wenn ein Filter ausgewählt wird, die Produktliste ohne Neuladen der Seite aktualisiert.

Wir empfehlen unbedingt letztere Variante. Besucher sparen sich so Wartezeit. Da alle großen Online-Shops dies mittlerweile so umsetzen, haben sich die meisten Besucher daran gewöhnt und stören sich daran, wenn keine Aktualisierung per AJAX zum Einsatz kommt. Ein Beispiel für sehr schnell angewendete Filter ist asos.de.

AJAX-Filter sind für fast alle gängigen Shopsysteme als (möglicherweise kostenpflichtige) Plugins verfügbar.

Achten Sie auch bei AJAX-Filtern auf diese Punkte:

2.1 Signalisieren, dass etwas passiert

Anders als beim Neuladen der Seite gibt der Browser keine Rückmeldung dazu, dass etwas passiert. Geben Sie Besuchern deshalb Rückmeldung, dass der/die Filter gerade angewendet werden. Esprit setzt dies beispielsweise mit einem kleinen Zahnrad um, das sich kurz über den Bildschirm legt.

2.2 Browser-History umschreiben

Wird die Kategorieseite per AJAX verändert, funktioniert der Zurück-Button des Browsers nicht mehr wie erwartet. Statt zum Status der Kategorieseite vor der Anwendung des Filters wird man „weiter zurück“ geleitet.

Um dies zu vermeiden, kann die Browser History umgeschrieben werden, um die Anwendung der Filter als Aufruf einer neuen Seite zu simulieren. Weitere Informationen zur history API finden Sie hier: http://diveintohtml5.info/history.html.

Weiterbildung per eLearning.

Werde zum Spezialisten für eCommerce-Optimierung
  • Branchenbekanntes Zertifikat
  • Zeitlich unlimitierter Zugang zu allen Lerninhalten
  • Zu jeder Zeit und an jedem Ort lernen

Keine Anmeldung notwendig

2.3 Ladezeiten beachten

Obwohl Veränderungen per AJAX meistens schneller laden als eine komplette Seite, achten Sie auch hier auf geringe Wartezeiten für Besucher. Anders als neue Seitenaufrufe können Sie dies nicht ohne Weiteres per Webanalyse-Tool messen. Stattdessen muss die Messung als Ereignis (Event) erfolgen und manuell an das Webanalyse-Tool übermittelt werden.

3. Bezeichnung und Aufforderung zum Filtern

Die meisten Shops platzieren Filter ohne jeglichen Kommentar auf Kategorieseiten. Sie nehmen also an, dass Besucher sofort verstehen, wie Filter funktionieren. Bei einem jüngeren und Internet affinen Publikum trifft dies sicherlich zu. Bei einer älteren Zielgruppe ist eine kurze Erläuterung der Filter jedoch sinnvoll.

Sportscheck.de verwendet beispielsweise diese Überschrift:

Bei gartenxxl.de kommt die Formulierung „Suche verfeinern“ zum Einsatz:

Den Fachbegriff „Filter“ sollten Sie dagegen wenn möglich vermeiden, da er nicht allen Besuchern geläufig ist. Bei giggs.de lautet die Überschrift „Ergebnisse filtern“:

Falls Sie die Filter als für Besucher sehr hilfreich einschätzen, können Sie diese auch konkret zu Verwendung der Filter auffordern. Mister Spex tut dies mithilfe eines kleinen Layers:

Wie häufig Besucher Filter verwenden, hängt neben der Aufforderung natürlich auch von der Platzierung der Filter ab. Dazu kommen wir jetzt.

4. Platzierung der Filter

Die erlernte Position für Filter ist sicherlich links neben der Produktliste. Die meisten Online-Shops gehen diesen Weg und Besucher erwarten Filter auch an dieser Stelle.

In diesem Fall empfiehlt es sich, die Filter links „sticky“ immer im sichtbaren Bereich anzuzeigen. (Beispiel von Asos.)

4.1 Horizontale Filter

Wenn am linken Bereich jedoch eine Navigation platziert ist und diese viele Elemente enthält, sind die Filter links nicht optimal. Dann würden sie weit nach unten rutschen und sind mehr sichtbar sein. In diesem Fall können die Filter horizontal über den Produkten angeordnet werden. Stellen Sie in diesem Fall unbedingt sicher, dass die Filter nicht zu viel Platz einnehmen.

Bei interaquaristik.de nehmen die Filter zum Beispiel so viel Platz ein, dass bei manchen Bildschirmauflösungen gar keine Produkte sichtbar sind. In diesem Fall spekulieren Besucher möglicherweise, dass sie filtern müssen, um Produkte angezeigt zu bekommen.

Besser setzt die Globetrotter um:

  • Bei langen Filterlisten wird die Höhe begrenzt und ein Scroll-Balken angezeigt
  • Es wird nur eine bestimmte Anzahl an Filtern angezeigt. Der Button „mehr Filter anzeigen“ zeigt die restlichen an.

4.2 Sichtbarkeit der Filter

Die Filter bei Globetrotter werden ohne Zweifel von jedem Besucher gesehen. Bei Esprit ist dies anders; die horizontalen Filter sind hier sehr unauffällig:

Falls für Ihren Shop Filter eine wichtige Rolle spielen, sollten diese auffälliger platziert werden. Die rot hinterlegten Boxen bei Street One erledigen diese Aufgabe besser:

Diese Methoden helfen Ihnen, die Sichtbarkeit der Filter besser einzuschätzen:

  • Messen Sie deren Verwendung (siehe Kapitel 5.2).
  • Führen Sie ein virtuelles Eye-Tracking (Aufmerksamkeitsanalyse) durch.
  • Führen Sie einen Remote Usability Test durch.

5. Welche Filter anzeigen?

Passen Sie Filteroptionen an Ihr Sortiment an. Ein Elektronik-Shop wird andere Filter anbieten müssen als ein Online-Spielzeugladen. Doch die Filter, die Sie anbieten sollten, unterscheiden sich nicht nur von Shop zu Shop, sondern auch innerhalb eines Shops von Kategorie zu Kategorie.

5.1 Für jede Kategorie individuell auswählen

Bestimmten Sie für jede Kategorie die passenden Filter, welche Kunden einen wirklichen Mehrwert bieten. Gehen Sie jede Kategorie und Unterkategorie durch und bewerten die angezeigten Filter – mühsam, aber es lohnt sich.

Bei A.T.U. ist der Preis und die Marke von Auto-Batterien beispielsweise von dem Fahrzeughersteller platziert. Dieser ist jedoch wahrscheinlich der erste Filter, den Besucher anwenden möchten. Er sollte also entsprechend ganz oben platziert sein.

5.2 Verwendung der Filter messen

Die Verwendung von Filtern zu messen, ist mit den meisten Webanalyse-Tools recht einfach. Hierzu kommen Ereignisse zum Einsatz.

Bevor Sie aber anfangen, den entsprechenden Code in die Website zu integrieren, überlegen Sie sich kurz, welche Informationen aufgezeichnet werden sollen. In den meisten Fällen sind es diese beiden Informationen:

  • Art des Filters, zum Beispiel Größe, Farbe oder Preis
  • Auswahl des obigen Filters, zum Beispiel 41, rot, oder 39,95

Ein beispielhafter JavaScript-Code für Google Analytics sieht so aus:

<script>
$(„a.filterelement“).on(„click“, function() {
var kategorie = $(this).parents(„div.exp“).find(„div.filterHeader“).text();
var value = jQuery(this).text();
ga(’send‘, ‚event‘, ‚Filter‘, kategorie, value);
});
</script>

Das Vorgehen ist sehr einfach:

  • In der zweiten Zeile werden alle Klicks auf einen Filter (Link mit der Klasse „filterelement“ registriert.
  • In den Variablen kategorie und value wird die Art des Filters (zum Beispiel „Größe“) sowie der Wert (zum Beispiel „42“) gespeichert. Für kategorie wird nach dem div mit der Klasse „filterHeader“ gesucht.
  • Diese beiden Informationen werden dann in Zeile 5 an Google Analytics gesendet.

In diesem Beispiel wird anscheinend der Größenfilter am häufigsten verwendet:

Ein Klick auf „Größe“ offenbart auch die am häufigsten ausgewählten Größen:

5.3 Nur Filter mit mehr als einer Option anzeigen

Gibt es für bestimmte Kategorien Filter mit nur einer Auswahl? Dann zeigen Sie diese Auswahlmöglichkeit nicht an, sondern machen die restlichen Filter übersichtlicher.

Ein Beispiel von Zalando:

6. Darstellung der einzelnen Filter

6.1 Checkboxen einsetzen

Um eindeutig zu kommunizieren, dass es sich um Filter und nicht Kategorien handelt, eigenen sich Checkboxen. Diese signalisieren, dass sie entweder ein- oder ausgeschaltet werden können.

Beim Filter „Marke“ wurde dies gut umgesetzt. Beim Fahrzeughersteller werden dagegen Dreiecke eingesetzt, was zu Verwirrung führen kann. Besser: einheitlich gestalten.

6.2 Anzahl der Ergebnisse anzeigen

Zeigen Sie die Anzahl der Produkte an, die nach einem Klick auf einen Filter angezeigt werden. Dies hilft Besuchern einzuschätzen, ob nur dieser eine oder noch weitere Filter angewendet werden sollten.

6.3 Symbole und Visualisierungen einsetzen

Symbole und Visualisierungen können lange Filterlisten auflockern und Besuchern schneller vermitteln, welche Produkte gekauft werden können.

Zwei Beispiele von „Mister Spex“ und „Stiefelparadies.de“.


Wenn ein Farbfilter verfügbar ist, achten Sie darauf, dass es neben den Farbdarstellungen auch Erläuterungen der Farben gibt. Hierzu eignet sich ein solcher MouseOver:

6.4 Lange Listen verkürzen

Bei einer großen Auswahl von Filtern sollten Sie die Mehrzahl ausblenden und nur nach einem Klick auf „mehr“ oder „Alle Filter anzeigen“ einblenden. Das sorgt für eine bessere Übersichtlichkeit. Ein zusätzliches Suchfeld macht die Auswahl noch einfacher (Beispiel: sportscheck.de.)

Zeigen Sie ein solches Suchfeld aber nur an, wenn es wirklich Scroll-Balken gibt. Sonst kann der Platz eingespart werden.

6.5 Filter eingeklappt lassen

Besteht die Möglichkeit Filter einzuklappen? Wenn stellen Sie sicher, dass diese Auswahl gespeichert wird. Sonst frustriert es Besucher, dass sie Filter mehrmals einklappen müssen.

Bei Asos bleibt der Filter „Farbe“ eingeklappt.

6.6 Schieberegler erleichtern die Eingabe

Schieberegler erleichtern Besuchern die Eingabe von Zahlen wie der Preisspanne.

Alternativ zum Preisschieberegler können Sie Ihren Kunden natürlich auch die Möglichkeit bieten, ihre Preisvorstellungen manuell einzutragen – oder beides, wie das Beispiel von Medion zeigt:

Notebookbilliger.de ergänzt die Schieberegler um die Anzeige der Verteilung der vorhandenen Produkte.

7. Wie Filter anwenden?

Sollten Filter direkt nach dem Klick auf einen Filter angewendet werden? Oder soll die Auswahl erst durch einen Button (wie hier im Beispiel von Zalando) erfolgen?

Die Antwort hängt davon ab, wie Besucher die Filter Ihrer Kategorieseite verwenden. Werden pro Besucher für eine Kategorie (zum Beispiel Größe) mehrere Werte ausgewählt? Dann wenden Sie die Filter nicht direkt an. Schauen Sie in die gemessenen Daten (siehe Kapitel 5.2).

Falls ein Button zum Anwenden der Filter zum Einsatz kommt, stellen Sie sicher, dass dieser intuitiv verständlich ist. Am besten beschriften Sie ihn mit „übernehmen“ oder „Filter anwenden.“

Bei gartenxxl.de kommt dieser kleine grüne Pfeil zum Einsatz, welche von manchen Besuchern nicht sofort verstanden wird:

8. Filter kombinierbar machen

Kann mehr als ein Filter gleichzeitig angewendet werden? Dies kann auf zwei verschiedene Weisen verstanden werden. Beide sollten auf Kategorieseiten erfüllt sein:

  • Es sollten Filter verschiedener Kategorien (Größe und Farbe) gleichzeitig anwendbar sein.
  • Es sollten mehrere Werte der gleichen Kategorie (Größe 41 und 42) gleichzeitig als Filter angelegt werden können.

9. Informationen über ausgewählte Filter anzeigen und zurücksetzen

Bei der Implementierung der Filter sollten Sie unbedingt daran denken, dass Besucher jederzeit sehen sollten, welche Filter aktiv sind. Sonst kann dies zu großen Verwirrungen und Unzufriedenheit führen.

Außerdem sollte es Besuchern einfach gemacht werden, gewählte Filter wieder zu entfernen. Statt nur einem kleinen „x“ ist eine Formulierung wie „Filter zurücksetzen“ besser.

Beim Online-Shop von Lloyd werden beide Anforderungen vorbildlich umgesetzt. Checkboxen symbolisieren sehr gut, dass es sich um Filter handelt, die aktiviert und wieder deaktiviert werden können.

Noch auffälliger macht es Zalando. Dort werden die aktivierten Filter nochmals getrennt angezeigt:

Wie Filter nicht umgesetzt werden sollten, zeigt Weltbild. Nicht nur, dass nur ein Filter gleichzeitig ausgewählt werden kann, die aktivierten Filter und der Zurücksetzen-Button sind außerdem sehr unauffällig gestaltet (unten links):

10. Qualität der hinterlegten Daten überprüfen

Alle bisherigen Tipps beziehen sich auf die Darstellung und Usability von Filtern. Vergessen Sie jedoch nicht, auch deren Qualität zu überprüfen. Dies geht in zwei Richtungen.

  • Erstens sollten alle Produkte über strukturierte Daten verfügen. Das heißt, wenn der Filter „gelb“ ausgewählt wird, sollten auch alle gelben T-Shirts angezeigt werden.
  • Zweitens sollten beim Filter „gelb“ keine roten T-Shirts erscheinen.

Die erste Anforderung ist schwieriger zu überprüfen. Statt hier alle Filter durchzuprobieren, ist der Weg über das Backend vielleicht gangbarer. Überprüfen Sie, ob es Produkte ohne strukturierte Daten zu den Filtern gibt.

ConversionBoosting