Sådan opbygges en chatbot-grænseflade

I midten af ​​2000'erne modtog virtuelle agenter og kundeservice chatbots en masse adulering, selvom de ikke var meget conversational, og under hætten var de blot sammensat af dataudvekslinger med webservere.

I dag, selvom et stort antal eksempler på "Svag AI" eksisterer (herunder Siri, Alexa, Web Søgemaskiner, automatiserede oversættere og ansigtsgenkendelse) og andre emner som f.eks Responsive Web Design er hogging rampelyset, chatbots forårsager stadig en omrøring. Med store investeringer fra store virksomheder er der mange muligheder for at hakke fremtidens konversationsgrænseflader.

• Sådan designer du en chatbot oplevelse

Nogle gange får de et dårligt ry, men chatbots kan være nyttige. De behøver ikke at føle sig som en grundlæggende udskiftning for en standard webformular, hvor brugeren udfylder inputfelter og venter på validering - de kan give en samtale oplevelse.

I det væsentlige styrker vi brugererfaring At føle sig mere naturlig, som at tale med en ekspert eller en ven, i stedet for webbrowser point-and-clicks eller mobile gestus. Målet er, at denne teknologi ved at levere empatiske, kontekstuelle svar, blive indlejret direkte i folks liv.

Se videoen nedenfor eller læs videre for at opdage en praktisk måde at designe og opbygge en chatbot baseret på et reelt projektindtagsprogram i en servicedesignpraksis.

01. Indstil en personlighed

Da denne praksis tjener over 110.000 medlemmer globalt, var målet at give en hurtig, bekvem og naturlig grænseflade, gennem hvilke interne interessenter kunne anmode om effektive digitale tjenester, i stedet for at skulle udfylde forvirrende former.

Det første skridt var at etablere Chatbots personlighed, da dette ville repræsentere Service Design-teamet til sine interessenter. Vi bygget på Aarron Walters seminale arbejde på Design Personas. . Dette hjalp i høj grad vores team med at udvikle bots personlighedstræk, som derefter bestemte meddelelserne til hilsener, fejl og brugerfeedback.

Dette er en delikat scene, da det påvirker, hvordan organisationen opfattes. For at sikre, at vi havde så meget information som muligt, etablerede vi straks interessent workshops for at negle den relevante personlighed, farve, typografi, billeder og brugerens flow, når vi engagerer sig med botten.

Efter at vi havde fået alle de nødvendige godkendelser - herunder at søge juridisk rådgivning - vi redegjorde for at konvertere arkaiske anmodning til en række back- og fremtende spørgsmål, der efterlignede en samtale mellem interessenterne og en repræsentant for vores designtjenesters team.

02. Brug rivescript

Vi vidste, at vi ikke ønskede at blive for dybt ind i AI Markup-sprog til behandlingsdelen - vi har lige brug for nok til at hoppe på oplevelsen.

Rivescript er en simpel chatbot API, der er let nok til at lære og være tilstrækkeligt til vores behov. Inden for et par dage havde vi logikken ned for at indtage en projektanmodning fra botten, og analysere det med nok Business Logic til at validere og kategorisere det, så det kunne sendes det via JSON-hvile-tjenester til den relevante interne projektopgavekø.

For at få denne grundlæggende chatbot arbejder, gå til Rivescript repo , kloner det og installer alle standardnodeafhængighederne. I repo kan du også få en smag af de interaktioner, du kan tilføje med de forskellige eksempel uddrag.

Kør derefter web-klientmappen, som gør botten til en webside ved at køre en grundlæggende grunt server. På dette tidspunkt kan du forbedre oplevelsen, der passer til dine behov.

03. Generer din bots hjerne

Det næste skridt er at generere 'hjernen' af vores bot. Dette er angivet i filer med .rive-udvidelsen, og heldigvis rivescript leveres allerede med grundlæggende interaktioner ud af boksen (for eksempel spørgsmål som 'Hvad er dit navn?', Hvor gammel er du? 'Og' Hvad er din yndlingsfarve?').

Når du starter Web-Client-appen ved hjælp af den korrekte node-kommando, bliver HTML-filen instrueret til at indlæse disse .Rive. filer.

Dernæst skal vi generere den del af vores Chatbots hjerne, der vil beskæftige sig med projektanmodninger. Vores hovedmål er at konvertere et udvalg af projektopgaveindtagsspørgsmål til en regelmæssig samtale.

Så for eksempel:

• Hej, hvordan kan vi hjælpe?
• Fantastisk, hvor hurtigt skal vi starte?
• Kan du give mig en grov ide om dit budget?
• Fortæl mig mere om dit projekt ...
• Hvordan hørte du om os?

En typisk tilgængelig webformular ville se sådan ud:

 & lt; form action = "" & gt;
& lt; fieldset & gt;
& lt; Legend & GT; Request Type: & lt; / Legend & GT;
& lt; input id = "option-one" type = "radio" navn = "anmodning-type" værdi = "option-one" & gt;
& lt; etiket for = "option-one" & gt; option 1 & lt; / label & gt; & lt; BR & GT;
& lt; input id = "option-two" type = "radio" navn = "Request-type" værdi = "option-to" & gt;
& lt; etiket til = "option-to" & gt; option 2 & lt; / label & gt; & lt; BR & GT;
& lt; input id = "option-tre" type = "radio" navn = "anmodning-type" værdi = "option-tre" & gt;
& lt; etiket for = "option-tre" & gt; option 3 & lt; / label & gt; & lt; BR & GT;
& lt; / fieldset & gt;
& lt; fieldset & gt;
& lt; Legend & GT; Tidslinje: & lt; / Legend & GT;
& lt; input id = "one-month" type = "radio" navn = "anmodning-tidslinje" værdi = "en måned" & gt;
& lt; etiket for = "en måned" & gt; 1 måned & lt; / label & gt; & lt; BR & GT;
& lt; input id = "en-tre-måneders" type = "radio" navn = "anmodning-tidslinje" værdi = "en-tre-måneder" & gt;
& lt; etiket for = "en måned" & gt; 1-3 måneder & lt; / label & gt; & lt; BR & GT;
& lt; input id = "fire plus-måneder" type = "radio" navn = "Request-TimeLine" værdi = "fire plus-måneder" & gt;
& lt; etiket for = "fire plus-måneder" & gt; 4 + måneder & lt; / label & gt; & lt; BR & GT; & lt; / fieldset & gt;
& lt; BR & GT;
& lt; etiket for = "anmodning-budget" & GT; budget information & lt; / label & gt; & lt; BR & GT; & lt; Textarea ID = "Request-Budget" navn = "Request-Budget-Text" rækker = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; BR & GT;
& lt; etiket for = "anmodning-beskrivelse" & gt; projektbeskrivelse & lt; / label & gt; & lt; BR & GT;
& lt; Textarea ID = "Request-Beskrivelse" navn = "Request-Beskrivelse-Text" rækker = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; BR & GT;
& lt; etiket for = "Request-Reference" & GT; reference & lt; / label & GT; & lt; BR & GT; & lt; Textarea ID = "Request-Reference" navn = "Request-Reference-Text" rækker = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; BR & GT;
 & lt; input type = "indsende" værdi = "indsende" & gt;
& lt; / form & gt; 

Med webformer er vi meget bekendt med visse mønstre: Du klikker på knappen Submit, alle formulardata sendes til en anden side, hvor anmodningen behandles, og så sandsynligvis en fræk, hvornår siden dukker op.

Med Chatbots kan vi tage samspillet mellem at indsende en anmodning og gøre det mere meningsfuldt.

04. Design en stemme

For at konvertere denne formular til en Conversational User Interface, der serveres i Rivescript's Chatbot Web Client, skal vi konvertere informationsarkitekturen fra stiv til væske; eller feltetiketter i UI-strenge.

Lad os overveje nogle tilgængelige feltmærker, og deres relaterede spørgetone:

• Anmodning: Hvordan kan vi hjælpe? Ikke sikker? Har du noget imod, hvis jeg stiller nogle spørgsmål?
• Tidslinje: Hvor hurtigt skal vi komme i gang?
• Budgetoplysninger: Kan du give mig en grov ide om dit budget?
• Projekt Beskrivelse: Ok, kan du fortælle mig et resumé af problemet, der skal løses?
• Reference: Også, hvem henviste dig til os?

Dernæst skal vi konvertere webformularens kode til AI-script, efter Rivescript's meget lærbare Behandlingslogik Til tovejs samtaler:

- Hvordan kan vi hjælpe?

+ *
% Hvordan kan vi hjælpe
- & lt; sæt områder = & lt; var du har noget imod, hvis jeg stiller et par spørgsmål?

+ *
Sørg for, at du har noget imod, hvis jeg spørger et par spørgsmål - hvor hurtigt skal jeg starte denne anmodning?

+ *
% Hvor hurtigt skal jeg starte denne anmodning
- & lt; Set når = & lt; Var & GT; & gt; kan du give mig grov ide om dit budget?

+ *
% Kan du give mig grov ide om dit budget
- & lt; sæt budget = & lt; Var & gt; & gt; ok, kan du fortælle mig et resumé af problemet, der skal løses, komponenter og miljøer, der er berørt, eller en samlet beskrivelse?

+ *
% OK Kan du fortælle mig et resumé af problemet, der skal løses komponenter og miljøer, der er berørt eller en samlet beskrivelse
- & lt; Set Project = & GT; også, hvem henviste dig til os?

+ *
% også hvem henviste dig til os
- & lt; sæt henvisning = & lt; Var & gt; & gt; Great her er det, jeg fik hidtil: \ n tjenester nødvendige: & lt; få områder & gt; \ n Behov for at starte: & lt; få når & gt; \ n groft budget: & lt; få budget & gt; \ n om dit projekt: & lt; få projekt & gt; \ n henvist af: & lt; få henvisning & gt; \ n og vil komme i kontakt med kort tid er der noget andet, jeg kan hjælpe dig med i dag? & lt; ring & gt; indtagelse & lt; få områder & gt; & lt; få når & gt; & lt; få budget & gt; & lt; få projekt & gt; & lt; få reference & gt; & lt; / call & gt; 

05. Anmod om indsendelse

I modsætning til standardformularvariabler, der sendes til en anden side eller -tjeneste til proces, kan ChatBots validere og indsende oplysninger, der er indtastet af brugeren i et chatvindue (eller talt) med det samme, hvilket betyder, at brugerne nemt kan revidere tidligere indtastede værdier nemt.

Vi havde brug for at sende brugerens anmodning indtastet i ChatBot UI via JSON REST API til en ekstern projekt tasker server.

I Rivescript-js. Vi er fri til at gøre brug af en Xmlhttprequest. Objekt for at indsende anmodningen næsten samtidigt, da dataene indtastes af brugeren:

 & GT; Objektindtag JavaScript.
 var http = ny xmlhttprequest ();

 Var A = Rs.getUservar (Rs.CurrentUser (), "Områder");
 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 (), "henvises");

 VAR URL = "http: // localhost: 3000 / send";

 VAR params = "områder =" + A + "& amp; når =" + B + "& amp; budget =" + C + "& amp; pro ject =" + d + "& amp; reference =" + e;
 Console.log (Params);

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

 http.setrequestheader ("Content-Type", "Application / X- WWW-form-urlencoded");
 http.setrequestheader ("Connection", "Close");
 http.onreadystatechange = funktion () {// Ring en funktion, når staten ændres.
  hvis (http.readystate == 4 & amp; & amp; http.status == 200) {
    advarsel (http.responsetext);
  }
 }
 http.send (params);

& lt; objekt 

06. Frygt ikke chatbot

Snart vil de nuværende måder at interagere med computere til at få oplysninger give i AI-baseret teknologi som Chatbots, hvor folk bare laver enkle stemmekommandoer, som vi har set med tech som Amazon Echo og Google Home.

Webdesignsamfundet behøver ikke at frygte - vi skal alle omfatte merværdien af ​​denne nye teknologi.

Det kunne være en spilskifter for de virksomheder, det virker for, tilbyder fuldt skalerbar kundeservice og forbedret kundeinformation.

Denne artikel blev oprindeligt fremhævet i Net Magazine. , Verdens bedst sælgende magasin til webdesignere og udviklere. Abonner her .

Relaterede artikler:

• Hvordan chatbots er læring - interview med Giles Colborne
• Hvordan den intelligente web vil ændre vores interaktioner
• Hvordan konversationsgrænseflader er nyskabende bankvirksomhed