Paano bumuo ng isang interface ng chatbot

May -Akda: Randy Alexander
Petsa Ng Paglikha: 2 Abril 2021
I -Update Ang Petsa: 16 Mayo 2024
Anonim
All cordless drills break because of this! Stop making this mistake!
Video.: All cordless drills break because of this! Stop making this mistake!

Nilalaman

Noong kalagitnaan ng 2000, ang mga virtual na ahente at chatbots ng serbisyo sa customer ay nakatanggap ng maraming adulation, kahit na hindi sila masyadong mapag-usap, at sa ilalim ng hood sila ay binubuo lamang ng mga palitan ng data sa mga web server.

Ngayong mga araw na ito, kahit na mayroong isang malaking bilang ng mga halimbawa ng 'mahinang AI' na mayroon (kasama ang Siri, Alexa, mga search engine sa web, mga automated na tagasalin at pagkilala sa mukha) at iba pang mga paksa tulad ng tumutugon na disenyo ng web na pinapansin ang ilaw, ang mga chatbots ay nagdudulot pa rin ng kaguluhan . Sa pangunahing pamumuhunan mula sa malalaking kumpanya, nananatiling maraming mga pagkakataon upang i-hack ang mga interface ng pag-uusap sa hinaharap.

  • Paano mag-disenyo ng karanasan sa chatbot

Minsan nakakakuha sila ng hindi magandang reputasyon, ngunit maaaring maging kapaki-pakinabang ang mga chatbot. Hindi nila kailangang pakiramdam na isang pangunahing kapalit para sa isang karaniwang form sa web, kung saan pinupunan ng gumagamit ang mga field ng pag-input at naghihintay para sa pagpapatunay - maaari silang magbigay ng isang karanasan sa pag-uusap.


Mahalagang pinahuhusay namin ang karanasan ng gumagamit upang makaramdam ng mas natural, tulad ng pakikipag-usap sa isang dalubhasa o kaibigan, sa halip na mga point-and-click sa browser o mga kilos ng mobile. Ang layunin ay sa pamamagitan ng pagbibigay ng makiramay, mga tugon sa konteksto, ang teknolohiyang ito ay direktang mai-embed sa buhay ng mga tao.

Panoorin ang video sa ibaba o basahin upang matuklasan ang isang praktikal na paraan upang mag-disenyo at bumuo ng isang chatbot, batay sa isang tunay na application ng paggamit ng proyekto sa isang kasanayan sa disenyo ng serbisyo.

01. Magtakda ng isang pagkatao

Tulad ng pagsasanay na ito nagsisilbi sa higit sa 110,000 mga miyembro sa buong mundo, ang layunin ay upang magbigay ng isang mabilis, maginhawa at natural na interface na kung saan ang mga panloob na stakeholder ay maaaring humiling ng mabisang mga digital na serbisyo, sa halip na punan ang mga nakalilito na form.

Ang unang hakbang ay upang maitaguyod ang personalidad ng chatbot, dahil ito ay kumakatawan sa boses ng pangkat ng disenyo ng serbisyo sa mga stakeholder nito. Itinayo namin ang seminal na gawain ni Aarron Walter sa mga personas ng disenyo. Malaki ang naitulong nito sa aming koponan na paunlarin ang mga katangian ng bot, na pagkatapos ay natutukoy ang mga mensahe para sa mga pagbati, error at puna ng gumagamit.


Ito ay isang maselan na yugto, dahil nakakaapekto ito sa kung paano napansin ang samahan. Upang matiyak na mayroon kaming maraming impormasyon hangga't maaari, agad kaming nag-set up ng mga workshop ng stakeholder upang mailagay ang naaangkop na personalidad, kulay, typography, koleksyon ng imahe at daloy ng gumagamit kapag nakikipag-ugnay sa bot.

Matapos naming makuha ang lahat ng kinakailangang pag-apruba - kasama ang paghingi ng ligal na payo - itinakda naming gawing isang serye ng mga pabalik-balik na katanungan ang mga archaic form na kahilingan na gumaya sa isang pag-uusap sa pagitan ng mga stakeholder at isang kinatawan ng aming koponan sa mga serbisyo sa disenyo.

02. Gumamit ng RiveScript

Alam namin na hindi namin nais na lumalim sa wika ng markup ng AI para sa bahagi ng pagproseso - kailangan lang namin ng sapat upang masimulan ang karanasan.

Ang RiveScript ay isang simpleng chatbot API na sapat na madaling matuto at sapat para sa aming mga pangangailangan. Sa loob ng ilang araw nagkaroon kami ng lohika hanggang sa kumuha ng isang kahilingan sa proyekto mula sa bot, at i-parse ito ng may sapat na lohika sa negosyo upang mapatunayan at maikategorya ito upang maipadala ito sa pamamagitan ng mga serbisyo ng JSON REST sa naaangkop na pila ng panloob na gawain sa gawain.


Upang mapagana ang pangunahing chatbot na ito, magtungo sa repo ng RiveScript, i-clone ito at i-install ang lahat ng karaniwang mga dependency sa Node. Sa repo maaari ka ring makakuha ng isang lasa ng mga pakikipag-ugnay na maaari mong idagdag sa iba't ibang mga halimbawa ng mga snippet.

Susunod, patakbuhin ang folder ng web-client, na ginagawang isang web page ang bot sa pamamagitan ng pagpapatakbo ng isang pangunahing Grunt server. Sa puntong ito maaari mong pagbutihin ang karanasan upang umangkop sa iyong mga pangangailangan.

03. Bumuo ng utak ng iyong bot

Ang susunod na hakbang ay upang makabuo ng 'utak' ng aming bot. Tinukoy ito sa mga file na may .RIVE extension, at salamat na ang RiveScript ay mayroon nang mga pangunahing pakikipag-ugnayan sa labas ng kahon (halimbawa, mga katanungan tulad ng 'Ano ang iyong pangalan?', 'Ilang taon na kayo?' At 'Ano ang iyong paboritong kulay?').

Kapag pinasimulan mo ang web-client app gamit ang wastong utos ng Node, ang HTML file ay inatasan na i-load ang mga ito.RIVE mga file.

Susunod na kailangan namin upang makabuo ng bahagi ng utak ng aming chatbot na haharapin ang mga kahilingan sa proyekto. Ang aming pangunahing layunin ay upang i-convert ang isang pagpipilian ng mga proyekto na nagtatanong ng mga katanungan sa paggamit sa isang regular na pag-uusap.

Kaya, halimbawa:

  • Kumusta, paano tayo makakatulong?
  • Mahusay, gaano kabilis kailangan nating magsimula?
  • Maaari mo ba akong bigyan ng isang magaspang na ideya ng iyong badyet?
  • Sabihin mo pa sa akin ang tungkol sa iyong proyekto ...
  • Paano mo narinig ang tungkol sa amin?

Ang isang tipikal na naa-access na form sa web ay magiging ganito:

form action = ""> fieldset> legend> Uri ng Kahilingan: / legend> input id = "option-one" type = "radio" name = "request-type" value = "options-one"> label for = "options- isang "> opsyon 1 / label> br> input id =" options-two "type =" radio "name =" request-type "value =" options-two "> label for =" options-two "> opsyon 2 / label> br> input id = "options-three" type = "radio" name = "request-type" value = "options-three"> label for = "options-three"> opsyon 3 / label> br> / fieldset > fieldset> legend> Timeline: / legend> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 month / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label para sa = "isang buwan"> 1-3 buwan / label> br> input id = "four-plus-months" type = "radio" name = "request- timeline" halaga = "apat na plus-buwan"> label para sa = "apat na plus-buwan"> 4+ buwan / label> br> / fieldset> br> label for = "request-budget"> Impormasyon sa Budget / label> br> textarea id = "request-budget" name = "request-budget-text" row = "10" cols = "30"> / textarea> br> label for = "request-description"> Paglalarawan / label ng Project> br> textarea id = "request-description" name = "request- description-text" row = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" row = "10" cols = "30"> / textarea> br > uri ng pag-input = "isumite" na halaga = "Isumite"> / form>

Sa mga form sa web, pamilyar kami sa ilang mga pattern: nag-click ka sa pindutang Isumite, ang lahat ng data ng form ay ipinapadala sa isa pang pahina kung saan naproseso ang kahilingan, at pagkatapos ay malamang na may isang pisngi na pahina ng Salamat.

Sa mga chatbot, nagagawa naming makipag-ugnayan sa pagsusumite ng isang kahilingan, at gawing mas makabuluhan ito.

04. Magdisenyo ng boses

Upang mai-convert ang form na ito sa isang pang-usap na interface ng gumagamit na hinatid sa chatbot web client ng RiveScript, kailangan naming i-convert ang arkitektura ng impormasyon mula sa matigas hanggang sa likido; o mga label sa patlang sa mga string ng UI.

Isaalang-alang natin ang ilang mga naa-access na mga label sa patlang, at ang kaugnay na tono ng tanong:

  • Hiling: Paano tayo makakatulong? Hindi ako sigurado? Naaalala mo ba kung magtanong ako ng ilang mga katanungan?
  • Timeline: Gaano katagal kailangan nating magsimula?
  • Impormasyon sa badyet: Maaari mo ba akong bigyan ng isang magaspang na ideya ng iyong badyet?
  • Paglalarawan ng proyekto: OK, maaari mo bang sabihin sa akin ang isang buod ng problema na malulutas?
  • Sanggunian: Gayundin, sino ang nag-refer sa iyo sa amin?

Susunod na kailangan naming i-convert ang code ng form ng web sa Ai script, na sinusundan ang napaka-natutunang pag-proseso ng lohika ng RiveScript para sa dalawang-daan na pag-uusap:

- Paano tayo makakatulong? + *% paano kami makakatulong - magtakda ng mga lugar = varSure, Naaalala mo ba Kung magtatanong ako ng ilang mga katanungan? + *% Sigurado ka ba kung magtatanong ako ng ilang mga katanungan - Gaano kaagad kailangan ko upang simulan ang kahilingang ito? + *% gaano ako kadali kailangan upang simulan ang kahilingang ito - itakda kung kailan = varMagagawa mo bang bigyan ako ng magaspang na ideya ng iyong badyet? + *% maaari mo ba akong bigyan ng magaspang na ideya ng iyong badyet - itakda ang badyet = varOK, maaari mo bang sabihin sa akin ang isang buod ng problema na malulutas, apektado ang mga bahagi at kapaligiran, o isang pangkalahatang paglalarawan? + *% ok maaari mo bang sabihin sa akin ang isang buod ng problema upang malutas ang mga bahagi at mga kapaligiran na apektado o isang pangkalahatang paglalarawan - itakda ang proyekto = varAlso, sino ang sumangguni sa amin? + *% din kung sino ang nag-refer sa iyo sa amin - itakda ang referal = vargreat narito ang nakuha ko sa ngayon: n Mga serbisyong kinakailangan: kumuha ng mga lugar> n Kailangang magsimula: makakuha kung> n Magaspang na badyet: kumuha ng badyet> n Tungkol sa iyong proyekto: kumuha ng proyekto> n Sumangguni sa pamamagitan ng: kumuha ng referral> n at makikipag-ugnay sa ilang sandali mayroon pa bang maitutulong sa iyo ngayon? tumawag> kumuha ng mga lugar> kumuha kung> kumuha ng badyet> kumuha ng proyekto> kumuha ng referal> / tawag>

05. Humiling ng pagsusumite

Taliwas sa karaniwang mga variable ng form na ipinapadala sa isa pang pahina o serbisyo upang iproseso, ang mga chatbots ay maaaring patunayan at magsumite ng impormasyong ipinasok ng gumagamit sa isang window ng chat (o sinasalita) kaagad, na nangangahulugang ang mga gumagamit ay maaari ring muling bisitahin ang dati nang naipasok na mga halaga.

Kailangan naming ipadala ang kahilingan ng gumagamit na ipinasok sa chatbot UI sa pamamagitan ng JSON REST API sa isang panlabas na tasking server ng proyekto.

Sa RiveScript-js malaya kaming magamit ang isang XMLHttpRequest object upang isumite ang kahilingan halos nang sabay-sabay, dahil ang data ay ipinasok ng gumagamit:

> Pag-inom ng object javascript var http = bagong XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "mga lugar"); var b = rs.getUservar (rs.currentUser (), "kailan"); var c = rs.getUservar (rs.currentUser (), "budget"); var d = rs.getUservar (rs.currentUser (), "proyekto"); var e = rs.getUservar (rs.currentUser (), "referal"); var url = "http: // localhost: 3000 / send"; var params = "area =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (params); http.open ("POST", url, totoo); http.setRequestHeader ("Uri ng nilalaman", "application / x- www-form-urlencoded"); http.setRequestHeader ("Koneksyon", "malapit"); http.onreadystatechange = function () {// Tumawag sa isang pagpapaandar kapag nagbago ang estado. kung (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); bagay

06. Huwag matakot sa chatbot

Hindi magtatagal, ang mga kasalukuyang paraan ng pakikipag-ugnay sa mga computer upang makakuha ng impormasyon ay magbibigay sa teknolohiya na nakabatay sa AI tulad ng mga chatbots, kung saan gumagawa lang ang mga tao ng mga simpleng utos ng boses, tulad ng nakita natin sa mga tech tulad ng Amazon Echo at Google Home

Ang komunidad ng disenyo ng web ay hindi dapat matakot - lahat tayo ay dapat na tumatanggap ng idinagdag na halaga ng bagong teknolohiyang ito.

Maaari itong maging isang game-changer para sa mga kumpanyang pinagtatrabahuhan nito, na nag-aalok ng ganap na nasusukat na serbisyo sa customer at pinahusay na intelligence ng customer.

Ang artikulong ito ay orihinal na itinampok samagazine sa net, ang pinakamabentang magazine sa buong mundo para sa mga web designer at developer. Mag-subscribe dito.

Tiyaking Tumingin
15 na kailangang malaman ng mga developer ng API
Higit Pa

15 na kailangang malaman ng mga developer ng API

Ang mga bagong tool ng developer ay pinakawalan araw-araw, at kung min an marahil ay mapipili mo ang iyong arili a pagitan ng paggawa ng iyong totoong trabaho at pagtukla ng mga bagong teknolohiya.Kab...
Tumutugon ang mga taga-disenyo sa bagong logo ng Medium
Higit Pa

Tumutugon ang mga taga-disenyo sa bagong logo ng Medium

a huling tatlong taon, ang platform ng online na pag-publi h ng Medium ay i ang kamangha-manghang paraan para madagdagan ng mga manunulat ang kanilang portfolio, pati na rin ang pagtulong a mga mamba...
Paano gumawa ng isang Apple Watch app
Higit Pa

Paano gumawa ng isang Apple Watch app

Nang unang inilun ad ng Apple ang martwatch nito a publiko, naramdaman ng lahat na ang hindi kapani-paniwala na hardware ay kulang a mga tampok dahil a mga hadlang a oftware. imula noon, ang mga kakay...