Praxisguide
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.
Autor
Julian Kleinknecht
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:
Bei der Implementierung einer Faceted Search bestehen zwei Möglichkeiten:
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:
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.
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.
Keine Anmeldung notwendig
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.
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.
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.)
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:
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:
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.
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.
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:
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 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:
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:
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.
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.
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:
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.
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.
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.
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:
Kann mehr als ein Filter gleichzeitig angewendet werden? Dies kann auf zwei verschiedene Weisen verstanden werden. Beide sollten auf Kategorieseiten erfüllt sein:
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):
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.
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.