Wie wir beim Erstellen von Eingabe-UI-Elementen für unsere Chatbot-Plattform vorgegangen sind
Veröffentlicht: 2017-01-01Chatbots, wie sie heute existieren, haben nicht viele Fähigkeiten, um die natürliche menschliche Sprache zu verstehen. Und das ist einer der Hauptgründe, warum die meisten Messaging-Apps (Messenger, Kik usw.) in ihren Bot-Plattformen auf eine Mischung aus grafischer und Text-UI zurückgreifen – denken Sie an Schaltflächen, Karussells, Bildkarten und nicht nur an Textantworten.
Wir bei Tars verwenden den Browser als Plattform, um unsere eigene Chat-Oberfläche für den Betrieb von Bots zu erstellen. Und das gibt uns völlige Freiheit, was alle Komponenten wir haben. Wenn Sie einen unserer Bots ausprobiert haben (falls nicht, probieren Sie zuerst einen hier und hier aus), wissen Sie, dass wir den Ansatz mit grafischer Benutzeroberfläche und Text stark unterstützen. Als Teil dieses Denkprozesses haben wir eine Reihe von benutzerdefinierten Tastatureingaben in unserer Front-End-Oberfläche erstellt, um verschiedene Benutzerinteraktionen und -situationen zu erleichtern.
Messenger, Kik, Telegram sind riesige Plattformen, auf denen Entwickler jeden Tag Hunderte von Bots einsetzen. Ich habe immer noch das Gefühl, dass diese Messaging-Plattformen bei den Front-End-Komponenten nicht genug getan haben, um einem Boommaker dabei zu helfen, bereichernde Benutzerinteraktionen zu erstellen.
Und deshalb wollte ich mehr darüber sprechen, wie wir bei der Erstellung jeder benutzerdefinierten Benutzeroberfläche vorgegangen sind, warum jede von ihnen sinnvoll ist und wie das Fehlen von ihnen die Benutzerinteraktionen im Moment durcheinander bringt.
Auf geht's:
Scroller für Datum und Uhrzeit
Denken Sie an ein Szenario, in dem Sie einen Benutzer fragen müssen, wann er den Termin vereinbaren möchte? Es kann mehrere Möglichkeiten geben, dieselben Informationen anzugeben.
25. November, 25. November, 25. November, 25.11., 25.11.2016, 25.11.16 – alle bedeuten im Wesentlichen dasselbe, aber es wird für eine Maschine schwierig, diese Daten zu verstehen.
Aus diesem Grund haben wir einen Datums- und Uhrzeit-Scroller eingebaut, mit dem Benutzer die Zifferblätter rollen und Datum/Uhrzeit auswählen können.

Ich habe bisher keine andere Messaging-Plattform gesehen, die diese Benutzeroberfläche bietet, und ich denke, dies ist ein Muss, wenn ein Bot den Benutzer nach Datum oder Uhrzeit fragt.
Vertikale Schaltflächen
Stellen Sie sich diese als Multiple-Choice-Optionen in einer Form vor, bei der Sie eine begrenzte Anzahl von Dingen zur Auswahl haben. Das Antippen von Schaltflächen beschleunigt die Interaktion und hält auch den Umfang der Konversation begrenzt.
Der auf Schaltflächen basierende Ansatz ist sinnvoll, wenn Sie zwischen einer vegetarischen und einer nicht-vegetarischen Pizza wählen müssen, aber es ist möglicherweise nicht die beste Benutzeroberfläche, wenn Sie 100 Versicherungspolicen zur Auswahl haben.
Was kann man mit vertikalen Buttons noch machen?
- Fügen Sie neben jeder Option ein Bild hinzu, um sie optisch ansprechender zu gestalten.
- Sie können den Benutzer entweder auf ein einzelnes Antippen antworten lassen oder ihn auf „Senden“ klicken lassen, nachdem er auf eine der Optionen getippt hat. Letzteres hilft bei der erneuten Bestätigung, wenn der Benutzer die bestimmte Option nicht versehentlich ausgewählt hat. Es gibt keine Möglichkeit, in einem Chatablauf zurückzugehen, und deshalb ist diese Anpassung sinnvoll.
- Fügen Sie jeder Option ein Schnellinfo-Menü hinzu, um detaillierte Informationen bereitzustellen und den Entscheidungsprozess zu verbessern.

Nicht jeder kennt den Unterschied zwischen Advance und Basic Facial. Das Hinzufügen von Details darüber, was alles enthalten ist, und die Preise verbessern die Benutzererfahrung.
Eine weitere wichtige Sache, die Sie bei der Verwendung von Button UI beachten sollten, ist, Ihre Frage richtig zu formulieren. Wie Leszek in seinem Artikel hier erklärt, ist es besser, die Frage so zu stellen, dass die Auswahl an Optionen eingeschränkt und der Kontext festgelegt wird, anstatt eine sehr offene Frage zu stellen.

Einschränken der Benutzereingabe
Ich denke, das ist eines der besten Dinge, die wir an unserer Chat-Oberfläche gemacht haben. Wann immer wir eine grafische Eingabe-UI (Schaltflächen, Karussells usw.) bereitstellen, erlauben wir dem Benutzer nicht, irgendetwas in den Text einzugeben.
Warum das tun? Weil ein Benutzer da draußen alles eingeben kann und Ihr Bot dafür nicht bereit ist. Bis Sie dort sind, ist es besser, es einfach und eingeschränkt zu halten, anstatt das Gespräch zu unterbrechen.
Für dich empfohlen:
Was wir tun, ist Folgendes:


Dies ist unsere Chat-Oberfläche
Und das passiert, wenn Sie so etwas nicht haben:

Dies ist Facebook Messenger, der keine eingeschränkte Texteingabe zulässt, wenn Sie schnelle Antworten haben
Done-and-Pass-Button
Dies sind zwei sehr kleine Nuancen, die wir letztendlich aufgenommen haben, weil wir geskriptete Chatbots immer als eine Weiterentwicklung von Formularen betrachtet haben.
Wenn Sie über Ihre Adresse senden oder ein detailliertes Feedback über die Chat-Oberfläche geben, besteht das allgemeine Verhalten darin, die Schaltfläche „Senden“ zu drücken, nachdem Sie ein paar Wörter geschrieben haben, und die gesamte Antwort wird schließlich auf 3–4 Aussagen verteilt. Mit der Schaltfläche „Fertig“ können Sie weitertippen und diese drücken, sobald Sie die vollständige Antwort gegeben haben.
Wenn Sie eine solche Option nicht haben, würde die nächste Nachricht der Maschine nach der ersten Instanz selbst kommen, was zu unvollständigen Antworten führen würde.

Haben Sie eine „Fertig“-Schaltfläche, wenn Sie mehrere Optionen auswählen müssen oder mehrzeilige Antworten haben
Es kann auch Fälle geben, in denen ein Benutzer die Frage überspringen möchte, und dafür haben wir einen „Pass-Button“ anstelle des „Senden-Buttons“. Sobald der Benutzer mit der Eingabe beginnt, verwandelt sich die Pass-Schaltfläche in eine Senden-Schaltfläche.

Sie möchten Ihre E-Mail-Adresse nicht angeben? Tippen Sie auf „Pass“, um die Frage zu überspringen.
Vorschläge automatisch vervollständigen
Dies ist wie die Autocomplete-Funktion in der Google-Suche, bei der Sie mit der Eingabe beginnen und die möglichen Optionen vorschlagen. Dies ist besonders nützlich, wenn Sie eine lange Liste von Optionen haben und vertikale Schaltflächen keine praktikable Option sind. Denken Sie an eine lange Liste von Orten, Städten, Automodellen usw.

Sterne und Likes
Besonders nützlich, wenn Sie nach Benutzerfeedback oder -erfahrung fragen und die Antwort eher qualitativer Natur ist. Und Sie können die Symbole sogar so anpassen, dass sie Sterne, Likes, Herzen und Emoticons sind.

Bildkarten
Dies ist nützlich, wenn Sie mehrere Informationen zu jedem Element auf einmal präsentieren müssen. Könnte ein Burger in einem Essensbestellprozess oder ein Hemd in einem Einkaufsfluss sein. Alle Karten sind gegeneinander gestapelt und Sie können durchblättern, um sich alle Optionen anzusehen.
Es gibt 4 Teile dieses UI-Elements – Bild, Titel, Beschreibung und Fußzeile. Sie können diese unterschiedlich verwenden, je nachdem, was Sie dort anzeigen möchten.

Falls Sie alle diese Eingabeelemente der Benutzeroberfläche testen möchten, finden Sie hier den Link zu einem Chatbot, der Sie einzeln durchführt.
Chat ist eine minimalistische Oberfläche mit nur Blasen und einem Textfeld, das nicht viel Spielraum bietet. Und ich glaube, wir müssen überdenken, wie wir eine Vielzahl von Interaktionen erleichtern können, indem wir die vorhandenen Elemente verwenden und der Chat-Oberfläche neue hinzufügen.
Würden Sie gerne wissen, ob Sie selbst mit der Messaging-Oberfläche herumgespielt und einige andere coole GUI-Elemente hinzugefügt haben?
[Dieser Beitrag von Ish Jindal erschien zuerst auf Medium und wurde mit Genehmigung reproduziert.]






