Content
- 01. Establir una personalitat
- 02. Utilitzeu RiveScript
- 03. Genereu el cervell del vostre bot
- 04. Dissenya una veu
- 05. Sol·licitud d’enviament
- 06. No temeu el chatbot
A mitjans de la dècada de 2000, els agents virtuals i els chatbots d’atenció al client van rebre molta adulació, tot i que no eren molt conversadors, i sota el capó només es componien d’intercanvis de dades amb servidors web.
Avui en dia, tot i que existeixen un gran nombre d’exemples de “IA feble” (incloent Siri, Alexa, motors de cerca web, traductors automàtics i reconeixement facial) i altres temes com el disseny web sensible són els protagonistes, els chatbots segueixen provocant un gran enrenou. . Amb la gran inversió de les grans empreses, queden moltes oportunitats per piratejar les interfícies de conversa del futur.
- Com dissenyar una experiència de chatbot
De vegades tenen mala reputació, però els chatbots poden ser útils. No cal que se sentin com un substitut bàsic d’un formulari web estàndard, en què l’usuari emplena els camps d’entrada i espera la validació: poden proporcionar una experiència de conversa.
Essencialment, estem millorant l’experiència de l’usuari per sentir-se més natural, com ara conversar amb un expert o un amic, en lloc de fer clic i fer clic amb el punt del navegador web o de fer gestos des del mòbil. L’objectiu és que, proporcionant respostes empàtiques i contextuals, aquesta tecnologia s’inclogui directament a la vida de les persones.
Mireu el vídeo següent o seguiu llegint per descobrir una manera pràctica de dissenyar i construir un chatbot, basat en una aplicació real de captació de projectes en una pràctica de disseny de serveis.
01. Establir una personalitat
Com que aquesta pràctica dóna servei a més de 110.000 membres a tot el món, l'objectiu era proporcionar una interfície ràpida, còmoda i natural a través de la qual els grups d'interès interns poguessin sol·licitar serveis digitals eficaços, en lloc d'haver d'omplir formularis confusos.
El primer pas va ser establir la personalitat del chatbot, ja que representaria la veu de l’equip de disseny de serveis als seus grups d’interès. Ens vam basar en el treball fonamental d’Aarron Walter sobre el disseny de personalitats. Això va ajudar molt al nostre equip a desenvolupar els trets de personalitat del robot, que van determinar els missatges de salutació, errors i comentaris dels usuaris.
Aquesta és una etapa delicada, ja que afecta la manera com es percep l’organització. Per assegurar-nos que teníem tanta informació com sigui possible, vam crear immediatament tallers d’interessats per incloure la personalitat, el color, la tipografia, les imatges i el flux d’usuari adequats quan interactuem amb el bot.
Després d’haver obtingut totes les aprovacions necessàries (inclosa la recerca d’assessorament jurídic), vam començar a convertir els formularis de sol·licituds arcaics en una sèrie de preguntes d’anada i tornada que imitaven una conversa entre els grups d'interès i un representant del nostre equip de serveis de disseny.
02. Utilitzeu RiveScript
Sabíem que no volíem aprofundir massa en el llenguatge de marcatge d’IA per a la part de processament; només en necessitàvem prou per iniciar l’experiència.
RiveScript és una simple API de chatbot prou fàcil d’aprendre i suficient per a les nostres necessitats. Al cap de pocs dies vam tenir la lògica d’aconseguir una sol·licitud de projecte del bot i analitzar-la amb prou lògica empresarial per validar-la i classificar-la per poder enviar-la a través dels serveis JSON REST a la cua de tasca de projectes interns adequada.
Per fer funcionar aquest chatbot bàsic, aneu al repositori de RiveScript, cloneu-lo i instal·leu totes les dependències estàndard de Node. A la reposició també podeu obtenir un tast de les interaccions que podeu afegir amb els diversos fragments d'exemple.
A continuació, executeu la carpeta client web, que converteix el bot en una pàgina web executant un servidor Grunt bàsic. En aquest moment podeu millorar l’experiència per adaptar-la a les vostres necessitats.
03. Genereu el cervell del vostre bot
El següent pas és generar el "cervell" del nostre bot. Això s’especifica als fitxers amb l’extensió .RIVE i, per sort, RiveScript ja inclou interaccions bàsiques (per exemple, preguntes com "Quin és el teu nom?", "Quants anys tens?" I "Quin és el teu color preferit? ').
Quan inicieu l'aplicació client web mitjançant l'ordre Node adequat, s'instrueix el fitxer HTML per carregar-los.RIVE Fitxers.
A continuació, hem de generar la part del cervell del nostre chatbot que s'ocuparà de les sol·licituds de projecte. El nostre principal objectiu és convertir una selecció de preguntes sobre la tasca del projecte en una conversa habitual.
Així, per exemple:
- Hola, com podem ajudar?
- Genial, quant de temps hem de començar?
- Podeu fer-me una idea aproximada del vostre pressupost?
- Explica’m més sobre el teu projecte ...
- Com ens has conegut?
Un formulari web accessible accessible seria el següent:
form action = ""> fieldset> legend> Type Request: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- one "> opció 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> opció 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> opció 3 / label> br> / fieldset > campset> llegenda> Cronologia: / llegenda> 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 = "four-plus-months"> label for = "four-plus-months"> 4+ months / label> br> / fieldset> br> label for = "request-budget"> Informació del pressupost / label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> Description Description / label> br> textarea id = "request-description" name = "request- description-text" Files = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" rows = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / formulari>
Amb els formularis web, coneixem certs patrons: feu clic al botó Envia, totes les dades del formulari s’envien a una altra pàgina on es processa la sol·licitud i, probablement, apareix una descarada pàgina d’agraïment.
Amb els chatbots, podem prendre la interacció d’enviar una sol·licitud i fer-la més significativa.
04. Dissenya una veu
Per convertir aquest formulari en una interfície d’usuari de conversa publicada al client web de chatbot de RiveScript, hem de convertir l’arquitectura de la informació de rígida a fluida; o etiquetes de camp en cadenes d’interfície d’usuari.
Considerem algunes etiquetes de camp accessibles i el seu to de pregunta relacionat:
- Sol·licitud: Com podem ajudar? No n'estic segur? T’importa si faig algunes preguntes?
- Cronologia: Quant de temps hem de començar?
- Informació pressupostària: Podeu fer-me una idea aproximada del vostre pressupost?
- Descripció del Projecte: D'acord, em podeu explicar un resum del problema que s'ha de resoldre?
- Referència: A més, qui us ha derivat a nosaltres?
A continuació, hem de convertir el codi del formulari web en un script AI, seguint la lògica de processament de RiveScript per a converses bidireccionals:
- Com podem ajudar? + *% com podem ajudar - set areas = varSure, no us importa si faig un parell de preguntes? + *% segur que us importa si faig un parell de preguntes - Quant de temps necessito per iniciar aquesta sol·licitud? + *% quant de temps necessito per iniciar aquesta sol·licitud - definiu quan = var em podeu fer una idea aproximada del vostre pressupost? + *% em podeu fer una idea aproximada del vostre pressupost - set budget = varOK, em podeu explicar un resum del problema a resoldre, els components i els entorns afectats o una descripció general? + *% ok, em podeu dir un resum del problema que s'han de resoldre components i entorns afectats o una descripció general - set project = varAlso, qui us ha remès? + *% també qui us ha referit a nosaltres - set referal = vargreat aquí és el que he obtingut fins ara: n Serveis necessaris: obtenir àrees> n Cal començar: obtenir quan> n Pressupost aproximat: obtenir pressupost> n Quant al vostre projecte: get project> n Referit per: get referral> n i ens posarem en contacte en breu. Hi ha alguna cosa més que us pugui ajudar avui? call> ingesta obtenir àrees> obtenir quan> obtenir pressupost> obtenir projecte> obtenir referència> / call>
05. Sol·licitud d’enviament
A diferència de les variables de formulari estàndard que s’envien a una altra pàgina o servei per processar-les, els chatbots poden validar i enviar la informació introduïda per l’usuari en una finestra de xat (o parlada) immediatament, cosa que significa que els usuaris també poden revisar fàcilment els valors introduïts prèviament.
Havíem d’enviar la sol·licitud de l’usuari introduïda a la interfície d’usuari del chatbot mitjançant l’API REST de JSON a un servidor de tasques de projectes externs.
A RiveScript-js, podem utilitzar un fitxer XMLHttpRequest s'oposa a enviar la sol·licitud gairebé simultàniament, ja que l'usuari introdueix les dades:
> ingesta d'objectes javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "areas"); var b = rs.getUservar (rs.currentUser (), "quan"); var c = rs.getUservar (rs.currentUser (), "pressupost"); var d = rs.getUservar (rs.currentUser (), "project"); 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 (params); http.open ("POST", URL, cert); http.setRequestHeader ("Tipus de contingut", "application / x- www-form-urlencoded"); http.setRequestHeader ("Connexió", "tancar"); http.onreadystatechange = function () {// Truqueu una funció quan canviï l'estat. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); objecte
06. No temeu el chatbot
Aviat, les formes actuals d’interactuar amb els ordinadors per obtenir informació cediran a la tecnologia basada en la IA, com ara els chatbots, on la gent només fa ordres de veu senzilles, com hem vist amb tecnologies com Amazon Echo i Google Home.
La comunitat de disseny web no té por: tots hauríem d’abraçar el valor afegit d’aquesta nova tecnologia.
Pot ser un canvi de joc per a les empreses per a les quals treballa, oferint un servei al client totalment escalable i una intel·ligència millorada.
Aquest article es va publicar originalment arevista net, la revista més venuda del món per a dissenyadors i desenvolupadors de webs. Subscriu-te aquí.
