Wenn 1.712 Treffer zu viel des Guten sind – Good Practices für die Gestaltung von After Search Navigations

Um den Nutzer beim Auffinden passender Produkte bestmöglich zu unterstützen, werden in den meisten Online-Shops verschiedene Filter- und Sortierfunktionen angeboten. Gerade nach konkreten Suchanfragen, wenn der Nutzer also recht gezielt vorgeht, soll ihm die so genannte After Search Navigation helfen. Aber auch bei dem Weg über die Produktkategorien (Navigationsstruktur), erhält der Nutzer auf den Produktübersichtsseiten meist Filter. Dies ist eine der Erkenntnisse aus der Recherche zum Thema: Bei einigen Shops sind die Filter stets gleich, egal ob der Nutzer über die Suche oder über die Navigation kommt. Bei anderen gibt es unterschiedliche Filter.

Und auch sonst lassen sich wenige shopübergreifende Gemeinsamkeiten erkennen. Noch immer werden Filter entweder in der linken Spalte oder horizontal oberhalb der Produktliste angezeigt. Auch die Reihenfolge und die Art der Filter sind verschieden. Nicht zuletzt gibt es sehr unterschiedliche Möglichkeiten, den gesetzten Filter zu erkennen und wieder aufzuheben.

Bezüglich der Position lässt sich jedoch ein leichter Vorteil für die linkseitige Positionierung erkennen. Dies wurde auch im Shop von Adidas so umgesetzt. Auffällig ist hier die deutliche Hervorhebung der gesetzten Filter, die sich alle oberhalb der zur Verfügung stehenden Filter befinden. Das Aufheben der Filter fällt dadurch besonders leicht.

adidas Filter links

adidas.de: Die gesetzten Filter sind in roter Schrift am Anfang der linken Spalte positioniert

Im nächsten Beispiel, dem Online-Shop Javari, sind die Filter ebenfalls links positioniert. Die gesetzten Filter sind jedoch durch eine schwarze Füllfarbe gekennzeichnet und werden nicht separat angezeigt. Angesichts der Vielzahl von Filtern erscheint dies auch sinnvoll, denn der Abstand zwischen dem Filter selbst und dem ausgewählten Kriterium wäre sonst sehr groß. Bei Javari fällt zudem auf, dass die Filter sehr stark auf dem Kontext zugeschnitten sind. Sobald eine Kategorie ausgewählt ist, kann das System eindeutige Filterkriterien benennen, die für alle Produkte dieser Kategorie vergeben sind. Außerdem erkennt der Nutzer, welche Kriterien aufgrund seiner aktuellen Auswahl gerade nicht zur Verfügung stehen (z. B. „Lack“ bei Material).

javari Filter gesetzt

javari.de: Die gesetzten Filter sind mit schwarzer Füllfarbe gekennzeichnet. Nicht zur Verfügung stehende Filterkriterien sind grau geschrieben und nicht anklickbar. Die Produktliste aktualisiert sich dynamisch.

Sehr stark auf den Kontext, also die Produktkategorie zugeschnitten, sind die Filter auch bei Zappos. Die Gestaltung ist durch die vielen Checkboxen zwar wenig ansprechend, jedoch sind hier sehr viele verschiedene Merkmale auswählbar. Zudem sieht der Nutzer durch die Anzahl in Klammern direkt, wie viele Produkte mit diesem Merkmal zur Verfügung stehen. Je tiefer man sich in der Navigationsstruktur befindet, desto spezifischer auch die Filter. Die gesetzten Filter werden oberhalb der Liste horizontal angezeigt.

zappos Filter links

zappos.com: Sehr viele und stark auf den Kontext zugeschnittene Filter, die allein schon aus Platzgründen untereinander in der linken Spalte angeboten werden.

Nicht selten wird dem Nutzer die Möglichkeit gegeben, einzelne Filter „einzuklappen“, wenn er sie nicht braucht. Allerdings zeigen viele Shops erst einmal alles an und es ist zu bezweifeln, ob Nutzer dann tatsächlich bewusst einzelne Filter schließen. Wahrscheinlicher ist es, dass Filter geöffnet werden, wenn diese gebraucht werden. Bei Mirapodo beispielsweise werden, um den Mechanismus zu verdeutlichen, einige Filter auf- und einige zugeklappt dargestellt.

mirapodo Filter links Suche

Mirapodo: Das Auf- und Zuklappen der Filter wird über Plus- und Minussymbole verdeutlicht.

Ein interessantes Beispiel für horizontale Filter zeigt Deichmann. Hier wird sehr stark über Symbole vermittelt, worauf sich der Filter bezieht. Allerdings muss hier der gesamte Filterbereich geöffnet werden. Die Visualisierung, auch der Produktkategorien, über Symbole ist jedoch gut gelungen.

deichmann Filter Symbole

deichmann.de: Visualisierung der Filter über Symbole

Im Bereich Technik sind natürlich ganz andere Filter gefragt. Hier wirkt auch die Anmutung der Filter eher sachlich und funktional. Eine interessante Zusatzinformation bietet der Preisfilter bei notebooksbilliger.de: Hier kann der Nutzer über eine Art Diagramm sehen, in welchem Preisbereich wie viele Produkte vorhanden sind.

notebooksbilliger Filter oben

noteboolsbilliger.de: Die Anzahl der Produkte in einer bestimmten Preisspanne sind über Kurve visualisiert.

Nicht nur kontextspezifisch, sondern auch nutzerspezifisch?

Die große Varianz bei der Gestaltung von Filtern zeigt, dass es den „Königsweg“ nicht gibt. Daher ist es wichtig, genau zu wissen, wie Nutzer sich im Shop bewegen und was ihnen bei der Produktsuche wichtig ist. Zum einen können hier Webanalyse-Daten herangezogen werden. Diese geben Aufschluss darüber, welche Wege eingeschlagen werden, welche Filter oft genutzt werden und an welchen Stellen die Nutzer „aufgeben“. Eine tiefergehende Ursachenanalyse kann dann durch qualitative Methoden erfolgen.

Daneben sollte folgendes beachtet werden:

  • Das Setzen und Aufheben von Filtern muss schnell und intuitiv möglich sein. Dazu muss auch gut erkennbar sein, welche Filter aktiv sind.
  • Der Nutzer sollte absehen können, wie stark die Produktliste durch einen Filter eingeschränkt wird. Es ist sehr frustrierend, einen Filter zu setzen und anschließend keine Produkte mehr zu sehen.
  • Um so bald wie möglich kontextsensitive Filter anbieten zu können, sollte die Auswahl der Produktkategorie frühzeitig erfolgen (oben positionieren). Dies setzt jedoch eine gute Navigationsstruktur voraus.
  • Nutzer unterscheiden oft nicht eindeutig zwischen Filtern und Sortieren. Dennoch tragen eine eindeutige Benennung benannt und eine erwartungskonform Platzierung erheblich zum Verständnis bei. Laut der aktuellen Wording-Studie sind die präferierten Bezeichnungen für den Filterbereich „Suche verfeinern“ und „Suche einschränken“.

Haben Sie Interesse an weiteren „Good Practices“? Auch zu anderen Themen und Anwendungen?

Mit den eResult Themenjournalen und Trendnewslettern bekommen Sie jeden Monat Inspiration für Ihre eigene Arbeit.

2 Kommentare zu „Wenn 1.712 Treffer zu viel des Guten sind – Good Practices für die Gestaltung von After Search Navigations

  1. Pingback: 10 Lesetipps der Woche für Shopbetreiber » shopbetreiber-blog.de

  2. Pingback: Links der Woche: So holen Sie Kaufabrecher zurück, Facebook: gute Ergebnisse mit “Sponsored Results” » Take-me-to-auction

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *