Zum Hauptinhalt springen

Suche

Suche in Storybook

Verwendung​

Überblick​

Die LookupField-Komponente ermöglicht es Benutzern, anhand von Schlüsselwörtern einen Wert aus den verfügbaren Werten auszuwählen. Sie kann eine Hauptquelle für die Entdeckung oder Filterung von Inhalten sein.

Bei Verwendung als Suchleiste bestimmt die Platzierung der Suchleiste den Umfang der Suche und der Ergebnisse.

  • Suchleisten, die in einer Kopfzeile platziert sind, suchen in der gesamten Anwendung nach Ergebnissen.
  • Suchleisten, die innerhalb eines Elements platziert werden, suchen nur innerhalb des Elements nach Ergebnissen.

Aufbau​

Formatierung der Suche

Die LookupField-Komponente erscheint mit einer Beschriftung, einem Eingabefeld und einem Symbol.

LookupField besteht aus:

  1. Beschriftung: stellt den Kontext für die Suche des Benutzers her.
  2. Eingabefeld: ermöglicht den Benutzern die Eingabe von Schlüsselwörtern, Text und bestimmten Wörtern.
  3. (Wenn als Suche verwendet) Suchen-Symbol: löst die Suche aus, wenn darauf geklickt wird.
  4. Löschen-Symbol: entfernt den gesamten Inhalt aus dem Eingabefeld.

Best Practices​

  • Verwenden Sie Platzhaltertext, um Benutzern Hinweise auf geeignete Begriffe für den jeweiligen Kontext zu geben.
  • Beziehen Sie automatische Vorschläge ein, wo immer dies möglich ist.
  • Geben Sie die Kategorien der verfügbaren Werte klar und eindeutig an.
  • Verfassen Sie eine klare Leerzustandsmeldung, die den Benutzer zum nächsten Schritt leitet und Vorschläge für das weitere Vorgehen macht. (Siehe „Überlegungen zum UX-Schreiben“ unten).
  • Verwenden Sie Lookups und Suchfunktionen in Ihrer Anwendung sparsam. Nicht jedes Element muss nachgeschlagen oder gesucht werden.
  • Heben Sie die Begriffe hervor, die der Benutzer in die Ergebnisse eingegeben hat.
  • Fügen Sie den Ergebnissen Beschreibungen hinzu, um Benutzern die Navigation und die Auswahl der richtigen Option zu erleichtern.
  • Zeigen Sie die Anzahl der zurückgegebenen Ergebnisse an.
  • Behalten Sie den Originaltext bei, nachdem der Benutzer die Abfrage ausgeführt hat.
  • Verwenden Sie ein Verarbeitungssymbol, wenn das Abrufen von Werten mehr als 5 Sekunden dauert.
  • Benutzer verstehen den Zweck eines Lookup-Felds. Verwenden Sie daher nur eine inhaltsspezifische Beschriftung (anstelle eines allgemeinen Begriffs wie „Suchen“).

Verhalten​

Zustände​

Die LookupField-Komponente hat als mögliche Zustände „Aktiviert“, „Deaktiviert“, „Aktiv“ und „Fokus“.

  • Aktiviert: Teilt dem Benutzer mit, dass das Element für die Interaktion aktiviert ist (Standard).
  • Deaktiviert: Teilt dem Benutzer mit, dass das Element nicht interaktiv ist.
  • Fokus: Gibt eine Rückmeldung darüber, dass der Benutzer das Element hervorgehoben hat, in der Regel über eine Eingabemethode wie eine Tastatur oder Sprachbefehl.
  • Aktiv: Gibt eine Rückmeldung darüber, dass der Benutzer auf das Element klickt oder tippt.

Interaktionen​

Maus​

Wenn der Benutzer in das Lookup-Feld klickt, „blinkt“ der Cursor, bis der Benutzer mit der Eingabe beginnt.

Benutzer sollten die Möglichkeit haben, den Vorgang sowohl über das Symbol als auch über die Eingabetaste zu initiieren.

Tastatur​

Wenn TAB gedrückt wird, wechselt der Tastaturfokus auf das Eingabefeld. Durch Drücken der Leertaste oder der Pfeiltaste nach unten wird das Popup-Menü mit einer Liste von Werten geöffnet. Die Liste lässt sich verfeinern, indem die ersten Buchstaben des gewünschten Namens eingetippt werden.

Screenreader​

Das Eingabefeld und die Beschriftung werden über das aria-labelledby-WAI-ARIA-Attribut zugeordnet. Das Feld enthält auch den Wert von aria-autocomplete="list", um anzuzeigen, dass es ein Listen-Popup mit Autovervollständigungsfunktion enthält. Während Sie tippen, füllt das Eingabefeld eine Dropdown-Liste mit Werten aus, die am ehesten dem entsprechen, was Sie in das Feld eingeben. Die Option, die mit den eingegebenen Informationen übereinstimmt, wird automatisch fokussiert und von einem Screenreader vorgelesen.

  • Wenn der Benutzer das Symbol auswählt oder die Eingabetaste drückt, werden die Ergebnisse unterhalb des Suchfelds angezeigt.
  • Wie der Benutzer durch die Ergebnisse navigiert, hängt von der jeweiligen Anwendung ab.

Fehlerbedingungen​

Wenn es keine Ergebnisse auf der Grundlage der Kriterien gibt, erscheint eine Meldung, die zu weiteren Schritten ermutigt, sofern möglich.

Überlegungen zum UX-Schreiben​

Leerzustände​

  • Wenn Sie einen Leerzustände beschreiben (z. B. Suchvorgänge, die keine Ergebnisse liefern), vermeiden Sie es, dem Benutzer mitzuteilen, was nicht vorhanden ist. Nutzen Sie stattdessen die Gelegenheit, zu vermitteln, was vorhanden ist.
  • Verwenden Sie KEINE Begriffe wie „System“, „Abfrage“ oder „Werte“. Zum Beispiel: „Es wurden keine Ergebnisse für die eingegebenen Werte gefunden“ oder „Die Abfrage ergab keine Ergebnisse.“
  • Ein Leerzustand bei Suchergebnissen sollte den Benutzer zum nächsten Schritt leiten und ihn im Ablauf des Produkts weiterbringen.
  • Erklären Sie die Situation. Teilen Sie den Benutzern mit, dass Sie nicht gefunden haben, wonach sie gesucht haben. Ihr Ton sollte einfühlsam sein.
  • Schlagen Sie alternative Wege vor, um voranzukommen, die für Ihre Art von Inhalt relevant sind, zum Beispiel:
  • In der Regel gibt es mehrere Möglichkeiten, nach derselben Sache zu suchen. Dazu gehören die Suche nach Kategorien, die Suche nach einem allgemeineren oder spezifischeren Begriff, die Verwendung von Synonymen und die Überprüfung der Rechtschreibung.
    • Gibt es Sachen, die dem ähnlich sind, was der Benutzer gesucht hat? Sie können Artikel oder Links vorschlagen, die so ähnlich wie möglich sind. Zum Beispiel:
  • Artikel desselben Herstellers (z. B. andere Ford-Fahrzeuge).
    • Artikel mit ähnlichen Spezifikationen von verschiedenen Herstellern (z. B. Fahrzeuge von 2010).
    • Artikel, die einen ähnlichen Typ, Stil oder eine ähnliche Ausstattung haben (z. B. Limousinen der Mittelklasse).
    • Kann Ihre Suchmaschine ähnliche Begriffe finden? Wenn ja, sollten Sie diese Ergebnisse den Benutzern anbieten, um ihnen eine weitere Suche zu ersparen.
  • Es ist wichtig zu verstehen, was die Benutzer mit ihrer Suche erreichen wollen. Bieten Sie den Benutzern etwas, das sie ihrem Ziel näher bringt.
  • Achten Sie auf eine freundliche und umgangssprachliche Sprache, zum Beispiel: „Wir konnten keine Ergebnisse finden. Haben Sie [Link zu einem ähnlichen Begriff] gemeint? Versuchen Sie, nach etwas anderem zu suchen oder Ihre Suche zu erweitern.“

Platzhaltertext​

  • Verwenden Sie Platzhaltertext, um die Suche zu vereinfachen. Sie können zum Beispiel die Auswahl einschränken, indem Sie im Suchfeld Kategorien definieren. Auf diese Weise können sich die Benutzer auf die Möglichkeiten konzentrieren und sich bei der Suche orientieren.
  • Alternativ können Sie den Benutzern auch eine direkte Frage (vorzugsweise mit der Anrede „Sie“) zu besonders wichtigen Feldern stellen. Das wird die Benutzer motivieren, Antworten zu finden und in die Website einzutauchen.

Barrierefreiheit​

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

  • Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
  • Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
  • Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
  • Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.