Sådan oprettes en chatbot-grænseflade

Forfatter: Randy Alexander
Oprettelsesdato: 2 April 2021
Opdateringsdato: 16 Kan 2024
Anonim
Sådan oprettes en chatbot-grænseflade - Kreativ
Sådan oprettes en chatbot-grænseflade - Kreativ

Indhold

I midten af ​​2000'erne modtog virtuelle agenter og kundeservicechatbots en masse beundring, selvom de ikke var meget 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 sviner rampelyset, giver chatbots stadig oprør . Med store investeringer fra store virksomheder er der stadig masser af muligheder for at hacke fremtidens samtaleflader.

  • 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 erstatning for en standardwebformular, hvor brugeren udfylder inputfelter og venter på validering - de kan give en samtaleoplevelse.


I det væsentlige forbedrer vi brugeroplevelsen til 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

Da denne praksis tjener over 110.000 medlemmer globalt, var målet at give en hurtig, bekvem 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 designpersoner. Dette hjalp vores team i høj grad 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 workshops for interessenter for at sømme den passende personlighed, farve, typografi, billedsprog og brugerflow, når vi engagerede os i boten.

Efter at vi havde fået alle de nødvendige godkendelser - inklusive søgning af 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

Vi vidste, at vi ikke ønskede at komme for dybt ind i AI-markup-sprog 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 tilstrækkelig til vores behov. Inden for få dage havde vi logikken nede for 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 skal du gå til RiveScript-repoen, klone den og installere 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.KØR filer.

Dernæst skal vi generere den del af vores chatbots hjerne, der skal håndtere projektanmodninger. Vores hovedmål er at konvertere et udvalg af projektopgaver til en introduktion til en regelmæssig samtale.

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:

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 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> option 3 / label> br> / fieldset > fieldset> legend> Tidslinje: / legend> input id = "en måned" type = "radio" navn = "anmodning-tidslinje" værdi = "en måned"> etiket for = "en måned"> 1 måned / etiket> br> input id = "en-tre-måneder" type = "radio" navn = "anmodning-tidslinje" værdi = "en-tre-måneder"> etiket for = "en-måned"> 1-3 måneder / etiket> br> input id = "fire-plus-måneder" type = "radio" navn = "anmodning-tidslinje" værdi = "fire-plus-måneder"> etiket for = "fire-plus-måneder"> 4+ måneder / label> br> / fieldset> br> label for = "anmodningsbudget"> Budgetoplysninger / etiket> br> textarea id = "anmodningsbudget" navn = "anmodningsbudget-tekst" rækker = "10" cols = "30"> / textarea> br> label for = "request-description"> Projektbeskrivelse / label> br> textarea id = "request-description" name = "request-description-text" rows = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" rows = "10" cols = "30"> / textarea> br > input type = "send" value = "Submit"> / form>

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 der højst sandsynligt en fræk tak-side op.

Med chatbots er vi i stand til at interagere med 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 skal vi konvertere webformularens kode til AI-script efter RiveScript's meget lærbare behandlingslogik til tovejssamtaler:

- Hvordan kan vi hjælpe? + *% hvordan kan vi hjælpe - sæt områder = varSure, har du noget imod det, hvis jeg stiller et par spørgsmål? + *% er du sikker på, hvis jeg stiller et par spørgsmål - Hvor hurtigt skal jeg starte denne anmodning? + *% hvor hurtigt skal jeg starte denne anmodning - indstil hvornår = varKan du give mig en grov ide om dit budget? + *% kan du give mig en grov ide om dit budget - sæt budget = varOK, kan du fortælle mig et resumé af det problem, 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 berøres, eller en samlet beskrivelse - sæt projekt = varOg hvem henviste dig til os? + *% også der henviste dig til os - sæt henvisning = varstore her er hvad jeg hidtil har fået: n Nødvendige tjenester: få områder> n Nødvendigt at starte: få når> n Råt budget: få budget> n Om dit projekt: få projekt> n Henvist af: få henvisning> n og vil snart kontakte dig, er der noget andet, jeg kan hjælpe dig med i dag? opkald> indtag få områder> få hvornår> få budget> få projekt> få henvisning> / ring>

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 indtastet i chatbot-brugergrænsefladen via JSON REST API til en ekstern projektopgaveserver.

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

> 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 (), "projekt"); var e = rs.getUservar (rs.currentUser (), "henvisning"); var url = "http: // localhost: 3000 / send"; var params = "områder =" + a + "& når =" + b + "& budget =" + c + "& pro ject =" + d + "& henvisning =" + e; console.log (params); http.open ("POST", url, sand); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader ("Forbindelse", "luk"); http.onreadystatechange = funktion () {// Ring til en funktion, når tilstanden ændres. hvis (http.readyState == 4 && http.status == 200) {alarm (http.responseText); }} http.send (params); objekt

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 bør alle omfavne merværdien af ​​denne nye teknologi.

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

Denne artikel blev oprindeligt omtalt inetmagasin, verdens bedst sælgende magasin til webdesignere og udviklere. Abonner her.

Sørg For At Se
Nye værktøjer til webdesign og udvikling: juni 2012
Yderligere

Nye værktøjer til webdesign og udvikling: juni 2012

Denne måned har en følel e af rigdom og tek tur med jordnoter, der kommer igennem og nogle tærke frugtagtige aromaer. Det er rigtigt, det er en årgang. I en måned, hvor Google...
Byg prototyper med Adobe XD
Yderligere

Byg prototyper med Adobe XD

I moderne web- og app-de ign er der ofte tid punkter, hvor interaktionen ikke åbner en helt ny ide eller kærm. Den moderne tilgang til at kabe interaktivt indhold kræver overgange melle...
Knyt øjnene til skærmen med denne herlige musikvisualiser
Yderligere

Knyt øjnene til skærmen med denne herlige musikvisualiser

Den eklekti ke elektronica-duo Plaid har nart et nyt album, og for at få alle opmærk omhed har de netop frigivet et nummer fra det, Tether, komplet med et dejligt interaktivt vi uali ering l...