Hvordan bygge et chatbot-grensesnitt

Forfatter: Randy Alexander
Opprettelsesdato: 2 April 2021
Oppdater Dato: 16 Kan 2024
Anonim
How to build a chatbot interface
Video: How to build a chatbot interface

Innhold

På midten av 2000-tallet mottok virtuelle agenter og kundeservicebatterier mye adulation, selv om de ikke var veldig samtalerike, og under panseret var de bare sammensatt av datautveksling med webservere.

I dag, selv om det eksisterer et stort antall eksempler på 'svak AI' (inkludert Siri, Alexa, nettsøkemotorer, automatiserte oversettere og ansiktsgjenkjenning) og andre emner som responsiv webdesign svinger rampelyset, forårsaker chatbots fortsatt opprør . Med store investeringer fra store selskaper, er det fortsatt mange muligheter for å hacke fremtidens samtalegrensesnitt.

  • Hvordan lage en chatbot-opplevelse

Noen ganger får de et dårlig rykte, men chatbots kan være nyttige. De trenger ikke føle seg som en grunnleggende erstatning for et standard webskjema, der brukeren fyller ut inndatafelt og venter på validering - de kan gi en samtaleopplevelse.


I hovedsak forbedrer vi brukeropplevelsen til å føle seg mer naturlig, som å snakke med en ekspert eller en venn, i stedet for pek-og-klikk i nettleseren eller mobilbevegelser. Målet er at ved å gi empatiske, kontekstuelle svar, vil denne teknologien bli innebygd direkte i menneskers liv.

Se videoen nedenfor eller les videre for å oppdage en praktisk måte å designe og bygge en chatbot på, basert på en ekte prosjektinntakssøknad i en tjenesteutformingspraksis.

01. Sett en personlighet

Siden denne praksisen betjener over 110 000 medlemmer globalt, var målet å gi et raskt, praktisk og naturlig grensesnitt der interne interessenter kunne be om effektive digitale tjenester, i stedet for å måtte fylle ut forvirrende skjemaer.

Det første trinnet var å etablere chatbotens personlighet, da dette ville representere stemmen til tjenestedesignteamet til sine interessenter. Vi bygde videre på Aarron Walters banebrytende arbeid med designpersoner. Dette hjalp teamet vårt sterkt med å utvikle botens personlighetstrekk, som deretter bestemte meldingene for hilsener, feil og tilbakemeldinger fra brukerne.


Dette er en delikat fase, da den påvirker hvordan organisasjonen oppfattes. For å sikre at vi hadde så mye informasjon som mulig, satte vi straks opp workshops for interessenter for å spikre den passende personligheten, fargen, typografien, bildene og brukerstrømmen når vi var i kontakt med boten.

Etter at vi hadde fått alle nødvendige godkjenninger - inkludert å søke juridisk rådgiver - satte vi oss for å konvertere arkaiske forespørselsskjemaer til en serie frem og tilbake spørsmål som etterlignet en samtale mellom interessentene og en representant for vårt designtjenesteteam.

02. Bruk RiveScript

Vi visste at vi ikke ønsket å komme for dypt inn i AI-kodespråket for behandlingsdelen - vi trengte bare nok til å sette i gang opplevelsen.

RiveScript er et enkelt chatbot API som er enkelt nok til å lære og tilstrekkelig for våre behov. I løpet av få dager hadde vi logikken til å ta inn en prosjektforespørsel fra boten, og analysere den med nok forretningslogikk til å validere og kategorisere den slik at den kunne sendes gjennom JSON REST-tjenester til riktig intern prosjektoppgavekø.


For å få denne grunnleggende chatboten til å fungere, gå til RiveScript-repoen, klon den og installer alle standard Node-avhengigheter. I repoen kan du også få en smak av interaksjonene du kan legge til med de forskjellige eksemplene.

Kjør deretter webklientmappen, som gjør bot til en webside ved å kjøre en grunnleggende Grunt-server. På dette punktet kan du forbedre opplevelsen etter dine behov.

03. Generer hjernen til bot

Det neste trinnet er å generere 'hjernen' til bot. Dette er spesifisert i filer med .RIVE-utvidelsen, og heldigvis kommer RiveScript allerede med grunnleggende interaksjoner utenom boksen (for eksempel spørsmål som 'Hva heter du?', 'Hvor gammel er du?' Og 'Hva er din favoritt farge?').

Når du starter webklientappen med riktig Node-kommando, blir HTML-filen bedt om å laste disse.KJØR filer.

Deretter må vi generere den delen av chatbotens hjerne som skal håndtere prosjektforespørsler. Hovedmålet vårt er å konvertere et utvalg av spørsmål om prosjektoppgaver til en vanlig samtale.

Så for eksempel:

  • Hei, hvordan kan vi hjelpe?
  • Flott, hvor snart trenger vi å starte?
  • Kan du gi meg en grov ide om budsjettet ditt?
  • Fortell meg mer om prosjektet ditt ...
  • Hvordan hørte du om oss?

Et typisk tilgjengelig webskjema vil se slik ut:

form action = ""> fieldset> legend> Request Type: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- ett "> alternativ 1 / etikett> br> input id =" alternativ-to "type =" radio "navn =" forespørsel-type "verdi =" alternativ-to "> etikett for =" alternativ-to "> alternativ 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 = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 month / etikett> br> input id = "en-tre-måneder" type = "radio" navn = "forespørsel-tidslinje" verdi = "en-tre-måneder"> etikett for = "en-måned"> 1-3 måneder / etikett> br> input id = "fire-pluss-måneder" type = "radio" navn = "forespørsel-tidslinje" verdi = "fire-pluss-måneder"> etikett for = "fire-pluss-måneder"> 4+ måneder / label> br> / fieldset> br> label for = "request-budget"> Budsjettinformasjon / label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> Prosjektbeskrivelse / 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 = "submit" value = "Submit"> / skjema>

Med webskjemaer er vi veldig kjent med visse mønstre: du klikker på Send-knappen, all skjemadata blir sendt til en annen side der forespørselen blir behandlet, og så dukker det mest sannsynlig opp en frekk takkeside.

Med chatbots er vi i stand til å samhandle med å sende inn en forespørsel, og gjøre den mer meningsfylt.

04. Design en stemme

For å konvertere dette skjemaet til et samtalebrukergrensesnitt som serveres i RiveScripts chatbot-nettklient, må vi konvertere informasjonsarkitekturen fra stiv til flytende; eller feltetiketter i UI-strenger.

La oss vurdere noen tilgjengelige feltetiketter og deres relaterte spørsmålstone:

  • Be om: Hvordan kan vi hjelpe? Ikke sikker? Har du noe imot om jeg stiller noen spørsmål?
  • Tidslinje: Hvor snart trenger vi å komme i gang?
  • Budsjettinformasjon: Kan du gi meg en grov ide om budsjettet ditt?
  • Prosjektbeskrivelse: OK, kan du fortelle meg et sammendrag av problemet som skal løses?
  • Henvisning: Hvem henviste deg også til oss?

Deretter må vi konvertere koden til webskjemaet til AI-skript, etter RiveScript's veldig lærbare behandlingslogikk for toveis samtaler:

- Hvordan kan vi hjelpe? + *% hvordan kan vi hjelpe - angi områder = varSure, bryr du deg om jeg stiller et par spørsmål? + *% sikker på at du har noe imot hvis jeg stiller et par spørsmål - Hvor snart trenger jeg å starte denne forespørselen? + *% hvor snart trenger jeg å starte denne forespørselen - angi når = varKan du gi meg en grov ide om budsjettet ditt? + *% kan du gi meg en grov ide om budsjettet ditt - sett budsjett = varOK, kan du fortelle meg et sammendrag av problemet som skal løses, komponenter og miljøer som berøres, eller en samlet beskrivelse? + *% ok, kan du fortelle meg et sammendrag av problemet som skal løses komponenter og miljøer som berøres eller en samlet beskrivelse - sett prosjekt = varOg hvem som henviste deg til oss? + *% også som henviste deg til oss - sett henvisning = vargreat her er det jeg har så langt: n Tjenester som trengs: få områder> n Trenger å starte: få når> n Grovt budsjett: få budsjett> n Om prosjektet ditt: få prosjekt> n Henvist av: få henvisning> n og tar kontakt om kort tid er det noe annet jeg kan hjelpe deg med i dag? ring> inntak få områder> få når> få budsjett> få prosjekt> få henvisning> / ring>

05. Be om innlevering

I motsetning til at standard skjemavariabler sendes til en annen side eller tjeneste for å behandle, kan chatbots validere og sende inn informasjon som er angitt av brukeren i et chatvindu (eller snakket) umiddelbart, noe som betyr at brukere også enkelt kan gå tilbake til tidligere angitte verdier.

Vi trengte å sende brukerens forespørsel angitt i chatbot-brukergrensesnittet via JSON REST API til en ekstern prosjektoppgavetjener.

I RiveScript-js står vi fritt til å bruke en XMLHttpRequest protestere mot å sende inn forespørselen nesten samtidig, ettersom dataene legges inn av brukeren:

> objektinntak 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 (), "budsjett"); var d = rs.getUservar (rs.currentUser (), "prosjekt"); var e = rs.getUservar (rs.currentUser (), "henvisning"); 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 () {// Ring en funksjon når tilstanden endres. hvis (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); gjenstand

06. Ikke frykt chatboten

Snart vil nåværende måter å samhandle med datamaskiner for å skaffe informasjon gi etter for AI-basert teknologi som chatbots, der folk bare lager enkle talekommandoer, som vi har sett med teknologi som Amazon Echo og Google Home.

Nettdesignmiljøet trenger ikke frykte - vi bør alle omfavne merverdien til denne nye teknologien.

Det kan være en spillveksler for selskapene det jobber for, og tilbyr fullt skalerbar kundeservice og forbedret kundeintelligens.

Denne artikkelen ble opprinnelig omtalt inettmagasinet, verdens mest solgte magasin for webdesignere og utviklere. Abonner her.

Se
Du vil ikke tro at disse graffiti-modellene er ekte
Les Mer

Du vil ikke tro at disse graffiti-modellene er ekte

Vi har ett noen utrolige ek empler på gatekun t - fra in talla joner til graffiti, vi mangler aldri gateba ert in pira jon. Imidlertid har vi aldri, noen inne ett noe om dette pro jektet fra kun ...
Den typen klient du aldri vil jobbe med
Les Mer

Den typen klient du aldri vil jobbe med

"En dag ringte meg en ny klient om jeg aldri hadde møtt per onlig, umiddelbart etter at jeg endte et før te utka t. For kontek t er jeg ikke i IT, derav en del av min forvirring, og kli...
Må vi virkelig bygge dette?
Les Mer

Må vi virkelig bygge dette?

En fi kehandler etter et nytt kilt utenfor butikken in. På kiltet tår det: ‘Fer k fi k om elge her’. En kunde kommer opp til fi kehandleren og forteller ham at han nye kilt er bortka tet pen...