Miten rakentaa chatbot-käyttöliittymä

2000-luvun puolivälissä virtuaaliset aineet ja asiakaspalvelun chatbots saivat paljon aivonnosta, vaikka ne eivät olleet kovin keskusteluja, ja hupun alla he koostuivat vain verkkopalvelimien kanssa.

Nykyään, vaikka on valtava määrä esimerkkejä "heikosta AI: sta" (mukaan lukien Siri, Alexa, Web-hakukoneet, automaattiset kääntäjät ja kasvojen tunnistus) sekä muut aiheet, kuten Vastaava web-suunnittelu Ovatko limonight, chatbots aiheuttavat edelleen sekoitusta. Suurten investointien suurilla yrityksillä on paljon mahdollisuuksia hakata tulevaisuuden keskusteluja.

• Kuinka suunnitella chatbot-kokemus

Joskus he saavat huonon maineen, mutta chatbots voi olla hyödyllisiä. Niiden ei tarvitse tuntea olevansa peruskorvaus tavalliselle Web-lomakkeelle, jossa käyttäjä täyttää syöttökenttiä ja odottaa validointia - ne voivat tarjota keskustelukokemusta.

Olennaisesti lisäämme käyttäjäkokemus Tuntuu luonnollisemmalta, kuten keskustella asiantuntijan tai ystävänsä sijaan verkkoselaimen piste-ja-napsautuksia tai mobiililaitteita. Tavoitteena on, että tarjoamalla empaattiset, kontekstuaaliset vastaukset, tämä tekniikka sulautuu suoraan ihmisten elämään.

Katso alla oleva video tai lue käytännöllinen tapa suunnitella ja rakentaa chattbot, joka perustuu todelliseen projektin saaneeseen sovellukseen palvelukäytännössä.

01. Aseta persoonallisuus

Koska tämä käytäntö palvelee yli 110 000 jäsentä maailmanlaajuisesti, tavoitteena oli tarjota nopea, kätevä ja luonnollinen rajapinta, jonka kautta sisäiset sidosryhmät voisivat pyytää tehokkaita digitaalisia palveluja sen sijaan, että tarvitsisi olla hämmentäviä muotoja.

Ensimmäinen askel oli perustaa chatbotin persoonallisuus, sillä se merkitsisi palvelusuunnitteluryhmän ääntä sidosryhmilleen. Rakensimme Aarron Walterin seminaaliseen työhön Design Personas . Tämä auttoi tiimimme kehittämään botin persoonallisuuden piirteitä, jotka sitten määrittivät viestejä tervehdyksille, virheille ja käyttäjän palautteelle.

Tämä on herkkä vaihe, koska se vaikuttaa organisaation havaittuun. Varmista, että meillä oli mahdollisimman paljon tietoa, asetamme välittömästi sidosryhmien työpajoja naulata asianmukaista persoonallisuutta, väriä, typografiaa, kuvitteita ja käyttäjän virtausta kiinnittäessä botin kanssa.

Sen jälkeen, kun olemme saaneet kaikki tarvittavat hyväksynnät - mukaan lukien oikeudellinen neuvonantaja - toimimme, että olemme muun muassa muutamia selkeitä kysymyksiä, jotka jäljittelevät sidosryhmien välistä keskustelua ja Design Services Teamin edustajan.

02. Käytä Rivescript

Tiesimme, ettette halunnut olla liian syvälle AI-merkintäkielelle käsittelyosassa - tarvitsimme juuri tarpeeksi hypätä kokemusta.

Rivilipripti on yksinkertainen chatbot API, joka on helppo oppia ja riittää tarpeisiimme. Muutaman päivän kuluessa meillä oli logiikka alas saannin botista ja jäsentää sen tarpeeksi liiketoiminnan logiikkaa validoida ja luokitella sen niin, että se voitaisiin lähettää JSON-lepopalvelujen kautta asianmukaiseen sisäiseen projektin tasoitusjonoon.

Saada tämä perus chatbot työskentelee, päätä Rivescript Repo , kloonaa se ja asenna kaikki tavalliset solmun riippuvuudet. Repo voit myös saada maku vuorovaikutusta, jonka voit lisätä eri esimerkkien katkelmia.

Seuraavaksi suorita Web-Client-kansio, joka kääntää botin verkkosivuksi suorittamalla Basic Grunt -palvelin. Tässä vaiheessa voit parantaa kokemusta tarpeidesi mukaan.

03. Luo botin aivot

Seuraava askel on luoda botin "aivot". Tämä on määritelty tiedostoissa, joissa on .rive-laajennus, ja onneksi Rivescriprilla on jo perusteellisia vuorovaikutuksia laatikosta (esimerkiksi kysymyksiä, kuten "Mikä on nimesi?", "Kuinka vanha olet?" Ja "Mikä on sinun Suosikkivärinen? ').

Kun käynnistät web-asiakassovelluksen oikean solmun komennon avulla, HTML-tiedosto kehotetaan lataamaan nämä .Rive tiedostot.

Seuraavaksi meidän on luotava osa chatbotin aivoistamme, joka käsittelee projektipyyntöjä. Päätavoitteenamme on muuntaa valikoima projektipäällystyskysymyksiä säännölliseen keskusteluun.

Joten, esimerkiksi:

• Hei, miten voimme auttaa?
• Suuri, kuinka pian meidän on aloitettava?
• Voitteko antaa minulle karkean ajatuksen budjetistasi?
• Kerro lisää projektistasi ...
• Kuinka kuulit meistä?

Tyypillinen helppokäyttöinen verkkomuoto näyttää tältä:

 & lt; muodostustoiminta = "" & gt;
& lt; fortset & gt;
& lt; legenda & gt; pyyntö tyyppi: & lt; / legend & gt;
& lt; Input ID = "Vaihtoehtoinen" tyyppi = "Radio" nimi = "Request-Type" Value = "Option-One" & GT;
& lt; etiketti = "vaihtoehto - One" & GT; vaihtoehto 1 & lt; / etiketti & gt; & lt; br & gt;
& lt; Input id = "Vaihtoehto-kaksi" tyyppi = "Radio" nimi = "Request-Type" Value = "Vaihtoehto - kaksi" & gt;
& lt; etiketti = "vaihtoehto-kaksi" & gt; vaihtoehto 2 & lt; / etiketti & gt; & lt; br & gt;
& lt; Input ID = "Vaihtoehto-kolme" tyyppi = "Radio" Nimi = "Request-Type" Value = "Vaihtoehto-kolme" & gt;
& lt; etiketti = "vaihtoehto-kolme" & gt; vaihtoehto 3 & lt; / etiketti & gt; & lt; br & gt;
& lt; / Fielts & GT;
& lt; fortset & gt;
& lt; legenda & gt; aikajana: & lt; / legend & gt;
& lt; tulo id = "yhden kuukauden" tyyppi = "Radio" nimi = "Request-aikajanan" arvo = "yksi kuukausi" & gt;
& lt; etiketti = "yhden kuukauden" & gt; 1 kuukausi & lt; / etiketti & gt; & lt; br & gt;
& lt; Input id = "Yksi kolmen kuukauden" tyyppi = "Radio" nimi = "Request-aikajanan" Value = "Yksi kolmen kuukauden" & gt;
& lt; etiketti = "yhden kuukauden" & gt; 1-3 kuukautta & lt; / etiketti & gt; & lt; br & gt;
& lt; Input id = "Four-Plus-Months" Tyyppi = "Radio" nimi = "Request-aikajanan" Value = "Four-Plus-Months" & GT;
& lt; etiketti = "Four-Plus-Months" & GT; 4+ kuukautta & lt; / etiketti & gt; & lt; br & gt; & lt; / Fielts & GT;
& lt; br & gt;
& lt; etiketti = "Request-budjetti" & gt; budjettitieto ja lt; / etiketti & gt; & lt; br & gt; & lt; textRea id = "Request-budjetti" nimi = "Request-budjetti-teksti" rivit = "10" cols = "30" & gt; & lt; / Textarea & GT;
 & lt; br & gt;
& lt; etiketti = "Pyyntö-kuvaus" & gt; projektin kuvaus & lt; / etiketti & gt; & lt; br & gt;
& lt; textRea id = "Request-Kuvaus" Nimi = "Request - kuvaus-Teksti" Rivit = "10" Cols = "30" & gt; & lt; / Textarea & GT;
 & lt; br & gt;
& lt; etiketti = "Pyyntö-referenssi" & gt; viite & lt; / etiketti & gt; & lt; br & gt; & lt; textRea id = "Pyyntö-referenssi" nimi = "Request-reference-teksti" rivit = "10" cols = "30" & gt; & lt; / Textarea & GT;
 & lt; br & gt;
 & lt; syöttötyyppi = "Lähetä" arvo = "Lähetä" & gt;
& lt; / form & gt; 

Web-lomakkeilla olemme hyvin perehtyneitä tiettyjä kuvioita: Napsautat Lähetä-painiketta, kaikki lomaketiedot lähetetään toiselle sivulle, jossa pyyntö käsitellään ja sitten todennäköisesti poskea kiittää sivua.

Chatbootsin avulla voimme ottaa vuorovaikutuksen pyynnön lähettämisen ja tehdä siitä mielekästä.

04. Suunnittele ääni

Voit muuntaa tämän lomakkeen keskustelukäyttäjän käyttöliittymään, joka palvelee Rivescriptin Chatbot Web -asiakasohjelmassa, meidän on muunnettava tietoarkkitehtuuri jäykistä nesteeseen; tai kenttämerkinnät UI-merkkijonoihin.

Katsotaanpa joitakin saatavilla olevia kenttämerkkejä ja niihin liittyvä kysymys sävy:

• Pyyntö: Kuinka voimme auttaa? Epävarma? Pidätkö mielessäsi, jos pyydän muutamia kysymyksiä?
• Aikajana: Kuinka pian meidän on aloitettava?
• Talousarvion tiedot: Voitteko antaa minulle karkean ajatuksen budjetistasi?
• Hankkeen kuvaus: Ok, voitko kertoa minulle yhteenvedon ongelmasta ratkaistaan?
• Viite: Myös, kuka vieraili meille?

Seuraavaksi meidän on muunnettava Web-lomakkeen koodi AI-skriptiin, kun Rivilipripti on hyvin opittava Käsittelylogiikka Kaksisuuntaisista keskusteluista:

- Kuinka voimme auttaa?

+ *
% kuinka voimme auttaa
- & lt; Aseta alueet = & lt; var & gt; & gt; Varmasti, pidätkö mielessäsi, jos kysyn pari kysymystä?

+ *
% varmasti pidät mielessäsi, jos pyydän muutamia kysymyksiä - Kuinka pian minun täytyy aloittaa tämä pyyntö?

+ *
% Kuinka pian minun täytyy aloittaa tämä pyyntö
- & lt; asetettu kun = & lt; var & gt; & gt; voitko antaa minulle karkea ajatus budjetistasi?

+ *
% Voitteko antaa minulle karkea ajatus budjetistasi
- & lt; Aseta budjetti = & lt; var & gt; & gt; Voisitko kertoa minulle yhteenvedon ongelmasta, joka on ratkaistava, komponentit ja ympäristöjä tai yleinen kuvaus?

+ *
% OK Voitteko kertoa minulle yhteenvedon ongelmasta, joka on ratkaista komponentit ja ympäristöt tai yleinen kuvaus
- & lt; set projekti = & lt; var & gt; & gt; myös, kuka viittasi sinut meille?

+ *
% myös, kuka lähetti sinulle meille
- & lt; asetettu viittaus = & lt; var & gt; & gt; Suuri tässä on niin paljon: tarvittavat palvelut: & lt; get alueet & gt; \ n: n täytyy aloittaa: & lt; saada kun & gt; \ n Karkea budjetti: & lt; saada budjetti & gt; \ n Tietoja projektistasi: & lt; saada projekti & gt; \ n viitata: & lt; saada viittaus & gt; Ja ota yhteyttä pian jotain muuta voin auttaa sinua tänään? & lt; call & gt; saanti & lt; get alueet & gt; & lt; saada kun & gt; & lt; saada budjetti & gt; & lt; saada projekti & gt; & lt; get referal & gt; & lt; / call & gt; 

05. Pyydä toimittamista

Toisin kuin vakiomuotoiset muuttujat lähetetään toiselle sivulle tai palveluksi prosessiin, chatbots voi vahvistaa ja lähettää käyttäjän antamat tiedot keskusteluikkunassa (tai puhuttu) välittömästi, mikä tarkoittaa, että käyttäjät voivat myös tarkistaa aiemmin syötetyt arvot helposti.

Meidän on lähetettävä käyttäjän pyyntö, joka on syötetty Chatbot UI: ssä JSON RESS API: n kautta ulkoiseen projektin tasoituspalvelimeen.

Sisään Riviliprict-JS Olemme vapaita hyödyntämään Xmlhttprquest Esine lähettää pyynnön lähes samanaikaisesti, koska käyttäjä syöttää tiedot:

 & gt; Objektin saanti JavaScript
 var http = uusi xmlhttprquest ();

 var A = R.GetSuservar (Rs.currentuser (), "alueet");
 var b = Rs.getervar (Rs.currentuser (), "kun");
 var c = R.GetStusVar (Rs.currentuser (), "budjetti");
 Var d = R.GetStusVar (Rs.currentuser (), "projekti");
 var e = Rs.getuservar (Rs.currentuser (), "viittaus");

 var url = "http: // localhost: 3000 / Lähetä";

 var params = "alueet =" + a + "& amp; kun =" + b + "& amp; budjetti =" + c + "& amp; pro ject =" + d + "& amp; viittaus =" + e;
 konsoli.log (params);

 http.open ("viesti", URL, totta);

 http.Setrequestheader ("Sisältötyyppi", "Application / X- www-form-urlencoded");
 http.Setrequestheader ("yhteys", "Sulje");
 http.Onreadystattechange = Toiminto () {// Soita toiminto, kun valtion muuttuu.
  jos (http.readytate == 4 & amp; & amp; http.status == 200) {
    Alert (http.respseText);
  }
 }
 http.send (params);

& lt; Objekti 

06. Älä pelkää chatbot

Pian nykyiset keinot vuorovaikutuksessa tietokoneen kanssa saada tietoa antavat AI-pohjaiseen teknologiaan, kuten chatbots, jossa ihmiset vain tekevät yksinkertaisia ​​äänikomentoja, kuten olemme nähneet tekniikalla, kuten Amazon Echo ja Google Home.

Web-suunnitteluyhteisön ei tarvitse pelätä - meidän kaikkien on omaksuttava tämän uuden teknologian lisäarvo.

Se voisi olla pelinvaihtaja yrityksille, jotka se toimii, joka tarjoaa täysin skaalautuvaa asiakaspalvelua ja parantaa asiakkaiden älykkyyttä.

Tämä artikkeli oli alun perin esillä Net-aikakauslehti , Maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Tilaa täältä .

Aiheeseen liittyvät artikkelit:

• Miten chatbot ovat oppimisen - haastattelu Giles Colborne
• Kuinka älykäs verkko muuttaa vuorovaikutusta
• Miten keskustelun rajapinnat ovat innovatiivisia pankkitoimintaa