Inhalt
- 01. Setze eine Persönlichkeit
- 02. Verwenden Sie RiveScript
- 03. Generieren Sie das Gehirn Ihres Bots
- 04. Entwerfe eine Stimme
- 05. Einreichung beantragen
- 06. Fürchte dich nicht vor dem Chatbot
Mitte der 2000er Jahre wurden virtuelle Agenten und Kundendienst-Chatbots sehr geschätzt, obwohl sie nicht sehr gesprächig waren, und unter der Haube bestanden sie lediglich aus dem Datenaustausch mit Webservern.
Obwohl heutzutage eine Vielzahl von Beispielen für "schwache KI" existiert (einschließlich Siri, Alexa, Websuchmaschinen, automatisierte Übersetzer und Gesichtserkennung) und andere Themen wie responsives Webdesign im Rampenlicht stehen, sorgen Chatbots immer noch für Aufsehen . Mit großen Investitionen von großen Unternehmen bleiben viele Möglichkeiten, die Konversationsschnittstellen der Zukunft zu hacken.
- So gestalten Sie ein Chatbot-Erlebnis
Manchmal haben sie einen schlechten Ruf, aber Chatbots können nützlich sein. Sie müssen sich nicht als grundlegender Ersatz für ein Standard-Webformular fühlen, bei dem der Benutzer Eingabefelder ausfüllt und auf die Validierung wartet. Sie können eine Konversationserfahrung bieten.
Im Wesentlichen verbessern wir die Benutzererfahrung, um uns natürlicher zu fühlen, z. B. wenn Sie sich mit einem Experten oder einem Freund unterhalten, anstatt mit dem Mauszeiger auf Mausklicks oder mobile Gesten. Ziel ist es, dass diese Technologie durch einfühlsame, kontextbezogene Antworten direkt in das Leben der Menschen eingebettet wird.
Sehen Sie sich das folgende Video an oder lesen Sie weiter, um einen praktischen Weg zum Entwerfen und Erstellen eines Chatbots zu finden, der auf einer realen Projektaufnahme-Anwendung in einer Service-Design-Praxis basiert.
01. Setze eine Persönlichkeit
Da diese Praxis weltweit über 110.000 Mitgliedern dient, bestand das Ziel darin, eine schnelle, bequeme und natürliche Schnittstelle bereitzustellen, über die interne Stakeholder effektive digitale Dienste anfordern können, anstatt verwirrende Formulare ausfüllen zu müssen.
Der erste Schritt bestand darin, die Persönlichkeit des Chatbots zu etablieren, da dies die Stimme des Service-Design-Teams gegenüber seinen Stakeholdern darstellen würde. Wir haben auf Aarron Walters wegweisender Arbeit an Design-Personas aufgebaut. Dies hat unserem Team sehr geholfen, die Persönlichkeitsmerkmale des Bots zu entwickeln, die dann die Nachrichten für Grüße, Fehler und Benutzerfeedback bestimmten.
Dies ist eine heikle Phase, da sie sich auf die Wahrnehmung der Organisation auswirkt. Um sicherzustellen, dass wir so viele Informationen wie möglich haben, haben wir sofort Stakeholder-Workshops eingerichtet, um die richtige Persönlichkeit, Farbe, Typografie, Bildsprache und den Fluss der Benutzer zu bestimmen, wenn wir uns mit dem Bot beschäftigen.
Nachdem wir alle erforderlichen Genehmigungen erhalten hatten - einschließlich der Suche nach Rechtsbeistand -, machten wir uns daran, archaische Antragsformulare in eine Reihe von Hin- und Her-Fragen umzuwandeln, die ein Gespräch zwischen den Stakeholdern und einem Vertreter unseres Design-Services-Teams imitierten.
02. Verwenden Sie RiveScript
Wir wussten, dass wir nicht zu tief in die AI-Markup-Sprache für den Verarbeitungsteil eintauchen wollten - wir brauchten nur genug, um die Erfahrung zu beschleunigen.
RiveScript ist eine einfache Chatbot-API, die leicht zu erlernen ist und für unsere Anforderungen ausreicht. Innerhalb weniger Tage hatten wir die Logik, eine Projektanforderung vom Bot aufzunehmen und sie mit genügend Geschäftslogik zu analysieren, um sie zu validieren und zu kategorisieren, damit sie über JSON REST-Services an die entsprechende interne Projekt-Tasking-Warteschlange gesendet werden kann.
Um diesen grundlegenden Chatbot zum Laufen zu bringen, rufen Sie das RiveScript-Repo auf, klonen Sie es und installieren Sie alle Standardknotenabhängigkeiten. Im Repo können Sie auch einen Vorgeschmack auf die Interaktionen erhalten, die Sie mit den verschiedenen Beispielausschnitten hinzufügen können.
Führen Sie als Nächstes den Web-Client-Ordner aus, der den Bot durch Ausführen eines einfachen Grunt-Servers in eine Webseite verwandelt. An diesem Punkt können Sie die Erfahrung verbessern, um Ihren Bedürfnissen zu entsprechen.
03. Generieren Sie das Gehirn Ihres Bots
Der nächste Schritt besteht darin, das „Gehirn“ unseres Bots zu generieren. Dies ist in Dateien mit der Erweiterung .RIVE angegeben, und dankenswerterweise enthält RiveScript bereits grundlegende Interaktionen (z. B. Fragen wie "Wie heißt du?", "Wie alt bist du?" Und "Wie heißt du?" Lieblingsfarbe?').
Wenn Sie die Web-Client-App mit dem richtigen Node-Befehl starten, wird die HTML-Datei angewiesen, diese zu laden.RIVE Dateien.
Als nächstes müssen wir den Teil des Gehirns unseres Chatbots generieren, der sich mit Projektanfragen befasst. Unser Hauptziel ist es, eine Auswahl von Aufnahmefragen für Projektaufgaben in ein regelmäßiges Gespräch umzuwandeln.
Also zum Beispiel:
- Hallo, wie können wir helfen?
- Großartig, wie schnell müssen wir anfangen?
- Können Sie mir eine ungefähre Vorstellung von Ihrem Budget geben?
- Erzähl mir mehr über dein Projekt ...
- Woher haben Sie von uns gehört?
Ein typisches zugängliches Webformular würde folgendermaßen aussehen:
form action = ""> fieldset> legend> Anfragetyp: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- one "> option 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> option 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> option 3 / label> br> / fieldset > fieldset> legend> Timeline: / legend> input id = "einmonatig" type = "radio" name = "request-timeline" value = "einmonatig"> label for = "einmonatig"> 1 monat / label> br> input id = "ein bis drei Monate" type = "radio" name = "request-timeline" value = "ein bis drei Monate"> label für = "ein Monat"> 1-3 Monate / label> br> input id = "vier plus Monate" type = "radio" name = "anforderungszeitleiste" value = "vier plus monate"> label für = "vier plus monate"> 4+ monate / label> br> / fieldset> br> label for = "Anforderungsbudget"> Budgetinformationen / label> br> textarea id = "Anforderungsbudget" name = "Anforderungsbudgettext" rows = "10" cols = "30"> / textarea> br> label für = "request-description"> Projektbeschreibung / label> br> textarea id = "request-description" name = "request-description-text" rows = "10" cols = "30"> / textarea > br> label for = "Anforderungsreferenz"> Referenz / label> br> textarea id = "Anforderungsreferenz" name = "Anforderungsreferenztext" rows = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / form>
Bei Webformularen sind wir mit bestimmten Mustern sehr vertraut: Wenn Sie auf die Schaltfläche "Senden" klicken, werden alle Formulardaten an eine andere Seite gesendet, auf der die Anfrage verarbeitet wird, und dann wird höchstwahrscheinlich eine freche Dankesseite angezeigt.
Mit Chatbots können wir die Interaktion zum Senden einer Anfrage nutzen und sie aussagekräftiger gestalten.
04. Entwerfe eine Stimme
Um dieses Formular in eine Konversationsbenutzeroberfläche zu konvertieren, die im Chatbot-Webclient von RiveScript bereitgestellt wird, müssen wir die Informationsarchitektur von starr in flüssig konvertieren. oder Feldbezeichnungen in UI-Zeichenfolgen.
Betrachten wir einige zugängliche Feldbezeichnungen und den zugehörigen Fragenton:
- Anfrage: Wie können wir helfen? Nicht sicher? Stört es Sie, wenn ich ein paar Fragen stelle?
- Zeitleiste: Wie schnell müssen wir anfangen?
- Budgetinformationen: Können Sie mir eine ungefähre Vorstellung von Ihrem Budget geben?
- Projektbeschreibung: OK, können Sie mir eine Zusammenfassung des zu lösenden Problems geben?
- Referenz: Wer hat Sie an uns verwiesen?
Als Nächstes müssen wir den Code des Webformulars in AI-Skript konvertieren und dabei die sehr lernbare Verarbeitungslogik von RiveScript für wechselseitige Konversationen befolgen:
- Wie können wir helfen? + *% Wie können wir helfen - Bereiche setzen = varSure, Stört es Sie, wenn ich ein paar Fragen stelle? + *% Stört es Sie, wenn ich ein paar Fragen stelle - Wie schnell muss ich diese Anfrage starten? + *% Wie schnell muss ich diese Anfrage starten - festlegen, wann = varCan können Sie mir eine ungefähre Vorstellung von Ihrem Budget geben? + *% Können Sie mir eine ungefähre Vorstellung von Ihrem Budget geben - set budget = varOK, können Sie mir eine Zusammenfassung des zu lösenden Problems, der betroffenen Komponenten und Umgebungen oder eine allgemeine Beschreibung geben? + *% ok können Sie mir eine Zusammenfassung des zu lösenden Problems der betroffenen Komponenten und Umgebungen oder eine Gesamtbeschreibung geben - set project = varAlso, wer hat Sie an uns verwiesen? + *% auch wer Sie an uns verwiesen hat - set referal = vargreat hier ist das, was ich bisher bekommen habe: n Benötigte Dienste: Bereiche abrufen> n Start muss: erhalten wann> n Grobes Budget: Budget abrufen> n Über Ihr Projekt: Projekt abrufen> n Weitergeleitet von: Überweisung abrufen> n und wird sich in Kürze bei Ihnen melden. Gibt es noch etwas, bei dem ich Ihnen heute helfen kann? Anruf> Aufnahme Bereiche abrufen> Wann erhalten> Budget abrufen> Projekt abrufen> Überweisung abrufen> / Anruf>
05. Einreichung beantragen
Im Gegensatz zu Standardformularvariablen, die zur Verarbeitung an eine andere Seite oder einen anderen Dienst gesendet werden, können Chatbots vom Benutzer eingegebene Informationen in einem Chatfenster (oder gesprochen) sofort validieren und übermitteln, sodass Benutzer auch zuvor eingegebene Werte problemlos erneut aufrufen können.
Wir mussten die in der Chatbot-Benutzeroberfläche über die JSON-REST-API eingegebene Benutzeranforderung an einen externen Projekt-Tasking-Server senden.
In RiveScript-js können wir eine verwenden XMLHttpRequest Objekt, um die Anfrage fast gleichzeitig zu senden, da die Daten vom Benutzer eingegeben werden:
> Javascript zur Objektaufnahme var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "Bereiche"); var b = rs.getUservar (rs.currentUser (), "when"); var c = rs.getUservar (rs.currentUser (), "budget"); var d = rs.getUservar (rs.currentUser (), "Projekt"); var e = rs.getUservar (rs.currentUser (), "referal"); var url = "http: // localhost: 3000 / send"; var params = "area =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (params); http.open ("POST", URL, true); http.setRequestHeader ("Inhaltstyp", "Anwendung / x-www-form-urlencoded"); http.setRequestHeader ("Verbindung", "schließen"); http.onreadystatechange = function () {// Rufe eine Funktion auf, wenn sich der Status ändert. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); Objekt
06. Fürchte dich nicht vor dem Chatbot
In Kürze werden aktuelle Möglichkeiten der Interaktion mit Computern, um Informationen zu erhalten, der AI-basierten Technologie wie Chatbots Platz machen, bei der Benutzer nur einfache Sprachbefehle ausführen, wie wir es bei Technologien wie Amazon Echo und Google Home gesehen haben.
Die Webdesign-Community muss sich nicht fürchten - wir sollten alle den Mehrwert dieser neuen Technologie nutzen.
Es könnte für die Unternehmen, für die es arbeitet, eine entscheidende Rolle spielen und einen vollständig skalierbaren Kundenservice sowie eine verbesserte Kundenintelligenz bieten.
Dieser Artikel wurde ursprünglich in vorgestelltNetzmagazin, das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Abonnieren Sie hier.
