Wéi eng Chatbot Interface bauen

Auteur: Randy Alexander
Denlaod Vun Der Kreatioun: 2 Abrëll 2021
Update Datum: 16 Mee 2024
Anonim
Wéi eng Chatbot Interface bauen - Kreativ
Wéi eng Chatbot Interface bauen - Kreativ

Inhalt

An der Mëtt vun den 2000er Jore kruten virtuell Agenten a Clientsservicechatbots vill Adulatioun, och wa se net ganz konversativ waren, an ënner der Kapuze ware se just aus Datenaustausch mat Webserver zesummegesat.

Hautdesdaags, och wann eng riesech Unzuel u Beispiller vu 'schwaachem AI' existéiert (abegraff Siri, Alexa, Websichemotoren, automatiséiert Iwwersetzer a Gesiichtserkennung) an aner Themen wéi reaktiounsfäeger Webdesign schloen d'Luucht, Chatbots verursaachen ëmmer nach Opreegung. . Mat groussen Investissementer vu grousse Firmen, bleiwe vill Méiglechkeeten fir d'Gespréichsinterfaces vun der Zukunft ze hacken.

  • Wéi een Chatbot Erfahrung designt

Heiansdo kréien se e schlechte Ruff, awer Chatbots kënnen nëtzlech sinn. Si brauche sech net wéi e Basis Ersatz fir eng Standard Webform ze fillen, wou de Benotzer Input Felder ausfëllt an op Validatioun waart - si kënnen eng konversativ Erfahrung bidden.


Weesentlech verbessere mir d'Benotzererfarung fir méi natierlech ze fillen, wéi mat engem Expert oder engem Frënd ze schwätzen, amplaz vu Webbrowser point-and-clicks oder mobil Gesten. D'Zil ass datt duerch empathesch, kontextuell Äntwerten dës Technologie direkt an d'Liewe vun de Leit agebett gëtt.

Kuckt de Video hei ënnen oder liest weider fir e praktesche Wee ze entdecken fir e Chatbot ze designen an ze bauen, baséiert op enger realer Projekt-Intake-Uwendung an enger Service Design Praxis.

01. Setzt eng Perséinlechkeet

Well dës Praxis weltwäit iwwer 110.000 Memberen déngt, war d'Zil eng séier, praktesch an natierlech Interface ze bidden, duerch déi intern Stakeholder effektiv digital Servicer kéinte froen, amplaz duerchernee Formen auszefëllen.

Den éischte Schrëtt war d'Perséinlechkeet vum Chatbot z'etabléieren, well dëst d'Stëmm vum Service Design Team zu senge Stakeholderen duerstellt. Mir hunn op dem Aarron Walter säi Séminairen Aarbecht op Design Personae gebaut. Dëst huet eist Team gehollef de Perséinlechkeetseigenschaften vum Bot z'entwéckelen, déi dann d'Botschaften fir Gréiss, Feeler a Feedback vum Benotzer festgeluecht hunn.


Dëst ass eng delikat Bühn, well et beaflosst wéi d'Organisatioun ugesi gëtt. Fir sécherzestellen datt mir sou vill Informatioun wéi méiglech haten, hu mir direkt Stakeholder Workshops opgestallt fir déi entspriechend Perséinlechkeet, Faarf, Typographie, Bildmaterial an de Benotzerfloss ze nagelen wann se mam Bot beschäftegen.

Nodeems mir all déi néideg Genehmegungen gewonnen haten - abegraff fir juristesche Beroder ze sichen - hu mir eis virgeholl archaesch Ufroformulairen an eng Serie vu Réck- a Viraus Froen ze konvertéieren, déi e Gespréich tëscht de Stakeholderen an engem Vertrieder vun eisem Design Services Team imimikéiert hunn.

02. Benotzt RiveScript

Mir wousste datt mir net ze déif an d'AI Markup Sprooch fir den Processing Deel wollte kommen - mir brauche just genuch fir d'Erfarung ze sprangen.

RiveScript ass eng einfach Chatbot API déi einfach genuch ass fir eis Besoinen ze léieren an duerzestellen. Bannent e puer Deeg hate mir d'Logik erof fir e Projet Ufro vum Bot z'ernimmen, a parse se mat genuch Geschäftslogik fir se ze validéieren an ze kategoriséieren, sou datt et duerch d'JSON REST Servicer an déi entspriechend intern Projet Tasking Schlaang geschéckt ka ginn.


Fir dëse Basis Chatbot ze schaffen, gitt op de RiveScript Repo, klon et an installéiert all Standard Node Ofhängegkeeten. Am Repo kënnt Dir och e Goût vun den Interaktiounen kréien, déi Dir mat de verschiddene Beispill Stécker bäifüügt.

Als nächst fuert de Web-Client-Ordner, deen de Bot zu enger Websäit gëtt andeems en e Basis Grunt Server ausféiert. Zu dësem Zäitpunkt kënnt Dir d'Erfahrung verbesseren fir Är Besoinen unzepassen.

03. Generéiert de Gehir vun Ärem Bot

De nächste Schrëtt ass fir de 'Gehir' vun eisem Bot ze generéieren. Dëst gëtt a Dateie mat der .RIVE Extensioun spezifizéiert, a glécklecherweis kënnt RiveScript scho mat Basis Interaktiounen aus der Këscht (zum Beispill Froen wéi 'Wéi heescht Dir?', 'Wéi al sidd Dir?' A 'Wat ass Är Liiblingsfaarf? ').

Wann Dir d'Web-Client App initiéiert mat dem richtegen Node Kommando, gëtt d'HML-Datei uginn dës ze lueden.RIEFEN Dateien.

Als nächst musse mir den Deel vum Gehir vum Chatbot generéieren deen sech mat Projetsufroen beschäftegt. Eist Haaptziel ass eng Auswiel vu Projektaufgaben an e regelméissegt Gespréich ze konvertéieren.

Also, zum Beispill:

  • Moien, wéi kënne mir hëllefen?
  • Super, wéi séier musse mir ufänken?
  • Kënnt Dir mir eng graff Iddi vun Ärem Budget ginn?
  • Sot mir méi iwwer Äre Projet ...
  • Wei sidd Dir op eis opmierksam ginn?

Eng typesch zougänglech Webform géif esou ausgesinn:

Form Action = ""> Feldset> Legend> Ufro Typ: / Legend> Input id = "Optioun-eent" Typ = "Radio" Numm = "Ufro-Typ" Wäert = "Optioun-eent"> Etikett fir = "Optioun- eng "> Optioun 1 / Etikett> br> Input id =" Optioun-zwee "Typ =" Radio "Numm =" Ufro-Typ "Wäert =" Optioun-zwee "> Etikett fir =" Optioun-zwee "> Optioun 2 / Etikett> 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 = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 Mount / Etikett> br> Input id = "Een-dräi-Méint" Typ = "Radio" Numm = "Ufro- Timeline" Wäert = "Een-dräi-Méint"> Label fir = "ee Mount"> 1-3 Méint / Etikett> br> Input id = "véier-plus-Méint" Typ = "Radio" Numm = "Ufro- Timeline" Wäert = "véier-plus-Méint"> Etikett fir = "véier-plus-Méint"> 4+ Méint / label> br> / fieldset> br> label for = "request-budget"> Budget Informatioun / label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "Ufro-Beschreiwung"> Projektbeschreiwung / Label> br> textarea id = "Ufro-Beschreiwung" Numm = "Ufro- Beschreiwung-Text" Reien = "10" cols = "30"> / textarea > br> Etikett fir = "Ufro-Referenz"> Referenz / Etikett> br> textarea id = "Ufro-Referenz" Numm = "Ufro-Referenz- Text" Reien = "10" cols = "30"> / textarea> br > Input Type = "ofginn" value = "Submit"> / Form>

Mat Webformulare si mir ganz bestëmmt mat gewësse Mustere vertraut: Dir klickt op de Submit Knäppchen, all Formdate ginn op eng aner Säit geschéckt wou d'Ufro veraarbecht gëtt, an da kënnt héchstwahrscheinlech eng frech Merci Säit op.

Mat Chatbots kënne mir d'Interaktioun vun der Ufro ofginn, a méi sënnvoll maachen.

04. Design eng Stëmm

Fir dës Form an eng konversativ User Interface ze konvertéieren, déi am RiveScript Chatbot Web Client zerwéiert gëtt, musse mir d'Informatiounsarchitektur vu steif a flësseg konvertéieren; oder Feld Etiketten an UI Strings.

Loosst eis e puer zougänglech Feldlabelen berécksiichtegen, an hiren Zesummenhang Frostoun:

  • Ufro: Wéi kënne mir hëllefen? Net secher? Hutt Dir eppes dogéint wann ech e puer Froen stellen?
  • Timeline: Wéi séier musse mir ufänken?
  • Budget Informatioun: Kënnt Dir mir eng graff Iddi vun Ärem Budget ginn?
  • Projet Beschreiwung: OK, kënnt Dir mir e Resumé vum Problem soen, deen ze léise wier?
  • Referenz: Och wien huet dech bei eis bezeechent?

Als nächst musse mir de Code vum Webform an AI Skript konvertéieren, no der RiveScript ganz léierbar Veraarbechtungslogik fir Zwee-Wee Gespréicher:

- Wéi kënne mir hëllefen? + *% wéi kënne mir hëllefen - Gebidder astellen = varSure, Hutt Dir eppes wann ech e puer Froen stellen? + *% sécher stéiert Dir Iech wann ech e puer Froen stellen - Wéi séier muss ech dës Ufro starten? + *% wéi séier brauch ech dës Ufro unzefänken - set wann = var Kënnt Dir mir eng graff Iddi vun Ärem Budget ginn? + *% kënnt Dir mir eng graff Ahnung vun Ärem Budget ginn - Set Budget = varOK, kënnt Dir mir e Resumé vum Problem léisen, Komponenten an Ëmfeld betraff sinn oder eng Gesamtbeschreiwung? + *% ok kënnt Dir mir e Resumé vum Problem léise Komponenten an Ëmfeld betraff ze léisen oder eng Gesamtbeschreiwung - Set Projet = varAlso, wien huet Iech bei eis bezeechent? + *% och wien dech bei eis bezeechent huet - set referal = vargreat hei ass wat ech bis elo krut: n Servicer gebraucht: Beräicher kréien> n Brauchen ze starten: kréien wéini> n Grousse Budget: Budget kréien> n Iwwer Äre Projet: kritt Projet> n Referenzéiert vun: gitt Referral> n a kontaktéiert Iech séier wann et nach eppes ass, mat deem ech Iech haut hëllefe kann? uruffen> Intake kréien Beräicher> kréien wann> Budget kréien> Projet kréien> Referal kréien> / uruffen>

05. Soumissioun ufroen

Am Géigesaz zu Standard Formvariabelen déi op eng aner Säit oder Service geschéckt gi fir ze verschaffen, kënnen Chatbots d'Informatioun vum Benotzer an enger Chatfenster (oder geschwat) direkt validéieren an ofginn, dat heescht datt d'Benotzer och virdrun aginn Wäerter einfach erëm kënnen iwwerpréiwen.

Mir missten d'Ufro vum Benotzer schécken, deen am Chatbot UI agefouert gouf iwwer d'JSON REST API op en externen Projet Tasking Server.

A RiveScript-js si mir fräi eng Benotzung ze maachen XMLHttpRequest Objet fir d'Ufro bal gläichzäiteg ofzeginn, well d'Donnéeë vum Benotzer aginn:

> Objekt-Intake Javascript var http = nei XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "Beräicher"); var b = rs.getUservar (rs.currentUser (), "wéini"); var c = rs.getUservar (rs.currentUser (), "Budget"); var d = rs.getUservar (rs.currentUser (), "Projet"); var e = rs.getUservar (rs.currentUser (), "referal"); var url = "http: // localhost: 3000 / send"; var params = "Beräicher =" + a + "& wann =" + b + "& Budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (Params); http.open ("POST", url, richteg); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader ("Connexioun", "zoumaachen"); http.onreadystatechange = Funktioun () {// Rufft eng Funktioun wann de Staat ännert. wann (http.readyState == 4 && http.status == 200) {Alarm (http.responseText); }} http.send (Params); Objet

06. Fäert net de Chatbot

Kuerz, aktuell Weeër fir mat Computeren ze interagéieren fir Informatioun ze kréien, ginn der AI-baséiert Technologie wéi Chatbots, wou d'Leit einfach einfach Stëmmbefeeler maachen, wéi mir mat Tech wéi Amazon Echo a Google Home gesinn hunn.

D'Webdesign Gemeinschaft brauch net Angscht ze hunn - mir sollen all de Mehrwäert vun dëser neier Technologie ëmfaassen.

Et kéint e Spillwechsler fir d'Firme sinn, fir déi et schafft, mat voll skalierbaren Clientsdéngscht a verbesserte Clientsintelligenz.

Dësen Artikel gouf ursprénglech amNetz Magazin, de beschte verkaafte Magazin vun der Welt fir Webdesigner an Entwéckler. Abonnéiert Iech hei.

Eis Ëffentlecher Publikatioune
Wéi fixéiert Windows 10 Start Menu net funktionnéiert?
Liest Méi

Wéi fixéiert Windows 10 Start Menu net funktionnéiert?

Ah, a den Window 10 tartmenu funktionnéiert net erëm? Dat a ee Feeler dee Microoft net fäerdeg bruecht huet ze reparéieren och nodeem hien eou vill Update op eie Wee gechéckt ...
Wéi Zougang zougespaart Windows 10 mat 2 einfache Weeër
Liest Méi

Wéi Zougang zougespaart Windows 10 mat 2 einfache Weeër

Ech inn au Window gepaart, wann ech mäi Pawuert aginn an op Enter drécken, kréien ech ëmmer dat falcht Pawuert probéiert nach eng Kéier. Ee Benotzer op engem Forum huet g...
Wéi geséchert een Excel Datei
Liest Méi

Wéi geséchert een Excel Datei

Microoft Excel a déi meecht benotzt oftware fir Excel Dateien weltwäit. Alo et ginn ëmmer e puer Dateien oder Daten déi Dir geéchert an onkorrupt behale wëllt. Heiando mu...