Come siamo passati alla creazione di elementi dell'interfaccia utente di input per la nostra piattaforma Chatbot
Pubblicato: 2017-01-01I chatbot, così come esistono oggi, non hanno molte capacità per comprendere il linguaggio umano naturale. E questo è uno dei motivi principali per cui la maggior parte delle app di messaggistica (Messenger, Kik ecc.) ricorrono a un mix di interfaccia utente grafica e di testo nelle loro piattaforme bot: pensa a pulsanti, caroselli, schede immagine e non solo risposte di testo.
Noi di Tars utilizziamo il browser come piattaforma per creare la nostra interfaccia di chat per far funzionare i bot. E questo ci dà completa libertà su tutti i componenti che abbiamo. Se hai provato uno dei nostri bot (in caso contrario, provane uno qui e qui), sapresti che supportiamo fortemente l'interfaccia utente grafica + l'approccio basato su testo. Come parte di questo processo di pensiero, abbiamo creato una serie di input da tastiera personalizzati nella nostra interfaccia front-end per facilitare le diverse interazioni e situazioni dell'utente.
Messenger, Kik, Telegram sono enormi piattaforme in cui gli sviluppatori implementano centinaia di bot ogni giorno. Sento ancora che queste piattaforme di messaggistica non hanno fatto abbastanza sui componenti front-end per aiutare un boomaker a creare interazioni utente arricchenti.
Ed è per questo che volevo parlare di più su come abbiamo creato ogni interfaccia utente personalizzata, perché ognuna di esse ha un senso e come la loro mancanza rovina le interazioni degli utenti in questo momento.
Quindi eccoci qui:
Scorrimento data e ora
Pensa a uno scenario in cui è necessario chiedere a un utente per quando vorrebbe fissare l'appuntamento? Ci possono essere più modi per fornire le stesse informazioni.
25 novembre, 25 novembre, 25 novembre, 25/11, 25–11–2016, 25/11/16 — tutti essenzialmente significano lo stesso, ma diventa difficile per una macchina dare un senso a questi dati.
Questo è il motivo per cui abbiamo incorporato uno scroller di data e ora in cui gli utenti possono ruotare i quadranti e selezionare la data/ora.

Non ho visto nessun'altra piattaforma di messaggistica fornire questa interfaccia utente fino ad ora e ritengo che questo sia un must se un bot chiede data o ora all'utente.
Pulsanti verticali
Pensa a queste come opzioni a scelta multipla in una forma in cui hai un numero limitato di cose tra cui scegliere. Toccare i pulsanti rende l'interazione più rapida e limita anche l'ambito della conversazione.
L'approccio basato sui pulsanti ha senso quando devi scegliere tra una pizza veg e non veg, ma potrebbe non essere la migliore interfaccia utente da avere se hai 100 polizze assicurative tra cui scegliere.
Cosa si può fare di più con i pulsanti verticali?
- aggiungi un'immagine accanto a ciascuna opzione per renderla visivamente più accattivante.
- puoi lasciare che l'utente risponda a un solo tocco o fargli fare clic su "Invia" dopo aver toccato una qualsiasi delle opzioni. Quest'ultimo aiuta a riconfermare se l'utente non ha selezionato l'opzione particolare per errore. Non c'è modo di tornare indietro in un flusso di chat ed è per questo che questa personalizzazione ha senso.
- aggiungi un menu rapido di informazioni a ciascuna opzione per fornire informazioni dettagliate e migliorare il processo decisionale.

Non tutti conoscono la differenza tra Advance e Basic Facial. L'aggiunta di dettagli su tutto ciò che è incluso e sui prezzi migliora l'esperienza dell'utente.
Un'altra cosa importante da tenere a mente quando usi l'interfaccia utente dei pulsanti è inquadrare la tua domanda nel modo giusto. Come spiega Leszek nel suo articolo qui, è meglio porre la domanda in un modo che limiti la gamma di opzioni e definisca il contesto invece di porre una domanda molto aperta.

Limitazione dell'input dell'utente
Sento che questa è una delle cose migliori che abbiamo fatto alla nostra interfaccia di chat. Ogni volta che forniamo un'interfaccia utente di input grafico (pulsanti, caroselli, ecc.), non consentiamo all'utente di digitare nulla nel testo.
Perché farlo? Perché un utente può digitare qualsiasi cosa là fuori e il tuo bot non è pronto per questo. Finché non ci sei, è meglio mantenerlo semplice e limitato piuttosto che interrompere la conversazione.
Raccomandato per te:
Quello che facciamo è questo:


Questa è la nostra interfaccia di chat
E questo è quello che succede quando non hai qualcosa del genere:

Questo è Facebook Messenger che non consente l'immissione di testo con restrizioni quando hai risposte rapide
Pulsante Fine e Passa
Queste sono due piccolissime sfumature che abbiamo finito per incorporare perché abbiamo sempre pensato ai chatbot con script come a un'evoluzione delle forme.
Quando invii il tuo indirizzo o fornisci un feedback dettagliato sull'interfaccia della chat, il comportamento generale è premere il pulsante di invio dopo aver scritto alcune parole e l'intera risposta viene infine distribuita su 3-4 affermazioni. Con il "pulsante Fatto", puoi continuare a digitare e premere questo una volta che hai dato la risposta completa.
Se non si dispone di tale opzione, il messaggio successivo della macchina arriverà dopo la prima istanza stessa, con conseguente risposta incompleta.

Avere un pulsante "Fatto" quando devi selezionare più opzioni o avere risposte a più righe
Potrebbero esserci anche casi in cui un utente vuole saltare la domanda e per questo abbiamo un "pulsante Passa" al posto del "pulsante Invia". Non appena l'utente inizia a digitare, il pulsante Passa si trasforma in pulsante Invia.

Non vuoi dare la tua email? Tocca "Passa" per saltare la domanda.
Suggerimenti per il completamento automatico
È come la funzionalità di completamento automatico nella ricerca di Google in cui inizi a digitare e suggerisce le possibili opzioni. Questo diventa particolarmente utile quando hai un lungo elenco di opzioni e avere pulsanti verticali non è un'opzione fattibile. Pensa a un lungo elenco di località, città, modelli di auto, ecc.

Stelle e Mi piace
Particolarmente utile quando chiedi feedback o esperienza agli utenti e la risposta è di natura più qualitativa. E puoi persino personalizzare le icone in modo che siano stelle, Mi piace, cuori, emoticon.

Schede immagine
Questo è utile quando è necessario mostrare più informazioni su ciascun elemento in una volta sola. Potrebbe essere un hamburger in un processo di ordinazione di cibo o una maglietta in un flusso di acquisto. Tutte le carte sono impilate l'una contro l'altra e puoi scorrere per guardare tutte le opzioni.
Ci sono 4 parti di questo elemento dell'interfaccia utente: immagine, titolo, descrizione e piè di pagina. Puoi utilizzarli in modo diverso a seconda di ciò che desideri visualizzare lì.

Nel caso in cui desideri testare tutti questi elementi dell'interfaccia utente di input, ecco il collegamento a un chatbot che ti guida uno alla volta.
La chat è un'interfaccia minimalista con solo bolle e una casella di testo non offre molto spazio. E credo che dovremo ripensare a come possiamo facilitare una varietà di interazioni utilizzando gli elementi esistenti e aggiungendone di nuovi all'interfaccia della chat.
Ti piacerebbe sapere se hai giocato tu stesso con l'interfaccia di messaggistica e hai aggiunto altri fantastici elementi della GUI?
[Questo post di Ish Jindal è apparso per la prima volta su Medium ed è stato riprodotto con il permesso.]






