Mobile Facettensuche: neue, verbesserte Designmuster

by Kathryn Whitenton (deutsche Übersetzung) - 26.07.2015

Seit kurzem wenden einige grosse Marken eine neue Methode an, um die Facettensuche auf mobilen Geräten anzuzeigen: die Steuerungselemente werden in einem „Taskleisten“-Overlay über den tastsächlichen Resultaten angezeigt. Dieser neue Designzugang löst ein grosses Problem, das die Facettensuche auf mobilen Geräten mit sich bringt: die Platzierung der Steuerungselemente der Facettensuche auf einem separaten Bildschirm, was Nutzer zwingt, einige Arbeitsschritte zu absolvieren, um herauszufinden, wie die Steuerung die Suchresultate beeinflusst. Doch bevor wir uns ansehen, weshalb dieser Zugang funktioniert, sollten wir uns den Grundlagen der Facettensuche widmen.

Warum ist die Facettensuche etwas Besonderes?

Die Facettensuche ermöglicht es Nutzern, Suchresultate zu verfeinern, indem Filter angewandt werden, die den Suchbereich genau beschreiben. Diese Einschränkung der Suche ist für Nutzer, die in einer grossen Menge von Inhalten nach spezifischen Dingen suchen, von unschätzbarem Wert. Die Art der Suche konnte sich auf e-Commerce Websites und Reise-Websites, sowie in vielen verschiedenen Arten von Dokumenten und Mediensammlungen etablieren. Ein facettiertes System enthält zwei ausschlaggebende Elemente:

1. Einfache Steuerungen, um raffinierte Suchfunktionen zu nutzen: Bekannte Steuerungselemente, wie Auswahlmenüs und Kontrollkästchen mit Bezeichnungen in natürlicher Sprache, ermöglichen es Nutzern, eine grosse Anzahl von Resultaten auf eine kleine Resultatliste zu beschränken, die den exakten Kriterien entsprecht - ohne Spezialwissen über Boole’sche Logik oder die Abfragesyntax.
2. Gleichzeitige Anzeige der Steuerungselemente der Facettensuche und der Resultate: Die gleichzeitige Anzeige der Filter und der Resultate vereinfacht es Nutzern, die Beziehung zwischen den beiden Elementen zu verstehen. Idealerweise wird dieser Effekt durch eine dynamische Aktualisierung der Resultate verstärkt, welche erfolgt, sobald der Nutzer ein Filterkriterium auswählt.

Die einfache Filtersteuerung ist die offensichtlichste Komponente der Facettensuche. Die Wichtigkeit der gleichzeitigen Anzeige sollte allerdings nicht unterschätzt werden. Bereits lange bevor die Facettensuche populär wurde, gab es Bildschirme für die „Erweiterte Suche“ mit ähnlichen Steuerungselementen, welche komplexe Suchanfragen ermöglichten. Der grosse Unterschied des ersten facettierten Navigationssystems war, dass die Steuerungselemente der Facettensuche und die Resultate gleichzeitig präsentiert wurden, was die Effekte jedes einzelnen Filters sofort sichtbar machte. Diese Innovation inkludierte 2 der 10 Usability-Heuristiken: schnelles Systemfeedback und Kontrolle bzw. Freiheit für den Nutzer.

Herausforderungen der Facettensuche auf mobilen Geräten

Die Facettensuche wurde ursprünglich für Nutzer von Desktops und Laptops designt. Dieses Erlebnis auf mobile Geräte umzulegen, ist aufgrund einer Haupteigenschaft, die die Facettensuche so hilfreich macht, schwierig: Filter und Resultate müssen gleichzeitig zu sehen sein. Das ist auf kleinen Bildschirmen schwierig, da es einfach nicht genügend Platz gibt, um die komplette Auswahl der Facetten und eine angemessene Anzahl detaillierter Resultate gleichzeitig anzuzeigen.

Bis vor kurzem versuchten die meisten mobile Designer erst gar nicht, Facetten und Resultate gleichzeitig zu präsentieren - stattdessen platzierten sie sie auf separaten Bildschirmen. Diese Lösung zwingt Nutzer allerdings dazu, zum Bildschirm der Steuerungselemente der Facettensuche zu wechseln, eine Auswahl zu treffen und danach zu den Suchresultaten zurückzukehren, um die Auswirkungen ihrer Auswahl zu überprüfen. Die mobile Website von istockphoto.com zeigt diesen typischen Zugang zur Facettensuche für mobile Nutzer. Die Resultatseite enthält ein Symbol, auf das die Nutzer tippen, um die Steuerung der Facettensuche zu öffnen (natürlich nur, wenn sie verstehen, was das Symbol bedeutet). Sobald die Steuerungselemente angezeigt werden, können Nutzer verschiedene Filterkriterien auswählen - es ist allerdings nicht offensichtlich, wie die Resultate durch die Auswahl beeinflusst werden, da:

• Auf diesem Bildschirm keine Resultate angezeigt werden.
• Sich die Anzahl der Dateien, die im Header der Seite angezeigt werden, zu langsam aktualisiert.
• Der Header, der die Anzahl der Dateien enthält, gar nicht sichtbar sein könnte, da der Nutzer nach unten scrollt, um die Facetten zu öffnen und auszuwählen.

Aufgrund dieser Einschränkungen müssen Nutzer zum vorhergehenden Bildschirm zurückkehren, um herauszufinden, welche Filterauswahl die besten Resultate lieferte, und zu erfahren, ob die Resultatliste auf eine angemessene Länge beschränkt wurde - oder ob die Kriterien sogar so streng gewählt wurden, dass es gar keine passenden Suchresultate mehr gibt.

Links: Wie viele mobile Suchdesigns zeigt iStockphoto.com keine facettierte Suchsteuerung auf der Seite der Suchresultate an. Stattdessen müssen Nutzer zu den Steuerungselementen der Facettensuche navigieren - in diesem Fall über ein kryptisches Symbol im rechten Bereich der Suchleiste, das aus Linien und Kreisen besteht. Rechts: Die Facetten-Steuerung nimmt den gesamten Bildschirm in Anspruch - um die Auswirkungen der Auswahl zu sehen, müssen Nutzer zurück zur Seite der Suchresultate navigieren.

Eine neue Lösung: „Taskleisten“-Overlay, um die Steuerung der Facettensuche anzuzeigen

Vor kurzem tauchte ein neuer Zugang auf, der es Ihnen ermöglicht, mobilen Nutzern die Facettensuche zu präsentieren: die Steuerung der Facettensuche wird als „ausklappbare“ Taskleiste über den Suchresultaten angezeigt. Dieses Design ermöglicht eine fortdauernde Sichtbarkeit der Resultate: sogar wenn die Facettensteuerung geöffnet ist, bleiben einige Informationen über die Resultate im Hintergrund sichtbar. Sowohl die Amazon iPhone App als auch die mobile Website von eBay verwenden ein Overlay, um die Facettensteuerung am selben Bildschirm wie die Suchresultate anzuzeigen.

Die iPhone App von Amazon (links) und die mobile Webseite von eBay (rechts), enthalten seit kurzem ein Overlay, das die Steuerung der Facettensuche am selben Bildschirm wie die Suchresultate anzeigt.

Elemente der Design-Pattern

Die Designs von Amazon und eBay enthalten mehrere Details, die kombiniert werden, um ein gutes Nutzererlebnis zu bieten:

• Sobald die Steuerungselemente der Facettensuche aktiviert wurden, erscheinen sie in einem vertikalen Feld, das sich über dem Bildschirm der Suchresultate öffnet.
• Die Resultate sind immer im Hintergrund zu sehen und scheinen sich zu verändern, während der Nutzer seine Auswahl trifft. (Bei eBay können Nutzer allerdings kaum erkennen, welche Resultate angezeigt werden. Das Design von Amazon ist besser, da Nutzer im Hintergrund tatsächlich nützliche Informationen sehen.)
• Die Gesamtanzahl der Resultate ist immer sichtbar - auch wenn der Nutzer eine lange Liste von Facetten nach unten scrollt. (Amazon fixiert dazu den Header im oberen Bereich des Bildschirms, damit dieser auch dann sichtbar bleibt, wenn durch die Liste der Facetten nach unten oder oben gescrollt wird.)
• Ein durchsichtiger grauer Schatten verdunkelt die Resultate im Hintergrund und stellt sicher, dass die Steuerungselemente der Facettensuche auffallen.
• Das Facetten-Fenster erscheint am rechten Rand des Bildschirms, was bedeutet, dass der linke Rand der Resultate sichtbar bleibt. (Das ist hilfreich, da der linke Rand mit größerer Wahrscheinlichkeit aussagekräftige Inhalte enthält - bei Amazon können Sie zum Beispiel die Abbildungen der Produkte sehen.)

(Sie haben vielleicht bemerkt, dass sowohl Amazon als auch eBay tatsächliche Wörter - Filter und Refine - anstatt eines speziellen Symbols verwenden, um auf die Facetten zuzugreifen. Alle Bezeichnung, die normalerweise für eine facettierte Navigation verwendet werden - Suche eingrenzen, Verfeinern und Filtern - sind wesentlich leichter zu verstehen als kryptische Symbole, weshalb sie den zusätzlichen Platz definitiv wert sind.)

Warum ist die gleichzeitige Anzeige der Resultate und der Steuerungselemente der Facettensuche wichtig?

In Usability-Tests bin ich immer wieder überrascht, wie schnell und erfolgreich Personen facettierte Suchbildschirme verstehen und verwenden, obwohl sie viele verschiedene Elemente und Steuerungen enthalten. Sofern die Steuerungselemente richtig angezeigt werden, beginnen die meisten Personen sofort damit, ihre Anfragen zu erstellen und zu verfeinern. Sofort angezeigte Resultate sind ein wichtiger Teil des Ablaufs, da Nutzer direkt sehen, ob sie den falschen Filter angewandt oder zu strenge Kriterien ausgewählte haben, die zu viele Optionen eliminieren. Beide Fehler können sehr schnell korrigiert werden, da sie die Effekte der Handlungen sofort sehen - fehlende Sichtbarkeit hätte einen mühsamen Zyklus des Pogo-Stickings zwischen den Resultaten und den Filtern zur Folge.

Die Facetten-„Taskleiste“ von Amazon und eBay bietet keine komplette Sichtbarkeit, da nur ein kleiner Teil des Resultatbildschirms zu sehen ist. Die kreative Lösung bietet allerdings gewisse Einblicke in die Effekte, die das Anwenden eines Filters zur Folge hat. Nutzer müssen die Steuerungselemente der Facettensuche zwar schließen und öffnen, der Vorgang wird allerdings eher als das Öffnen eines Teils der aktuellen Seite eingestuft - und nicht als Hin- und Herspringen zwischen verschiedenen Seiten.

Mehr über die besten Vorgehensweisen für visuelle Darstellungen auf kleineren Bildschirmen erfahren Sie in unseren ganztägigen Kurs über Visuelles Design für Smartphones und Tablets.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.