Hur man bygger ett ChatBot-gränssnitt

I mitten av 2000-talet fick virtuella agenter och kundservice chatbots mycket adulation, även om de inte var särskilt konversation, och under huven bestod de bara av datautbyte med webbservrar.

Numera, även om ett stort antal exempel på "svag AI" finns (inklusive Siri, Alexa, webbsökmotorer, automatiserade översättare och ansiktsigenkänning) och andra ämnen som Responsiv webbdesign Huggar rampljuset, dödar chatbots fortfarande omröring. Med stora investeringar från stora företag är det gott om möjligheter att hacka framtida konversationsgränssnitt.

• Hur man utformar en Chatbot-upplevelse

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 en vanlig webbformulär, där användaren fyller i inmatningsfält och väntar på validering - de kan ge en konversation.

I huvudsak förbättrar vi användarupplevelse Att känna sig mer naturlig, som att prata med en expert eller en vän, istället för webbläsare-punkt-och-klick eller mobila gester. Syftet är att genom att tillhandahålla empatiska kontextuella svar kommer denna teknik att bli inbäddad 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, baserat på ett riktigt projektintagsapplikation i en servicedesign.

01. Ange en personlighet

Eftersom denna praxis tjänar över 110 000 medlemmar globalt var målet att ge ett snabbt, bekvämt och naturligt gränssnitt genom vilket interna intressenter kunde begära effektiva digitala tjänster, istället för att fylla i förvirrande former.

Det första steget var att etablera Chatbots personlighet, eftersom det skulle representera servicekonstruktionsgruppens röst till sina intressenter. Vi byggde på Aarron Walters halvarbete på Design Personas . Detta hjälpte mycket till vårt team att utveckla bots personlighetsdrag, som sedan bestämde meddelandena för hälsningar, fel och användaråterkoppling.

Detta är ett känsligt stadium, eftersom det påverkar hur organisationen uppfattas. För att se till att vi hade så mycket information som möjligt, ställer vi omedelbart intressentverkstäderna för att nagla den lämpliga personligheten, färg, typografi, bilder och användarens flöde när du engagerar med boten.

Efter att vi hade fått alla nödvändiga godkännanden - inklusive sökande av juridisk rådgivare - vi bestämde oss för att konvertera archaic begäran formulär i en serie fram och tillbaka frågor som efterliknade en konversation mellan intressenterna och en representant för vårt designtjänstteam.

02. Använd Rivescript

Vi visste att vi inte ville bli för djupt in i AI Markup-språk för bearbetningsdelen - vi behövde bara tillräckligt för att hoppa-starta upplevelsen.

Rivescript är en enkel Chatbot API som är lätt nog att lära sig och är tillräcklig för våra behov. Inom några dagar hade vi logiken att intagsa en projektering från boten och analysera den med tillräckligt med affärslogik för att validera och kategorisera det så att det kunde skickas genom JSON vila tjänster till lämplig internprojekt uppgiftskö.

För att få den här grundläggande chatbot som arbetar, gå till Rivescript repo , klona det och installera alla standardnodberoende. I repo kan du också få en smak av de interaktioner du kan lägga till med de olika exemplet snippets.

Därefter kör du Web-Client-mappen, som vrider bot till en webbsida genom att köra en grundläggande grunt server. Vid denna tidpunkt kan du förbättra upplevelsen som passar dina behov.

03. Generera din bots hjärna

Nästa steg är att generera "hjärnan" av vår bot. Detta anges i filer med .rive-tillägget, och tack och lov kommer Rivescript redan med grundläggande interaktioner ut ur lådan (till exempel frågor som "vad heter du?", "Hur gammal är du?" Och "Vad är du favorit färg?').

När du startar webbklient-appen med hjälp av det korrekta nodkommandot, 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 huvudmål är att konvertera ett urval av projektuppgiftsintag i 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 idé om din budget?
• Berätta mer om ditt projekt ...
• Hur hörde du talas om oss?

En typisk tillgänglig webbformulär skulle se ut så här:

 & lt; form action = "" & gt;
& lt; fältset & gt;
& LT; Legend & GT; Förfrågan Typ: & LT; / Legend & GT;
& LT; Input ID = "OPTION-ONE" TYPE = "RADIO" NAME = "Förfrågan-typ" värde = "Alternativ-One" & GT;
& LT; Etikett för = "Alternativ-One" & GT; Alternativ 1 & LT; / Label & GT; & LT; BR & GT;
& lt; Input ID = "Alternativ-två" Typ = "Radio" Namn = "Förfrågan-typ" värde = "Alternativ-två" & GT;
& LT; Etikett för = "Alternativ-två" & GT; Alternativ 2 & LT; / Label & GT; & LT; BR & GT;
& LT; Input ID = "Alternativ-tre" Typ = "Radio" Namn = "Förfrågan-typ" värde = "Alternativ-tre" & GT;
& LT; Etikett för = "Alternativ-tre" & GT; Alternativ 3 & LT; / Etikett och GT; & LT; BR & GT;
& LT; / Fieldset & GT;
& lt; fältset & gt;
& LT; Legend & GT; Tidslinje: & LT; / Legend & GT;
& LT; Input ID = "En månad" Typ = "Radio" Namn = "Förfrågan-tidslinje" värde = "En månad" & GT;
& LT; Etikett för = "En månad" & GT; 1 månad & LT; / Etikett & GT; & LT; BR & GT;
& LT; Input ID = "En-tre-månaders" Typ = "Radio" Namn = "Förfrågan-tidslinje" värde = "En-tre-månaderna" & GT;
& LT; Etikett för = "En månad" & GT; 1-3 månader & LT; / Etikett & GT;
& LT; Input ID = "Four-plus-months" Typ = "Radio" Namn = "Förfrågan-tidslinje" värde = "Fyra plus-månader" & GT;
& LT; Etikett för = "Fyra-plus-månader" & GT; 4+ månader och LT; / LT; ​​B & GT; & LT; / Fieldset & GT;
& lt; BR & GT;
& LT; Etikett för = "Förfrågan-budget" & GT; Budgetinformation & LT; / Etikett och GT; & lt; textarea id = "Förfrågan-budget" namn = "Förfrågan-budget-text" rader = "10" cols = "30" & gt; & LT; / TextArea & GT;
 & lt; BR & GT;
& LT; Etikett för = "Förfrågan-Beskrivning" & GT; Projektbeskrivning & LT; / Label & GT; & LT; BR & GT;
& LT; TEXTAREA ID = "BESKRIVNING-BESKRIVNING" NAME = "BESTÄLLNINGSBESKRIVNING-TEXT" ROWS = "10" COLS = "30" & GT; & LT; / TextArea & GT;
 & lt; BR & GT;
& LT; Etikett för = "Requence-referens" & GT; Referens & LT; B & GT; & LT; TEXTAREA ID = "Förfrågan-referens" Namn = "Request-referens-text" rader = "10" COLS = "30" & GT; & LT; / TextArea & GT;
 & lt; BR & GT;
 & lt; Input Type = "Skicka" värde = "Skicka" & GT;
& LT; / Form & GT; 

Med webbformulär är vi mycket bekanta med vissa mönster: Du klickar på knappen Skicka, alla formata skickas till en annan sida där förfrågan behandlas, och då är det troligt att ett fräckt tackssidan dyker upp.

Med chatbots kan vi ta samspelet med att skicka en förfrågan och göra det mer meningsfullt.

04. Designa en röst

För att konvertera detta formulär till ett konversationsgränssnitt som serveras i Rivescripts Chatbot-webbklient, måste vi konvertera informationsarkitekturen från styv till vätska; eller fältetiketter i UI-strängar.

Låt oss överväga några tillgängliga fältetiketter och deras relaterade frågeston:

• 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 idé om din budget?
• Projekt beskrivning: Okej, kan du berätta en sammanfattning av problemet att lösas?
• Referens: Också, vem hänvisade dig till oss?

Därefter måste vi konvertera webbformulärets kod till AI-skript, efter Rivescripts mycket lärbara Bearbetningslogik För tvåvägs konversationer:

- Hur kan vi hjälpa?

+ *
% hur kan vi hjälpa
- & LT; Set Area = & LT; Var & GT; & GT; Visst, har du något emot om jag ställer några frågor?

+ *
Är du säker på om jag ställer några frågor - hur snart behöver jag börja den här förfrågan?

+ *
% Hur snart behöver jag börja den här förfrågan
- & lt; set när = & lt; VAR & GT; & GT; Kan du ge mig en grov uppfattning om din budget?

+ *
% Kan du ge mig en grov uppfattning om din budget
- & LT; Set Budget = & LT; VAR & GT; & GT; OK, Kan du berätta en sammanfattning av problemet att lösas, komponenter och miljöer som påverkas, eller en övergripande beskrivning?

+ *
% OK Kan du berätta för mig en sammanfattning av problemet att vara löst komponenter och miljöer som påverkas eller en övergripande beskrivning
- & lt; Set Project = & LT; VER & GT; och GT; Vem hänvisade dig till oss?

+ *
% också som hänvisade dig till oss
- & lt; Set Referal = & LT; VAR & GT; & GT; Bra här är vad jag fick hittills: \ N Tjänster behövs: & LT; Få områden och GT; \ n Behöver börja: & lt; få när & gt; \ n Grov budget: & lt; få budget & gt; \ n om ditt projekt: & lt; få projekt och gt; \ N hänvisas av: & lt; få hänvisning och gt; \ n Och kommer att komma i kontakt kort är det något annat jag kan hjälpa dig med idag? & LT; Call & GT; Intake & LT; få områden och gt; & lt; få när & gt; & lt; få budget & gt; & lt; få projekt och gt; & lt; få reference & gt; & lt; / call & gt; 

05. Begär inlägg

I motsats till vanliga formvariabler som skickas till en annan sida eller tjänst för att bearbeta kan chatbots validera och skicka in information som används av användaren i ett chattfönster (eller talas) omedelbart, vilket innebär att användarna enkelt kan återgå till tidigare inmatade värden.

Vi behövde skicka användarens begäran in i Chatbot UI via JSON Rest API till en extern projektuppgiftsserver.

I Rivescript-js Vi är fria att använda en Xmlhttprequest Objekt att skicka in begäran nästan samtidigt, eftersom data anges av användaren:

 & gt; Objekt Intake JavaScript
 var http = ny xmlhttprequest ();

 var a = rs.getuservar (rs.currentuser (), "områden");
 var b = rs.getuservar (rs.currentuser (), "när");
 var c = rs.getuservar (rs.currentuser (), "budget");
 var d = rs.getuservar (rs.currentuser (), "projekt");
 var e = rs.getuservar (rs.currentuser (), "reference");

 Var URL = "http: // localhost: 3000 / skicka";

 Var Params = "Area =" + A + "& amp; när =" + B + "& amp; budget =" + c + "& amp; pro ject =" + d + "& amp; referera =" + e;
 konsol.log (Params);

 http.open ("post", url, sant);

 http.setrequestheader ("Innehållstyp", "Application / X- www-form-urlencoded");
 http.setrequestheader ("anslutning", "nära");
 http.onReadyStateChange = funktion () {/ call en funktion när staten ändras.
  Om (http.readyState == 4 & amp; & amp; http.status == 200) {
    varning (http.responsetext);
  }
 }
 http.send (Params);

& lt; objekt 

06. Frukt inte chatboten

Snart kommer nuvarande sätt att interagera med datorer att få information att ge till AI-baserad teknik som chatbots, där människor bara gör enkla röstkommandon, som vi har sett med tech som Amazon Echo och Google Home.

Webbdesigngemenskapen behöver inte frukta - vi bör alla omfamna mervärdet av den här nya tekniken.

Det kan vara en spelväxlare för de företag det fungerar för, som erbjuder fullt skalbar kundservice och förbättrad kundintelligens.

Den här artikeln var ursprungligen inneburad i nätmagasin , Världens bästsäljande tidning för webbdesigners och utvecklare. Prenumerera här .

Relaterade artiklar:

• Hur chatbots lär sig - Intervju med Giles Colborne
• Hur den intelligenta webben kommer att ändra våra interaktioner
• Hur konversationsgränssnitt är innovativa banker