Ako zostaviť rozhranie chatbotu

Autor: Randy Alexander
Dátum Stvorenia: 2 Apríl 2021
Dátum Aktualizácie: 16 Smieť 2024
Anonim
Návod jak nastavit Smartsupp chatbota krok po kroku
Video: Návod jak nastavit Smartsupp chatbota krok po kroku

Obsah

V polovici 2000-tych rokov dostali virtuálni agenti a chatboti zákazníckych služieb veľkú pochvalu, aj keď neboli príliš hovorní a pod kapotou ich tvorili iba výmeny údajov s webovými servermi.

Aj keď v súčasnosti existuje veľké množstvo príkladov „slabej AI“ (vrátane Siri, Alexa, webových vyhľadávacích automatov, automatických prekladačov a rozpoznávania tváre) a ďalších tém, ako je responzívny webový dizajn, sa venuje pozornosť, chatboti stále spôsobujú rozruch. . Vďaka veľkým investíciám od veľkých spoločností zostáva ešte veľa príležitostí na hacknutie konverzačných rozhraní budúcnosti.

  • Ako navrhnúť prostredie chatbotu

Niekedy majú zlú povesť, ale chatboty môžu byť užitočné. Nemusia sa cítiť ako základná náhrada za štandardný webový formulár, kde používateľ vyplní vstupné polia a čaká na overenie - môže im poskytnúť konverzačný zážitok.


V zásade vylepšujeme dojem používateľa, aby sa cítil prirodzenejším spôsobom, napríklad konverzáciou s odborníkom alebo priateľom, namiesto klikania webovým prehliadačom alebo mobilných gest. Cieľom je, aby poskytovaním empatických, kontextových reakcií, bola táto technológia zabudovaná priamo do života ľudí.

Sledujte video nižšie alebo čítajte ďalej a objavte praktický spôsob navrhovania a výroby chatbota založený na skutočnej aplikácii príjmu projektu v praxi navrhovania služieb.

01. Nastaviť osobnosť

Pretože táto prax slúži viac ako 110 000 členom po celom svete, bolo cieľom poskytnúť rýchle, pohodlné a prirodzené rozhranie, prostredníctvom ktorého by interné zainteresované strany mohli požadovať efektívne digitálne služby, namiesto toho, aby museli vypĺňať mätúce formuláre.

Prvým krokom bolo ustanovenie osobnosti chatbota, pretože to bude predstavovať hlas tímu návrhárov služieb pre jeho zainteresované strany. Stavali sme na prvotnej práci Aarrona Waltera na dizajnérskych osobnostiach. To nášmu tímu výrazne pomohlo rozvíjať osobnostné vlastnosti robota, ktorý potom určoval správy týkajúce sa pozdravov, chýb a spätnej väzby od používateľov.


Toto je delikátna fáza, pretože ovplyvňuje vnímanie organizácie. Aby sme zaistili, že budeme mať čo najviac informácií, okamžite sme usporiadali workshopy zainteresovaných strán, aby sme pri práci s robotom pribili vhodnú osobnosť, farbu, typografiu, snímky a tok používateľov.

Po získaní všetkých potrebných súhlasov - vrátane získania právneho poradcu - sme sa pustili do premeny archaických formulárov žiadostí na sériu otázok, ktoré napodobňovali rozhovor medzi zainteresovanými stranami a zástupcom nášho tímu dizajnérskych služieb.

02. Používajte RiveScript

Vedeli sme, že sa nechceme dostať príliš hlboko do značkovacieho jazyka AI pre spracovateľskú časť - potrebovali sme len toľko, aby sme túto skúsenosť naštartovali.

RiveScript je jednoduché rozhranie API chatbotu, ktoré je ľahké sa naučiť a postačuje na naše potreby. Počas niekoľkých dní sme mali logiku, aby sme prijali požiadavku na projekt od robota a analyzovali ho s dostatočnou obchodnou logikou na jeho overenie a kategorizáciu, aby ho bolo možné poslať prostredníctvom služieb JSON REST do príslušného interného frontu úloh projektu.


Ak chcete, aby tento základný chatbot fungoval, choďte do repozitára RiveScript, klonujte ho a nainštalujte všetky štandardné závislosti uzlov. V repo môžete tiež ochutnať interakcie, ktoré môžete pridať pomocou rôznych ukážkových úryvkov.

Ďalej spustite priečinok webového klienta, ktorý prevádzkou základného servera Grunt zmení robota na webovú stránku. V tomto okamihu môžete vylepšiť zážitok tak, aby vyhovoval vašim potrebám.

03. Vytvorte mozog svojho robota

Ďalším krokom je generovanie „mozgu“ nášho robota. Toto je špecifikované v súboroch s príponou .RIVE a RiveScript už, našťastie, obsahuje základné interakcie po vybalení z krabice (napríklad otázky ako „Ako sa voláš?“, „Koľko máš rokov?“ A „Aký je tvoj obľúbená farba?').

Keď spustíte aplikáciu webového klienta pomocou správneho príkazu Node, súbor HTML sa vyzve na ich načítanie.RIVE súbory.

Ďalej musíme vygenerovať časť mozgu nášho chatbota, ktorá sa bude zaoberať požiadavkami projektu. Naším hlavným cieľom je previesť výber prijímacích otázok týkajúcich sa projektových úloh do bežného rozhovoru.

Napríklad:

  • Dobrý deň, ako môžeme pomôcť?
  • Super, ako skoro musíme začať?
  • Môžete mi urobiť približnú predstavu o vašom rozpočte?
  • Povedzte mi viac o vašom projekte ...
  • Ako si sa o nás dopočul?

Typický prístupný webový formulár by vyzeral takto:

form action = ""> fieldset> legenda> Typ požiadavky: / legenda> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- one "> option 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> option 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> legenda> 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 for = "one-month"> 1-3 months / label> br> input id = "four-plus-months" type = "radio" name = "request-timeline" value = "štyri-plus-mesiace"> label pre = "štyri-plus-mesiace"> 4+ mesiace / label> br> / fieldset> br> label for = "request-budget"> Informácie o rozpočte / štítok> br> textarea id = "request-budget" name = "request-budget-text" riadky = "10" stĺpce = „30“> / textarea> br> label for = "request-description"> Popis projektu / label> br> textarea id = "request-description" name = "request- description-text" riadky = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" riadky = "10" cols = "30"> / textarea> br > input type = "submit" value = "Odoslať"> / formulár>

S webovými formulármi poznáme určité vzory: kliknete na tlačidlo Odoslať, všetky údaje formulára sa odošlú na inú stránku, kde sa žiadosť spracuje, a potom sa s najväčšou pravdepodobnosťou objaví drzá stránka s poďakovaním.

S chatbotmi dokážeme vziať interakciu s odoslaním žiadosti a urobiť ju zmysluplnejšou.

04. Navrhnite hlas

Aby sme mohli tento formulár previesť na konverzačné používateľské rozhranie poskytované vo webovom klientovi chatu RiveScript, musíme konvertovať informačnú architektúru z rigidnej na fluidnú; alebo štítky polí do reťazcov používateľského rozhrania.

Uvažujme o niekoľkých prístupných štítkoch polí a súvisiacom tóne otázok:

  • Požiadavka: Ako môžeme pomôcť? Nie som si istý? Vadilo by vám, keby som položil niekoľko otázok?
  • Časová os: Ako skoro musíme začať?
  • Informácie o rozpočte: Môžete mi urobiť približnú predstavu o vašom rozpočte?
  • Popis projektu: Dobre, môžete mi povedať zhrnutie problému, ktorý sa má vyriešiť?
  • Referencia: Kto vás tiež odkázal na nás?

Ďalej musíme previesť kód webového formulára do skriptu AI podľa veľmi naučiteľnej logiky spracovania RiveScript pre obojsmerné konverzácie:

- Ako môžeme pomôcť? + *% ako môžeme pomôcť - nastaviť oblasti = varIste, nevadí vám, ak položím niekoľko otázok? + *%% určite vám bude vadiť, keď položím niekoľko otázok - Ako rýchlo musím začať s touto žiadosťou? + *%, ako skoro musím začať s touto požiadavkou - nastaviť kedy = varMôžete mi poskytnúť približnú predstavu o svojom rozpočte? + *% môžete mi poskytnúť približnú predstavu o vašom rozpočte - nastavte rozpočet = varOK, môžete mi povedať zhrnutie problému, ktorý sa má vyriešiť, ovplyvnených komponentov a prostredí alebo celkový popis? + *% ok, môžete mi povedať zhrnutie problému, ktorý sa má vyriešiť, ovplyvnených komponentov a prostredí alebo celkový popis - nastaviť projekt = varAlso, kto vás k nám poslal? + *% tiež, kto vás odkázal na nás - nastaviť referal = vargreat tu je to, čo som zatiaľ dostal: n Potrebné služby: získajte oblasti> n Je potrebné začať: získať kedy> n Hrubý rozpočet: získať rozpočet> n Informácie o vašom projekte: získať projekt> n Odporučí: získať odporúčanie> n a čoskoro sa s vami spojíme. Existuje ešte niečo, s čím vám dnes môžem pomôcť? hovor> príjem získať oblasti> získať, keď> získať rozpočet> získať projekt> získať odporúčanie> / volať>

05. Požiadajte o predloženie

Na rozdiel od štandardných premenných formulárov, ktoré sa odosielajú na inú stránku alebo do služby na spracovanie, chatboti môžu okamžite potvrdiť a odoslať informácie zadané používateľom v okne rozhovoru (alebo hovorené), čo znamená, že používatelia môžu tiež ľahko znova navštíviť predtým zadané hodnoty.

Potrebovali sme poslať požiadavku používateľa zadanú v používateľskom rozhraní chatbotu cez rozhranie JSON REST API na externý server s úlohami projektu.

V RiveScript-js môžeme slobodne využívať XMLHttpRequest vzniesť námietku proti zadaniu žiadosti takmer súčasne, pretože údaje zadáva užívateľ:

> príjem objektu javascript var http = nový XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "oblasti"); var b = rs.getUservar (rs.currentUser (), "kedy"); var c = rs.getUservar (rs.currentUser (), "rozpočet"); var d = rs.getUservar (rs.currentUser (), "projekt"); var e = rs.getUservar (rs.currentUser (), "referal"); var url = "http: // localhost: 3000 / send"; var params = "areas =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (parametre); http.open ("POST", url, true); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader ("Pripojenie", "zavrieť"); http.onreadystatechange = function () {// Zavolať funkciu, keď sa zmení stav. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (parametre); objekt

06. Nebojte sa chatbota

Súčasné spôsoby interakcie s počítačmi na získanie informácií čoskoro ustúpia technológii založenej na umelej inteligencii, napríklad chatbotom, kde ľudia jednoducho vytvárajú jednoduché hlasové príkazy, aké sme videli u technológií ako Amazon Echo a Google Home.

Komunita webdizajnu sa nemusí báť - všetci by sme mali využívať pridanú hodnotu tejto novej technológie.

Môže to byť zmena hry pre spoločnosti, pre ktoré pracuje, ponúka plne škálovateľný zákaznícky servis a vylepšenú inteligenciu zákazníkov.

Tento článok bol pôvodne uvedený vsieťový časopis, najpredávanejší časopis pre webdizajnérov a vývojárov na svete. Prihlásiť sa na odber tu.

Čerstvé Výrobky
10 spôsobov, ako zvíťaziť nad klientom
Čítať

10 spôsobov, ako zvíťaziť nad klientom

Prijatie nového briefu môže byť vzrušujúce, mätúce alebo dokonca znepokojujúce. Jeho vyhodnotenie, či je to v úlade o chopno ťami alebo želaniami vašej organizá...
Andreas Gal v mobilnom operačnom systéme Mozilla
Čítať

Andreas Gal v mobilnom operačnom systéme Mozilla

Začiatkom tohto me iaca Mozilla oznámila, že má roz iahlu podporu operátorov iete pre mobilný operačný y tém Firefox, ktorý umožňuje programovanie telefónov pom...
8 spôsobov, ako sa vyvíja použitie farieb v značkách
Čítať

8 spôsobov, ako sa vyvíja použitie farieb v značkách

Od ulice po poličku v upermarkete bolo použitie farieb vi cerálnym odlíšením značiek a dizajnu loga. poločno ti vo všetkých priemy elných odvetviach vytvorili farebné pr&...