So erstellen Sie eine Chatbot-Oberfläche

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.

Heutzutage gibt es zwar eine Vielzahl von Beispielen für „schwache KI“ (einschließlich Siri, Alexa, Websuchmaschinen, automatisierte Übersetzer und Gesichtserkennung) und andere Themen wie sich anpassendes Webdesign rücken ins Rampenlicht, Chatbots sorgen immer noch für Aufsehen. Mit großen Investitionen von großen Unternehmen bleiben viele Möglichkeiten, die Konversationsschnittstellen der Zukunft zu hacken.



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 sich natürlicher zu fühlen, wie sich mit einem Experten oder einem Freund zu unterhalten, anstatt mit einem Mausklick oder mobilen Gesten zu zeigen. 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

Es ist wichtig sicherzustellen, dass die Persönlichkeit des Chatbots das Unternehmen widerspiegelt, das er vertritt

Es ist wichtig sicherzustellen, dass die Persönlichkeit des Chatbots das Unternehmen widerspiegelt, das er vertritt

Da diese Praxis weltweit über 110.000 Mitglieder betreut, 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 aufgebaut Menschen entwerfen . 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 Benutzerfluss bei der Interaktion mit dem Bot zu ermitteln.

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

Diese einfache Skriptsprache bietet alles, was Sie zum Entwerfen und Erstellen eines Chatbot-POC benötigen

Diese einfache Skriptsprache bietet alles, was Sie zum Entwerfen und Erstellen eines Chatbot-POC benötigen

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, gehen Sie zu RiveScript-Repo , 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. Generiere das Gehirn deines Bots

Der nächste Schritt besteht darin, das „Gehirn“ unseres Bots zu generieren. Dies wird 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 .BANK 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.

wie man einen stehenden Mann zeichnet

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 ...
  • Wie sind Sie auf uns aufmerksam geworden?

Ein typisches zugängliches Webformular würde folgendermaßen aussehen:

Request Type: option 1
option 2
option 3
Timeline: 1 month
1-3 months
4+ months

Budget Information

Project Description

Reference

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 ein AI-Skript konvertieren, wobei RiveScript sehr lernfähig ist Verarbeitungslogik für wechselseitige Gespräche:

- How can we help? + * % how can we help - Sure, Do you mind If I ask a couple of questions? + * % sure do you mind if i ask a couple of questions - How soon do I need to start this request? + * % how soon do i need to start this request - Can you give me rough idea of your budget? + * % can you give me rough idea of your budget - OK, can you tell me a summary of the problem to be solved, components and environments affected, or an overall description? +* % ok can you tell me a summary of the problem to be solved components and environments affected or an overall description - Also, who referred you to us? +* % also who referred you to us - great here is what I got so far: Services needed: Need to start: Rough budget: About your project: Referred by: and will get in touch shortly is there anything else i can help you with today? intake

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.

Im RiveScript-js Es steht uns frei, eine XMLHttpRequest Objekt, um die Anfrage fast gleichzeitig zu senden, da die Daten vom Benutzer eingegeben werden:

> object intake javascript var http = new XMLHttpRequest(); var a = rs.getUservar(rs.currentUser(), 'areas'); var b = rs.getUservar(rs.currentUser(), 'when'); var c = rs.getUservar(rs.currentUser(), 'budget'); var d = rs.getUservar(rs.currentUser(), 'project'); var e = rs.getUservar(rs.currentUser(), 'referal'); var url = 'http://localhost:3000/send'; var params = 'areas='+a+'&when='+b+'&budget='+c+'&pro ject='+d+'&referal='+e; console.log(params); http.open('POST', url, true); http.setRequestHeader('Content-type', 'application/x- www-form-urlencoded'); http.setRequestHeader('Connection', 'close'); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { alert(http.responseText); } } http.send(params); < object

06. Fürchte den Chatbot nicht

In Kürze werden aktuelle Möglichkeiten der Interaktion mit Computern, um Informationen zu erhalten, der KI-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 und verbesserte Kundeninformationen bieten.

Dieser Artikel wurde ursprünglich in vorgestellt Netzmagazin , Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Abonnieren Sie hier .

Zum Thema passende Artikel:

  • Wie Chatbots lernen - Interview mit Giles Colborne
  • Wie das intelligente Web unsere Interaktionen verändern wird
  • Wie Konversationsschnittstellen das Bankwesen innovieren