Also, Sie möchten eine @erwähnen Autocomplete-Funktion erstellen?

Wir alle sind mit dem Konzept der Autovervollständigung vertraut, oder? Sie tippen etwas in ein Suchfeld ein und es wird versucht zu erraten, wonach Sie suchen, während Sie tippen, und es werden Vorschläge angezeigt, oft unter dem Cursor. Während wir Autovervollständigung auf E-Commerce-Websites gewohnt sind, die zu Such- oder Produktseiten weiterleiten, ist eine unterschätzte Anwendung **die Verwendung als sekundäres Suchmuster zur Verbesserung der Tipperfahrung.**

In modernen Webanwendungen gibt es keinen Grund, warum eine Kompositionsbox nur ein langweiliges, einfaches Textfeld sein sollte oder sich auf Rich-Text-Formatierung beschränken sollte. Soziale und Produktivitäts-Apps wie Twitter, Slack, Notion, Google Docs und Asana haben das "@erwähnen"-Muster populär gemacht, das es Ihnen ermöglicht, andere Benutzer beim Tippen zu referenzieren. Sie können eine andere Person, einen Kanal, eine Datei oder ein anderes abfragbares Objekt mit Auslösern wie den Zeichen @ oder # erwähnen. Dies öffnet ein Panel mit Vorschlägen, mit dem Sie Ihre Nachricht mit der richtigen Referenz vervollständigen können.

Das Textfeld fungiert als Eingabefeld für die Suche, und das Vorschlagsfeld dient als Tippassistent, der es Benutzern ermöglicht, die richtige Ressource zu referenzieren, ohne die Tastatur verlassen zu müssen. Wenn es richtig implementiert ist, ist alles nur ein paar Tastenanschläge entfernt, auch wenn Benutzer etwas falsch schreiben.

Zusätzlich zur Stromversorgung einer Kompositionsbox **fördert dieses Muster die Konsistenz von benutzergenerierten Inhalten**. Hashtags sind ein gutes Beispiel: Benutzer werden befähigt, semi-strukturierte Daten in einem freien Kontext zu erstellen, was dann zur Kategorisierung von Inhalten beiträgt, ohne dass sie nachträglich verarbeitet werden müssen. Sobald Benutzer andere Personen in einem Dokument erwähnt, Ressourcen referenziert oder mehrere Hashtags hinzugefügt haben, erhalten Sie einen Verbindungs-Graph über alle verfügbaren Ressourcen in Ihrer App, was es viel einfacher macht, verwandte Inhalte zu empfehlen und zu verstehen, wie Benutzer denken.

Die Grundlagen des Erstellens von @Erwähnungen

Über das Finden dessen, was Benutzer wollen, hinaus sollte eine großartige @erwähnen Autovervollständigungsfunktion so flüssig wie möglich sein. Ziel ist es, **eine nahtlose Tipperfahrung zu schaffen, bei der sich das Muster wie ein Assistent verhält, der lernt, während Sie tippen**, und Ihnen hilft, aber weiß, wann er sich aus dem Weg gehen muss. Sie können weiter tippen, die Vorschläge ignorieren und sie verschwinden lassen, oder Sie können sie nutzen, um Ihre Nachricht reibungslos zu vervollständigen.

Auf Twitter, das das Muster mit Erwähnungen und Hashtags populär gemacht hat, schließt sich das Panel, sobald das getippte Wort nicht mehr als Token betrachtet wird, um Benutzer zu stören, die raus wollen. Twitter-Benutzer-Handles unterstützen keine Leerzeichen, daher schließt sich das Panel sofort nach einem Leerzeichen.

Slack funktioniert etwas anders und erlaubt Leerzeichen, damit Sie vollständige Namen suchen können. Es verwendet verschiedene Heuristiken, um zu bestimmen, was signalisiert, dass Benutzer raus wollen.

Beim Auswählen einer Erwähnung **schließt Twitter das Panel, ersetzt das Token und fügt ein Leerzeichen hinzu**, damit der Benutzer nahtlos weiter tippen kann. Diese Art von Detailgenauigkeit mag isoliert unwichtig erscheinen, aber wenn sie sich summieren, ergeben sie ein Gefühl der Flüssigkeit, das es den Benutzern ermöglicht, das Muster anzunehmen, anstatt dagegen anzukämpfen.

Wenn Sie Erwähnungen in einer Kompositionsbox wie dieser hinzufügen, werden sie Teil Ihres Textes, **sollten aber auch die volle Interaktivität behalten, um es Benutzern zu ermöglichen, sie zu bearbeiten.**

Auf Twitter können Sie beispielsweise eine Erwähnung "fokussieren", indem Sie darauf klicken oder mit den Pfeiltasten Links und Rechts durch das Textfeld navigieren. Twitter erkennt dies und öffnet das Panel erneut mit den Erwähnungen als Suchanfrage. Dies stellt sicher, wer benachrichtigt wird, wenn der Tweet gesendet wird, und ermöglicht es Ihnen, die Erwähnung im Falle eines Fehlers zu bearbeiten.

Eine Möglichkeit, solche Erfahrungen mit minimalem Aufwand zu erstellen, ist die Verwendung der Open-Source-Bibliothek Autocomplete. Autocomplete ist darauf ausgelegt, am besten mit Algolia zu integrieren, funktioniert aber mit jeder Quelle, statisch oder remote. Sie ermöglicht es Ihnen, dynamische und zugängliche Autovervollständigungserlebnisse mit mehreren Quellen zu erstellen, und eignet sich hervorragend für @erwähnen-Funktionen.

Mischen verschiedener Vorschlagstypen

Ein Symbol pro Ergebnistyp funktioniert gut, wenn Sie einige wenige, unterschiedliche Typen haben, z. B. "@" für Personen und "#" für Hashtags. Sobald Sie mehr Typen mit verschwommeneren Grenzen haben, ist es wahrscheinlich, dass Benutzer sich nicht alle merken können. Das Isolieren könnte die Erfahrung umständlicher machen.

Stattdessen **hilft die Zuweisung von mehr als einem Typ pro Symbol mit föderierter Suche (Multi-Source) beim Entdecken aller möglichen Typen**, ohne zu viele Muster "lernen" zu müssen.

Auf Slack werden Vorschläge gemischt und mit visuellen Hinweisen (wie verschiedenen Symbolen und Abzeichen) unterschieden. Dennoch sehen die Ergebnisse ähnlich aus wie in der übrigen App. Zum Beispiel zeigen Personen-Vorschläge den Avatar des Benutzers, den Anzeigenamen und den Status an. Dies hilft Benutzern, sich sicherer zu fühlen, wen oder was sie erwähnen.

Auf Notion sind die Vorschläge nach Typ gruppiert. Im Gegensatz zu einer typischen Sucherfahrung, die die Relevanz pro Ergebnis bevorzugt, bevorzugt dieser Ansatz Konsistenz: Bis Sie die Abfrage verfeinern, erhalten Sie immer zuerst Daten, dann Personen und dann Links. Dies hilft Benutzern, beim Verwenden des Tools Muskelgedächtnis aufzubauen, indem Erwartungen gesetzt werden, wo sich die Dinge befinden.

Die Gruppierung nach Typ kann entweder durch Abfrage mehrerer Quellen gleichzeitig oder durch Verwendung von Gruppierungsmechanismen wie der Reshape API von Autocomplete erreicht werden, die Ergebnisse nach dem Abrufen transformiert.

Ein weiteres cooles Notion-Muster ist der dynamische Platzhalter oder der prädiktive Vorschlag, den sie basierend auf der aktiven Auswahl einfügen. Standardmäßig hilft der Platzhalter den Benutzern, Maßnahmen zu ergreifen, indem er andeutet, was sie tun können. Dann, während sie navigieren, aktualisiert sich der Platzhalter und informiert die Benutzer darüber, was sie erwarten können, wenn sie eine Auswahl treffen.

Wenn man sich den Notion-Code ansieht, kann man sehen, wie sie CSS Custom Properties dafür verwenden: Jedes Mal, wenn Sie durch die Vorschläge navigieren, setzen sie die CSS-Variable --pseudoAfter--content auf dem Elternelement der Eingabe mit JavaScript. Diese CSS-Variable wird dann mit der content-Eigenschaft auf einem ::before-Pseudoelement verwendet. Raffiniert!

Beim Abrufen von Ergebnissen aus mehreren Quellen kann es schwieriger werden, die Anzahl der Ergebnisse zu kontrollieren. Das liegt daran, dass jede Quelle die Anzahl der angeforderten Vorschläge zurückgeben kann oder weniger, wenn sie nicht genügend Treffer hat. Dies kann zu einer "ruckeligen" Benutzeroberfläche führen, bei der die Anzahl der Ergebnisse schwankt, während der Benutzer tippt.

Sie können dies entweder mit einem Panel fester Höhe, das eine Bildlaufleiste enthält, oder durch Verwendung von Kombinations- und Grenzwertmechanismen wie der Reshape API von Autocomplete mildern.

Denken über die Suchergebnisse hinaus

Wenn Sie sich wie ich jeden Tag mit Suche und Entdeckung beschäftigen, fangen Sie an, sie überall zu sehen. Es ist fantastisch, wie kreativ Sie mit dem @erwähnen-Muster werden können, wenn Sie über die übliche Implementierung hinausgehen.

Wenn Sie Slack verwenden, sind Sie vielleicht daran gewöhnt, nach Emojis zu suchen, indem Sie ":" tippen und dann nach Namen verfeinern. Obwohl es nicht wie eine Suche oder Erwähnungen aussieht, **verwendet es genau die gleichen Mechanismen:** Sie öffnen ein Vorschlagsfenster mit einem Sonderzeichen, suchen nach dem richtigen Element und "wenden" es beim Auswählen an.

Dies ist auf Notion noch auffälliger, wo das Panel überhaupt nicht wie Suchergebnisse aussieht.

Interessant ist hier, wie vielseitig das Muster sein kann, wenn man einfache Dinge wie Elementvorlagen ändert und Ergebnisse unterschiedlich gestaltet. Es integriert sich noch besser in eine Kompositionsbox und schafft eine flüssige Erfahrung, die Benutzer über alle Apps hinweg wiedererkennen, die sie verwenden.

Jenseits der Tipp-Vervollständigung

Erwähnungen sind der häufigste Anwendungsfall für dynamische Vorschläge in einer Kompositionsbox, aber Sie können viel weiter gehen. Während Erwähnungen Ihnen helfen, einen Satz zu "vervollständigen" und die Tipperfahrung zu verbessern, kann eine Kompositionsbox auch eine Konversationsschnittstelle zwischen dem Benutzer und der App sein.

Auf Notion ermöglicht die Eingabe des Sonderzeichens "/" das Einfügen von Aktionen. Sie können Vorschläge immer noch verfeinern, indem Sie weiter tippen, aber anstatt die Eingabe zu füllen, erstellt das Auswählen eines Ergebnisses einen brandneuen Block eines bestimmten Typs.

Dieses Muster, allgemein bekannt als "Shortcuts" oder "Slash Commands", wurde in Spielechats populär und ist zum Standard in allgemeinen Chat-Anwendungen wie Slack und Discord geworden.

Shortcuts sind interessant, weil sie es Benutzern ermöglichen, gängige Aufgaben an einem Ort auszuführen, ohne nach der Funktion suchen zu müssen. Zum Beispiel sind spontane Zoom-Meetings mit entfernten Kollegen üblich und erfordern normalerweise das Senden eines Zoom-Links über Slack. Aber das Öffnen von Zoom, das Kopieren des Links und das Einfügen in Slack ist umständlich. Der "/zoom"-Shortcut beseitigt diese Hürden, indem er häufige Aufgaben in einer einzigen Schnittstelle zentralisiert.

Während Funktionen wie Slash Commands früher nur für Power-User gedacht waren, tauchen sie jetzt in immer mehr Apps auf und richten sich an alle Arten von Benutzern.

---

Letztendlich geht es bei der Verbesserung der Tipperfahrung nicht darum, "Power-Features" freizuschalten, sondern darum, Inhalte aufzudecken, sowie Reibungsverluste und die kognitive Belastung zu reduzieren: Anstatt den Benutzern die Komplexität Ihres Systems im Voraus beizubringen, **bringen Sie die richtigen Informationen zur richtigen Zeit, dort und wann Benutzer sie benötigen.**