Usability-Best-Practices für die Filterfunktion im Online-Shop
Nutzen Sie beim Onlineshopping auch die Filterfunktion?
Ja? Kein Wunder, schließlich erleichtert Sie uns die Suche nach den passenden Produkten enorm:
- Schlichtes weißes Businesshemd im mittleren Preisrahmen in Größe L
- Rote Lackschuhe mit kleinem Absatz in Größe 39
- 13“ Laptop mit 8GB RAM, 2,4 GHz, unter 500€
Doch welche Anforderungen muss ein Filtersystem erfüllen, um die Nutzer beim Shopping ideal zu unterstützen und die Usability zu steigern?
Und wann, wie und wo sollten Filter überhaupt angeboten werden?
Aus unseren RapidUsertests konnten wir einige Best-Practices für gute Filter ableiten. Und wir geben Ihnen Tipps, wie Sie Ihre Filterfunktion auf Nutzerfreundlichkeit testen können.
Inhaltsverzeichnis
Warum sollte ich eine Filterfunktion in meinem Online-Shop anbieten?
Filter dienen der Eingrenzung von Produkten. Gerade bei vielen Produkten bieten sie den Nutzern Orientierung, erhöhen die Usability und die Kaufentscheidung wird erleichtert.
Welche Filter sollte ich in meinem Online-Shop anbieten?
Entscheidungskriterien beachten: Welche Filter Sie anbieten sollten, ist sehr von den Informationen abhängig, die für die Kaufentscheidung benötigt werden. Sie sollten sich bei der Filter-Auswahl an diesen Entscheidungskriterien des Nutzers orientieren. Die essentielle Frage lautet also: Was müssen meine Kunden über das Produkt wissen, um ihre Kaufentscheidung treffen zu können?
Auch innerhalb eines Shops können Produkte völlig unterschiedliche Entscheidungskriterien haben und damit andere Filter erfordern.
Fokus auf nicht-visuelle Eigenschaften: Sie sollten sich dabei vor allem auf Produkteigenschaften konzentrieren, die nicht durch das Produktfoto abgedeckt werden. Bei einem großen Angebot ist es aber sinnvoll, auch nach äußerlichen Eigenschaften, wie der Farbe, filtern zu können – wenn dies für die Kaufentscheidung relevant ist.
Sortierungsmöglichkeiten anbieten: Auch bei einem guten Filtersystem, sollten Sie Ihren Kunden ermöglichen, die gefilterten Ergebnisse nach bestimmten Kriterien zu sortieren (z.B. Preis, Bewertungen). Bei der Auswahl der Sortierungsmöglichkeiten helfen Ihnen auch die Entscheidungskriterien.
Wie finde ich die Entscheidungskriterien meiner Nutzer heraus?
Da die Auswahl der richtigen Filter und Sortierungen elementar für eine hohe Conversion-Rate sein kann, sollten Sie sich nicht auf Einzelmeinungen verlassen.
Wie Ihre Nutzer zu einer Kaufentscheidung kommen, können Sie mit User-Research herausfinden.
In einem Crowd-Usability-Test können Sie sich außerdem absichern, ob Sie sich für die richtigen Filter entschieden haben. Lassen Sie dazu die Tester dazu nach einem Produkt in Ihrem Shop suchen und fragen sie zu Beginn:
Was sind deine Kriterien für das, was du gleich suchst? Welche Informationen brauchst du, um deine Entscheidung zu treffen?
Wie viele Filter sollte ich anbieten?
Auch die nötige Anzahl der Filter ist von Produkt und Angebot abhängig. Hier einige Faustregeln:
- Bieten Sie die Filter an, die für die meisten Nutzer entscheidend sind. Zu viele Filter können die Suche auch schnell unübersichtlich machen.
- Je mehr Produkte Sie in einer Kategorie anbieten, desto detaillierter sollte die Filtermöglichkeit sein.
- Für mehr Übersichtlichkeit: Platzieren Sie die relevantesten Filter (die auf jeden Fall jeder braucht) nach oben.
Falls Sie nur sehr wenige Produkte anbieten, brauchen Sie eventuell keine Filter. In diesem Fall sollten die wichtigsten Entscheidungskriterien aber schon auf der Übersichtsseite sichtbar sein.
Wo sollten die Filter platziert werden?
Die meisten Shops platzieren die Filter auf der linken Seite oder oberhalb der Produktübersicht. So gehen Sie sicher, dass die Filterfunktion nicht übersehen wird.
Vorteile der Platzierung links:
- Die etablierteste Variante
- Es ist leichter, mehrere Filter gleichzeitig auszuwählen
- Die Nutzer müssen nicht jedes Mal wieder ganz nach oben scrollen, um die Filter anzupassen.
Abb. 2: Mister Spex platziert die Filter auf der linken Seite, so wie die meisten Onlineshops.
Vorteile der Platzierung oben:
- Sie sind auffälliger platziert, so dass auch ungeübte Filternutzer sie nicht übersehen.
- Die Reihenfolge der Filter ist nicht so bedeutend, wie auf der linken Seite, da die Filter zum Teil auch nebeneinander platziert werden.
Abb. 3: Zalando platziert die Filter oberhalb der Produktübersicht.
Wie sollte ich die Filterfunktion darstellen?
Je nach Art des Filters haben sich Schieberegler und Checkboxen bewährt. Außerdem wichtig:
Live-Aktualisierungen: In Usability-Tests von Desktop-Seiten haben sich Live-Aktualisierungen bisher als nützlich erwiesen. Wird ein neuer Filter ausgewählt, sollte sich die Produktübersicht also bereits aktualisieren – allerdings ohne, dass die gesamte Seite neugeladen wird. So wird vermieden, dass die Orientierung des Nutzers auf der Seite durch ein „Hochspringen“ verloren geht. Besonders positiv ist die Variante der Live-Aktualisierung, wenn der Nutzer ohne konkrete Filtervorstellungen an die Suche herantritt und sich eher im „Explorationsmodus“ befindet. Er steigt direkt in die Produktauswahl ein.
Mehrfachauswahl: Im Gegensatz zur Darstellungsweise in Mobile-Shops finden wir bei Desktop-Anwendungen erstaunlich selten die Möglichkeit einer Mehrfachauswahl mit anschließendem „Filter anwenden“-Button. Hier ist zu bedenken, dass Auswahlmöglichkeiten sich zwangsläufig gegenseitig bedingen und sich Produktverfügbarkeiten so durch zusätzliche Filter verändern können (z. B. kein Smartphone der Marke Samsung unter 300€ verfügbar). Eine Aktualisierung wird an gegebener Stelle also ohnehin notwendig.
Des Weiteren verstecken Mehrfachwahl-Filtermenüs oft die feineren Unterfiltermöglichkeiten, die sich erst durch Öffnen der entsprechenden Oberkategorie offenbaren und dem Nutzer hier einen direkten Gesamtüberblick verwehren.
Technische Herausforderung: Aus technischer Sicht bedeutet jede einzelne Filterauswahl (jedes „Häkchensetzen“) einen unabhängigen Request, der nicht mit anderen Auswahlmöglichkeiten kombiniert in einem Ausführungsbefehl gecodet werden kann. Jede Filteranfrage wird demnach auf dem Nutzerpfad bis zum „Filter anwenden“-Button ohnehin einzeln und unverzüglich an den Server gesendet und umgesetzt.
Anzahl der Produkte anzeigen: In jedem Fall sollte angezeigt werden, wie viele Produkte sich in einem Filter befinden, z.B. wie viele Produkte es von einer bestimmten Marke gibt. (z.B. Otto)
Kein Ergebnis: Tritt der Fall ein, dass nach einer Filterung keine Ergebnisse mehr angezeigt werden konnten, sollten Sie dem Nutzer einen guten Ausweg anbieten. (z.B. „Wenn Sie [diesen Filter] aufheben, bekommen Sie wieder Ergebnisse.“)
Faustregel: Identifizieren Sie Fälle, in denen der Nutzer eine Mehrfachauswahl mit hoher Wahrscheinlichkeit als zwingend notwendig erachtet. Ermöglichen Sie ihm diese. In allen anderen Fällen haben sich Live-Aktualisierungen bewährt.
Abb. 4: Otto.de zeigt an, wie viele Produkte sich innerhalb eines Filters befinden. Die Anzahl wird bei jeder Filterauswahl aktualisiert.
Welche Besonderheiten gibt es bei mobilen Geräten?
Auf den kleinen Displays von mobilen Geräten gibt es einige Besonderheiten bei der Darstellung von Filtern:
- Für die Filteransicht sollte die gesamte Größe des Bildschirms genutzt werden. Ein Akkordeon-Menü macht die Ansicht übersichtlich. (Abb. 5)
- Anders als am Desktop sollte sich die Ansicht NICHT nach jeder Filterauswahl aktualisieren, sonst drohen Orientierungsverlust und Frustration bei langen Ladezeiten. Verwenden Sie stattdessen einen Button „Filter anwenden“, der während der Filterwahl immer sichtbar ist.
- Vermeiden Sie „Doppeltes Scrollen“. Wenn die gesamte Seite gescrollt werden kann, sollten die Filter also keine eigene unabhängige Scroll-Möglichkeit haben.
In einem Akkordeon-Menü kann dies verhindert werden, indem Sie alle Optionen eines Filters anzeigen, wenn dieser ausgeklappt wird. Bei sehr vielen Optionen können Sie dann z.B. die 20 meistgenutzten Optionen anzeigen und am Ende der Liste einen „mehr“-Button anbieten, um alle weiteren Optionen anzuzeigen.
Abb. 5: Auf der Desktop-Seite aktualisiert Booking.com die Ergebnisse bei jeder Filter-Auswahl. In Ihrer App gibt es hingegen einen „Ergebnisse anzeigen“-Button. Die gefilterten Unterkünfte werden also erst angezeigt, nachdem alle benötigten Filter ausgewählt wurden.
Usability-Tests von Filtern – Best Practices
Auch wenn Sie alle diese Hinweise beachtet haben, sollten sie die Nutzerfreundlichkeit Ihrer Filterfunktion mit Ihrer Zielgruppe testen. Werden die Filter gefunden und genutzt? Bieten Sie wirklich alle notwendigen Filter an? Sind die Filterergebnisse erwartungskonform?
Deshalb hier noch einige Tipps für Usability-Tests der Filterfunktion:
- Stellen Sie die Aufgaben aus der Perspektive des Nutzern, so dass er sich mit der Produktsuche identifizieren kann:„Suche nach einer Hose, die deinen (Preis-)Vorstellungen entspricht und die du selbst kaufen würdest.“Vermeiden Sie dabei aber Schlüsselwörter wie „filtere“, „grenze ein“, um zu sehen, ob die Filter gefunden und genutzt werden. Nur so können Sie natürliche Nutzerverhalten beobachten.
- Gehen Sie in einer nachfolgenden Aufgabe oder der Nachbefragung noch einmal auf die Filterfunktion ein:„Hast du die Filterfunktion genutzt? Haben dir noch weitere Filtermöglichkeiten gefehlt?“
Zusammenfassung: Was bei der Filterfunktion im Online-Shop beachtet werden muss
Die Filterfunktion erleichtert es Ihren Kunden, ein Produkt zu finden, das ihren Vorstellungen entspricht. Das müssen Sie für eine gute Usability beachten:
- Entscheidungskriterien Ihrer Kunden analysieren
- Filter anhand der wichtigsten Entscheidungskriterien auswählen
- Relevanteste Filter oben platzieren
- Filterfunktion links oder oberhalb der Produktübersicht platzieren
- Auf Desktop: Mehrfachauswahl dann, wenn es wahrscheinlich ist, dass der Nutzer diese als notwendig empfindet. Ansonsten: Live-Aktualisierungen.
- Auf mobile: „Filter anwenden“-Button
- Usability-Tests der Filterfunktion durchführen
Das könnte Sie auch interessieren: Viele weitere Tipps, wie Sie Ihren Onlineshop optimieren können
UX-Specialists bei Userlutions – Das interdisziplinare Team von Userlutions besteht aus Psychologen, Interface-Designern sowie Kognitions-, Kommunikations- und Sozialwissenschaftlern. Im Rahmen unseres regelmäßigen Wissensaustauschs diskutieren wir verschiedenste Themen rund um User-Experience und Usability. Interessante Ergebnisse aus diesen Gesprächen veröffentlichen wir daher als „Userlutions Team“
