Come costruire un'interfaccia chatbot

Contenuto

• 01. Stabilisci una personalità
• 02. Usa RiveScript
• 03. Genera il cervello del tuo bot
• 04. Progetta una voce
• 05. Richiesta di presentazione
• 06. Non temere il chatbot

A metà degli anni 2000, gli agenti virtuali ei chatbot del servizio clienti hanno ricevuto molta adulazione, anche se non erano molto conversativi, e sotto il cofano erano semplicemente composti da scambi di dati con i server web.

Al giorno d'oggi, anche se esiste un numero enorme di esempi di `` intelligenza artificiale debole '' (inclusi Siri, Alexa, motori di ricerca web, traduttori automatici e riconoscimento facciale) e altri argomenti come il responsive web design stanno conquistando le luci della ribalta, i chatbot continuano a suscitare scalpore . Con importanti investimenti da parte di grandi aziende, rimangono molte opportunità per hackerare le interfacce di conversazione del futuro.

• Come progettare un'esperienza di chatbot

A volte hanno una cattiva reputazione, ma i chatbot possono essere utili. Non hanno bisogno di sentirsi come un sostituto di base per un modulo web standard, in cui l'utente compila i campi di input e attende la convalida: possono fornire un'esperienza di conversazione.

In sostanza, stiamo migliorando l'esperienza dell'utente per renderla più naturale, come conversare con un esperto o un amico, invece di puntare e fare clic sul browser web o gesti da dispositivo mobile. L'obiettivo è che, fornendo risposte empatiche e contestuali, questa tecnologia venga incorporata direttamente nella vita delle persone.

Guarda il video qui sotto o continua a leggere per scoprire un modo pratico per progettare e costruire un chatbot, basato su una reale applicazione di assunzione di progetti in una pratica di progettazione di servizi.

01. Stabilisci una personalità

Poiché questa pratica serve oltre 110.000 membri in tutto il mondo, l'obiettivo era fornire un'interfaccia rapida, comoda e naturale attraverso la quale le parti interessate interne potessero richiedere servizi digitali efficaci, invece di dover compilare moduli confusi.

Il primo passo è stato quello di stabilire la personalità del chatbot, in quanto ciò rappresenterebbe la voce del team di progettazione del servizio per i suoi stakeholder. Ci siamo basati sul lavoro fondamentale di Aarron Walter sui personaggi del design. Ciò ha notevolmente aiutato il nostro team a sviluppare i tratti della personalità del bot, che ha poi determinato i messaggi per i saluti, gli errori e il feedback degli utenti.

Questa è una fase delicata, poiché influisce sul modo in cui viene percepita l'organizzazione. Per assicurarci di avere quante più informazioni possibili, abbiamo immediatamente organizzato seminari per le parti interessate per definire la personalità, il colore, la tipografia, le immagini e il flusso dell'utente appropriati quando interagiscono con il bot.

Dopo aver ottenuto tutte le approvazioni necessarie, inclusa la ricerca di un consulente legale, abbiamo deciso di convertire i moduli di richiesta arcaici in una serie di domande avanti e indietro che imitavano una conversazione tra le parti interessate e un rappresentante del nostro team di servizi di progettazione.

02. Usa RiveScript

Sapevamo di non voler approfondire troppo il linguaggio di markup AI per la parte di elaborazione: avevamo solo bisogno di quanto basta per far ripartire l'esperienza.

RiveScript è una semplice API di chatbot abbastanza facile da imparare e sufficiente per le nostre esigenze. In pochi giorni abbiamo avuto la logica per acquisire una richiesta di progetto dal bot e analizzarla con una logica di business sufficiente per convalidarla e classificarla in modo che potesse essere inviata tramite i servizi JSON REST alla coda di task interna del progetto appropriata.

Per far funzionare questo chatbot di base, vai al repository RiveScript, clonalo e installa tutte le dipendenze Node standard. Nel repo puoi anche avere un assaggio delle interazioni che puoi aggiungere con i vari frammenti di esempio.

Successivamente, esegui la cartella del client web, che trasforma il bot in una pagina web eseguendo un server Grunt di base. A questo punto puoi migliorare l'esperienza in base alle tue esigenze.

03. Genera il cervello del tuo bot

Il passaggio successivo consiste nel generare il "cervello" del nostro bot. Questo è specificato nei file con estensione .RIVE, e per fortuna RiveScript viene fornito con interazioni di base già pronte all'uso (ad esempio, domande come "Come ti chiami?", "Quanti anni hai?" E "Qual è il tuo colore preferito?').

Quando si avvia l'app client Web utilizzando il comando Node appropriato, viene richiesto al file HTML di caricarli.RIVE File.

Successivamente dobbiamo generare la parte del cervello del nostro chatbot che si occuperà delle richieste del progetto. Il nostro obiettivo principale è convertire una selezione di domande di assunzione del compito di progetto in una conversazione regolare.

Quindi, ad esempio:

• Ciao, come possiamo aiutarti?
• Ottimo, quanto tempo dobbiamo iniziare?
• Puoi darmi un'idea approssimativa del tuo budget?
• Dimmi di più sul tuo progetto ...
• Come hai saputo di noi?

Un tipico modulo web accessibile sarebbe simile a questo:

form action = ""> fieldset> legend> Tipo richiesta: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- uno "> opzione 1 / etichetta> br> input id =" opzione-due "tipo =" radio "nome =" richiesta-tipo "valore =" opzione-due "> etichetta per =" opzione-due "> opzione 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> opzione 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 mese / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1-3 mesi / label> br> input id = "quattro-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"> Informazioni sul budget / label> br> textarea id = "request-budget" name = "request-budget-text" righe = "10" cols = "30"> / textarea> br> label for = "request-description"> Project Description / label> br> textarea id = "request-description" name = "request- description-text" rows = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" righe = "10" cols = "30"> / textarea> br > input type = "submit" value = "Submit"> / form>

Con i moduli web, abbiamo molta familiarità con alcuni schemi: fai clic sul pulsante Invia, tutti i dati del modulo vengono inviati a un'altra pagina in cui viene elaborata la richiesta e quindi molto probabilmente viene visualizzata una sfacciata pagina di ringraziamento.

Con i chatbot, siamo in grado di prendere l'interazione di inviare una richiesta e renderla più significativa.

04. Progetta una voce

Per convertire questo modulo in un'interfaccia utente conversazionale servita nel client web chatbot di RiveScript, dobbiamo convertire l'architettura delle informazioni da rigida a fluida; o le etichette dei campi nelle stringhe dell'interfaccia utente.

Consideriamo alcune etichette di campo accessibili e il relativo tono di domanda:

• Richiesta: Come possiamo aiutare? Non è sicuro? Ti dispiace se ti faccio qualche domanda?
• Sequenza temporale: Dopo quanto tempo dobbiamo iniziare?
• Informazioni sul budget: Puoi darmi un'idea approssimativa del tuo budget?
• Descrizione del progetto: OK, puoi dirmi un riepilogo del problema da risolvere?
• Riferimento: Inoltre, chi ti ha indirizzato a noi?

Successivamente dobbiamo convertire il codice del modulo web in script AI, seguendo la logica di elaborazione molto apprendibile di RiveScript per le conversazioni a due vie:

- Come possiamo aiutare? + *% come possiamo aiutarti - set Areas = varSure, ti dispiace se faccio un paio di domande? + *% sicuro ti dispiace se faccio un paio di domande - Quanto tempo devo iniziare questa richiesta? + *% quanto tempo devo iniziare questa richiesta - imposta quando = var Puoi darmi un'idea approssimativa del tuo budget? + *% potete darmi un'idea approssimativa del vostro budget - set budget = varOK, potete dirmi un riepilogo del problema da risolvere, dei componenti e degli ambienti interessati o una descrizione generale? + *% ok puoi dirmi un riepilogo del problema da risolvere componenti e ambienti interessati o una descrizione generale - set project = varAlso, chi ti ha indirizzato a noi? + *% anche chi ti ha indirizzato a noi - set referal = vargreat ecco cosa ho ottenuto finora: n Servizi necessari: ottieni aree> n Necessità di iniziare: ottieni quando> n Budget approssimativo: ottieni budget> n Informazioni sul tuo progetto: ottieni progetto> n Segnalato da: ottieni referral> ne ti contatterò a breve. C'è qualcos'altro per cui posso aiutarti oggi? chiama> assunzione ottieni aree> ottieni quando> ottieni budget> ottieni progetto> ottieni referal> / chiama>

05. Richiesta di presentazione

A differenza delle variabili del modulo standard inviate a un'altra pagina o servizio da elaborare, i chatbot possono convalidare e inviare immediatamente le informazioni inserite dall'utente in una finestra di chat (o parlate), il che significa che gli utenti possono anche rivisitare facilmente i valori immessi in precedenza.

Avevamo bisogno di inviare la richiesta dell'utente inserita nell'interfaccia utente del chatbot tramite l'API REST JSON a un server incaricato del progetto esterno.

In RiveScript-js siamo liberi di utilizzare un file XMLHttpRequest opporsi a inoltrare la richiesta quasi contemporaneamente, in quanto i dati vengono inseriti dall'utente:

> assunzione di oggetti javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "aree"); var b = rs.getUservar (rs.currentUser (), "quando"); var c = rs.getUservar (rs.currentUser (), "budget"); var d = rs.getUservar (rs.currentUser (), "progetto"); var e = rs.getUservar (rs.currentUser (), "referal"); var url = "http: // localhost: 3000 / send"; var params = "aree =" + a + "e quando =" + b + "& budget =" + c + "& progetto =" + d + "& referal =" + e; console.log (params); http.open ("POST", url, true); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader ("Connessione", "chiudi"); http.onreadystatechange = function () {// Chiama una funzione quando lo stato cambia. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); oggetto

06. Non temere il chatbot

Presto, i modi attuali di interagire con i computer per ottenere informazioni cederanno alla tecnologia basata sull'intelligenza artificiale come i chatbot, in cui le persone fanno solo semplici comandi vocali, come abbiamo visto con tecnologie come Amazon Echo e Google Home.

La comunità del web design non deve temere: dovremmo tutti abbracciare il valore aggiunto di questa nuova tecnologia.

Potrebbe essere un punto di svolta per le aziende per cui lavora, offrendo un servizio clienti completamente scalabile e una migliore intelligenza del cliente.

Questo articolo è stato originariamente pubblicato innet magazine, la rivista più venduta al mondo per web designer e sviluppatori. Iscriviti qui.