Kuinka rakentaa chatbot-käyttöliittymä

Kirjoittaja: Randy Alexander
Luomispäivä: 2 Huhtikuu 2021
Päivityspäivä: 16 Saattaa 2024
Anonim
Kuinka rakentaa chatbot-käyttöliittymä - Luova
Kuinka rakentaa chatbot-käyttöliittymä - Luova

Sisältö

2000-luvun puolivälissä virtuaaliagentit ja asiakaspalvelukeskustelurobotit saivat paljon kohtelua, vaikka ne eivät olleet kovin keskustelevia, ja konepellin alla ne koostuivat vain tiedonsiirrosta verkkopalvelimien kanssa.

Vaikka nykyään on olemassa valtava määrä esimerkkejä "heikosta tekoälystä" (mukaan lukien Siri, Alexa, verkkohakukoneet, automaattiset kääntäjät ja kasvojentunnistus), ja muut aiheet, kuten reagoiva verkkosuunnittelu, häiritsevät parrasvaloja, chatbotit aiheuttavat silti sekoitusta . Suurten yritysten suurten investointien myötä on vielä paljon mahdollisuuksia hakkeroida tulevaisuuden keskustelurajapintoja.

  • Kuinka suunnitella chatbot-kokemus

Joskus heillä on huono maine, mutta chatbotit voivat olla hyödyllisiä. Heidän ei tarvitse tuntea olevansa peruskorvaus normaalille verkkolomakkeelle, jossa käyttäjä täyttää syöttökentät ja odottaa vahvistusta - he voivat tarjota keskustelukokemuksen.


Pohjimmiltaan parannamme käyttökokemusta tuntemaan itsemme luonnollisemmaksi, kuten keskustelemaan asiantuntijan tai ystävän kanssa selaimen osoittamalla napsautuksella tai mobiililiikkeillä. Tavoitteena on, että tarjoamalla empaattisia, asiayhteyteen liittyviä vastauksia tämä tekniikka upotetaan suoraan ihmisten elämään.

Katso alla oleva video tai lue lisää löytääksesi käytännöllinen tapa suunnitella ja rakentaa chatbot, joka perustuu todelliseen projektinottosovellukseen palvelujen suunnittelukä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 käyttöliittymä, jonka kautta sisäiset sidosryhmät voivat pyytää tehokkaita digitaalisia palveluja sen sijaan, että heidän täytettäisiin hämmentäviä lomakkeita.

Ensimmäinen askel oli vahvistaa chatbotin persoonallisuus, koska se edustaisi palvelun suunnittelutiimin ääntä sidosryhmilleen. Rakensimme Aarron Walterin suunnittelupersoonat. Tämä auttoi tiimiämme suuresti kehittämään botin persoonallisuuspiirteitä, jotka määrittelivät sitten tervehdysten, virheiden ja käyttäjien palautteen viestit.


Tämä on herkkä vaihe, koska se vaikuttaa organisaation mieltymyksiin. Varmistaaksemme, että meillä on niin paljon tietoa kuin mahdollista, perustimme välittömästi sidosryhmätyöpajoja, joiden tarkoituksena on noutaa sopiva persoonallisuus, väri, typografia, kuvat ja käyttäjän virtaus, kun olet yhteydessä bottiin.

Saatuamme kaikki tarvittavat hyväksynnät - myös oikeudellisen neuvonantajan hakemisen - aloimme muuntaa arkaaiset pyyntölomakkeet sarjaksi edestakaisia ​​kysymyksiä, jotka jäljittelivät keskustelua sidosryhmien ja suunnittelupalvelutiimimme edustajan välillä.

02. Käytä RiveScript

Tiesimme, ettemme halua mennä liian syvälle tekoälyn merkintäkieleen käsittelyosassa - tarvitsimme vain tarpeeksi kokemuksen aloittamiseksi.

RiveScript on yksinkertainen chatbot-sovellusliittymä, joka on tarpeeksi helppo oppia ja riittää tarpeisiimme. Muutaman päivän sisällä meillä oli logiikka, jotta saisimme robottilta projektipyynnön, ja jäsensimme sen tarpeeksi liiketoimintalogiikalla validoimaan ja luokittelemaan sen, jotta se voidaan lähettää JSON REST -palvelujen kautta asianmukaiseen sisäiseen projektityöjonoon.


Saadaksesi tämän perustavan chatbotin toimimaan, siirry RiveScript-repoon, kloonaa se ja asenna kaikki tavalliset Node-riippuvuudet. Repossa voit myös maistaa vuorovaikutusta, jonka voit lisätä eri esimerkkikatkelmien kanssa.

Suorita seuraavaksi web-asiakas-kansio, joka muuttaa botin verkkosivuksi suorittamalla Grunt-peruspalvelimen. Tässä vaiheessa voit parantaa kokemusta tarpeidesi mukaan.

03. Luo botin aivot

Seuraava vaihe on luoda botin "aivot". Tämä määritetään tiedostoissa, joiden tiedostopääte on .RIVE, ja onneksi RiveScriptin mukana toimitetaan jo perusvaikutukset heti laatikosta (esimerkiksi kysymykset, kuten 'Mikä on nimesi?', 'Kuinka vanha olet?' Ja 'Mikä on sinun suosikkiväri? ').

Kun käynnistät verkkoasiakasohjelman käyttämällä oikeaa Solmu-komentoa, HTML-tiedostoa kehotetaan lataamaan nämä.RIVE tiedostot.

Seuraavaksi meidän on luotava chatbotimme aivojen osa, joka käsittelee projektipyynnöt. Päätavoitteemme on muuntaa valikoima projektin tehtävien saantikysymyksiä säännölliseksi keskusteluksi.

Joten esimerkiksi:

  • Hei, miten voimme auttaa?
  • Hienoa, kuinka pian meidän on aloitettava?
  • Voitteko antaa minulle karkean kuvan budjetistanne?
  • Kerro minulle projektistasi ...
  • Kuinka kuulit meistä?

Tyypillinen käytettävissä oleva verkkolomake näyttäisi tältä:

lomake toiminto = ""> kenttäjoukko> selite> Pyynnön tyyppi: / selite> syöttötunnus = "vaihtoehto-yksi" tyyppi = "radio" nimi = "pyyntötyyppi" arvo = "vaihtoehto-yksi"> tunniste = "vaihtoehto- yksi "> vaihtoehto 1 / etiketti> br> syöttötunnus =" vaihtoehto-kaksi "type =" radio "nimi =" pyyntötyyppi "arvo =" vaihtoehto-kaksi "> etiketti =" vaihtoehto-kaksi "> vaihtoehto 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> vaihtoehto 3 / label> br> / fieldset > kenttäjoukko> selite> Aikajana: / legenda> syöttötunnus = "yksi kuukausi" type = "radio" nimi = "pyyntö-aikajana" arvo = "yksi kuukausi"> tunniste = "yksi kuukausi"> 1 kuukausi / label> br> input id = "yksi-kolme kuukautta" type = "radio" name = "request-aikajana" value = "one-three-months"> tunniste = "one-month"> 1-3 months / label> br> input id = "neljä plus-kuukautta" type = "radio" name = "pyyntö-aikajana" value = "neljä-plus-kuukautta"> tunniste = "neljä-plus-kuukautta"> 4+ kuukautta / label> br> / fieldset> br> label for = "request-budget"> Budjettitiedot / label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> Projektin kuvaus / otsikko> br> textarea id = "request-description" name = "request- description-text" rivit = "10" cols = "30"> / textarea > br> label for = "pyyntöviite"> Viite / tunniste> br> textarea id = "pyyntöviite" name = "pyyntöviite- teksti" rivit = "10" cols = "30"> / textarea> br > syöttötyyppi = "lähetä" arvo = "Lähetä"> / lomake>

Verkkolomakkeissa olemme hyvin perehtyneet tiettyihin malleihin: napsautat Lähetä-painiketta, kaikki lomaketiedot lähetetään toiselle sivulle, jossa pyyntö käsitellään, ja sitten todennäköisesti ilmestyy röyhkeä Kiitos-sivu.

Chatbottien avulla voimme tehdä pyynnön lähettämisen vuorovaikutuksessa ja tehdä siitä mielekkäämpi.

04. Suunnittele ääni

Jos haluat muuntaa tämän lomakkeen keskustelukäyttöliittymäksi, jota käytetään RiveScriptin chatbot-verkkoasiakkaassa, meidän on muunnettava tietoarkkitehtuuri jäykästä sujuvaksi; tai kenttätarrat käyttöliittymän merkkijonoihin.

Tarkastellaan joitain käytettävissä olevia kenttätunnisteita ja niihin liittyvää kysymysääntä:

  • Pyyntö: Kuinka voimme auttaa? Epävarma? Haittaatko, jos esitän muutaman kysymyksen?
  • Aikajana: Kuinka pian meidän on aloitettava?
  • Budjettitiedot: Voitteko antaa minulle karkean kuvan budjetistanne?
  • Hankkeen kuvaus: OK, voitko kertoa minulle yhteenvedon ratkaistavasta ongelmasta?
  • Viite: Kuka myös ohjasi sinut luoksemme?

Seuraavaksi meidän on muunnettava verkkolomakkeen koodi tekoälyksi, noudattaen RiveScriptin hyvin opittavaa kaksisuuntaisten keskustelujen käsittelylogiikkaa:

- Kuinka voimme auttaa? + *% miten voimme auttaa - aseta alueet = varSure, välitätkö, jos esitän pari kysymystä? + *% oletko varma, jos esitän pari kysymystä - Kuinka pian minun on aloitettava pyyntö? + *% kuinka pian minun on aloitettava tämä pyyntö - määritä milloin = varVoitko antaa minulle karkean kuvan budjetistasi? + *% Voitteko antaa minulle karkean käsityksen budjetistanne - aseta budjetti = varOK, voitko kertoa minulle yhteenvedon ratkaistavasta ongelmasta, osista ja ympäristöistä, tai yleisen kuvauksen? + *% ok, voisitteko kertoa minulle yhteenvedon ongelmasta, johon komponentit ja ympäristöt vaikuttavat, tai yleisen kuvauksen - set project = varAlso, kuka viittasi sinuun? + *% myös siitä, kuka viittasi sinut luoksemme - määritä referal = vargreat tässä, mitä sain tähän mennessä: n Tarvittavat palvelut: hanki alueet> n Tarvitsee aloittaa: saada kun> n Karkea budjetti: hanki budjetti> n Tietoja projektistasi: hanki projekti> n Lähettäjä: hanki viite> n ja otamme sinuun pian yhteyttä. Onko mitään muuta, mistä voin auttaa sinua tänään? kutsu> saanti hanki alueet> saa kun> saa budjetti> hanki projekti> hae viittaus> / kutsu>

05. Pyydä lähetystä

Toisin kuin vakiolomakemuuttujat lähetetään toiselle sivulle tai palveluun käsiteltäväksi, chatbotit voivat tarkistaa ja lähettää käyttäjän syöttämät tiedot chat-ikkunaan (tai puhuttuihin) välittömästi, mikä tarkoittaa, että käyttäjät voivat myös palata aiemmin syötettyihin arvoihin helposti.

Meidän oli lähetettävä chatbot-käyttöliittymään syötetty käyttäjän pyyntö JSON REST -sovellusliittymän kautta ulkoiselle projektitehtäväpalvelimelle.

RiveScript-js: ssä voimme vapaasti käyttää XMLHttpRequest objekti lähettää pyynnön melkein samanaikaisesti, kun käyttäjä syöttää tiedot:

> kohteen saanti javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "alueet"); var b = rs.getUservar (rs.currentUser (), "milloin"); var c = rs.getUservar (rs.currentUser (), "budjetti"); var d = rs.getUservar (rs.currentUser (), "projekti"); var e = rs.getUservar (rs.currentUser (), "viittaus"); var url = "http: // localhost: 3000 / send"; var params = "area =" + a + "& milloin =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (parametrit); http.open ("POST", url, true); http.setRequestHeader ("Sisältötyyppi", "application / x- www-form-urlencoded"); http.setRequestHeader ("Yhteys", "sulje"); http.onreadystatechange = function () {// Kutsu funktio, kun tila muuttuu. if (http.readyState == 4 && http.status == 200) {hälytys (http.responseText); }} http.lähetä (parametrit); esine

06. Älä pelkää chatbotia

Pian nykyiset tavat olla vuorovaikutuksessa tietokoneiden kanssa tietojen saamiseksi antavat tekoälypohjaiselle tekniikalle, kuten chatboteille, joissa ihmiset vain tekevät yksinkertaisia ​​äänikomentoja, kuten olemme nähneet tekniikoilla, kuten Amazon Echo ja Google Home.

Verkkosuunnitteluyhteisön ei tarvitse pelätä - meidän kaikkien tulisi omaksua tämän uuden tekniikan lisäarvo.

Se voi olla pelinvaihtaja yrityksille, joissa se työskentelee, tarjoamalla täysin skaalautuvaa asiakaspalvelua ja parempaa asiakasälyä.

Tämä artikkeli oli alun perin esillä sivustossanettilehti, maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti. Tilaa täällä.

Suositus
Uusi älykäs työkalu helpottaa 3D-tulostusta
Löytää

Uusi älykäs työkalu helpottaa 3D-tulostusta

"Ennen kuin omi tat 3D-tulo tinta, et ymmärrä, että tukien poi taminen ja tulo tu virheiden poi taminen voi olla turhauttavaa ja aikaa vievää", anoo Phil Newman 3D-t...
10 upeaa uutta työkalua perinteisille taiteilijoille huhtikuussa
Löytää

10 upeaa uutta työkalua perinteisille taiteilijoille huhtikuussa

Uu i loi tava uu i ta kuopa mangataide innoitti meitä et imään parhaita työkaluja niille, jotka haluavat hallita lomaketta, tä ä kuu a. Valit imme ympäriltämme ...
Päivän fontti: Hannah
Löytää

Päivän fontti: Hannah

Täällä Creative Bloqi a olemme uuria typografian faneja ja et imme jatkuva ti uu ia ja jännittäviä kirja imia - etenkin ilmai ia ​​fontteja. Joten jo tarvit et uu inta mu...