Frustrierende Designmuster: Kaputte Filter

Filter sind überall . Während wir oft daran denken, dass sie beim Buchen von Flügen oder beim Online-Shopping auftauchen, werden Filter häufig in so ziemlich jeder Oberfläche verwendet, die mehr als eine Handvoll Datenpunkte enthält.

Es ist jedoch nicht unbedingt nur die schiere Menge an Daten, die schwer zu verstehen ist; Es ist die Komplexität und mangelnde Konsistenz , die die Daten normalerweise mit sich bringen, die eine gewisse Filterung erfordern – ein solches häufiges Szenario in Datengrids, Unternehmens-Dashboards, Impfstoffverfolgung und öffentlichen Registern.

Entwerfen für die komfortable Reichweite

Als Kunden verwenden wir Filter, um eine große Auswahl an Optionen auf eine überschaubarere und hochrelevantere Auswahl zu reduzieren. Vielleicht nur ein paar Dutzend Einzahlungsscheine statt Tausende oder nur eine Handvoll Blusen statt der ganzen Kollektion.

Wir haben bestimmte Interessenattribute, eine bestimmte Absicht , die wir der Schnittstelle irgendwie mitteilen müssen. Dazu zerlegen wir unsere Absicht in eine Reihe verfügbarer Funktionen. Diese Absicht kann ziemlich spezifisch oder ziemlich allgemein sein, aber in beiden Fällen sollte das Design die Zeit minimieren, die Kunden benötigen, um vom Standardstatus (wenn keine Filter ausgewählt sind) zum endgültigen Status (wenn alle Filter erfolgreich angewendet wurden) zu gelangen.

Das ist jedoch nur ein Teil der Geschichte. Das Anwenden relevanter Filter ist der einfache Teil, aber das Anzeigen von gerade genug relevanten Ergebnissen ist etwas schwieriger. Tatsächlich haben wir für jede Schnittstelle und für jede Absicht einen bestimmten komfortablen Bereich im Auge, dh eine bevorzugte Anzahl von Optionen, von denen wir glauben, dass wir sie relativ mühelos verwalten können.

Diese Auswahl an Optionen muss nicht auf einen einzigen Bildschirm passen oder auf einer einzigen Seite angezeigt werden oder auf eine kleine Auswahlliste beschränkt sein, an die wir uns leicht erinnern können. Es kann sich um Dutzende bis Hunderte von Elementen handeln, die über mehrere Seiten verteilt sind.

Der wichtige Teil ist, dass dieses Sortiment unsere Erwartungen erfüllt, dass:

• wir prüfen höchst relevante Optionen,
• wir können leicht verstehen, was wir erforschen,
• Wir können die Unterschiede zwischen allen Optionen erkennen und
• Wir können alles in einem angemessenen, vorhersehbaren Zeitrahmen bearbeiten.

Im Gegensatz zum Sortieren, das die Ergebnisse lediglich nach einigen bevorzugten Attributen neu anordnet ( weiche Grenzen ), stellen Filter immer harte Grenzen dar. Sie schränken den Ergebnisbereich strikt ein. Nicht genug geeignete Filter und Benutzer schießen weit über den komfortablen Bereich hinaus; Zu viele Filter und Benutzer erhalten am Ende keine Ergebnisse und verlassen die Website vollständig.

Die komfortable Reichweite variiert von Produkt zu Produkt erheblich . Der Hinweis darauf, wo es liegt, lässt sich daraus ableiten, wie unterschiedlich die Optionen tatsächlich sind. In Usability-Tests sehen wir Menschen, die keine Probleme haben, 20–30 Arten von Fahrzeugen, 40–50 Arten von Turnschuhen, 70–80 Blumensträuße zu erkunden oder sogar 100–200 Einzahlungsscheine durchzublättern. Dennoch fühlen sie sich völlig überfordert, wenn sie 15 verschiedene Arten von Sharpies oder AAA-Batterien erkunden. Als Faustregel gilt: Je unterschiedlicher die Optionen sind, desto wohler fühlen wir uns mit einer etwas größeren Auswahl an Optionen.

Die ultimative Frage ist also, wie man dieses empfindliche Gleichgewicht findet, wenn unsere Benutzeroberfläche den Benutzern hilft, schnell zu gerade ausreichenden Ergebnissen zu gelangen. Eine Antwort auf diese Frage liegt in etwas, das sehr offensichtlich klingt: Beseitigen Sie alle Hindernisse auf dem Weg der Benutzer zu diesem komfortablen Bereich. Es ist jedoch leichter geschrieben als getan – besonders wenn Sie Dutzende oder sogar Hunderte von Filtern haben, die auf Mobilgeräten, auf dem Desktop und überall dazwischen zugänglich sein müssen.

Die Komplexität des Filterns

Auf den ersten Blick scheint das Filtern kein besonders komplexes Unterfangen zu sein. Natürlich können wir lange Debatten über die richtigen Formularelemente für verschiedene Arten von Filtern führen – Autovervollständigung, Radios, Umschalter, Auswahl-Dropdowns, Schieberegler und Schaltflächen, um nur einige zu nennen – aber im Wesentlichen sind alle Formularelemente nur grundlegend Eingang, oder?

Nun, wie sich herausstellt, gibt es einige Facetten der Erfahrung, die das Entwerfen von Filtern ziemlich schwierig machen:

• Filter können in verschiedenen Geschmacksrichtungen und Formen kommen, für Preise, Bewertungen, Farben, Daten, Zeiten, Größe, Marke, Kapazität, Funktionen, Erfahrungsniveau, Altersgruppe, Symptome, Produktstatus usw.
• Filter gibt es normalerweise in großer Zahl und sie müssen auf allen Bildschirmen angezeigt werden.
• Filter haben oft unterschiedliche Zustände (ausgewählt, nicht ausgewählt, deaktiviert)
• Filter benötigen oft vernünftige Standardwerte und sie müssen sich an die Eingaben des Benutzers erinnern,
• Filter können voneinander abhängig sein, und diese Abhängigkeiten müssen offensichtlich sein,
• Filter können schwierig zu validieren sein, z. B. wenn Benutzer komplexe Daten wie Zeit oder Datum eingeben können,
• Filter müssen sinnvolle Fehlermeldungen unterstützen und anzeigen,
• und so viele andere.

Filter existieren nie alleine ; auf die eine oder andere Weise sind sie immer mit den Ergebnissen verbunden, auf die sie reagieren. Diese Verbindung führt häufig dazu, dass Filter und Übereinstimmungsergebnisse einigermaßen synchron sind, da letztere davon abhängen, wie schnell die Benutzeroberfläche eine Eingabe registriert und wie viel Zeit sie benötigt, um sie erfolgreich zu verarbeiten.

Nun, die Bewältigung all der feinen Feinheiten jeder dieser Herausforderungen ist nichts weniger als monumentale Arbeit, aber einige Probleme sind etwas frustrierender als andere, was die Gesamterfahrung schmerzhaft und ärgerlich macht und daher zu hohen Abbrüchen und hohen Absprungraten führt. Lassen Sie uns einige der kritischen untersuchen.

Vermeiden Sie winzige scrollbare Fenster

Nach nur wenigen Usability-Sitzungen mit Kunden, die versuchen, Filter auf ihrem eigenen Gerät zu verwenden, kann man einige häufige Frustrationen erkennen, die immer wieder die Runde machen. Eines der nervigsten Muster kommt von langen Filterabschnitten, die Dutzende von Optionen enthalten. Diese Optionen werden oft in einem winzigen scrollbaren Bereich versteckt, der 3–4 Optionen gleichzeitig anzeigt und vertikales Scrollen erfordert, um die Optionen zu durchsuchen.

Diese Abschnitte führen oft dazu, dass Kunden vertikal, langsam, genau, mit extremer Konzentration und Präzision scrollen. Auf Mobilgeräten werden einige Filter versehentlich aktiviert, was den Kunden dazu veranlasst, noch konzentrierter zu sein. Ein klassisches Beispiel für dieses Muster ist der „Marken“-Filter, der oft Hunderte von Optionen enthält, die nach Beliebtheit oder Alphabet sortiert sind.

Eine alternative Option wäre, bis zu 7–10 Optionen gleichzeitig mit einem Akkordeon anzuzeigen, das sich erweitern und alle Optionen beim Tippen/Klicken anzeigen würde. Diese Optionen müssen nicht in ihrer vollen Höhe angezeigt werden, sondern können in einem größeren scrollbaren Bereich enthalten sein . Aber dann sollten sie nicht durch Scrollen durch das Fenster aktiviert werden.

Es ist auch eine gute Idee, den Filter mit einer automatischen Suchvervollständigung und einer alphabetischen Ansicht zu ergänzen, wenn einige der beliebten Optionen oben hervorgehoben sind. Ein gutes Beispiel dafür ist Rozetka.ua, ein E-Commerce-Händler aus der Ukraine (siehe oben).

Immer Texteingabe-Fallback für Schieberegler bereitstellen

Wann immer Benutzer einen großen Wertebereich definieren können, sei es eine Preisspanne im Einzelhandel, die maximale Dauer einer Zugfahrt oder eine minimale/maximale Deckung für einen Versicherungsplan, werden wir wahrscheinlich eine Art Schieberegler verwenden. Alle Schieberegler haben eines gemeinsam: Sie sind wunderbar, wenn wir Kunden dazu anregen möchten, viele Optionen schnell zu erkunden, aber sie sind ziemlich frustrierend, wenn der Benutzer etwas Bestimmtes im Sinn hat und daher etwas genauer sein muss.

Denken Sie nur an die Frustration, die wir normalerweise durchmachen müssen, wenn wir den Preis ein wenig erhöhen, von 200 $ auf 215 $, oder eine weitere Stunde für die Dauer eines Fluges hinzufügen. Dies mit einem Schieberegler zu tun ist schwierig, weil es eine unglaubliche Präzision erfordert, und das produziert immer Fehler und verursacht Frustration.

Wir haben bereits ausführlich behandelt, wie man einen perfekten Slider entwirft, aber wahrscheinlich ist die wichtigste Funktion, die jeder Slider benötigt, die Unterstützung unterschiedlicher Interaktionsgeschwindigkeiten . Tatsächlich gibt es einige gängige Arten von Interaktionen:

• Wenn Kunden schnell viele Optionen erkunden möchten, funktioniert ein guter alter Schieberegler mit einer Spur und einem Daumen perfekt.
• Wenn Kunden bei ihrer Erkundung präziser sein möchten, können wir helfen, indem wir Stepper (+/-) für granulare Sprünge vorwärts und rückwärts hinzufügen,
• Wenn Kunden einen genauen Wert im Sinn haben, können wir helfen, indem wir Texteingabefelder für Min/Max-Werte bereitstellen, sodass Benutzer Werte direkt eingeben können, ohne den Schieberegler verwenden zu müssen.
• In all diesen Fällen müssen die Lösungen zugänglich sein und die reine Tastaturinteraktion unterstützen.

Schauen Sie sich das Beispiel der Lloydsbank unten an. Ein persönlicher Kreditrechner unterstützt alle Arten von Interaktionen wunderbar. Beachten Sie auch die Fokusstile, wenn der Daumen aktiviert ist, und die Bereiche, die unter dem Zinsregler oben angezeigt werden, um anzuzeigen, wohin der Kunde gerade navigiert. Der Zinssatz ändert sich je nachdem, wie viel Geld der Kunde leihen möchte.

Ein weiteres interessantes Beispiel für einen gut gestalteten Slider kommt von Sofasizer von Made.com, mit dem Sie Sofas nach den Abmessungen filtern können, die sie haben müssen. Anstatt eine Reihe von Eingabefeldern zu verwenden, entschied sich Made.com für eine visuelle Benutzeroberfläche mit einem „Resize“-Symbol. Sie können den Griff ziehen, um die Größe anzupassen, oder Sie können genaue Werte in die Eingabefelder für Höhe und Breite eingeben.

Niemals Benutzer bei einer einzelnen Eingabe automatisch scrollen

Du warst schon einmal dort. Vielleicht gehen Sie in der Aufregung zum Einzelhandelsgeschäft, klicken auf die richtigen Kategorielinks, wischen nach links und rechts durch die Unternavigation und blicken mit dem Adlerauge auf diesen einen glänzenden neuen Laptop, auf den Sie sich jetzt endlich festlegen können. Was Sie als nächstes erwartet, ist vielleicht nicht ganz die Erfahrung, die Sie sich erhofft hatten. Schauen Sie sich das Beispiel unten an. Kannst du erkennen, was zu passieren scheint?

In diesem Beispiel von Dell.com wird bei der Auswahl Ihrer Laptop-Funktionen jeweils nur eine einzige Eingabe registriert. Wenn Sie schnell mehrere Optionen auswählen, wird nur die letzte Eingabe angewendet. Und wenn eine Eingabe registriert wird , aktualisiert sich die Seite und springt den Kunden ganz nach oben in die Filter-Seitenleiste. Das bedeutet, je mehr Filter Sie verwenden möchten – und normalerweise von oben nach unten navigieren – desto mehr müssen Sie weiter nach unten scrollen, um den richtigen Filter zu finden.

Ein Grund, warum diese Implementierung so verbreitet ist, liegt nicht darin, dass wir Kunden automatisch an den Anfang des Filterbereichs scrollen möchten, sondern weil wir sie mit angewendeten Filtern an den Anfang der Produktergebnisse führen möchten. Irgendwo in der Mitte der Liste stecken zu bleiben, ist nicht besonders nützlich, wenn Sie neue Filter angewendet haben. Und in der Tat ist es besser, bei jeder Filteraktualisierung den oberen Rand der Ergebnisse anzuzeigen, aber das bedeutet nicht, dass wir auch Filter automatisch scrollen müssen.

Selbst wenn Sie auf diese Weise nur 6 bis 10 Funktionen angeben möchten, müssen Sie sich auf einen ziemlich hartnäckigen Kampf gegen das automatische Scrollen einlassen , bei dem jeweils nur ein einziger Filter registriert ist. Es ist möglich, auf mehrere Filter gleichzeitig zu tippen oder zu klicken, aber in diesem Fall reagiert die Benutzeroberfläche leider nicht wie erwartet. Das Gesamterlebnis ist ziemlich frustrierend und verwirrend, auch weil sich die Website langsam anfühlt und es immer mehr Aufwand erfordert, weiter zu filtern. Nicht das beste Beispiel für die Minimierung der Zeit vom Standardzustand bis zum Endzustand.

Eine Möglichkeit, diese Probleme anzugehen, wäre, den automatischen Bildlauf für Filter vollständig zu entfernen und einen besseren Weg zu finden, um anzuzeigen, dass jeweils nur eine Eingabe erfolgen kann. Beispielsweise könnten wir die gesamte Oberfläche einfrieren und damit jegliche Eingaben deaktivieren, bis die neuen Daten vom Server zurückkommen. Dann müssten wir warten, bis neue Ergebnisse in das DOM eingespeist werden, und erst dann kommt die Benutzeroberfläche zurück. Obwohl es etwas klarer ist als die vorherige Lösung, stellt es sich heraus, dass es eigene Probleme gibt.

Frieren Sie die Benutzeroberfläche niemals bei einer einzelnen Eingabe ein

Jedes Mal, wenn wir die Benutzeroberfläche bei einer einzigen Eingabe einfrieren, bremsen wir unsere Kunden aktiv darin, ihre Absicht auszudrücken. Wir machen es ihnen tatsächlich etwas umständlicher, anzugeben, woran sie interessiert sind, indem wir der Anzeige der Ergebnisse Vorrang vor der Eingabe einräumen. Das scheint aber eine falsche Priorisierung zu sein. Schauen wir uns das Beispiel unten an.

Bei Sears.com wird jedes Mal, wenn eine Auswahl getroffen wird, nicht nur die Benutzeroberfläche vollständig gesperrt; Die Benutzer werden auch an den Anfang der Seite geschoben. Das ist besonders frustrierend für Filter, die Akkordeons enthalten (z. B. den Link „Mehr anzeigen“ in „Marke“). Bei jedem neuen Filter muss der Benutzer nach unten scrollen und das Akkordeon öffnen, um das bestimmte Attribut zu finden, das er auswählen möchte. Walmart (siehe Beispiel unten) folgt dem gleichen Muster.

In diesen Fällen müssen wir uns auf JavaScript verlassen, um zuverlässig zwischen eingefrorenem und funktionierendem Zustand umzuschalten, selbst wenn die Daten nicht vom Server zurückkommen, oder wenn sie langsam zurückkommen oder wenn sie schlecht formatiert sind. Das ist eine ziemlich fragile Annahme, auf die man sich verlassen kann.

Jetzt wissen wir natürlich nicht, wann der Benutzer mit seiner Eingabe fertig ist, aber es ist nur vernünftig sicherzustellen, dass der Kunde während der gesamten Interaktion mit Filtern nie auf eine Rückmeldung einer Schnittstelle warten muss . Wenn wir uns nun die drei obigen Beispiele etwas genauer ansehen, werden wir eine Ähnlichkeit bemerken. Alle wenden bei der Auswahl automatisch jeden Filter an und deaktivieren jede weitere Auswahl, bis die neue Ergebnisseite zurückkehrt.

Es kommt jedoch bemerkenswert häufig vor, dass Kunden schnell mehrere Filter hinzufügen , manchmal in derselben Kategorie. Das Verhalten der Benutzeroberfläche unterstützt diese Absicht nicht gut.

Haben wir also Alternativen? Eine naheliegende Alternative ist es, dem Anwender die Entscheidung darüber zu überlassen, wann die Ergebnisse aktualisiert werden sollen. Das könnte bedeuten, eine „Übernehmen“-Schaltfläche hinzuzufügen und Kunden zu ermutigen, zuerst alle Filter auszuwählen, bevor sie Ergebnisse sehen. Aber es ist nicht unbedingt die einzige Option. Wie sich herausstellt, können wir eigentlich beides tun: aktuelle Ergebnisse sehen, während wir ohne Verzögerung mit dem Filter interagieren. Wir müssen nur von der synchronen Anzeige der Ergebnisse zu ihrem asynchronen Gegenstück übergehen.

Ergebnisse immer asynchron anzeigen

Wir haben bereits erwähnt, dass Filter und Matching-Ergebnisse oft etwas synchron sind. Wir könnten jedoch die Teile der Benutzeroberfläche aufteilen und beide separat asynchron rendern. In diesem Fall könnten bei jeder Filtereingabe übereinstimmende Ergebnisse asynchron aktualisiert werden, während die Filter immer zugänglich und am selben Ort bleiben. Mit jeder neuen Filtereingabe würde der Benutzer einen Blitz neuer Inhalte sehen, die einströmen.

Das obige BestBuy-Beispiel zeigt dieses Muster in Aktion. Wenn wir Filter in der linken Seitenleiste auswählen, werden sie im Hintergrund angewendet, während wir immer mehr Filter auswählen können, wenn wir uns dafür entscheiden. Die Produktliste wird asynchron aktualisiert: Es gibt nie einen deaktivierten Zustand, da jedes Mal, wenn die Daten vom Server zurückkommen, neue Inhalte in die Liste der übereinstimmenden Ergebnisse eingefügt werden.

Wir könnten es etwas deutlicher machen, indem wir zeigen, dass neue Produkte geladen werden, wenn neue Filter angewendet werden. Ein gutes Beispiel dafür ist Coolblue, bei dem auf der linken Seite eine asynchrone Benutzeroberfläche zum Filtern der Seitenleiste angezeigt wird.

An dieser Stelle sei betont, dass jede Eingabe im Filterbereich registriert und dann auf die Produktliste angewendet werden muss. Wir haben festgestellt, dass dies für viele Kunden ein erwartetes Verhalten ist, es sei denn, Sie halten eine schwebende Schaltfläche „Übernehmen“ in der Nähe des Filterbereichs.

Vermeiden Sie Layoutverschiebungen bei der Filtereingabe

Solange die Schnittstelle die Eingaben nicht blockiert, erwartet der Kunde natürlich, dass er mehrere Filter nacheinander setzen kann. Je nachdem, wo sich die Filter befinden, kann es jedoch gelegentlich zu versehentlichen Layoutverschiebungen kommen, sodass sie sich erneut auf der Seite orientieren, nach oben und unten scrollen müssen, um die Stelle zu finden, an der sie aufgehört haben, und dann mit der nächsten Eingabe fortfahren. Schauen Sie sich das Beispiel unten an. Was scheint das Problem bei VictoriaPlum (siehe unten) zu sein?

Jedes Mal, wenn Benutzer mit einem Filter interagieren und neue Produktartikel eingehen, findet im Filterbereich eine kleine Verschiebung statt. Normalerweise gibt es drei Gründe, warum es passiert:

• bei jeder Filtereingabe werden vom Kunden erweiterte Filterabschnitte automatisch eingeklappt,
• Filter, die früher verfügbar waren, sind nicht mehr verfügbar und werden ausgeblendet, wodurch die Höhe des Filterbereichs verringert wird.
• Die Übersicht der angewendeten Filter befindet sich über dem Filterbereich, wird also mit jedem neuen Filter größer und schiebt auch die Filter nach unten.

Um das erste Problem zu vermeiden, müssen wir den Status von Akkordeons beibehalten und sie offen halten, selbst wenn der Benutzer einen neuen Filter gesetzt oder die Seite aktualisiert hat. Wir müssen auch die Filtereinstellungen beim Aktualisieren oder Navigieren beibehalten. Tatsächlich sehen wir Kunden, die erwarten, dass die Filter auch dann noch angewendet werden , wenn sie zu vorherigen Kategorien oder Seiten zurückkehren (z. B. mit der Schaltfläche „Zurück“).

Für das zweite Problem, wenn Filter nicht mehr verfügbar sind, können wir sie deaktivieren, anstatt sie automatisch auszublenden, aber auch erklären, warum sie deaktiviert sind (ein freundlicher Hinweis könnte hilfreich sein) und was getan werden muss, um sie wieder zu aktivieren . Wir können dann auch eine Option zu „Alle nicht verfügbaren Optionen ausblenden“ hinzufügen.

Schließlich sollten wir die Position der angewendeten Filter über dem Filterbereich noch einmal überdenken. Es gibt wirklich nicht viele Möglichkeiten, wo sie leben könnten, und eine bessere Option scheint der Bereich über dem Filtern von Ergebnissen zu sein.

Filter über den Ergebnissen anzeigen

Um Layoutverschiebungen ganz zu vermeiden, können wir angewendete Filter über den Produktergebnissen anzeigen. Das würde den Filterbereich während der gesamten Benutzerinteraktion stabil und vorhersagbar halten. Tatsächlich muss es nicht immer sichtbar sein. Crate & Barrel im Beispiel unten ermöglicht es Kunden, Filter bei Bedarf ein- und auszublenden, während angewandte Filter dem dedizierten Bereich über den Produkten hinzugefügt werden. Beachten Sie, dass auch eine Option zum Löschen aller Filter verfügbar ist. (Die Produktseite hat sich jedoch geändert, seit das Video aufgenommen wurde.)

Eine weitere Option besteht darin, alle Filterabschnitte in Overlays umzuwandeln und sie beim Tippen/Klicken über den Ergebnissen anzuzeigen. Tatsächlich könnten Sie sogar schwebende Filter verwenden , sodass die Filter immer noch zugänglich sind, wenn ein Kunde die Seite nach unten scrollt.

Ein Beispiel für dieses Muster ist Adidas (siehe Bild unten). Die Filterleiste ist dauerhaft; Selbst wenn Benutzer die Seite nach unten scrollen, wird das Filter-Overlay nicht automatisch geschlossen – es erfordert die Eingabe des Benutzers, wodurch die Kontrolle wieder an den Benutzer übergeben wird. Es wird jedoch automatisch geschlossen, sobald einer der Filter ausgewählt wird. Wenn der Benutzer mehrere Filter auswählen möchte, muss er immer wieder dieselbe Filtergruppe öffnen. Es könnte eine bessere Idee sein, die Filter persistent zu halten. Das Ergebnis trotzdem: keine Layout-Verschiebungen, kein frustrierendes Scrollen in engen Gängen und Filter immer verfügbar.

Um nicht zu sagen, dass die Anzeige von Filtern über den Ergebnissen standardmäßig immer besser ist. Bei Asos führt jede Filtereingabe zu Sprüngen an den Anfang der Seite, sodass Kunden manuell nach unten scrollen müssen, um mit dem Filtern fortzufahren. Anstatt die gesamte Seite neu zu rendern, wäre es sinnvoller, den Filterbereich und die Produktliste separat neu zu rendern.

Im Allgemeinen scheinen die ersten beiden Optionen (Crate & Barrel und Adidas) jedoch sehr gut zu funktionieren, und sie lassen mehr Platz für die Anzeige von Produkten, während sie alle Probleme vermeiden, die wir zuvor besprochen haben. Das ist ein ziemlich zuverlässiges Muster, wenn wir Straßensperren oder Verwirrung vermeiden wollen. Aber wir können noch ein bisschen mehr tun, zum Beispiel mit einem guten alten „Bewerben“-Button.

Zeigen Sie die Anzahl der Ergebnisse auf der Schaltfläche „Übernehmen“ an

Es fühlt sich fast ein bisschen archaisch an, in Zeiten, in denen wir uns an nahtlose und reibungslose Interaktionen, Einblendungen und zeitgesteuerte Animationen gewöhnt haben, einen „Anwenden“-Button für Filter zu haben. Wenn wir die Kunden jedoch zu einem komfortablen Sortiment treiben wollen, gibt es kaum einen besseren Weg, als die Anzahl der Ergebnisse so schnell wie möglich anzuzeigen .

Ikea bietet Filter oben in den Ergebnissen. Manchmal erscheinen Filter in einem Dropdown-Overlay und manchmal als Pillen unter den Filtern. Im Gegensatz zu früheren Beispielen wird jedoch meistens, wenn ein Filter ausgewählt wird, auf der rechten Seite ein Mega-Filter-Overlay in der Seitenleiste angezeigt, in dem alle verfügbaren Filteroptionen gruppiert sind. Während der Kunde die Filter durchläuft, wird die Produktliste asynchron im Hintergrund aktualisiert. Beachten Sie vor allem die Schaltfläche „Übernehmen“, deren Bezeichnung sich je nach Eingabe ändert.

Bei jeder Filtereingabe wird eine neue Anfrage an den Server gesendet, um die Anzahl der Ergebnisse abzurufen und diese Anzahl dann in der Benutzeroberfläche anzuzeigen. Dies ist eine großartige Möglichkeit, den Benutzern ein sehr klares Gefühl dafür zu vermitteln, wie weit oder wie nah sie an ihrer komfortablen Reichweite sind.

Ein weiteres Beispiel ist Galaxus.ch (siehe unten), ein Schweizer E-Commerce-Händler, der ein erstklassiges Erlebnis in Sachen Filterung bietet. Die Filter werden über den Produktergebnissen angezeigt; Beim Antippen/Klicken wird ein Filter-Overlay angezeigt. Keine Verlangsamung, schnelle Reaktionszeiten und eine schöne Integration aktiver Filter in den Filterbereich. Ein großartiges Referenzbeispiel , das es wert ist, beim Entwerfen von Filtern aller Art berücksichtigt zu werden.

Im Allgemeinen scheint eine „Übernehmen“-Schaltfläche zusammen mit Echtzeit-Updates des Inhaltsbereichs am besten zu funktionieren. Es kombiniert wirklich das Beste aus beiden Lösungen: Ergebnisse werden sofort angezeigt, wenn sie eintreffen, während die Filter jederzeit zugänglich sind.

Vermeiden Sie geteilte Bildschirme auf Mobilgeräten

Die Probleme, die wir in diesem Artikel untersucht haben, gelten gleichermaßen für große und kleine Bildschirme. Auf kleinen Bildschirmen und insbesondere bei langsamen Verbindungen werden diese Probleme jedoch noch kritischer. Meistens neigen Schnittstellen dazu, die gesamte Benutzeroberfläche bei einem einzigen Filtereingang zu blockieren , was zu massiven Verzögerungen für Kunden unterwegs führt (z. B. Crutchfield, Walgreens). Andererseits ist es üblich, den Bildschirm zu teilen, um ein Filter-Overlay anzuzeigen, während die im Hintergrund aktualisierte Produktliste weiterhin angezeigt wird (z. B. Nordstrom).

Im Allgemeinen ist es jedoch möglicherweise besser, zu experimentieren, ob ein ganzseitiges Overlay für Filter eine bessere Leistung erbringen würde. Es bietet mehr Platz, um mit einer mehrspaltigen Ansicht zu experimentieren oder vielleicht sogar einen wischbaren Bereich anzuzeigen, um Filter auszuwählen, ohne zwischen separaten Seiten wechseln zu müssen. Tatsächlich könnte es eine gute Idee sein, Akkordeons zu verwenden, die ein- und ausgeklappt werden können, anstatt den Benutzer auf eine separate Seite zu bringen – ähnlich wie wir es mit Mega-Dropdowns besprochen haben.

Anders als auf dem Desktop ist es in all diesen Beispielen wichtig, eine Schaltfläche „Übernehmen“ zu haben, und Sie können sie etwas nützlicher machen, indem Sie die Anzahl der Produkte als Beschriftung auf der Schaltfläche hinzufügen und die Schaltfläche unten kleben lassen, während der Benutzer nach unten scrollt .

Filterdesign-Checkliste

Wie üblich finden Sie hier alle Dinge, die Sie beim Entwerfen jeglicher Art von Filtern beachten sollten – ein kleiner Helfer, um zu vermeiden, dass wichtige Details übersehen werden, bevor Sie sich in Gespräche mit Ihren Designer- und Entwicklerkollegen begeben. Eine vollständige Sammlung von Smart Interface Design Patterns Checklists finden Sie auch in Ihrem wirklich Smashing Magazine.

1. Können wir ein Filtersymbol vermeiden und Filter so anzeigen, wie sie sind?
2. Wenn nicht, welches Symbol wählen wir, um die Filterung anzuzeigen?
3. Ist das Symbol + Polsterung groß genug für bequemes Tippen?
4. Platzieren wir das Symbol oben, unten oder schwebend (mobil/Desktop)?
5. Was genau passiert, wenn der Benutzer auf das Symbol klickt/tippt?
6. Wie ändert sich das Symbol beim Tippen/Klicken?
7. Werden wir beim Klicken eine Art Animation oder Übergang haben?
8. Werden Filter als ganzseitiges/teilweises Overlay oder Slide-In angezeigt?
9. Können wir die Seitenleistenfilterung vermeiden, da sie normalerweise langsam ist?
10. Zeigen wir beliebte oder relevante Filter standardmäßig an?
11. Zeigen wir die Anzahl der erwarteten Ergebnisse für jeden Filter an?
12. Können wir einen horizontalen Swiper verwenden, um zwischen den Filtern zu wechseln?
13. Können wir Dropdowns vermeiden und nur Tasten/Chips + Toggles verwenden?
14. Bieten wir für komplexe Filter eine Suche innerhalb von Filtern an?
15. Verwenden wir Symbole, um Unterschiede zwischen verschiedenen Filtern zu erklären?
16. Verwenden wir die richtigen Elemente für Filter, zB Slider, Buttons, Toggles?
17. Werden Filter automatisch angewendet (ja, für Slide-Ins)?
18. Werden Filter bei der Bestätigung manuell angewendet („Anwenden“) (ja, für Overlays)?
19. Wie kommunizieren wir bereits ausgewählte Filter?
20. Können ausgewählte Filter als entfernbare Pillen, Chips oder Tags angezeigt werden?
21. Empfehlen wir relevante Filter basierend auf der Auswahl?
22. Verfolgen wir die Inkompatibilität zwischen ausgewählten Filtern?
23. Wie werden Fehlermeldungen oder Warnungen in der Benutzeroberfläche angezeigt?
24. Erlauben wir Kunden, alle Filter schnell und gleichzeitig zurückzusetzen?
25. Schweben Filter (oder die Filterschaltfläche) beim Scrollen auf Mobilgeräten/Desktops?
26. Können Benutzer auf dieselbe Stelle tippen, um Filter zu öffnen/zu schließen?

Einpacken

Zu oft ist das Filtererlebnis im Web kaputt und frustrierend, was es für Kunden nur unnötig schwierig macht, zu dieser glänzenden, komfortablen Auswahl relevanter Ergebnisse zu gelangen. Werfen Sie beim Entwerfen des nächsten Filters einen Blick auf einige der häufigsten Probleme, die Sie möglicherweise vermeiden möchten, und vermeiden Sie hoffentlich all die Frustration, die durch fehlerhafte und unzugängliche Implementierungen entsteht.

• Design für die komfortable Auswahl an Optionen, für den Fall, dass ein Kunde schnell mehrere Filter hinzufügen möchte – einen direkt nach dem anderen.
• Vermeiden Sie bei langen Filtergruppen winzige scrollbare Fenster und zeigen Sie bis zu 7–10 Optionen gleichzeitig mit einem Akkordeon an, das sich erweitern und alle Optionen beim Tippen/Klicken anzeigen würde. Fügen Sie auch eine automatische Vervollständigung der Suche und eine alphabetische Ansicht hinzu.
• Fügen Sie immer Stepper (+/-) und Texteingabefelder hinzu, wenn Sie Schieberegler verwenden,
• Kunden möchten häufig mehrere Filter des gleichen Typs einstellen. Lassen Sie Benutzer niemals automatisch bei einer einzelnen Eingabe scrollen und reduzieren Sie niemals eine Gruppe von Filtern automatisch.
• Frieren Sie die Benutzeroberfläche niemals bei einer einzelnen Eingabe ein und lassen Sie Ihren Kunden beim Festlegen von Filtern niemals warten, bis eine Benutzeroberfläche antwortet.
• Filter immer aktualisieren und Ergebnisse asynchron anzeigen , sodass bei jeder Filtereingabe übereinstimmende Ergebnisse asynchron aktualisiert werden können, während die Filter immer zugänglich und am selben Ort bleiben.
• Vermeiden Sie immer Layoutverschiebungen bei der Filtereingabe und erwägen Sie die Anzeige von Filtern über den Ergebnissen.
• Auf Mobilgeräten kann die Schaltfläche „Übernehmen“ am unteren Bildschirmrand klebrig sein. Aktualisieren Sie die Anzahl der Produkte und zeigen Sie sie auf der Schaltfläche an.

Artikel der Serie

Wenn Sie diesen Artikel nützlich finden, finden Sie hier eine Übersicht ähnlicher Artikel, die wir im Laufe der Jahre veröffentlicht haben – und es werden noch einige mehr auf Sie zukommen.

• Perfektes Akkordeon
• Perfekter responsiver Konfigurator
• Perfekte Geburtstagsauswahl
• Perfekte Datums- und Zeitauswahl
• Perfektes Mega-Dropdown
• Perfekter Funktionsvergleich
• Perfekter Slider
• Form Design Patterns Book von Adam Silver, veröffentlicht auf SmashingMag
• Abonnieren Sie unseren E-Mail-Newsletter, um die nächsten nicht zu verpassen.