Tra le varie magie che facciamo in H-FARM Innovation, creiamo assistenti digitali (anche detti agenti conversazionali, assistenti vocali, ecc). Cosa sono? Gli assistenti digitali sono agenti in grado di mettere in comunicazione i brand con i loro utenti in maniera automatica ed innovativa attraverso avanzate tecnologie di elaborazione del linguaggio. Potete scoprire qualcosa in più su Sophia Dialog, la nostra piattaforma proprietaria con cui creiamo assistenti digitali, a questo link.
Alla base della progettazione di questo tipo di prodotti ci sono dinamiche complesse, che vanno dal disegno del flusso della conversazione alla sua implementazione. Quando il flusso della conversazione diventa “importante”, come vi spiegheremo nei prossimi paragrafi, ottimizzare il lavoro di designer e sviluppatori è davvero sfidante, e ci troviamo a fronteggiare l’eterno problema tipico della lavorazione di un progetto digitale: far collaborare pacificamente designer e sviluppatori. Chi disegna un prodotto, il designer, ha normalmente prospettive e priorità diverse da chi lo sviluppa. E così, tradurre l’idea in pratica può incontrare non poche difficoltà.
Nonostante questo, un gruppo di noi ha deciso di accettare la sfida e provare a innovare il flusso di lavoro per la progettazione di assistenti digitali, così da renderlo più rapido ed efficiente per noi e i nostri clienti. In che modo?
La Crew Visual Dialog, composta da tre sviluppatori (Raffaella, Riccardo, Edoardo), due designer (Carlo, Mirko) e due jack of all trades (Francesca e Michele) è pronta a raccontarvi tutto nei prossimi paragrafi!
Per realizzare un qualsiasi assistente conversazionale, occorre per prima cosa disegnare il flusso della conversazione. Tale flusso è composto da due ingredienti principali:
Immaginatevi questo flusso di nodi e frecce come se fosse un gioco a caselle in cui saltando potete spostarvi da una casella all’altra. Ciascuna di quelle caselle è un pezzo di conversazione, e a seconda delle domande che fate e delle risposte che date, vi spostate da una casella all’altra. La casella in cui vi trovate dipenderà dalle scelte che avete fatto fino a quel momento.
Il lavoro del designer conversazionale è quello di prevedere tutti gli stati della conversazione — in pratica tutte le caselle possibili del nostro gioco — e gli eventi che la fanno evolvere nel processo che comincia dal contatto da parte dell’utente e che conduce al soddisfacimento delle sue esigenze. Il designer deve poi comunicare questo progetto allo sviluppatore, che farà in modo che le sue idee vengano tradotte nei formalismi che il software interpreta per gestire ogni interazione con l’utente. Finora questo coordinamento è stato svolto attraverso dei diagrammi, simili a quelli rappresentati in figura.
Tutto questo funziona finché il dialogo è semplice, una piccola conversazione. Ma se dovessimo generare un flusso di dialogo più complesso, il processo non sarebbe più così lineare.
Ogni volta che si aggiunge un nodo o una freccia il codice sottostante si complica, e alla fine ci si ritrova con un flusso intricato e un codice estremamente complesso. Tra l’altro, per quanto questo possa risultare tutto sommato accettabile quando lo si costruisce la prima volta, immaginate cosa significhi tornare dopo qualche mese e dover cambiare una singola freccia di questo flusso: non è sufficiente aggiornare la rappresentazione grafica, occorre anche verificare che nel codice tutto continui a funzionare correttamente, nonché identificare e risolvere qualsiasi incongruenza si venga a creare. E qui veniamo al nocciolo della collaborazione tra designer e sviluppatori: quale strumento può aiutarci a ottimizzare questo processo?
La risposta che la nostra Crew ha dato è stata Visual Dialog. Visual Dialog è un prototipo di web application che permette ai designer conversazionali di creare dei flussi di conversazione tramite interfaccia grafica basata sull’utilizzo di automi a stati finiti in modo semplice e intuitivo, ma allo stesso tempo già coerenti con la logica utilizzata dal codice per gestire il dialogo. Il sistema poi si incarica di controllare che gli elementi del flusso generati siano sempre accurati rispetto al formalismo e alle logiche alla base del codice, facilitando in questo modo il lavoro degli sviluppatori
Great UX + Automated logic = Visual dialog!
Quando accede in piattaforma, il designer conversazionale ha a disposizione i due elementi principali per costruire il grafo che sintetizza il flusso della conversazione che andrà a definire, gli stati e gli eventi, come vi abbiamo spiegato poco fa. Gli stati possono avere diverse funzioni che il designer assegna attraverso dei colori: avremo un colore per gli stati che servono a fornire delle informazioni, un altro per quelli che invece devono acquisire dati dall’utente, e un altro ancora per gli stati che devono interagire con servizi esterni per reperire informazioni o eseguire azioni. In aggiunta, per ogni stato è possibile inserire una descrizione o un commento utili al lavoro di design.
Gli eventi invece vengono definiti all’interno delle transizioni, ovvero le frecce che collegano uno stato ad un altro. Stati e transizioni sono sempre modificabili, commentabili o cancellabili in qualsiasi momento, e per renderli “attivi” e funzionanti occorre completare alcune proprietà obbligatorie e univoche, come l’indicazione di un nome e il tipo. Se il designer dimentica di inserire queste informazioni obbligatorie, la dashboard visualizza un messaggio di errore. Quindi, Visual Dialog non è solo una board su cui disegnare un flusso: i blocchi e le frecce sono già logica funzionante, codice, la cui consistenza è verificata e pronta per essere implementata.
In conclusione Visual Dialog consente di:
Quello che abbiamo fatto sinora come Crew è ovviamente solo un pezzo di tutto il lavoro che ci immaginiamo. Nei prossimi mesi vogliamo sviluppare per davvero la nostra dashboard per costruire al meglio i nostri e vostri nuovi progetti e in particolare vorremmo:
