Zum Hauptinhalt springen

Autovervollständigung

Überblick​

Das Autovervollständigungsmuster bietet während der Eingabe prädiktive Textvorschläge an. Diese Funktion verbessert die Geschwindigkeit, Genauigkeit und Effizienz bei der Eingabe. Außerdem werden Fehler bei der Eingabe komplexer Ausdrücke oder Code verringert, indem eine Liste relevanter Vorschläge angezeigt wird. Die Autovervollständigungs-Funktionalität ist vielseitig und unterstützt verschiedene Felder und Programmierumgebungen. Dadurch eignet sich die Autovervollständigung für unterschiedliche Entwicklungs- und Eingabeszenarien.

Zu verwenden​

  • Komplexe Eingaben: Zur Eingabe komplexer Ausdrücke, Formeln oder Codeschnipsel in Code-Editoren, Datenabfragen oder mathematischen Funktionen.
  • Häufig verwendete Begriffe oder Befehle: in Szenarien mit allgemeinen Eingaben, z. B. Arbeitsablaufaktionen oder Bewertungsregeln, um den Prozess mit vordefinierten Vorschlägen zu optimieren.
  • Verbesserung der Genauigkeit: Wenn die Genauigkeit der Eingabe entscheidend ist, wie z. B. bei JMESPath-Ausdrücken oder Programmiersyntax, um eine korrekte Termauswahl ohne Auswendiglernen zu gewährleisten.
  • Mehrsprachige Umgebungen: Für Apps, die mehrere Programmiersprachen oder -systeme unterstützen (z. B. Python, JavaScript, JMESPath), um die Verwaltung sprachübergreifender Vorschläge zu unterstützen und den Kontextwechsel zu erleichtern.

Nicht zu verwenden​

  • Einfache Eingaben: Wenn das Eingabefeld einfache Ein-Wort-Antworten erwartet (z. B. Benutzername, E-Mail-Adresse oder einfache Formulareingabe), kann die Implementierung der Textvervollständigung die Benutzererfahrung erschweren und ist unnötig.
  • Übermäßig dynamische oder unvorhersehbare Daten: Wenn Benutzereingaben sehr eindeutig oder unvorhersehbar sind, z. B. in Freitextfeldern oder Kommentaren, kann das Anbieten von Vorschlägen in diesen Situationen zu irrelevanten oder ablenkenden Ergebnissen führen.
  • Geschwindigkeitskritische Szenarien: In Szenarien, in denen die Geschwindigkeit Vorrang vor der Genauigkeit hat und die Benutzer mit den Eingaben vertraut sind (z. B. Schnellsuchleisten), kann die Autovervollständigung die Interaktion eher verlangsamen als verbessern.
  • Begrenzte Datensätze: Wenn der Datensatz, der zum Generieren von Vorschlägen verwendet wird, zu klein oder statisch ist, bietet die Autovervollständigungsfunktion möglicherweise keinen nennenswerten Wert und kann die Benutzeroberfläche mit irrelevanten oder unnötigen Optionen überladen.

Aufbau​

1. Dropdown aus einem Feld​

Abbildung zur Veranschaulichung der in Standardeingabefeldern implementierten Autovervollständigungsfunktion

Diese Version der Autovervollständigungsfunktion ist in Standardeingabefeldern implementiert, in denen die Benutzer vordefinierte oder häufig verwendete Begriffe eingeben müssen. Während der Eingabe erscheint eine Dropdown-Liste mit Vorschlägen, die den eingegebenen Zeichen entsprechen. Zu den wichtigsten Funktionen gehören:

  • Echtzeitvorschläge während der Eingabe
  • Eine vordefinierte Bibliothek mit Begriffen für Vorschläge
  • Navigations- und Auswahlmöglichkeiten per Tastatur- oder Mauseingabe
  • Die Möglichkeit, Vorschläge mithilfe von Symbolen grafisch zu kategorisieren oder zu unterscheiden

2. Dropdown aus einem Code-Editor (IDE)​

Abbildung der Version der in Code-Editoren integrierten Autovervollständigung

Diese Version ist in Code-Editoren (IDE) integriert, um Entwickler beim effizienteren Schreiben von Code zu unterstützen. Während der Eingabe durch den Benutzer schlägt das Autovervollständigungsmuster basierend auf der Sprache und dem Kontext relevante Codeschnipsel, Funktionen oder Variablen vor. Zu den wichtigsten Funktionen gehören:

  • Kontextbezogene Vorschläge basierend auf der verwendeten Programmiersprache
  • Schneller Zugriff auf Funktionen, Variablen und Syntaxelemente
  • Unterstützung für mehrsprachige Umgebungen
  • Optionen für die automatische Vervollständigung, die die Programmierzeit erheblich verkürzen können
  • Symbole für Funktionen, Klassen oder Variablen für schnelle visuelle Hinweise

Die Standardsuche bietet Vorschläge, die auf einem vordefinierten statischen Datensatz oder einer Reihe häufig verwendeter Begriffe basieren. Der Benutzer beginnt zu tippen und das System stellt Optionen aus diesem begrenzten Datensatz zur Verfügung. Dies ist nützlich für Szenarien, in denen es unwahrscheinlich ist, dass sich die Daten häufig ändern, z. B. bei vordefinierten Arbeitsabläufen, allgemeinen Programmierausdrücken oder zuvor gespeicherten Datenfeldern. Zu den wichtigsten Funktionen gehören:

  • Vorschläge basierend auf einer festgelegten Bibliothek oder häufig verwendeten Begriffen
  • Schnellere Ergebnisse, da der Datensatz in der Regel kleiner ist

Diese Art der Suche eignet sich für Umgebungen, in denen die Eingaben konsistent und bekannt sind. Sie ist ideal für einfache Formulareingaben oder Arbeitsabläufe mit begrenzter Datenvariation.

Die aktive Suche aktualisiert ihre Vorschläge dynamisch auf der Grundlage eines größeren und sich weiterentwickelnden Datensatzes. Während der Eingabe fragt das System die Daten aktiv in Echtzeit ab und bietet die relevantesten und aktuellsten Optionen an. Dies ist ideal für komplexe oder dynamische Umgebungen, z. B. Code-Editoren oder Query Builder, in denen sich die Daten häufig ändern und Echtzeitzugriff benötigt wird. Zu den wichtigsten Funktionen gehören:

  • Dynamische Echtzeit-Vorschläge, die auf der aktiven Abfrage großer oder sich ständig ändernder Datensätze basieren
  • Kontextsensitive Optionen abhängig von der Benutzereingabe und der Umgebung

Diese Art der Suche erfordert mehr Rechenleistung, liefert aber relevantere und aktuellere Vorschläge. Sie eignet sich für Umgebungen, in denen Daten häufig aktualisiert werden oder Anpassungen in Echtzeit erforderlich sind.

Unterstützte Sprachen​

Die Autovervollständigungsfunktion wurde entwickelt, um mehrere Programmier- und Abfragesprachen zu unterstützen, wodurch sie an verschiedene Anwendungsfälle angepasst werden kann, von Skripten bis hin zu mathematischen Berechnungen:

  • Python: Schlägt Python-spezifische Funktionen, Bibliotheken und Syntaxelemente vor.
  • JavaScript: Bietet Unterstützung für integrierte JavaScript-Funktionen, ES6+-Syntax und häufig verwendete Bibliotheken.
  • C/C++: Hilft bei Standardbibliotheksfunktionen, Klassen und häufig verwendeter Syntax in C/C++.
  • Ruby: Bietet für relevante Funktionen, Module und Syntax.
  • JMESPath: Bietet Vorschläge für JMESPath-Ausdrücke, die bei der Abfrage und Bearbeitung von JSON-Daten nützlich sind.
  • Mathematische Funktionen: Unterstützt mathematische Standardfunktionen wie SUM, AVERAGE, COUNT, MIN, MAX

Abbildung zur Veranschaulichung, wie das Autovervollständigungsmuster mathematische Standardfunktionen unterstützt

Symbole und Tags​

Um die Benutzerfreundlichkeit und Ästhetik der Dropdown-Liste mit der Textvervollständigung zu verbessern, wurden zusätzliche Elemente integriert:

  • Symbole: Symbole werden verwendet, um verschiedene Kategorien oder Arten von Vorschlägen darzustellen. Diese Symbole bieten einen schnellen visuellen Hinweis, damit Benutzer die verschiedenen Arten von Vorschlägen auf einen Blick unterscheiden können.
  • Tags: Tags sind zusätzliche Kennungen, die neben jedem Vorschlag angezeigt werden können. Diese Tags bieten Kontextinformationen, z. B. die Sprache oder die Funktionskategorie, und helfen den Benutzern, die Relevanz jedes Vorschlags schnell zu verstehen.

Abbildung der Symbole und Tags im Zusammenhang mit der Dropdown-Liste „Autovervollständigung“

Interaktionen​

Benutzer können auf folgende Weise mit dem Autovervollständigungsmuster interagieren:

  • Tastatureingabe: Benutzer können im Feld oder im Code-Editor tippen, um die Dropdown-Liste auszulösen und mithilfe der Pfeiltasten durch die Vorschläge zu navigieren.
  • Mauseingabe: Benutzer können direkt auf einen Vorschlag klicken, um ihn aus der Dropdown-Liste auszuwählen.
  • Tag-Auswahl: Tags können auch angeklickt werden, sodass Benutzer Vorschläge basierend auf bestimmten Kriterien oder Kategorien filtern können.

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

Unterstützende Recherche​

Die Recherche für dieses Muster bestand aus einer Wettbewerbsanalyse. Die Wettbewerbsanalyse ist eine Recherchetechnik, mit der Sie vergleichen und verstehen können, woran andere auf demselben Gebiet arbeiten. Die UX-Designer analysierten die Muster von 7 anderen Designbibliotheken. Sie suchten nach relativen Stärken und Schwächen, Trends und Unterschieden. Die Designer nahmen diese Informationen, fanden Gemeinsamkeiten und erstellten ein Muster, das auf diesen Praktiken basiert.

Ressourcen​

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

Jutro-Musterbibliothek (19.6 MB)