Sådan oprettes en chatbot-grænseflade

I midten af ​​2000'erne modtog virtuelle agenter og kundeservicechatbots en masse beundring, selvom de ikke var særlig konversative, og under hætte var de blot sammensat af dataudveksling med webservere.

I dag, selvom der findes et stort antal eksempler på 'svag AI' (inklusive Siri, Alexa, websøgemaskiner, automatiserede oversættere og ansigtsgenkendelse) og andre emner som responsivt webdesign kaster rampelyset, er chatbots stadig urolige. Med store investeringer fra store virksomheder er der stadig masser af muligheder for at hacke fremtidens samtaleflader.



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



I det væsentlige forbedrer vi brugererfaring at føle sig mere naturlig, som at tale med en ekspert eller en ven, i stedet for peg-og-klik i webbrowseren eller mobilbevægelser. Målet er, at ved at give empatiske, kontekstuelle svar, vil denne teknologi blive indlejret direkte i folks liv.

Se videoen nedenfor, eller læs videre for at finde en praktisk måde at designe og opbygge en chatbot på, baseret på en ægte projektindtagsapplikation i en service design-praksis.



01. Angiv en personlighed

Det er vigtigt at sikre, at chatbots personlighed afspejler det firma, den repræsenterer

Det er vigtigt at sikre, at chatbots personlighed afspejler det firma, den repræsenterer

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

Det første skridt var at etablere chatbotens personlighed, da dette ville repræsentere service designteamets stemme over for sine interessenter. Vi byggede på Aarron Walters banebrydende arbejde med design mennesker . Dette hjalp meget vores team med at udvikle botens personlighedstræk, som derefter bestemte meddelelserne til hilsner, fejl og brugerfeedback.



Dette er en delikat fase, da den påvirker, hvordan organisationen opfattes. For at sikre, at vi havde så mange oplysninger som muligt, oprettede vi straks interessentworkshops for at sømme den passende personlighed, farve, typografi, billedsprog og brugerens flow, når vi engagerede os i bot.

Efter at vi havde fået alle de nødvendige godkendelser - herunder at søge juridisk rådgivning - satte vi os for at konvertere arkaiske anmodningsformularer til en række frem og tilbage spørgsmål, der efterlignede en samtale mellem interessenterne og en repræsentant for vores designtjenesteteam.

02. Brug RiveScript

Dette enkle script-sprog giver alt hvad du behøver for at designe og opbygge en chatbot-POC

Dette enkle script-sprog giver alt hvad du behøver for at designe og opbygge en chatbot-POC

Vi vidste, at vi ikke ønskede at komme for dybt ind i AI-markupsproget til behandlingsdelen - vi havde bare brug for nok til at starte oplevelsen.

RiveScript er en simpel chatbot API, der er let nok til at lære og er tilstrækkelig til vores behov. Inden for et par dage havde vi logikken ned til at indtage en projektanmodning fra boten og analysere den med tilstrækkelig forretningslogik til at validere og kategorisere den, så den kunne sendes via JSON REST-tjenester til den relevante interne projektopgavekø.

For at få denne grundlæggende chatbot til at fungere, gå til RiveScript repo , klon det og installer alle standard Node-afhængigheder. I repoen kan du også få en smag af de interaktioner, du kan tilføje med de forskellige eksempler på uddrag.

Kør derefter webklientmappen, som gør bot til en webside ved at køre en grundlæggende Grunt-server. På dette tidspunkt kan du forbedre oplevelsen, så den passer til dine behov.

03. Generer din bots hjerne

Det næste trin er at generere 'hjernen' i vores bot. Dette er specificeret i filer med .RIVE-udvidelsen, og heldigvis kommer RiveScript allerede med grundlæggende interaktioner ud af kassen (for eksempel spørgsmål som 'Hvad er dit navn?', 'Hvor gammel er du?' Og 'Hvad er din yndlingsfarve?').

Når du starter webklientappen ved hjælp af den korrekte Node-kommando, får HTML-filen besked om at indlæse disse .BANK filer.

Derefter skal vi generere den del af vores chatbots hjerne, der skal håndtere projektanmodninger. Vores hovedmål er at konvertere et udvalg af spørgsmål om projektopgaver til en regelmæssig samtale.

pen og blæk kunstnere 19. århundrede

Så for eksempel:

  • Hej, hvordan kan vi hjælpe?
  • Godt, hvor hurtigt har vi brug for at 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 ser sådan ud:

Request Type: option 1
option 2
option 3
Timeline: 1 month
1-3 months
4+ months

Budget Information

Project Description

Reference

Med webformularer er vi meget fortrolige med visse mønstre: du klikker på knappen Send, alle formulardata sendes til en anden side, hvor anmodningen behandles, og så dukker sandsynligvis en fræk tak-side op.

Med chatbots er vi i stand til at tage interaktionen mellem at indsende en anmodning og gøre den mere meningsfuld.

04. Design en stemme

For at konvertere denne formular til en samtalerbrugergrænseflade, der serveres i RiveScript's chatbot-webklient, er vi nødt til at konvertere informationsarkitekturen fra stiv til flydende; eller feltetiketter i UI-strenge.

Lad os overveje nogle tilgængelige feltetiketter og deres relaterede spørgsmålstone:

  • Anmodning: Hvordan kan vi hjælpe? Ikke sikker? Har du noget imod det, hvis jeg stiller et par spørgsmål?
  • Tidslinje: Hvor hurtigt har vi brug for at 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 det problem, der skal løses?
  • Reference: Hvem henviste dig også til os?

Dernæst er vi nødt til at konvertere webformularens kode til AI-script efter RiveScript's meget lærbare behandler logik til tovejssamtaler:

- How can we help? + * % how can we help - Sure, Do you mind If I ask a couple of questions? + * % sure do you mind if i ask a couple of questions - How soon do I need to start this request? + * % how soon do i need to start this request - Can you give me rough idea of your budget? + * % can you give me rough idea of your budget - OK, can you tell me a summary of the problem to be solved, components and environments affected, or an overall description? +* % ok can you tell me a summary of the problem to be solved components and environments affected or an overall description - Also, who referred you to us? +* % also who referred you to us - great here is what I got so far: Services needed: Need to start: Rough budget: About your project: Referred by: and will get in touch shortly is there anything else i can help you with today? intake

05. Anmodning om indsendelse

I modsætning til, at standardformvariabler sendes til en anden side eller tjeneste til behandling, kan chatbots validere og indsende oplysninger, der er indtastet af brugeren i et chatvindue (eller talt) med det samme, hvilket betyder, at brugerne også nemt kan besøge tidligere indtastede værdier.

Vi havde brug for at sende brugerens anmodning, der blev indtastet i chatbot-brugergrænsefladen via JSON REST API, til en ekstern projektopgaveserver.

I RiveScript-js vi er fri til at gøre brug af et XMLHttpRequest gør indsigelse mod at indsende anmodningen næsten samtidigt, da dataene indtastes af brugeren:

> object intake javascript var http = new XMLHttpRequest(); var a = rs.getUservar(rs.currentUser(), 'areas'); var b = rs.getUservar(rs.currentUser(), 'when'); 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('Connection', 'close'); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { alert(http.responseText); } } http.send(params); < object

06. Frygt ikke chatbotten

Snart vil nuværende måder at interagere med computere for at få information give efter for AI-baseret teknologi som chatbots, hvor folk bare laver enkle stemmekommandoer, som vi har set med teknologier som Amazon Echo og Google Home.

Webdesignmiljøet behøver ikke frygte - vi skal alle omfavne merværdien af ​​denne nye teknologi.

Det kan være en game-changer for de virksomheder, det arbejder for, der tilbyder fuldt skalerbar kundeservice og forbedret kundeintelligens.

Denne artikel blev oprindeligt omtalt i netmagasin , Verdens bedst sælgende magasin til webdesignere og udviklere. Abonner her .

Relaterede artikler:

  • Hvordan lærer chatbots - interview med Giles Colborne
  • Hvordan det intelligente web vil ændre vores interaktioner
  • Hvordan samtaleflader er innovative banker