Solo chiacchiere e niente pulsanti: la conversational UI

Stiamo assistendo a un’esplosione di applicazioni che non hanno più una graphical user interface (GUI). In realtà, è da un po’ che girano, ma solo recentemente hanno cominciato a diventare mainstream. Vengono chiamate bot, virtual assistant, app invisibili. Possono girare su Slack, WeChat, Facebook Messenger, semplici SMS, o Amazon Echo. Possono essere interamente gestite dall’intelligenza artificiale o può esserci un umano dietro le quinte.

WarGames: David Lightman parla con Joshua.

Il mio primo incontro con un’interfaccia conversational è stato nel 1983. Ero solo un ragazzino e sono andato a vedere WarGames con alcuni amici. Il giovane hacker David Lightman (impersonato da Matthew Broderick) digita tutti i numeri di telefono di Sunnyvale, California, finché accidentalmente si imbatte in un supercomputer militare progettato per simulare la Terza Guerra Mondiale.

Abbiamo immediatamente capito che questo computer opera a un livello differente: intraprende conversazioni con Lightman, gli chiede come si sente e gli suggerisce di giocare con alcuni giochi. Non ci sono comandi specifici da inserire: semplicemente si parla a questo computer e questo capisce e risponde.

Avanziamo rapidamente di 30 anni. In Meekan, i miei colleghi di team ed io stiamo intraprendendo la creazione di un nuovo tool per programmare le riunioni. Abbiamo pensato: “È il 2014! Perché non c’è un calendario che funzioni per noi?“ Volevamo semplicemente essere in grado di dire al nostro calendario: “Devo incontrare Jan per un caffè la prossima settimana“ e lasciare che il calendario si preoccupasse di trovare e prenotare il miglior momento e il miglior posto possibili.

Prima abbiamo abbozzato una pagina web, poi abbiamo creato un’app Android e poi un’app iOS e alla fine un add-in per Outlook. Ognuno di questi era diverso dal precedente: ognuno attaccava il problema da un angolo diverso. E, onestamente, nessuna di queste soluzioni era davvero buona.

Le opzioni “Time-of-day“ nella nostra iOS App.

Dopo aver creato interfacce utente per più di 15 anni, per la prima volta sentivo che l’interfaccia stava seriamente limitando quello che stavo cercando di fare. Quasi nessuno capiva quello che stavamo cercando di fare e quando ci riuscivano, sembrava essere più difficile da fare nel nostro modo rispetto al modo della vecchia scuola. Saremmo potuti andare avanti a sfornare sempre più versioni, ma era ora di cambiare approccio. Il range delle possibili azioni, gli innumerevoli modi in cui gli utenti potevano descrivere ciò di cui avevano bisogno era semplicemente troppo grande per essere gestito con un insieme di pulsanti e controlli. L’interfaccia ci stava limitando. Avevamo bisogno di qualcosa senza interfaccia. Dovreste poterle dire del vostro incontro con Jan e questa dovrebbe renderlo possibile.

E poi ci venne l’illuminazione: realizziamo un robot!

Vi racconterò tutto riguardo a questo, ma prima dovete sapere una cosa. Se siete un designer o un developer, avrete bisogno di aggiustare un po’ il vostro modo di pensare. Alcuni dei più comuni pattern e flussi GUI non funzioneranno più, altri appariranno leggermente diversi. Secondo la Oxford University, i robot sostituiranno quasi la metà dei lavori negli USA nei prossimi 20 anni, quindi qualcuno dovrà costruire queste macchine (sto pensando a voi) ed essere sicuro che noi possiamo comunicare con queste in maniera adeguata. Spero che condividendo alcuni degli ostacoli che abbiamo già sorpassato ci aiuterà a creare una transizione più semplice per altri designer. Dopo tutto, molta parte di un buon design riguarda la narrazione di una buona storia e la creazione di un robot è una versione ancora più pura di questo.

Photoshop? Dove siamo diretti, non ci serve Photoshop#section1

Pensateci. Al momento non avete praticamente controllo sull’aspetto della vostra applicazione. Non potete scegliere un layout o uno stile, non potete cambiare la tipografia. Solitamente, vi fate dare un passaggio sulla piattaforma di qualcun altro, quindi dovete rispettare le loro regole.

Lo stesso messaggio in Slack, HipChat e WhatsApp.

Anzi, diventa peggio! Cosa succede se la vostra piattaforma è controllata tramite voce? Non ha nemmeno un lato visuale: l’intera vostra interfaccia deve essere percepita attraverso le orecchie, non gli occhi. Oltre tutto, potreste essere in competizione per lo stesso spazio con altre conversazioni che stanno avvenendo attorno a voi sullo stesso canale.

Non è una situazione semplice e dovrete uscirne tramite linguaggio: tutte le vostre feature dovranno essere raggiungibili esclusivamente tramite parole, quindi è importantissimo scegliere la cosa giusta da dire e il tono del proprio dialogo con l’utente. Ora è il vostro unico modo per trasmettere quello che fa la vostra applicazione e come lo fa. Gli standard web obbligano ad una separazione di contenuto e stile, ma in questo caso, l’intera parte dello stile va a farsi benedire. Il vostro contenuto adesso è il vostro stile. Senza più le vostre skill Photoshop, dovrete arrivare all’essenza della storia che state raccontando.

E gli sviluppatori? Rallegratevi! Il vostro lavoro sarà logica pura. Se siete il tipo di sviluppatore che odia giocherellare con CSS, questo potrebbe essere il giorno più felice della vostra vita.

Il primo strumento nella vostra nuova cassetta degli attrezzi è un editor testuale per scrivere gli script e i comportamenti del robot. Quando le cose si fanno più complicate, potete usare tool come Twine per comprendere i cambiamenti sorprendenti. Tool e librerie per programmare e scalare i bot si stanno moltiplicando esponenzialmente mentre parliamo: cose come Wit.ai per la gestione della comprensione del linguaggio, Beep Boop per l’hosting e Botkit per l’integrazione con la popolare piattaforma Slack. (Mentre scrivo questo articolo non ci sono ancora tool onnicomprensivi per gestire l’intero processo dall’inizio alla fine. A me sembra una grossa opportunità…).

Ma, lasciatemelo dire ancora. L’intero settore del visual interface design, tutto quello che sappiamo del posizionamento dei controlli, della gestione delle interazioni con il mouse e il touch, perfino la scelta dei colori, saranno influenzati dalla forma conversational o spariranno del tutto. Memorizzate questa cosa nella vostra cartella temp del cervello per un po’, poi fate un bel respiro e proseguiamo.

Prima impressione: presentatevi e suggerite il passo successivo#section2

Immaginate un nuovo utente che abbia appena installato la vostra app iOS e l’abbia lanciata per la prima volta. Appare la schermata home. Probabilmente sarà piuttosto vuota, ma presenta già dei controlli famigliari: un menu opzioni, un pulsante impostazioni, un grande pulsante per avviare qualcosa di nuovo. È come un banco della frutta: tutto è disposto di fronte a voi – meloni, succulente mele – dovete solo scegliere.

Rispetto a questo, il vostro primo incontro con un robot assomiglia di più a un confessionale. Dipendete dalla voce dall’altra parte della porta per essere sicuri di non essere da soli e sarà la vostra guida per i vostri passi successivi.

Il vostro primo contatto con l’utente dovrebbe essere la vostra presentazione. Ricordatevi, siete in una chat. Avete solo una o due righe, quindi siate brevi e concisi. Parleremo maggiormente di questo in un secondo articolo, ma ricordatevi che non avere un’interfaccia visibile significa una di queste due cose per gli utenti:

• Questa cosa può fare tutto quello che le chiedo, quindi le chiederò di prepararmi un panino.
• Non ho idea di cosa devo fare adesso, quindi mi fermo e fisso lo schermo.

Quando abbiamo fatto i nostri primi test, gli utenti ci hanno detto proprio questo. O semplicemente fissavano lo schermo o digitavano qualcosa come “Portami sulla luna, Meekan.“

Eravamo turbati: “Perché non gli chiedi di pianificare cose per te, utente?“

“Davvero? Può farlo?“

Non è ovvio. Quindi abbiamo usato le presentazioni per definire alcune aspettative sul ruolo del nuovo arrivato nel team. Non temete nemmeno di glorificare la sua missione. Questo robot gestisce il tuo calendario! In questo modo, gli utenti saranno meno delusi quando scopriranno che non fa i panini.

Fate seguire subito questa introduzione da una call to action. Evitate la parte “cervo abbagliato dai fari“ suggerendo qualcosa che l’utente possa provare subito.

Ciao Matty! Sono Meekan, l’assistente per la programmazione del tuo team. Posso organizzare un meeting in pochi secondi, controllare il tuo calendario e perfino trovare dei voli! Prova subito! Dì: Meekan, vogliamo incontrarci per pranzo settimana prossima.

Provate a trovare una breve azione che abbia sicuramente successo. I vostri utenti inseriranno questa cosa e riceveranno immediatamente un magico tesoro. Dopo questo, non vorranno più tornare alla loro vecchia vita, in cui dovevano fare cose senza un robot e sicuramente vorranno usare il robot sempre di più! E dire a tutti i loro amici del robot! (E… Ecco fatto, avete appena coperto retention e virality in una sola volta! Magari non sarà così facile, ma spero che abbiate capito il punto sulle prime impressioni).

Svelare più features#section3

Quando progettiamo GUI, spesso parliamo di discoverability. Se volete che l’utente sappia che la vostra app è in grado di fare qualcosa, glielo sbattete contro sullo schermo, da qualche parte. Quindi, se non ho mai usato Twitter e vedo un tweet per la prima volta, le mie opzioni si parano di fronte a me in questo modo:

Facile. Passo il mio mouse sopra queste piccole icone. Alcune di queste (come stelle o cuori) sono piuttosto ovvie, altre potrebbero richiedere un po’ di ricerca, ma so che ci sono. Mi guardo intorno sullo schermo, vedo il mio link alle Notifiche, che ha un piccolo numerino rosso. Immagino di avere ricevuto delle notifiche mentre non c’ero!

Ma quando parliamo a un robot, fissiamo solo il vuoto. È compito del robot afferrare ogni opportunità per suggerire il passo successivo e sottolineare le feature meno familiari.

• Alla presentazione: come abbiamo citato prima, usate il primo contatto con gli utenti per suggerire un task che potrebbero chiedere al robot di fare.
• Quando si riceve il primo comando: il robot comincia con una descrizione verbosa di quello che sta succedendo e cosa sta facendo per portare a termine la sua missione. Suggerire i possibili step successivi e/o spiegare in che modo ottenere aiuto (e.g., linkare a una pagina FAQ o a un intero manuale).
• Ora rimuovete gradualmente le rotelle alla bici. Una volta che le prime interazioni hanno successo, il robot può essere meno verboso e più efficiente.
• Sbloccate più achievements: man mano che si porta avanti la relazione, continuate a rivelare più opzioni e trucchi avanzati. Provate a basarli sullo storico delle azioni dell’utente. Non c’è motivo di spiegare qualcosa che hanno fatto appena qualche momento fa.

Meeting sincronizzato! Sai che posso anche trovare e prenotare una sala conferenze?

• Suggerite proattivamente le cose da fare. Per esempio, gli utenti sanno che il robot ricorda loro le riunioni, ma non sanno che il robot può anche ordinare il cibo:

Ping! C’è un meeting tra un’ora. Vuoi che ordini il pranzo per tre persone?

Se il robot inizia la conversazione, assicuratevi che dia suggerimenti rilevanti e utili. Altrimenti, state solo facendo spamming. E, ovviamente, rendete sempre semplice per gli utenti fare l’opt out.

Imbrogliate ogni volta che potete#section4

È facile presumere che il nostro robot stia operando all’interno di una piattaforma puramente di messaging o voce, ma è sempre meno così: Amazon Echo è controllato dalla voce, ma ha una app partner. WeChat e Kik hanno dei browser built-in. HipChat permette le card personalizzate e una sidebar iframe. Facebook e Telegram hanno menu di selezione. Slackbot inserisce deep link nei messaggi (e sospetto che questa tecnologia sarà sempre più a disposizione).

Slackbot usa i deep links per facilitare le azioni.

Con tutti i vantaggi di un’interfaccia conversational, alcuni discorsi (come le selezioni multiple, il browsing di un documento e la ricerca su una mappa) vengono eseguite meglio con un dispositivo di puntamento e con pulsanti da cliccare. Non c’è bisogno di insistere su un’interfaccia puramente conversational se la vostra piattaforma vi fornisce un toolbox più vario. Quando il flusso che presentate al vostro utente si riduce ad una specifica azione, un semplice pulsante può funzionare meglio della digitazione di un’intera riga di testo.

Telegram usa i pulsanti pop-up per la discovery e per gli shortcuts.

Queste capacità stanno cambiando rapidamente, quindi siate pronti ad adattarvi in fretta.

E adesso, pedaliamo!#section5

Man mano che gli utenti acquisiscono familiarità con i chat robot, si formeranno delle aspettative riguardo al modo in cui queste cose dovrebbero funzionare e comportarsi. (Tra l’altro, potreste aver notato che faccio riferimento al mio robot come ad un “lui”. Abbiamo deliberatamente assegnato un genere al nostro robot per far sì che sembrasse più umano e più semplice da relazionarcisi. Ma rendere maschio il nostro robot ha anche permesso al nostro team di sovvertire lo stereotipo comune dell’assegnazione di nomi femminili ai robot che hanno ruoli di supporto).

Il libro definitivo sul conversational design deve ancora essere scritto. Vedremo le best practices per progettare conversazioni formarsi e disfarsi e riformarsi. Questa è la nostra occasione come designer per influenzare l’aspetto della nostra relazione con queste macchine. Diamo forma ai nostri tool e successivamente loro plasmeranno noi.

Nella seconda parte di questo articolo, esamineremo più approfonditamente i pattern GUI di base e discuteremo del modo migliore per replicarli in forma conversational.