Innehåll
- 01. Ställ in en personlighet
- 02. Använd RiveScript
- 03. Generera hjärnan till din bot
- 04. Designa en röst
- 05. Begär inlämning
- 06. Var inte rädd för chatboten
I mitten av 2000-talet fick virtuella agenter och kundtjänstchattbots mycket adulation, även om de inte var särskilt konversativa, och under huven var de bara sammansatta av datautbyte med webbservrar.
Numera, även om det finns ett stort antal exempel på '' svag AI '' (inklusive Siri, Alexa, webbsökmotorer, automatiserade översättare och ansiktsigenkänning) och andra ämnen som responsiv webbdesign svänger i rampljuset, chattbots orsakar fortfarande uppståndelse . Med stora investeringar från stora företag finns det fortfarande många möjligheter att hacka framtidens konversationsgränssnitt.
- Hur man utformar en chatbotupplevelse
Ibland får de ett dåligt rykte, men chatbots kan vara användbara. De behöver inte känna sig som en grundläggande ersättning för ett vanligt webbformulär där användaren fyller i inmatningsfält och väntar på validering - de kan ge en konversationsupplevelse.
I huvudsak förbättrar vi användarupplevelsen för att känna sig mer naturlig, som att prata med en expert eller en vän, i stället för pek-och-klick i webbläsaren eller mobilgester. Målet är att genom att ge empatiska, kontextuella svar kommer denna teknik att inbäddas direkt i människors liv.
Titta på videon nedan eller läs vidare för att upptäcka ett praktiskt sätt att designa och bygga en chatbot, baserad på en verklig projektintagsapplikation i en tjänstdesignpraxis.
01. Ställ in en personlighet
Eftersom denna praxis tjänar över 110 000 medlemmar globalt var målet att tillhandahålla ett snabbt, bekvämt och naturligt gränssnitt genom vilket interna intressenter kan begära effektiva digitala tjänster istället för att behöva fylla i förvirrande formulär.
Det första steget var att fastställa chatbotens personlighet, eftersom detta skulle representera rösten för tjänstedesignteamet för dess intressenter. Vi byggde på Aarron Walters banbrytande arbete med designpersoner. Detta hjälpte vårt team att utveckla botens personlighetsdrag, som sedan bestämde meddelandena för hälsningar, fel och användarfeedback.
Detta är ett känsligt stadium, eftersom det påverkar hur organisationen uppfattas. För att säkerställa att vi hade så mycket information som möjligt inrättade vi omedelbart intressentworkshops för att spika rätt personlighet, färg, typografi, bilder och användarflöde när vi engagerade oss med botten.
Efter att vi fått alla nödvändiga godkännanden - inklusive att söka juridisk rådgivning - satte vi oss för att konvertera arkaiska formulär till en serie fram och tillbaka frågor som efterliknade en konversation mellan intressenterna och en representant för vårt team för designtjänster.
02. Använd RiveScript
Vi visste att vi inte ville gå för djupt in i AI-märkningsspråket för bearbetningsdelen - vi behövde bara tillräckligt för att starta upplevelsen.
RiveScript är ett enkelt chatbot-API som är enkelt att lära sig och tillgodose våra behov. Inom några dagar hade vi logiken för att ta in en projektförfrågan från botten och analysera den med tillräcklig affärslogik för att validera och kategorisera den så att den kunde skickas via JSON REST-tjänster till lämplig intern projektuppgiftskö.
För att få denna grundläggande chatbot att fungera, gå till RiveScript repo, klona den och installera alla vanliga nodberoenden. I repo kan du också få en smak av de interaktioner du kan lägga till med de olika exemplen på utdrag.
Kör sedan webbklientmappen, som gör botten till en webbsida genom att köra en grundläggande Grunt-server. Vid denna tidpunkt kan du förbättra upplevelsen efter dina behov.
03. Generera hjärnan till din bot
Nästa steg är att skapa ”hjärnan” i vår bot. Detta specificeras i filer med .RIVE-tillägget och tack och lov kommer RiveScript redan med grundläggande interaktioner ur lådan (till exempel frågor som 'Vad heter du?', 'Hur gammal är du?' Och 'Vad är din favorit färg?').
När du initierar webbklientappen med rätt Node-kommando, instrueras HTML-filen att ladda dessa.RIVE filer.
Därefter måste vi generera den del av vår chatbots hjärna som kommer att hantera projektförfrågningar. Vårt huvudsakliga mål är att konvertera ett urval av frågor om projektuppgiftsintag till en vanlig konversation.
Så till exempel:
- Hej, hur kan vi hjälpa till?
- Bra, hur snart behöver vi börja?
- Kan du ge mig en grov uppfattning om din budget?
- Berätta mer om ditt projekt ...
- Hur hörde du talas om oss?
Ett typiskt tillgängligt webbformulär skulle se ut så här:
form action = ""> fieldset> legend> Request Type: / 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 / etikett> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> option 3 / label> br> / fieldset > fältuppsättning> legend> Tidslinje: / legend> input id = "en månad" typ = "radio" namn = "begäran-tidslinje" värde = "en månad"> etikett för = "en månad"> 1 månad / etikett> br> input id = "en-tre månader" typ = "radio" namn = "begäran-tidslinje" värde = "en-tre månader"> etikett för = "en månad"> 1-3 månader / etikett> br> input id = "fyra-plus-månader" typ = "radio" namn = "begäran-tidslinje" värde = "fyra-plus-månader"> etikett för = "fyra-plus-månader"> 4+ månader / label> br> / fieldset> br> label for = "request-budget"> Budgetinformation / label> br> textarea id = "request-budget" name = "request-budget-text" rader = "10" cols = "30"> / textarea> br> etikett för = "begäran-beskrivning"> Projektbeskrivning / etikett> br> textarea id = "begäran-beskrivning" namn = "begäran-beskrivning-text" rader = "10" cols = "30"> / textarea > br> etikett för = "begäran-referens"> Referens / etikett> br> textarea id = "begäran-referens" namn = "begäran-referens- text" rader = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / formulär>
Med webbformulär är vi mycket bekanta med vissa mönster: du klickar på knappen Skicka, all formulärdata skickas till en annan sida där begäran behandlas och då dyker det upp med en fräck Tack-sida.
Med chatbots kan vi interagera med att skicka en begäran och göra den mer meningsfull.
04. Designa en röst
För att konvertera det här formuläret till ett konversationsanvändargränssnitt som serveras i RiveScripts chatbot-webbklient, måste vi konvertera informationsarkitekturen från styv till flytande; eller fältetiketter i UI-strängar.
Låt oss överväga några tillgängliga fältetiketter och deras relaterade frågeton:
- Begäran: Hur kan vi hjälpa? Vet inte? Har du något emot om jag ställer några frågor?
- Tidslinje: Hur snart behöver vi komma igång?
- Budgetinformation: Kan du ge mig en grov uppfattning om din budget?
- Projekt beskrivning: OK, kan du berätta en sammanfattning av det problem som ska lösas?
- Referens: Vem hänvisade dig också till oss?
Därefter måste vi konvertera webbformulärets kod till AI-skript, enligt RiveScript: s mycket lärbara bearbetningslogik för tvåvägskonversationer:
- Hur kan vi hjälpa? + *% hur kan vi hjälpa till - ställa in områden = varSure, bryr du dig om jag ställer några frågor? + *% säker, bryr du dig om jag ställer några frågor - Hur snart behöver jag starta den här begäran? + *% hur snart behöver jag starta den här förfrågan - ställ in när = varKan du ge mig en grov uppfattning om din budget? + *% kan du ge mig en grov uppfattning om din budget - ange budget = varOK, kan du berätta en sammanfattning av det problem som ska lösas, komponenter och miljöer som påverkas, eller en övergripande beskrivning? + *% ok kan du berätta en sammanfattning av problemet som ska lösas komponenter och miljöer som påverkas eller en övergripande beskrivning - ange projekt = varAlla, vem hänvisade dig till oss? + *% också som hänvisade dig till oss - ställ in referal = vargreat här är vad jag har hittills: n Tjänster som behövs: få områden> n Behöver du börja: få när> n Grov budget: få budget> n Om ditt projekt: få projekt> n Hänvisat av: få remiss> n och kommer snart att kontakta finns det något annat jag kan hjälpa dig med idag? samtal> intag få områden> få när> få budget> få projekt> få remiss> / samtal>
05. Begär inlämning
I motsats till standardformvariabler som skickas till en annan sida eller tjänst för att behandlas, kan chatbots validera och skicka information som användaren har angett i ett chattfönster (eller talat) omedelbart, vilket innebär att användare också enkelt kan se tidigare angivna värden.
Vi behövde skicka användarens begäran i chatbot-gränssnittet via JSON REST API till en extern projektuppgiftsserver.
I RiveScript-js är vi fria att använda en XMLHttpRequest invända mot att skicka begäran nästan samtidigt, eftersom uppgifterna matas in av användaren:
> objektintag javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "areas"); var b = rs.getUservar (rs.currentUser (), "när"); 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 ("Anslutning", "stäng"); http.onreadystatechange = function () {// Anropa en funktion när tillståndet ändras. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); objekt
06. Var inte rädd för chatboten
Snart kommer nuvarande sätt att interagera med datorer för att få information att ge efter för AI-baserad teknik som chatbots, där människor bara gör enkla röstkommandon, som vi har sett med teknik som Amazon Echo och Google Home.
Webbdesigngemenskapen behöver inte frukta - vi borde alla anamma mervärdet av denna nya teknik.
Det kan vara en spelväxlare för de företag det jobbar för, och erbjuder helt skalbar kundservice och förbättrad kundinformation.
Denna artikel presenterades ursprungligen inätmagasin, världens bästsäljande tidning för webbdesigners och utvecklare. Prenumerera här.
