Slik bygger du et chatbotgrensesnitt

Sep 13, 2025

hvordan

[1. 3]

I midten av 2000-tallet fikk virtuelle agenter og kundeservice chatbots mye adulation, selv om de ikke var veldig konversasjonelle, og under hetten var de bare sammensatt av datautvekslinger med webservere.

I dag, selv om et stort antall eksempler på "svake AI" eksisterer (inkludert Siri, Alexa, websøkemotorer, automatiserte oversettere og ansiktsgjenkjenning) og andre emner som Responsivt webdesign Hoggner rampelyset, forekommer chatbots fremdeles røre. Med store investeringer fra store selskaper, forblir det mange muligheter til å hacke fremtidens konversasjonsgrensesnitt.

Slik designer du en chatbot-opplevelse

Noen ganger får de et dårlig omdømme, men chatbots kan være nyttig. De trenger ikke å føle seg som en grunnleggende erstatning for et standard webskjema, hvor brukeren fyller inn inntastingsfelt og venter på validering - de kan gi en konversasjonsopplevelse.

I hovedsak forbedrer vi Brukererfaring å føle seg mer naturlig, som å snakke med en ekspert eller en venn, i stedet for nettleserpunkt og klikk eller mobile bevegelser. Målet er at ved å gi empatiske, kontekstuelle responser, vil denne teknologien bli innebygd direkte i folks liv.

Se videoen nedenfor eller les videre for å oppdage en praktisk måte å designe og bygge en chatbot på, basert på en ekte prosjekt-inntaksprogram i en serviceutdesignpraksis.

01. Sett en personlighet

It’s important to ensure the chatbot’s personality reflects the company it’s representing — Det er viktig å sikre at chatbots personlighet reflekterer selskapet det representerer

Da denne praksisen tjener over 110 000 medlemmer globalt, var målet å gi et raskt, praktisk og naturlig grensesnitt gjennom hvilke interne interessenter kunne be om effektive digitale tjenester, i stedet for å fylle ut forvirrende former.

Det første trinnet var å etablere Chatbots personlighet, da dette ville representere stemmen til servicedesignteamet til sine interessenter. Vi bygget på Aarron Walters seminal arbeid på Design personas . Dette bidro sterkt til at teamet utviklet Bots personlighetstrekk, som deretter bestemte meldingene for hilsener, feil og tilbakemeldinger fra brukeren.

Dette er et delikat stadium, da det påvirker hvordan organisasjonen oppfattes. For å sikre at vi hadde så mye informasjon som mulig, konfigurerer vi umiddelbart interessent workshops for å spikre den riktige personligheten, farge, typografi, bilder og brukerens strømning når de er engasjerende med botten.

Etter at vi hadde fått alle nødvendige godkjennelser - inkludert å søke juridisk rådgivning - vi satte oss for å konvertere arkaiske forespørselsskjemaer til en rekke fremspastede spørsmål som etterlignet en samtale mellom interessentene og en representant for vårt designtjeneste team.

02. Bruk Rivescript.

This simple scripting language provides everything you need to design and build a chatbot POC — Dette enkle skriptspråket gir alt du trenger å designe og bygge en chatbot POC

Vi visste at vi ikke ønsket å bli for dypt inn i AI Markup-språket for prosessdelen - vi trengte bare nok til å hoppe på opplevelsen.

Rivescript er en enkel chatbot API som er lett nok til å lære og sufficed for våre behov. Innen noen få dager hadde vi logikken ned for å innta en prosjektforespørsel fra BOT, og analysere det med nok forretningslogikk for å validere og kategorisere det slik at det kan sendes det gjennom JSON REST-tjenester til den aktuelle interne prosjektets taskekø.

For å få denne grunnleggende chatbot-arbeidet, gå til Rivescript repo. , klone det og installer alle standardnodeavhengighetene. I repo kan du også få en smak av interaksjonene du kan legge til med de forskjellige eksemplene.

Deretter kjører du Web-Client-mappen, som slår botten til en nettside ved å kjøre en grunnleggende grunt-server. På dette punktet kan du forbedre opplevelsen som passer dine behov.

03. Generer Bots hjerne

Det neste trinnet er å generere "hjernen" på vår bot. Dette er spesifisert i filer med favoritt farge?').

Når du starter Web-Client-appen ved hjelp av den riktige node-kommandoen, blir HTML-filen instruert til å laste disse .Rive filer.

Deretter må vi generere den delen av vår Chatbots hjerne som vil håndtere prosjektforespørsler. Vårt hovedmål er å konvertere et utvalg av prosjektoppgaveinntaksspørsmål til en vanlig samtale.

Så, for eksempel:

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

En typisk tilgjengelig webform ville se slik ut:

 & lt; form action = "" & gt;
& lt; fieldset & gt;
& lt; Legend & GT; Forespørselstype: & lt; / legend & gt;
& lt; input id = "alternativ-en" type = "radio" navn = "forespørsel-type" verdi = "alternativ-en" & gt;
& lt; Label for = "OPTION-ONE" & GT; alternativ 1

Med webskjemaer er vi veldig kjent med visse mønstre: Du klikker på Send-knappen, alle skjemadataene sendes til en annen side der forespørselen behandles, og så sannsynligvis en frekk, takk siden dukker opp.

Med chatbots, kan vi ta samspillet mellom å sende inn en forespørsel, og gjøre det mer meningsfylt.

04. Design en stemme

For å konvertere dette skjemaet til et konversasjons-brukergrensesnitt som serveres i Rivescrips's Chatbot Web Client, må vi konvertere informasjonsarkitekturen mot stiv til væske; 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 spør noen spørsmål?
Tidslinje: Hvor snart må 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 å bli løst?
Referanse: Også, som henviste deg til oss?

Deretter trenger vi å konvertere webformenes kode til AI-skript, etter at Rivescrips er veldig lærbar behandling Logic. For toveis samtaler:

- Hvordan kan vi hjelpe?

+ *
% hvordan kan vi hjelpe
- LT; Set Areas = & LT; VAR & GT; & GT; Sikker, har du noe imot om jeg spør et par spørsmål?

+ *
% Sikkert har du noe imot om jeg spør et par spørsmål - hvor snart må jeg starte denne forespørselen?

+ *
% Hvor snart må jeg starte denne forespørselen
- LT; sett når = & lt; var & gt; & gt; kan du gi meg grov ide om budsjettet ditt?

+ *
% Kan du gi meg grov ide om budsjettet ditt
- & lt; set budsjett = & lt; var & gt; & gt; ok, kan du fortelle meg et sammendrag av problemet som skal løses, komponenter og miljøer berørt, eller en samlet beskrivelse?

+ *
% OK Kan du fortelle meg et sammendrag av problemet som skal løses komponenter og miljøer som er berørt eller en samlet beskrivelse
- & lt; set prosjekt = & lt; var & gt; & gt; også, som henviste deg til oss?

+ *
% også som henviste deg til oss
- Lt; Set Referal = & LT; VAR & GT; & GT; flott her er det jeg fikk så langt: \ n Tjenester som trengs: & lt; få områder & gt; \ n må starte: & lt; få når & gt; \ n grovt budsjett: & lt; få budsjett & gt; \ n om prosjektet ditt: & lt; få prosjekt og gt; \ n referert til: & lt; få henvisning og gt; Og vil komme i kontakt snart er det noe annet jeg kan hjelpe deg med i dag? & lt; call & gt; inntasting & lt; få områder & gt; & lt; få når & gt; & lt; få budsjett & gt; & lt; få prosjekt og gt; & lt; få henvist og gt; & lt; / call & gt;

05. Be om innsending

I motsetning til standardskjema-variabler som sendes til en annen side eller en tjeneste for å behandle, kan chatbots validere og sende inn informasjon som er oppgitt av brukeren i et chatvindu (eller snakkes) umiddelbart, noe som betyr at brukere også kan besøke tidligere inntektsverdier enkelt.

Vi trengte å sende brukerens forespørsel inn i Chatbot UI via JSON Rest API til en ekstern prosjektoppgave server.

I Rivescript-JS. Vi er fri til å gjøre bruk av en XMLHTTPREQUEST. Objekt for å sende forespørselen nesten samtidig, da dataene er oppgitt av brukeren:

 & gt; 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 (), "referanse");

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

 var params = "områder =" + a + "& amp; når =" + b + "& amp; budsjett =" + c + "& amp; pro ject =" + d + "& amp; referanse =" + e;
 konsoll.log (params);

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

 http.setrequestheader ("innholdstype", "applikasjon / x- www-form-urlencoded");
 http.setrequestheader ("tilkobling", "nær");
 http.onreadyStateChange = Funksjon () {// Ring en funksjon når staten endres.
  hvis (http.readystate == 4 & amp; & amp; http.status == 200) {
    våken (http.responsetext);
  }
 }
 http.send (params);

& lt; objekt

06. Ikke vær redd for chatbot

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

Webdesignfellesskapet trenger ikke å frykte - vi bør alle omfavne merverdien av denne nye teknologien.

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

Denne artikkelen ble opprinnelig omtalt i Net Magazine. , Verdens bestselgende magasin for webdesignere og utviklere. Abonner her .

Relaterte artikler:

Hvordan Chatbots lærer - Intervju med Giles Colborne
Hvordan den intelligente nettet vil endre våre interaksjoner
Hvordan konversasjonsgrensesnitt er innovasjon av bank

Slik bygger du et chatbotgrensesnitt

01. Sett en personlighet

02. Bruk Rivescript.

03. Generer Bots hjerne

04. Design en stemme

05. Be om innsending

06. Ikke vær redd for chatbot

hvordan - Mest populære artikler

Hvordan sette opp og optimalisere Smugmug Storefront

Hvordan tegne muskler

8 Amazing New Graphic Design Tutorials

Lag teksturer med mønsterstempelverktøyet

Hvordan øke hastigheten på retopologi i Maya

Lag din egen kalligrafiske børste i Illustrator

Slå på menyene dine ved hjelp av animasjon med CSS

Hvordan forbedre ytelsen til e-handelsplasser

Kategorier