Facettierte Navigation – auch bekannt als facettierte Search oder Guided Navigation– ist heutzutage auf vielen Websites zu sehen. Besonders sinnvoll ist ihr Einsatz bei großen Datenmengen. Nutzer können mit nur wenigen Klicks gesuchte Informationen und Produkte schnell ausfindig machen. Wann eine facettierte Navigation sinnvoll ist und worauf Sie beim Einsatz achten sollten, das erfahren Sie von den Usability-Experten Karen Lindemann und James Kalbach.
Erinnern Sie sich an das Spielen mit Lego? Sie haben viele Steine, die sich in Farbe und auch Größe voneinander unterscheiden. Dazwischen liegen weitere Teile wie Fenster, Türen, Räder, Figuren und vieles mehr. Mit all diesen Elementen können Sie die unterschiedlichsten Objekte kreieren – jemand anderes wird mit gleichem Bausatz ganz andere Dinge erschaffen. Ganz ähnlich wie beim Bauen mit Lego verhält es sich bei der Verwendung von Facetten im Zuge der Navigation von Websites.
Der indische Bibliothekar S. R. Ranganathan war mit dem vorherrschenden Klassifikationssystem seiner Zeit unzufrieden – er lebte von 1892 bis 1972. Die Begrenztheit der vorhandenen Kategorien, die eine Einordnung von Buchtiteln mit neuartigen Themen so gut wie unmöglich machte, betrachtete er als große Schwäche des damaligen bibliothekarischen Systems. Das rapide Anwachsen von Informationen im 20. Jahrhundert verlangte seiner Ansicht nach eine andere Art der Klassifizierung – ein Umstand, mit dem sich auch Betreiber von großen Websites konfrontiert sehen.
Den Anstoß zur Lösung des Problems erhielt Ranganathan 1924 ganz unerwartet auf einer Reise nach London. Es war beim Spaziergang in der Oxford Street, als er im Schaufenster des Kaufhauses Selfridges einen Metallbaukasten für Kinder entdeckte [bit.ly/wsb9166]. ‚So muss es sein, die Organisation von Information muss aus modularen Bausteinen bestehen’, dachte er. Neun Jahre später veröffentlichte Ranganathan sein Buch The Colon Classification, in dem er sein neuartiges Klassifikationsschema vorstellte und ausführlich den Einsatz von Facetten erklärte.
Facetten beschreiben unterschiedliche Eigenschaften von Objekten. Nehmen wir zum Beispiel das Produkt „Wein“: Welche Eigenschaften sind es, mit denen Wein beschrieben werden kann? Da gibt es die Farbe des Weins, die Anbauregion und den Preis. Aber auch andere Attribute können interessant sein, zum Beispiel die Traubenart, der Geschmack, der Alkoholgehalt, das Rating oder auch der Anlass.
Jede dieser Eigenschaften bzw. Facetten hat unterschiedliche Ausprägungen bzw. Werte, mit denen die einzelnen Weine genauer beschrieben werden können: Die Werte der Facette „Anbauregion“ sind unter anderem „Deutschland“, „Österreich“, „Frankreich“, „Italien“ etc. Bei der Facette „Farbe“ wird zwischen „Weiß“, „Rot“ und „Rosé“ unterschieden. Für die Facette „Preis“ ist eine Einteilung „unter 20 EUR“, „20 bis 40 EUR“ und „über 40 EUR“ denkbar. In ähnlicher Weise kann für jede Art von Facette vorgegangen werden.
Im Unterschied zu einer hierarchischen Organisation besteht zwischen Facetten keine strukturelle Verbindung – sie stehen gleichwertig nebeneinander. Daher können Facetten gut zum Filtern von großen Datenmengen verwendet werden und sind in beliebiger Reihe aus- bzw. wieder abwählbar. Sucht der Nutzer in einem Online-Weinshop nach einem trockenen Weißwein aus Deutschland, kann er bei der Facette Anbauregion „Deutschland“, bei Farbe „Weiß“ und bei Geschmack „Trocken“ auswählen. In nur drei Klicks erhält er aus der gesamten Produktpalette eine kleine Auswahl für ihn interessanter Weine. Entscheidet er sich nun um und möchte doch lieber einen deutschen, trockenen Rotwein bestellen, muss er lediglich den Wert der Facette Farbe von „Weiß“ in „Rot“ ändern, und schon wird ihm das gewünschte Weinangebot präsentiert. Der umständliche Gang durch einen streng hierarchisch organisierten Informationsraum kann durch die Verwendung von Facetten umgangen werden.
Erst etwa 60 Jahre, nachdem Ranganathan seine Theorie über Facetten veröffentlicht hatte, wurde die Relevanz seiner Erkenntnisse für das Internet untersucht. Eine Gruppe von Forschern der University of California in Berkeley befasste sich damit, wie man Facetten auf einer Website zum Navigieren einsetzen könnte, um dem Nutzer gewünschte Informationen aus großen Datenmengen einfach zugänglich zu machen:
„Wir haben ein innovatives Such-Interface entwickelt, das auch Nichtexperten ermöglicht, sich auf flexible Weise durch große Informationsräume zu bewegen, ohne sich verloren zu fühlen. Das Designziel bestand darin, eine Erfahrung wie beim Durchstöbern von Regalen zu bieten, die sich nahtlos in eine gezielte Stichwortsuche integrieren lässt.“ [Jennifer English u. a.,bit.ly/wsb3822]
Bekannt ist diese vor einem Jahrzehnt durchgeführte Studie unter dem Namen „Flamenco“, was für „FLexible information Access using MEtadata in Novel COmbinations“ steht. Das damals entwickelte Interface (s. Abbildung 2) ist auch heute noch online und kann bei Interesse ausprobiert werden.
Das Flamenco-Modell kann man auch als „sukzessives Filtern“ bezeichnen: Durch jeden Klick auf einen der Links – die Links stellen die Werte einer Facette dar – wird die Auswahl der angezeigten Informationen immer weiter eingeschränkt, bis der Nutzer zum gesuchten Ergebnis gelangt. Vom Interaktionsstil der Flamenco-Lösung haben sich viele Websitebetreiber inspirieren lassen. Insbesondere wurde die Verwendung von Facetten auf Suchergebnisseiten populär.
Vielen Nutzern ist die facettierte Navigation vor allem von Amazon (s. Abbildung 3) her bekannt. Nach Eingabe eines Stichworts ins Sucheingabefeld bzw. nach Auswahl einer Produktkategorie aus dem Submenü erhält der Nutzer eine Seite, auf der sich im linken Seitenbereich eine Anzahl von Facetten befindet. Mithilfe eines Filtermechanismus kann er die angezeigte Produktauswahl auf seine Bedürfnisse hin schnell und einfach selektieren.
Filter eignen sich besonders gut für die Darstellung sowie das Navigieren von Facetten. Doch können Facetten auch in Form von Informationen auf Produktdetailseiten, als Kriterien für die Sortierung von Suchergebnissen oder auch als Suchvorschläge verwendet werden. Im vorliegenden Artikel wollen wir uns hauptsächlich auf die Darstellung von Facetten in Form von Filtern konzentrieren.
Grundsätzlich ist bei der Verwendung von Facetten nach folgenden Schritten vorzugehen:
Facetten lassen sich am besten bei gleichartigen Produkten einsetzen. Bevor sich ein Kunde zum Beispiel für Farbe oder Material eines Schuhs interessiert, hat er die Entscheidung, ob es ein Stiefel oder eine Sandale sein soll, in der Regel bereits getroffen. Auf einer Website lässt sich diese Auswahl der Produktkategorie am besten durch hierarchisch organisierte Menüs abbilden. Bei Zalando (Abbildung 4) oder Amazon finden Sie eine Kombination von Kategorieauswahl und Filtermechanismus. Mithilfe von Filtern können Hierarchien „verflacht“ werden. Auf Zalando fällt auf, dass die Untermenüs wie Filter aussehen, der Mechanismus jedoch wie ein Menü funktioniert.
Generelle Voraussetzung für eine facettierte Navigation ist, dass für jedes Produkt bzw. Dokument die Facetten als Metadaten erfasst sein müssen. Außerdem ist eine Datenbank erforderlich, die eine Verwaltung und Selektion dieser Daten ermöglicht.
Neben dem schnellen Auffinden relevanter Informationen aus einer großen Datenmenge gibt es weitere Argumente, die für den Einsatz einer facettierten Navigation sprechen:
Beliebige Reihenfolge der Auswahl:
Der Nutzer kann Werte der einzelnen Facetten frei auswählen – es gibt keinen vordefinierten Weg, um ans Ziel zu gelangen. Gleichzeitig können Werte auch wieder abgewählt werden. Durch dieses freie Kombinieren der verschiedenen Produkteigenschaften ergeben sich häufig unerwartete Suchergebnisse. Suchen und Stöbern ergänzen sich organisch – es entsteht ein spielerisches Entdecken, ähnlich wie beim Bauen mit Lego.
Keine Null-Ergebnisse:
Die Anzeige der verfügbaren Produkte wird bei Auswahl einer Facette jedes Mal aktualisiert. Nicht vorhandene Optionen– die sogenannten „dead ends“ (Auswahl ohne Ergebnis) – bleiben verborgen oder werden ausgegraut (nicht anklickbar). Frustration wird so vermieden: Der Nutzer kommt per se immer zum Ziel.
Transparente Mengenangabe:
Hinter jedem Wert einer Facette wird die Anzahl der zur Verfügung stehenden Produkte angezeigt. Diese Mengenangabe aktualisiert sich automatisch bei jeder Aus- bzw. Abwahl eines Wertes: Der Nutzer erhält ein Gefühl für das Ausmaß des Produktangebots und kann weitere Navigationsentscheidungen effektiver treffen.
Vertraute Navigationserfahrung:
Da häufig bei der facettierten Navigation die einzelnen Werte durch Links dargestellt werden, ist dies für die meisten Nutzer eine vertraute Art der Interaktion: Das Muster „Klick und anschließender Page-Reload“ ist bekannt und wird ohne größere Probleme auch bei der Nutzung von Facetten verstanden.
Anregung zum Stöbern:
Der amerikanische Usability-Experte Jared Spool stellte in einer Studie fest, dass es für das Kaufverhalten entscheidend ist, wie ein Nutzer einer Website an sein Ziel kommt: Nutzer, die ein gesuchtes Produkt über die Navigation gefunden haben, sind eher geneigt, weiter auf der Website einzukaufen, als Nutzer, die gezielt über die Stichwortsuche zum Produkt gelangt sind [bit.ly/wsb4481]. Die facettierte Navigation ermöglicht eine Kombination aus Suchen und Stöbern – es entsteht ein Flow. Dieser ist besonders gut geeignet, wenn der Nutzernicht genau weiß, wonach er sucht. Die facettierte Navigation unterstützt unerwartetes Entdecken und zeigt neue Verbindungen zwischen den Themen auf.
Der praktische Einsatz von Facetten für das Navigieren auf einer Website ist nicht trivial. Wichtig ist, dass sich der Nutzer nicht von den Auswahlmöglichkeiten überwältigt fühlt. Ein gut durchdachter Einsatz der Mittel ist notwendig, um eine intuitive Erfahrung zu ermöglichen. Nachfolgend finden Sie einige der Punkte, die dabei zu bedenken sind:
1. Layout und Platzierung von Filtermechanismen
Meist werden Filter entweder im linken Seitenbereich oder horizontal oberhalb der Suchergebnisse dargestellt. Welche der beiden Alternativen optimaler ist, darüber gehen Studien auseinander. Auch eine Platzierung im rechten Seitenbereich ist möglich, doch werden sie hier leicht vom Nutzer übersehen. Wichtig ist, Filter optisch so zu gestalten, dass sie als solche erkennbar sind.
Weiterhin ist zu überlegen, ob die Werte der Facetten bzw. die Filteroptionen per Voreinstellung (Default) sichtbar sind. Zum einen kann es eine Frage des Platzes sein, die für das Einklappen der Optionen plädiert. Auf der anderen Seite ist von Usability-Tests her bekannt, dass Nutzer die facettierte Navigation übersehen können, wenn ihnen nicht einige der Werte angezeigt werden.
In Abbildung 5 sehen Sie die facettierte Navigation von Eventim. Hier sind die Filter per Default eingeklappt, und die Designer haben sich für ein horizontales Layout der Filter (Kategorie, Veranstaltungsstätte, Zeitraum) entschieden. Aufgrund der prominenten Darstellung sowie der eindeutigen Aufforderung zur Auswahl der Optionen wird dies voraussichtlich kein Problem sein.
2. Darstellung der Werte
Als häufigstes Interaktionselement zur Darstellung der Werte wird der einfache Hyperlink verwendet. Der Nutzer kann durch einen einzelnen Klick eine lange Liste filtern. Alternativen hierzu sind Checkboxen, Slider (Schieberegler), Drop-Down-Menüs sowie auch Eingabefelder.
Bei der Auswahl des passenden Interaktionselementes sollten Sie sich von der Art der einzelnen Werte leiten lassen: Sind die Werte textbasiert und bezeichnen verschiedene Themen oder Kategorien, empfiehlt sich eine Liste von Links (s. Abbildung 6).
Zahlen hingegen können in Form von Slidern, als Eingabefelder (s. Abbildung 3 bei „Preis“) oder als Links dargestellt werden. Auf der Website von Kayak.com, einem Suchdienst für Flüge und Reisen, finden Sie auf der Ergebnisseite eine Kombination von Slidern und Checkboxen: Für die Facetten mit numerischen Werten, wie für die Auswahl der möglichen Abflugszeit für Hin- und Rückreise, sind Slider sinnvoll. Eine variable Einstellung ist möglich. Die Werte der Facette „Airlines“ lassen sich nicht als Slider darstellen. Hierfür wurden Checkboxen gewählt, so ist auch die Auswahl von mehreren Airlines gleichzeitig möglich – bei einfachen Links wäre eine Mehrfachauswahl ausgeschlossen.
3. Darstellung von Facetten mit einer großen Anzahl von Werten
Hat eine Facette viele Werte, wie zum Beispiel mehr als zehn, sind meistens nur die ersten 5 +2/-2 Werte sichtbar. Die weiteren Werte können durch Klick auf „mehr“ auf derselben Page aufgedeckt oder durch Scrollen (s. Abbildung 4) erreicht werden. Ist die Anzahl der Werte so groß, dass sie nicht mehr bequem im Filterbereich darstellbar ist, kann der Klick auf „mehr“ zu einer neuen Page führen.
Eine andere Möglichkeit ist der Einsatz eines Pop-up-Fensters oder Layers. In Abbildung 8 ist eine Suchergebnisseite von Shopping24.de für den Suchbegriff „Kaffeemaschine“ zu sehen. Die Werte der vier Facetten sind horizontal mitten im Blickfeld des Nutzers angeordnet, per Default sind jeweils nur fünf Werte sichtbar.
Bei Klick auf „weitere“ öffnet sich ein Layer (s. Abbildung 9), und es werden alle Werte der Facette „Hersteller“ angezeigt – aufgrund der großen Anzahl muss der Nutzer sogar scrollen. Bei Vergleich mit Abbildung 8 fällt auf, dass sich die Ordnung der Werte geändert hat: Sie sind jetzt alphabetisch aufgelistet.
4. Platzierung ausgewählter Werte und wie man die Auswahl rückgängig macht
Besonderer Vorteil einer facettierten Navigation ist die einfache Auswahl der Werte. Genauso leicht sollte auch das Aufheben sein. Wichtig ist daher, dass die Darstellung selbst erklärend ist: Nutzer müssen verstehen, was ihre Aktionen bewirken und wie sie diese wieder rückgängig machen können. In Usability-Tests zeigt sich immer wieder, dass nicht jeder Nutzer die Flexibilität von Filtern versteht.
Es bieten sich hierfür unterschiedliche Vorgehensweisen an: Bei Amazon bleiben die ausgewählten Werte dort, wo sie sich auch ursprünglich befanden. Durch Klick auf den entsprechenden Begriff – egal, ob die Werte in Form von hierarchischen Kategorien, Checkboxen oder einfachen Links dargestellt werden – wird ein Wert ausgewählt. Mit einem erneuten Klick wird die Auswahl wieder aufgehoben. Auf anderen Websites, wie zum Beispiel bei Shopping.de (Abbildung 10), werden die ausgewählten Werte in Form eines Brotkrumenpfads angezeigt. Bei Klick auf einen der ersten Werte – zum Beispiel auf „Computer, Foto & Technik“ – werden die später ausgewählten Werte abgewählt.
Typisch ist auch die Stapelung selektierter Werte oberhalb der Filter, wie es auch bei Justmusic.de (Abbildung 11) zu sehen ist. Das Entfernen von Optionen erfolgt per Klick auf das „x“-Icon rechts von den Werten oder auch über den Link „Alle Filter entfernen“ – hierdurch werden alle Filter zurückgesetzt.
Die facettierte Navigation erscheint auf dem ersten Blick selbst erklärend, vor allem wenn sie gut gemacht ist. Doch wie die oben aufgeführten Erklärungen zeigen, ist ein wohldurchdachtes System dafür unbedingte Voraussetzung. Laut Peter Morville, Koautor des Buchs Information Architecture for the World Wide Web, befinden wir uns im sogenannten„Age of Findability“ [bit.ly/wsb7731], in dem das Auffinden von Informationen zwingend notwendig ist – insbesondere für Unternehmen im E-Commerce. Ein gutes Navigationsdesign spielt hierbei eine Schlüsselrolle, um den Nutzer zu den gesuchten Produkten zu führen. Schließlich können Nutzer nur kaufen, was sie auch finden.