Hogyan készítsünk Chatbot felületet

A 2000-es évek közepén a virtuális ügynökök és az ügyfélszolgálati chatbotok sok adulást kaptak, annak ellenére, hogy nem voltak nagyon beszélgetők, és a motorháztető alatt csupán az adatcserékből készültek.

Napjainkban, még akkor is, ha a "gyenge AI" példa létezik (beleértve a Siri, Alexa, webes keresőmotorokat, automatizált fordítók és arcfelismerés) és egyéb témák, mint például Érzékeny webdesign a hogging a fényfény, a chatbotok még mindig keverednek. A nagyvállalatok nagy befektetésével továbbra is rengeteg lehetőség van a jövő beszélgető interfészeinek feltörésére.

• Hogyan tervezhet egy chatbot tapasztalatot

Néha rossz hírnevet kapnak, de a chatbotok hasznosak lehetnek. Nem kell, hogy érzem magam, mint az alap helyett egy szabványos webes űrlap, ahol a felhasználó kitölti a beviteli mezők és megvárja validálása - tudják biztosítani a társalgási élmény.

Lényegében javítjuk a felhasználói tapasztalat Annak érdekében, hogy természetesebbé váljon, mint egy szakértővel vagy barátjával való beszélgetés, a webböngésző pont-kattintások helyett vagy mobil gesztusok helyett. A cél az, hogy empatikus, kontextusi válaszok biztosításával ez a technológia közvetlenül beágyazódik az emberek életébe.

Az alábbi videóból, vagy olvassa tovább, hogy felfedezzék a praktikus módon készítheted a chatbot alapján egy igazi projekt-bevitel alkalmazok szolgáltató tervezési gyakorlat.

01. Állítson be egy személyiséget

Mivel ez a gyakorlat globálisan 110 000 tagot kínál, a cél az volt, hogy gyors, kényelmes és természetes felületet biztosítson, amelyen keresztül a belső érdekeltek hatékony digitális szolgáltatásokat kérhetnek, ahelyett, hogy ki kell tölteniük a zavaros formákat.

Az első lépés a Chatbot személyiségének megteremtése volt, mivel ez a szolgáltatási tervező csapatának hangját képviseli az érdekelt felek számára. Az Aarron Walter szeminalis munkájára építettünk design personals . Ez nagymértékben segített a csapatunknak a bot személyiségjellemzőinek fejlesztésében, majd az üdvözletek, hibák és felhasználói visszajelzések üzeneteit meghatározta.

Ez egy kényes szakasz, mivel befolyásolja a szervezet észlelését. Annak érdekében, hogy megbizonyosodjon arról, hogy minél több információt kaptunk, azonnal beállítottuk az érdekelt felek munkáiat a megfelelő személyiség, a szín, a tipográfia, a képek és a felhasználó áramlásának körömre, amikor a botot összekapcsolják.

Miután megkaptuk az összes szükséges jóváhagyást - beleértve a jogi tanácsadást is - az archaikus kérelem formanyomtatványainak egy olyan hátteret, amely az érdekeltek közötti beszélgetést és a tervezőszolgálatunk képviselőjének képviselőjét utánozta.

02. Használja a resrescript-ot

Tudtuk, hogy nem akartunk túl mélytudni az AI Markup nyelvre a feldolgozó részhez - csak elég volt ahhoz, hogy ugorjunk a tapasztalat elindításához.

A ResriveScript egy egyszerű Chatbot API, amely elég könnyű ahhoz, hogy megtanuljon és elegendő legyen az igényeinkért. Néhány napon belül volt a logika, hogy bemutassuk a projektkérelmet a botból, és elegendő üzleti logikával elemezzük, hogy érvényesítse és kategorizálja azt, hogy a JSON REST SERVICES-en keresztül küldje el a megfelelő belső projektfelvételi sorozatot.

Ahhoz, hogy ezt az alapvető chatbot dolgozzon, menjen a Resrescript repo , klónozza és telepítse az összes szabványos csomópont-függőséget. A repo-ban is megkóstolhatja az interakciókat is, amelyeket hozzáadhat a különböző részletekkel.

Ezután futtassa a webes kliens mappát, amely a botot egy weboldalra fordítja az alapvető forgásterítő szerver futtatásával. Ezen a ponton növelheti az Ön igényeinek megfelelő élményt.

03. generálja a bot agyát

A következő lépés az, hogy létrehozza a botunk "agyát". Ez meghatározott fájlokat .RIVE kiterjesztése, és szerencsére RiveScript már jön az alapvető kölcsönhatások ki a dobozból (például olyan kérdésekre, mint „Mi a neved?”, „Hány éves vagy?” És „Mi a kedvenc szín?').

Amikor a webes kliens alkalmazást a megfelelő csomópont-parancs segítségével kezdeményezi, a HTML-fájl utasításai szerint betölti ezeket .Rive Fájlok.

Ezután meg kell teremteni a Chatbot agyunk részét, amely foglalkozik a projektkérelmekkel. Fő célunk, hogy konvertáljon a projektfelvételi beviteli kérdések kiválasztását rendszeres beszélgetésbe.

Tehát például:

• Helló, hogyan segíthetünk?
• Nagyszerű, hogy hamarosan el kell kezdenünk?
• Tudna adni nekem egy durva ötletet a költségvetésedről?
• Mondjon többet a projektről ...
• Honnan hallottál rólunk?

Egy tipikus hozzáférhető webes forma így néz ki:

 & lt; forma művelet = "" & gt;
& lt; fieldset & gt;
& lt; Legend & Gt; kérés típusa: & lt; / Legend & Gt;
& lt; bemeneti azonosító = "Option-One" type = "rádió" név = "kérés-típus" érték = "Option-One" & gt;
& lt; Címke = "Option-One" & gt; 1. opció 1 & Lt; / Label & GT; BR & GT;
& lt; input id = "Option-two" type = "rádió" név = "kérés-típus" érték = "opció-két" & gt;
& lt; Címke = "Option-two" "& gt; opció 2 & lt; / Label & gt; Br & Gt;
& lt; bemeneti azonosító = "Option-Három" típus = "rádió" név = "kérés-típus" érték = "opció-három" & gt;
& lt; címke = "opció-három" & gt; opció 3 & Lt; / Label & Gt; & lt; br & gt;
& lt; / fieldset & gt;
& lt; fieldset & gt;
& LEGEND & GT; Timeline: & LT; / Legend & Gt;
& lt; bemeneti azonosító = "egy hónap" típus = "rádió" név = "kérés-idővonal" érték = "egy hónap" & gt;
& lt; Címke = "Egy hónap" & gt; 1 hónap & lt; / Label & gt; Br & Gt;
& lt; bemeneti azonosító = "egy-három hónap" típus = "rádió" név = "Request-timeline" érték = "egy-három hónap" & gt;
& lt; címke = "egy hónap" & gt; 1-3 hónap & lt; / Label & gt; Br & gt;
& lt; bemenet azonosító = "négy plusz hónap" típus = "rádió" név = "kérés-idővonal" érték = "négy plusz hónap" & gt;
& lt; Címke = "Négy-plusz hónap" & gt; 4+ hónap & lt; / Label & Gt; BR & GT; & lt; / fieldset & gt;
& lt; br & gt;
& lt; Címke = "Kérelem-költségvetés" & gt; Költségvetési információk & LT; / Label & GT; BR & GT; & lt; textarea id = "kérés-költségvetés" név = "kérés-költségvetési szöveg" sorok = "10" Cols = "30" & gt; & LT; / TEXTAREA & GT;
 & lt; br & gt;
& lt; címke = "kérés-leírás" & gt; Projekt leírása & lt; / Label & gt; Br & gt;
& lt; textarea id = "kérés leírása" Név = "Kérésre - Leírás-szöveg" Sorok = "10" Cols = "30" & gt; & LT; / TEXTAREA & GT;
 & lt; br & gt;
& lt; címke = "kérés-referencia" & gt; hivatkozás & lt; / Lack & Gt; & lt; br & gt; & lt; textarea id = "kérés-referencia" név = "kérés-referencia-szöveg" sorok = "10" Cols = "30" & gt; & LT; / TEXTAREA & GT;
 & lt; br & gt;
 & lt; input type = "Küldés" érték = "Küldés" & gt;
& lt; / forma & gt; 

Webformákkal nagyon ismerjük bizonyos mintákat: Kattintson a Küldés gombra, az összes űrlap adatait egy másik oldalra küldjük, ahol a kérést feldolgozzák, majd valószínűleg egy Cheeky Köszönjük, hogy az oldal felugrik.

A chatbotokkal meg tudjuk hozni a kérelem benyújtásának kölcsönhatását, és ez érthetőbbé teszi.

04. Design egy hang

Az űrlap konvertálásához a Resrive Chatbot webes ügyféllel ellátott beszélgető felhasználói felülethez az információs architektúrát merevre kell átalakítanunk; vagy mező címkék az UI húrokba.

Nézzük meg néhány elérhető terepi címkét, és a kapcsolódó kérdésem:

• Kérés: Hogyan segíthetünk? Nem biztos? Nem bánja, ha néhány kérdést kérdezek?
• Idővonal: Milyen hamar el kell kezdenünk?
• Költségvetési információk: Tudna adni nekem egy durva ötletet a költségvetésedről?
• A projekt leírása: Oké, elmondhatod nekem egy összefoglalót a megoldandó probléma?
• Referencia: Szintén, aki ránk küldött?

Ezután a webes űrlap kódját az AI parancsfájlba kell konvertálnunk, a resrescript után Feldolgozási logika Kétirányú beszélgetések esetén:

- Hogyan segíthetünk?

+ *
% hogyan segíthetünk
- & lt; set területek = & lt; var & gt; Persze, nem bánja, ha megkérdeznék néhány kérdést?

+ *
% biztos, hogy megbizonyosodsz, ha megkérdeznék egy pár kérdést - milyen hamar kell elkezdeni ezt a kérést?

+ *
% Milyen hamar el kell indítanom ezt a kérést
- & lt; beállítva, amikor = & lt; var & gt; & gt; adhatsz nekem durva ötletet a költségvetésedről?

+ *
% lehet adni nekem durva ötletet a költségvetésedről
- & lt; beállíthatja a költségvetést = & lt; Var & Gt; & gt; Meg tudja mondani, hogy összefoglalja a megoldandó problémát, az érintett alkatrészeket és környezeteket, vagy egy általános leírást?

+ *
% OK Meg tudod mondani, hogy összefoglalja a problémát, hogy megoldja az összetevőket és az érintett környezeteket, vagy egy általános leírást
- & Lt; Set Project = & lt; Var & Gt; & gt; is, aki ránk utalt?

+ *
% is, aki ránk vonatkozott
- & lt; Set Referna = & lt; Var & Gt; Nagyszerű itt van, amit eddig kaptam: \ n Szükséges szolgáltatások: & Lt; Get Területek & GT; \ n el kell kezdeni: & lt; kap, amikor & gt; \ n durva költségvetés: & lt; kapja meg a költségvetést & gt; \ n A projektről: & lt; Get Project & Gt; \ n Az alábbiak szerint: & lt; Get Referral & GT; \ n, és röviddel kapcsolatba lép, hogy bármi mást is tudok segíteni ma? & lt; call & gt; bevitel & lt; kapja meg a területeket & gt; & lt; kap, amikor & gt; & lt; kapja meg a költségvetést & gt; & lt; Get Project & GT; & Lt; Get Referal & GT; & lt; / Call & Gt; 

05. kérés benyújtása

Szemben a szokásos űrlapváltozók küldött egy másik oldalra vagy szolgáltatás folyamat chatbots érvényesítheti és információkat nyújthatnak be a felhasználó által beírt egy chat ablak (vagy szóbeli) azonnal, amely segítségével a felhasználók is újra a korábban beírt értékeket könnyen.

Meg kellett küldeni a felhasználó kérését a Chatbot UI-ban a JSON REST API-n keresztül egy külső projektfeladat-kiszolgálóhoz.

Ban ben Resrescript-js Szabadon használhatunk egy Xmlhttproquest objektum a kérelem szinte egyszerre történő benyújtásához, mivel az adatokat a felhasználó megadja:

 & gt; Objektumbevitel JavaScript
 var http = új xmlhttproquest ();

 var A = Rs.GetUervar (Rs.Currentuser (), "területek");
 var b = rs.getuservar (rs.currentuser (), "mikor");
 var c = rss.getuservar (Rs.Currentuser (), "Költségvetés");
 var d = rs.getuservar (Rs.Currentuser (), "projekt");
 var e = rs.getuervar (Rs.Currentuser (), "referal");

 var url = "http: // localhost: 3000 / Küldés";

 VAR Params = "Területek =" + A + "& amp; ha =" + B + "& amp; költségvetés =" + C + "& amp; Pro Ject =" + D + "& amp; Referal =" + E;
 konzol.log (Params);

 http.open ("Post", URL, igaz);

 http.setrequestheader ("tartalomtípus", "alkalmazás / X- www-form-urlencoded");
 http.setrequestheader ("Connection", "Close");
 http.OnreadyStatechange = Funkció () {// Hívja a funkciót, amikor az állam megváltozik.
  ha (http.readeState == 4 & amp; http.Status == 200) {
    riasztás (http.Responsetext);
  }
 }
 http.send (Params);

& lt; Objektum 

06. Ne félj a chatbottól

Hamarosan a számítógépekkel való kölcsönhatás aktuális módja, hogy információt szerezzen az AI-alapú technológiához, mint a chatbotok, ahol az emberek egyszerűen egyszerű hangutasításokat készítenek, mint például az Amazon Echo és a Google Home.

A webes design közösségnek nem kell félnie - mindannyian át kell vennie az új technológia hozzáadott értékét.

Ez lehet egy játékváltó az általa működő vállalatok számára, amely teljesen skálázható ügyfélszolgálatot kínál, és javítja az ügyfelek intelligenciáját.

Ez a cikk eredetileg szerepelt net magazin , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Iratkozzon fel itt .

Kapcsolódó cikkek:

• Hogyan tanulnak a chatbotok - Interjú Giles Colborne
• Hogyan változtatja meg az intelligens webes interakciókat
• Hogyan beszélgető interfészek innovatív banki szolgáltatások