Zum Hauptinhalt springen

Filtern

Überblick​

Verwenden Sie Filter, um den angezeigten Inhalt basierend auf bestimmten Kriterien oder Attributen zu verfeinern oder einzugrenzen.

Filtern ist ein entscheidendes Element in Benutzeroberflächen, insbesondere in Anwendungen oder auf Websites, die große Mengen an Daten oder Inhalten anzeigen.

Dieses Muster umfasst:

  • Einfache Filter
  • Facettenfilter

Zu verwenden​

  • Bei der Verarbeitung von großen Daten- oder Inhaltsmengen. Benutzer können Filter anwenden, um sich bei der Analyse auf bestimmte Datensegmente zu konzentrieren.
  • Zur Ergänzung der Suchfunktionen und zur weiteren Verfeinerung der Suchergebnisse basierend auf bestimmten Kriterien.
  • Wenn Benutzer ihre Anzeige von Daten anpassen müssen. Mit Filtern können Sie die angezeigten Informationen an ihre Vorlieben und Prioritäten anpassen.

Nicht zu verwenden​

  • Wenn der Datensatz klein und überschaubar und nicht viele Unterscheidungsmerkmale aufweist.
  • Wenn der Benutzer genau weiß, wonach er sucht und dies über eine einfache Suchabfrage finden kann.
  • Für kritische Inhalte, die in ihrer Gesamtheit ohne Ausschluss dargestellt werden müssen.

Auswahlmethoden​

Einzelauswahl​

Bei der Einzelauswahl können Benutzer nur ein Attribut aus einer Reihe von sich gegenseitig ausschließenden Optionen auswählen.

  • Verwenden Sie eine Optionsfeldgruppe, wenn maximal 5 Attribute vorhanden sind.
  • Verwenden Sie ein Einzelauswahlfeld für eine längere Liste von Optionen (6 oder mehr).
  • Verwenden Sie Switches für binäre Auswahlmöglichkeiten oder Filter mit nur zwei möglichen Zuständen. Die Filterergebnisse werden in Echtzeit aktualisiert, und es ist keine „Filter anwenden“-Aktion erforderlich.

Abbildung der Einzelauswahl-Methoden, einschließlich Optionsfeldgruppe, Einzelauswahlfeld und Schalter

Wir empfehlen zum Filtern keine Umschaltflächen, da der Anzeigebereich von Filtern in der Regel schmal ist. Verwenden Sie stattdessen je nach Anwendungsfall eine Optionsfeldgruppe, ein Einzelauswahlfeld oder einen Schalter.

Verwenden Sie für die Einzelauswahl je nach Anwendungsfall eine Optionsfeldgruppe, ein Einzelauswahlfeld oder einen Schalter.
Verwenden Sie keine Umschaltflächen zum Filtern.

Mehrfachauswahl​

Mit der Mehrfachauswahl können Benutzer mehrere Attribute gleichzeitig anwenden.

Abbildung mit Mehrfachauswahlmethoden einschließlich Kontrollkästchen und Mehrfachauswahlfeld

Wie bei der Einzelauswahl empfehlen zum Filtern keine Umschaltflächen. Das Layout kann bei kleineren Containern, wie z. B. einem Popover oder einem responsiven mobilen Display, leicht gestört werden. Verwenden Sie stattdessen Kontrollkästchen oder ein Mehrfachauswahlfeld, je nach Anwendungsfall.

Verwenden Sie für die Mehrfachauswahl je nach Anwendungsfall Kontrollkästchen oder ein Mehrfachauswahlfeld.
Verwenden Sie keine Umschaltflächen zum Filtern.

Datumsfilter​

Mit dem Datumsfilter können Benutzer eine Einzel- oder Bereichsauswahl treffen. Dieses Steuerelement filtert die Datenergebnisse nach einem bestimmten Tag oder einem Bereich von Tagen.

Von den Anwendungsteam wird eine Standardauswahl an Optionen festgelegt. Es gibt auch eine optionale benutzerdefinierte Datumsauswahl, die eine Datumsauswahl auslöst.

Zu den üblichen Standardoptionen gehören die folgenden:

  • Heute
  • Gestern
  • Letzte X Tage
  • Letzte Woche
  • Letzte X Wochen
  • Aktueller Monat (vom 01.xx.xxxx bis heute/jetzt)
  • Letzte X Monate
  • Aktuelles Jahr (xxxx)
  • Letztes Jahr
  • Letzte X Jahre

Filtern von Daten über ein Auswahlfeld

Bei der Auswahl von „benutzerdefiniert“ können Benutzer ein Datum oder einen Datumsbereich aus einer Datumsauswahl auswählen. Wenn der Benutzer ein einzelnes Datum auswählt, wird dieser Tag in der Auswahleingabe angezeigt. Beim erneuten Auslösen des Auswahl-Dropdowns wird nun „Benutzerdefiniert (Datum)“ angezeigt.

Auswählen eines einzelnen Tages mit dem Datumsfilter

Wenn der Benutzer einen Datumsbereich auswählt, wird dieser Bereich in der Auswahleingabe angezeigt. Beim erneuten Auslösen des Auswahl-Dropdowns wird nun „Benutzerdefiniert (Datum bis Datum)“ angezeigt.

Auswählen eines Datumsbereichs mit dem Datumsfilter

Bereiche​

Mit Bereichsfiltern können Benutzer einen Wertebereich festlegen. Dies wird üblicherweise für das Filtern numerischer Daten innerhalb eines angegebenen Bereichs oder anderer kontinuierlicher Daten verwendet.

  • Legen Sie den Wertebereich anhand von zwei Zahleneingaben fest, da dies eine größere Genauigkeit ermöglicht.
  • Verwenden Sie den Schieberegler, wenn Sie eine optisch ansprechendere Anzeige benötigen (z. B. Verbraucheranwendungen oder hauptsächlich auf Mobilgeräten genutzte Anwendungen). Der genaue Wert ist nicht so wichtig, und die höchste Zahlenangabe ist festgelegt.

Festlegen eines Wertebereichs mithilfe von Zahleneingaben oder einem Schieberegler

Eingabe​

Eingabefilter stimmen Benutzereingaben mit Datensatzeinträgen ab und geben entsprechende Ergebnisse zurück. Dies ist hilfreich bei großen Datensätzen oder wenn Benutzer bestimmte Elemente im Auge haben.

  • Verwenden Sie zum Filtern des gesamten Datensatzes die Suche.
  • Verwenden Sie die Zahleneingabe, um die Filterung auf Zahlen oder bestimmte numerische Teilmengen des Datensatzes, wie z. B. eine Spalte in einer Zahlentabelle, zu beschränken.
  • Verwenden Sie die Texteingabe, um die Suche auf Zeichenfolgen zu beschränken. Dies ist vergleichbar mit der Suche, wird jedoch auf eine bestimmte Teilmenge oder Kategorie innerhalb des Datensatzes angewendet.

Abbildung mit Such-, Zahlen- und Texteingabefiltern

Einfache Filter​

Aufbau eines einfachen Filters​

Popover​

Abbildung des Aufbaus eines einfachen Filters, der in einem Popover angezeigt wird

  1. Filter-Auslöser: Zeigt das Filter-Popover an.
  2. Filter-Container: Organisiert Filtersteuerelemente und -optionen innerhalb eines definierten Bereichs.
  3. Filterbereich: Enthält bis zu 3 empfohlene Filtersteuerelemente.
  4. Aktionsbereich: Beinhaltet Schaltflächen zum Anwenden der Filter oder zum Abbrechen des Vorgangs.

Abschnitt​

Abbildung des Aufbaus eines einfachen Filters, der in einem Inline-Abschnitt angezeigt wird

  1. Filter-Auslöser: Zeigt den Filterbereich an, der den Inhalt der Seite überträgt. Bei einer zweiten Interaktion blendet der Filter-Auslöser den Abschnitt aus.
  2. Filter-Container: Organisiert Filtersteuerelemente und -optionen innerhalb eines definierten Bereichs. Der Filtercontainer hat eine andere Hintergrundfarbe, damit er für die Benutzer besser zu sehen ist.
  3. Filterbereich: Enthält bis zu 6 Filtersteuerelemente. Diese Filter entsprechen in der Regel den Spalten einer Tabelle.
  4. Aktionsbereich: Beinhaltet Schaltflächen zum Anwenden der Filter oder zum Abbrechen des Vorgangs.

Richtlinien für die Verwendung einfacher Filter​

Bewährte Verfahren für einfache Filter​

  • Benutzer können einfache Filter durch eine Interaktion mit dem Auslöser auslösen. Einfache Filter werden in einem Popover, über dem aktuellen Inhalt oder in einem Inline-Abschnitt angezeigt. Wenn Sichtbarkeit auf „true“ gesetzt ist, überträgt der Inline-Abschnitt den Inhalt der Seite.
  • Verwenden Sie der Einfachheit halber bis zu 3 Filtersteuerelemente. Filter sind additiv, d. h. je mehr Filter, desto kleiner ist die Ergebnismenge. Wenn der Benutzer zu viele Filter auf einen Datensatz anwendet, ist es möglich, dass keine Ergebnisse zurückgegeben werden.
  • Die Stapelaktualisierung wendet alle Filter zusammen an, wenn die Aktion „Senden“ angeklickt wird. In diesem Fall ist die Absendeaktion normalerweise Anwenden (synchrone Anforderung). Der Datensatz wird nur einmal aktualisiert. Verwenden Sie die Stapelaktualisierung, wenn Filter standardmäßig ausgeblendet sind und aufgerufen werden müssen. Die Stapelaktualisierung muss über mindestens zwei Aktionen verfügen: Anwenden und Abbrechen.
  • Bei der Sofortaktualisierung werden Filter angewendet, sobald der Benutzer mit ihnen interagiert (asynchrone Anforderung). Die Filterergebnisse werden sofort entsprechend den Bedingungen aktualisiert. Verwenden Sie die Sofortaktualisierung für Fälle, in denen die Filtersteuerelemente ständig auf der Benutzeroberfläche angezeigt werden.
  • Jutro empfiehlt, nach Möglichkeit Stapelaktualisierungen zu verwenden.

Feedback und einfache Filter​

  • Die Benutzer müssen immer informiert werden, wenn Filter auf den aktuellen Datensatz angewendet werden.
  • Verwenden Sie ein Badge oder eine andere Art von Anzeige auf der Filterauslöseschaltfläche.
  • Sie können auch Feedback in Form von Chips verwenden oder eine Textzeile auf der Hauptbenutzeroberfläche über dem Datensatz hinzufügen. So können Benutzer erkennen, dass Filter darauf angewendet wurden.

Zurücksetzen einfacher Filter​

  • Das Hinzufügen einer Aktion zum Zurücksetzen von Filtern ist optional. Es eignet sich besser für komplexere Filtermechanismen wie Facettenfilter oder Boolesche Filter.

Filtern von Tabellen​

Wenn Sie den Inhalt einer gesamten Tabelle filtern möchten, verwenden Sie einen Abschnittsfilter anstelle eines Popovers.

Filtern des Inhalts einer Tabelle mit einem Abschnittsfilter

Filtern der Tabelle nach Spalten​

Das Aktivieren der Spaltenfilterung für Tabellen ist optional. Auf Spalten, die gefiltert werden können, wird ein Filtersymbol angezeigt. Wenn Sie mit dem Filtersymbol interagieren, wird ein Popover mit den relevanten Filtersteuerelementen ausgelöst.

Filtern von Spalten mit einem Textfilter

Filtern von Spalten anhand eines Datums

Facettenfilter​

Aufbau eines Facettenfilters​

Abbildung des Aufbaus eines Facettenfilters

  1. Filter-Auslöser: Zeigt das Filter-Popover oder den Filterbereich an.
  2. Anzahl der angewandten Filter: Zeigt an, wie viele Filter derzeit aktiv sind oder auf die Suchergebnisse angewendet werden.
  3. Alle Filter löschen: Entfernt alle derzeit angewendeten Filter in einer einzigen Aktion und stellt den ursprünglichen Zustand der Suchergebnisse wieder her.
  4. Filter-Chips: Geben an, welche Filter derzeit angewendet werden, und fügen eine Aktion hinzu, um sie zu löschen.
  5. Gruppierung: Gruppiert ein oder mehrere Filtersteuerelemente unter einer Kategorie. Dies kann eine einfache Trennlinie oder ein komplexes Accordion sein.
  6. Filterbereich: Es gibt keine Beschränkungen für Filtersteuerelemente oder -kategorien.
  7. Aktionsbereich: Beinhaltet Schaltflächen zum Anwenden der Filter oder zum Abbrechen des Vorgangs.

Richtlinien für die Verwendung von Facettenfiltern​

Bewährte Verfahren für Facettenfilter​

  • Benutzer können Facettenfilter durch eine Interaktion mit dem Auslöser auslösen. Facettenfilter können in einem Popover oder einem Drawer angezeigt werden oder aber als ständiger Bestandteil der Benutzeroberfläche, normalerweise in einem Seitenbereich.
  • Facettenfilter können beliebig viele Filter enthalten. Filter sind additiv, d. h. je mehr Filter, desto kleiner ist die Ergebnismenge. Wenn der Benutzer zu viele Filter auf einen Datensatz anwendet, ist es möglich, dass keine Ergebnisse zurückgegeben werden.
  • Die Stapelaktualisierung wendet alle Filter zusammen an, wenn die Aktion „Senden“ angeklickt wird. In diesem Fall ist die Absendeaktion normalerweise Anwenden (synchrone Anforderung). Der Datensatz wird nur einmal aktualisiert. Verwenden Sie die Stapelaktualisierung, wenn Filter standardmäßig ausgeblendet sind und aufgerufen werden müssen. Die Stapelaktualisierung muss über mindestens zwei Aktionen verfügen: Anwenden und Abbrechen.
  • Bei der Sofortaktualisierung werden Filter angewendet, sobald der Benutzer mit ihnen interagiert (asynchrone Anforderung). Die Filterergebnisse werden sofort entsprechend den Bedingungen aktualisiert. Verwenden Sie die Sofortaktualisierung für Fälle, in denen die Filtersteuerelemente ständig auf der Benutzeroberfläche angezeigt werden.

Feedback und Facettenfilter​

  • Die Benutzer müssen immer informiert werden, wenn Filter auf den aktuellen Datensatz angewendet werden.
  • Verwenden Sie ein Badge oder eine andere Art von Anzeige auf der Filterauslöseschaltfläche.
  • Geben Sie die Anzahl der angewandten Filter an.

Zurücksetzen von Facettenfiltern​

  • Facettenfilter müssen über eine Aktion zum Löschen von Filtern verfügen.
  • Jutro empfiehlt, die Löschaktion oben im Feld des Facettenfilter neben der Anzahl der angewendeten Filter anzuzeigen.
  • Zum Löschen bestimmter Filter können auch Chips verwendet werden.

Layouts​

Facettenfilter werden angezeigt in:

  • Popover
  • Drawer
  • Seitenabschnitt (ständig und besser für asynchrone Anforderungen)

Abbildung von Facettenfiltern, angezeigt im Popover, im Drawer und im Seitenbereich

Gruppierung​

Die Kategorien sind gruppiert nach:

  • Trenner
  • Trenner mit Kopfzeile
  • Accordions (siehe folgendes Beispiel)

Abbildung von Facettenfiltern, angezeigt im Popover, im Drawer und im Seitenbereich

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
  • Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
  • Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
  • Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
  • Halten Sie Wörter und Sätze kurz.

Barrierefreiheit​

Wenn Filter in einem Popover angezeigt werden, funktioniert dies als Fokusfalle.

Nach dem Auslösen erhält das erste interaktive Element innerhalb des Popovers den Fokus. Durch Drücken von Tab wird der Fokus nach vorn verschoben.

Durch erneutes Drücken auf Tab, wenn sich der Fokus auf dem letzten interaktiven Element befindet (normalerweise die Schaltfläche Anwenden), gelangen Benutzer zum oberen Rand des Popovers, zum ersten interaktiven Element.

Das Popover wird entweder durch Abbrechen oder Anwenden geschlossen, oder durch Drücken auf Esc.

Navigieren in Filtern mit der Tastatur

Reaktionsfähigkeit​

Obwohl das Popover auf fast jede Größe verkleinert oder ausgedehnt werden kann, empfehlen wir, Popover für Filter zwischen 240 und 480 px zu halten.

Bild mit Popover-Filtern und Reaktionsfähigkeit

Popover zum Filtern haben eine Mindestgröße von 160 px.

Abbildung mit der Mindestgröße von Popover-Filtern

Theming​

Standardmäßig entsprechen Theming und Branding der Anwendung, es sei denn, sie werden überschrieben.

Muster können mit Themes gestaltet werden, um bestimmte Markenanforderungen und Kundenwünsche zu erfüllen. Dazu gehören visuelle Elemente wie Farben, Typografie, Symbole, Schaltflächen und andere Komponenten und grafische Elemente.

Erfahren Sie mehr über das Theming mit Design-Token

Komponenten​

Filter haben die folgenden Komponenten:

Muster​

Ressourcen​

Laden Sie eine ZIP-Datei mit sämtlichen aktuellen Jutro-Mustern herunter und beginnen Sie mit der Gestaltung.

Jutro-Musterbibliothek (19.6 MB)