Viele präferieren es, sich durch eine Fülle an Möglichkeiten inspirieren zu lassen – und was ist schon besser dafür geeignet als wunderschöne Designs für Hochzeitspapeterie. Stundenlang könnte sich so mancher darin verlieren. Einige hingegen haben aber schon ganz genaue Vorstellungen im Kopf, wie die Papeterie aussehen soll – sei es der Stil, die Farbe, das Papier oder die Veredelung.
Und möglicherweise bietet unser kleiner Shop genau jene Designs an, die den Vorstellungen der Heiratswilligen entsprechen. Doch was, wenn sie nie davon erfahren, dass wir anbieten, was sie begehren? Aus diesem Grund sollten wir sie an die Hand nehmen und sie auf eine kleine Entdeckungsreise einladen, die sie genau dort hin führt, wo sie hin möchten.
Was ich hier so ausgeschmückt beschrieben habe, kann im Endeffekt aber doch als »Filterfunktion« zusammengefasst werden. Denkt man spontan an Filter, so kommen einem möglicherweise Preissortierungen von niedrig bis hoch oder Sortierungen anhand von Nutzerbewertungen in den Sinn. Doch Filter können deutlich mehr leisten. Viel mehr.
Diese Leistungsfähigkeit von Filtern bedarf allerdings einer intensiven Auseinandersetzung mit all den vielen Möglichkeiten, die dadurch geboten werden. Denn viele Möglichkeiten bieten wie immer auch viele Chancen, Fehler zu machen – die wir unbedingt vermeiden sollten.
Wollen wir unsere Nutzer an die Hand nehmen, steigen ihnen stattdessen aber auf die Zehen, werden sie sich schmerzgeplagt von uns abwenden. Schlechte Nutzererfahrungen gehen – um im Bild zu bleiben – Hand in Hand mit dem Verlust von potenziellen Kunden. Lasst uns das vermeiden.
Waren Filter früher meist auf der linken Seite positioniert, ist in den letzten Jahren mehr und mehr ein Trend zu beobachten, Filter und Sortierungsmöglichkeiten horizontal oberhalb der Produkte zu platzieren.
Kleine Notiz am Rande: Einleitend habe ich als ein Beispiel für Filter die Preissortierungen genannt. Tatsächlich gibt es einen Unterschied: Filter blenden Produkte aus, die nicht mit den gewählten Optionen übereinstimmen, Sortierungen legen lediglich eine Reihenfolge fest. Zu beachten ist dabei, dass Tests gezeigt haben, dass Nutzer diese Begriffe meist synonym verwenden – als Bezeichnung für etwas, das ihnen hilft, ihre gewünschten Produkte zu finden (Cunha 2017).
Zurück zur Positionierung. Das größte – in einer vom Baymard Institute durchgeführten Studie – ermittelte Problem der vertikalen, seitlich positionierten Filter war, dass diese übersehen wurden. Viele Webshops setzen auch auf einen kombinierten Ansatz: Dabei werden die Filter seitlich und die Sortierungen horizontal darüber platziert. Die eben genannte synonyme Verwendung von Filter und Sortierung hat in diesen Fällen häufig dazu geführt, dass von den Nutzern vermutet wurde, dass die horizontale Sortierung die einzige Möglichkeit ist, Produkte zu »filtern«.
Die beste Performance in der Studie konnte erzielt werden, wenn die Filterung und die Sortierung gemeinsam horizontal positioniert wurden. Damit kann die ohnehin leicht übersehene linke Filterspalte komplett entfernt und gleichzeitig Platz für die Produkte an sich geschaffen werden.
Doch die horizontale Positionierung kann einen großen Nachteil haben: Der Platz ist damit eingeschränkt, da dabei – entgegen der variablen Seitenhöhe – die fixe Seitenbreite genutzt wird und wir mehrzeilige, horizontal angeordnete Filter unbedingt vermeiden sollten (Holst 2015).
In unserem Fall soll man die Designs beziehungsweise Kollektionen unserer Hochzeitspapeterie nach Stil, Farbe, Papier und Veredelungen filtern können. Vier Filtermöglichkeiten also, die wir wunderbar in einem horizontalen Filtermenü platzieren können.
Dabei dürfen wir aber nicht vergessen, dass die Filteroptionen variieren können beziehungsweise unbedingt kontextabhängig sein sollten. Das Format unserer Hochzeitseinladungen ist beispielsweise einheitlich, wohingegen es mehrere Posterformate gibt. Dafür sind für Poster keine Veredelungen verfügbar. Heißt für uns, dass es auf der Kategorieseite »Poster« einen Format-Filter statt eines Veredelung-Filters geben wird und umgekehrt keinen Format-Filter auf der Kategorieseite der Hochzeitseinladungen.
Neben der Tatsache, dass eine Filteroption, mit der man gar nichts filtern kann, nur Verwirrung stiften würde, hat ein kontextabhängiger Filter auch eine belehrende Funktion. Alleine durch das Vorhandensein des Format-Filters wird indirekt vermittelt, dass es unterschiedliche Posterformate zur Auswahl gibt.
Grundsätzlich gilt: Alle sinnvoll gruppierbaren Besonderheiten einer Produktkategorie – wie eben das Format oder auch die Hauptfarbe – sollten als Filteroption verfügbar sein. Die belehrende Funktion kann allerdings nur dann erfüllt werden, wenn die Bezeichnungen der Filter für unsere Zielgruppe verständlich sind. Die Faustregel lautet, keine Fachbegriffe, sondern allgemein bekannte Alltagssprache zu verwenden. In spezialisierten Shops, in denen Experten von Experten kaufen, kann oder sollte dafür selbstverständlich eine Ausnahme gemacht werden.
Das Baymard Institute hat in einer Benchmark-Studie die amerikanischen Top 50-Webshops untersucht und einerseits positiv festgestellt, dass ausnahmslos alle über eine Filterfunktion verfügen, andererseits aber ganze 32 Prozent der Filter nicht so funktionieren, wie es Nutzer erwarten.
Dies liegt daran, dass die genannten 32 Prozent Filtermechanismen verwenden, bei denen je Filtergruppe – zum Beispiel »Farbe« – lediglich ein Wert gewählt werden kann. Möchte einer unserer Nutzer beispielsweise Hochzeitseinladungen in Rot oder Pink sehen, wäre dies nicht möglich, da – wie gesagt – nur eine Farbe gewählt werden könnte.
Der im Zusammenhang mit dem Benchmark durchgeführte UX-Test hat ergeben, dass 45 Prozent der getesteten User versuchten, mehrere Werte zu kombinieren und die Verfügbarkeit einer solchen Funktion somit sehr wichtig für eine zufriedenstellende User-Experience ist.
Wie im eben genannten Beispiel ersichtlich, wird bei mehreren gewählten Werten innerhalb einer Filtergruppe erwartet, dass alle Produkte angezeigt werden, auf die eine oder mehrere der Optionen zutreffen – es sollte dabei also eine ODER-Logik implementiert werden.
Werden hingegen Werte aus mehreren Filtergruppen kombiniert, wird erwartet, dass über die Gruppen hinweg alle gewählten Filter angewandt werden – dabei sollte also eine UND-Logik implementiert werden.
Ein Beispiel: Wenn bei der Filtergruppe »Farbe« die Farben Rot und Pink gewählt sind und bei der Filtergruppe »Papier« die Sorte »Naturbelassener Karton« gewählt wurde, sollen Kartendesigns gezeigt werden, die Rot ODER Pink beinhalten UND auf naturbelassenen Karton gedruckt werden können (Scott 2018).
Und wo war jetzt diese Entdeckungsreise? Hier kommt sie – in Form von Progressive-Disclosure. Dabei handelt es sich um eine Methode, unter anderem komplizierte Aktionen zu sequenzieren. Dies reduziert die Komplexität und legt den Fokus immer nur auf eine Aktion, die von den Nutzern dann mit Sorgfalt und ohne Überforderung erledigt werden kann.
Im Fall des Filters ist es meine Intention, die Nutzer an die Hand zu nehmen und Schritt für Schritt durch die – bei der Kollektionen-Ansicht – vier Filter zu führen. Damit lernen die Besucher, welche Filter verfügbar sind, wie sie funktionieren und gleichzeitig welche Produktoptionen verfügbar sind und welche Vielfalt an Möglichkeiten wir ihnen bieten.
Wie schon beim Hauptmenü sollten wir auch hier auf klassische, nicht sonderlich nutzerfreundliche Dropdown-Menüs verzichten. Denn vor allem bei Filtern bietet es sich an, die Filteroptionen visuell in einer Art Mega-Menu zu zeigen – Stile können beispielhaft anhand von Bildern gezeigt werden und Farben, naja, anhand der Farben eben. Gewählte Filteroptionen sollten deutlich als gewählt erkennbar sein. Ich habe mich – wie auf der nächsten Seite zu sehen – für eine dunkle Überlagerung und große Häkchen entschieden.
Nachdem man in jedem Schritt mehrere Filteroptionen wählen kann, bedarf es einer Nutzerinteraktion, die sagt, wann der aktuelle Schritt gespeichert werden und zum nächsten übergegangen werden soll. Die Buttons dafür sollten einen eindeutigen Hinweis darauf geben, was passiert, wenn man sie klickt. Ich konnte in UX-Tests die besten Erfahrungen mit »Speichern und weiter« und »Speichern und zum nächsten Schritt« beobachten. Solange keine Option gewählt wurde, sollte der Text im Button »Überspringen« lauten, um auch mit dem nächsten Schritt fortfahren zu können, wenn man keinen Filter anwenden möchte.
Hat sich der Nutzer festgelegt, gilt es, die entsprechenden Produkte anzuzeigen. Übrigens: Angewandte Filter sollten auch keine leere Seite verursachen, wenn kein Produkt den Kriterien entsprechen sollte.
Stattdessen sollte der Nutzer darauf hingewiesen werden, dass dem so ist und nun empfohlen wird, die Filter zu ändern. Unterhalb dieses Hinweises sollten Produkte angezeigt werden, die – auch die Filtergruppen übergreifend – nach der ODER-Logik gefiltert wurden und somit zumindest teilweise den Kriterien entsprechen.
Genauso wichtig wie es ist Produkte anzuzeigen, ist es aber auch, den Nutzern mit einem Blick anzuzeigen, welche Filter sie gewählt haben. Viele Webshops verschieben die ausgewählten Filter in eine separate Ansicht, was bedeutet, dass sie in der ursprünglichen Filterauswahl nicht mehr zu sehen sind und dort auch nicht mehr abgewählt werden können. Dies sorgt für erhebliche User-Experience-Probleme.
Das Baymard Institute empfiehlt nach eigenen Usability-Studien deshalb, die gewählten Filter genau dort anzuzeigen und auch wieder abwählbar zu machen, wo sie ursprünglich ausgewählt werden konnten – in unserem Fall in der horizontalen Filteransicht (Holst 2015).
Ausgewählte Filter aus den einzelnen Filtergruppen können zusätzlich herausgestellt angezeigt werden und neben der dadurch sichergestellten Übersicht die Option bieten, sie auch direkt wieder zu entfernen, ohne die einzelnen Filtergruppen dafür öffnen zu müssen.
Wie man deutlich erkennen kann, wurde der Progressive-Disclosure-Filter von eben in einen klassischen horizontalen Filter umgewandelt. Denn an dieser Stelle kennen die Nutzer die Filtermöglichkeiten und sollen frei die Einstellungen ändern können, ohne sich abermals von vorne durchklicken zu müssen.
Wird eine Filteroption durch Klicken auf das Löschen-Icon entfernt, dann … ja, was eigentlich? Und was, wenn eine neue Filteroption hinzugefügt wird? Diese beiden Fragen stellen uns vor Herausforderungen, die größer sind, als sie im ersten Moment scheinen mögen.
Die wichtigste Frage, die es dabei zu beantworten gilt, ist, ob nach einer Änderung des Filters eine Interaktion – beispielsweise der Klick eines Buttons – erforderlich ist um die neuen Filterkriterien anzuwenden oder ob sich die Produkte selbstständig entsprechend aktualisieren. Eines vorweg: Eine klare Antwort auf diese Frage konnte ich selbst nicht finden, denn beide Ansätze haben Vor- und Nachteile. Es gilt also, diese abzuwägen und letztendlich selbst zu entscheiden.
Die sich selbstständig aktualisierende Variante ist zunehmend häufiger in Webshops zu beobachten. Dabei werden die Filtereinstellungen übernommen und die entsprechenden Produkte angezeigt, sobald ein neues Filterkriterium ausgewählt oder entfernt wurde. Damit werden die Bedürfnisse vor allem von jenen Besuchern gestillt, die gerne stöbern oder sich noch unsicher sind, was ihnen zusagt und deshalb schnell sehen möchten, welche Produkte sich hinter welchen Filtereinstellungen verbergen.
Leider kann es damit schnell zu erheblichen UX-Problemen kommen. Erstens muss die Seite nach jeder Änderung am Filter die Produkte neu laden und bei vielen, schnell aufeinanderfolgenden Änderungen kann das bei ohnehin langsamen Webshops zu erheblichen Wartezeiten führen.
Zweitens sollte unmittelbar nach jeder Änderung ein Feedback sichtbar sein, beispielsweise in Form eines Skeleton-Screens. Werden mehrere Filter hintereinander geändert, kann es dadurch zu einem Flackern am Bildschirm kommen, das die volle Aufmerksamkeit auf sich zieht.
Um eine Balance zwischen direktem Feedback und einer nicht flackernden Seite hinzubekommen, empfiehlt Sherwin von der Nielsen Norman Group einerseits, die Skeleton-Screens nur sehr hell und ausgeblichen darzustellen. Andererseits wird empfohlen, zumindest eine Sekunde und sogar bis zu zwei Sekunden zu warten, bevor die getroffenen Einstellungen aktiv werden. Damit können schnelle Nutzer mehrere Optionen wählen, die dann gebündelt angewandt werden.
Bei der Variante, bei der eine Nutzerinteraktion erforderlich ist, werden alle Änderungen an den Filtereinstellungen gesammelt und erst dann aktiv, nachdem ein Button – beispielsweise mit dem Text »Filter anwenden« – geklickt wurde.
Der große Nachteil dabei ist, dass Besucher, die gerne stöbern, einen zusätzlichen Klick tätigen müssen, um die Auswirkungen ihrer Einstellungen zu sehen. Die Vorteile gegenüber der interaktiven Variante liegen allerdings auf der Hand: Deutlich weniger Probleme mit der Seitenladezeit, kein Flackern und keine künstlichen Wartezeiten vor den Aktualisierungen (Sherwin 2016).
Auf Mobilgeräten kommen bezüglich der Filterfunktion besondere Herausforderungen auf uns zu. Beginnen wir mit der Sichtbarkeit des Filters. Denn entgegen dem Desktop können wir auf Smartphones keine horizontale Leiste sinnvoll darstellen. Stattdessen braucht es eine Lösung, die die Sicht auf die Produkte nicht dauerhaft versperrt und die Filterfunktion gleichzeitig einfach zugänglich macht.
Viele setzen dafür lediglich auf ein Icon, um die Filtereinstellungen aufzurufen. Dabei wird leider häufig nicht bedacht, dass – im Gegenteil zum Lupe-Icon für die Suche – dieses Icon nicht sofort von jedem richtig interpretiert werden kann. Die Folge ist, dass die Filterfunktion komplett übersehen wird. Stattdessen wird empfohlen, neben dem Icon tatsächlich das Wort »Filter« zu schreiben.
Klickt man das Icon, öffnet sich der Filter. Viele Webshops sind dazu übergegangen, die Filter über die komplette Seite zu legen. Die Argumente dafür sind, dass mehr Platz für ein schönes Filterinterface geschaffen wird und die Nutzer sich ohne Ablenkungen auf die Einstellungen konzentrieren können. Der große Nachteil ist allerdings, dass es damit relativ schwierig und umständlich ist, Filtereinstellungen zu vergleichen und Feedback darüber zu bekommen, ob die getroffenen Einstellungen schon angewandt wurden.
Filtereinstellungen wird man ob der Bildschirmgröße nur schwerlich vergleichen können, klar – man kann allerdings durch die Anzeige der Anzahl der Ergebnisse einen schnellen und effektiven Hinweis darauf geben, welche Auswirkungen eine Einstellung hat. Je kleiner die Zahl schließlich ist, umso strengere Filter wurden angewandt beziehungsweise umso genauere Ergebnisse werden angezeigt.
Ein Feedback darüber, ob der Filter schon angewandt wurde, kann gegeben werden, indem man mit den Filtereinstellungen nicht ganz die Seite verdeckt und die Nutzer damit sehen können, dass sich im abgedunkelten Hintergrund »etwas tut«. Mit dieser Lösung ist es auch nicht unbedingt erforderlich, einen Button zur Bestätigung der Filtereinstellungen bereitzustellen. Zur zusätzlichen Absicherung könnte man allerdings als Text für den Zurück-Button »Ergebnisse anzeigen« oder »Filter anwenden« wählen (Whitenton 2015).
