{"id":665,"date":"2016-11-03T12:16:12","date_gmt":"2016-11-03T11:16:12","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/progettare-la-conversational-ui\/"},"modified":"2016-11-03T12:16:12","modified_gmt":"2016-11-03T11:16:12","slug":"progettare-la-conversational-ui","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/progettare-la-conversational-ui\/","title":{"rendered":"Progettare la conversational UI"},"content":{"rendered":"
\n

Questo articolo \u00e8 il secondo di una serie.<\/em> Leggete la prima parte, Tutte chiacchiere e niente pulsanti: la Conversational UI<\/a><\/span><\/p>\n<\/div>\n

\n

Nella prima parte di questo articolo<\/a>, abbiamo parlato dei principi base delle interfacce conversational e perch\u00e9 dovreste prenderne in considerazione la realizzazione per il vostro prodotto. Qui, esamineremo un po’ pi\u00f9 approfonditamente i pattern pi\u00f9 specifici e vedremo in che modo potete tradurli in forma conversational.<\/p>\n

Voglio presentare alcuni casi come esempi per illustrare i problemi della progettazione di una conversational interface ed esaminare alcune delle soluzioni che abbiamo trovato in Meekan<\/a>.<\/p>\n<\/div>\n

\n

Validare l’input<\/h2>\n

Con una GUI tipica, quando si chiede a un utente di fornire pi\u00f9 informazioni (solitamente compilando una form), avete molti modi per essere sicuri di ottenere una risposta pulita ed utile prima di procedere con l’elaborazione di questa. \u00c8 un indirizzo email valido? \u00c8 un numero di telefono? Questo username \u00e8 disponibile?<\/em> Potete restringere l’input perch\u00e9 siano solo numeri o qualcosa da scegliere in una lista predeterminata.<\/p>\n

In una conversazione non c’\u00e8 questo privilegio. La persona con cui state parlando \u00e8 libera di digitare (o dire) qualunque cosa, quindi sta a voi costruire le vostre domande in maniera appropriata ed elaborare le risposte nella maniera pi\u00f9 intelligente possibile.<\/p>\n

Fate il mining della richiesta per le informazioni<\/h3>\n

Supponiamo che il vostro robot stia distribuendo delle t-shirt. Deve chiedere all’utente la taglia e il colore. Se l’utente inizia con \u201cVoglio una maglietta rossa taglia M\u201d, avete gi\u00e0 tutto quello che vi serve bell’e pronto.<\/p>\n

Ma se \u00e8 il robot ad aprire la conversazione, o se l’utente semplicemente dice \u201cPosso avere una maglietta?\u201d, voi dovrete mettere assieme i pezzi mancanti.<\/p>\n

Date suggerimenti<\/h3>\n

Quando \u00e8 possibile, evitate le domande aperte e cercate di dimostrare che tipo di risposta vi interessa. Se l’insieme delle possibili risposte \u00e8 piccolo, elencatele e basta.<\/p>\n

Che taglia di maglietta porti? Abbiamo M, L e XL<\/p><\/blockquote>\n

Come regola generale, dovreste gestire ogni item separatamente. Chiedete la taglia: quando avete la risposta, chiedete del colore. Mischiare vari dettagli in una frase render\u00e0 il parsing corretto pi\u00f9 difficile, quindi ponete domande in modo che vengano incoraggiate risposte specifiche.<\/p>\n

Riconoscere<\/h3>\n

Quando la risposta \u00e8 valida, ripetetela per essere sicuri di averla compresa correttamente e proseguite.<\/p>\n

Capito. Taglia L. E che colore vorresti?<\/p><\/blockquote>\n

Spiegate cosa \u00e8 andato storto#section5<\/a><\/h3>\n

Se l’input non \u00e8 valido, spiegate di nuovo cosa vi aspettavate (rispetto a quello che avete ricevuto). Se possibile, siate smart nel distinguere tra risposte che non capite e risposte che hanno senso ma che non potete accettare.<\/p>\n

\n

E che colore vorresti?<\/p>\n

viola<\/strong><\/p>\n

Sono spiacente, non abbiamo il viola. Abbiamo bianco, grigio, marrone, rosso, arancio, rosa e nero. Che colore vorresti?<\/p>\n

brbrbl<\/strong><\/p>\n

Chiedo scusa, \u201cbrbrbl\u201d? \u00c8 un colore? Abbiamo bianco, grigio, marrone, rosso, arancio, rosa e nero. Che colore vorresti?<\/p>\n

grigio<\/strong><\/p>\n

Cool! Quindi, una t-shirt grigia taglia L!<\/p>\n<\/blockquote>\n

Perdonare \u00e8 divino<\/h3>\n

Ricordate, gli utenti stanno parlando<\/em> con voi, non stanno puntando a cose in un elenco. Hanno pi\u00f9 di un modo per dire cosa vogliono. Se chiedete la taglia di una t-shirt, \u201cextra-large\u201d, \u201cXL\u201d o addirittura \u201cla taglia pi\u00f9 grande che avete\u201d possono tutti significare la stessa cosa. \u201cThursday\u201d, \u201cthu\u201d, \u201cthrusday\u201d (s\u00ec, con un errore) ed eventualmente \u201cdomani\u201d potrebbero tutti indicare lo stesso giorno.<\/p>\n<\/div>\n

\n

Cambiare tasks<\/h2>\n

Torniamo per un attimo alla nostra cara vecchia GUI. Un’app tradizionale pu\u00f2 eseguire diverse funzioni, che solitamente sarebbero separate in finestre discrete (o pagine, o schermate). Se ho un calendario, probabilmente mi mostrer\u00e0 tutte le mie riunioni mensili sullo schermo, quando voglio modificarne una, passo ad uno schermo differente e ritorno al precedente schermo quando ho finito.<\/p>\n

Ma una conversazione \u00e8 solo una lunga serie di frasi. Come passate tra varie funzioni? Come sapete su quale task state lavorando al momento? Vediamo come va a finire.<\/p>\n

L’utente inizia un nuovo task:<\/p>\n

Meekan, fissami una riunione del team per domani<\/strong><\/p><\/blockquote>\n

Il robot passa nel suo stato \u201cprogramma una nuova riunione\u201d e comincia a raccogliere le informazioni di cui ha bisogno. Ma succede qualcosa: l’utente non \u00e8 pi\u00f9 interessato a programmare una nuova riunione e vuole invece controllare la sua agenda per gioved\u00ec.<\/p>\n

Meekan, quanti impegni ho gioved\u00ec?<\/strong><\/p><\/blockquote>\n

Questo \u00e8 l’equivalente del premere il pulsante \u201cchiudi\u201d sulla finestra Nuova Riunione o premere Esc sulla tastiera. Abbiamo alcuni modi per gestirlo.<\/p>\n

Resistere al cambiamento<\/h3>\n

Quando il robot capisce che l’utente vuole passare ad un task differente, chiede all’utente di terminare prima il task attuale:<\/p>\n

Abbiamo una riunione attiva in corso. D\u00ec \u201ccancella\u201d se vuoi eliminare la riunione corrente.<\/p><\/blockquote>\n

Tipicamente prendereste questa strada se il task attuale richiedesse molto investimento per la creazione e l’annullamento farebbe perdere tutto quello che \u00e8 stato fatto finora.<\/p>\n

Seguite il flusso<\/h3>\n

Di nuovo, l’utente chiede un cambio di task. Il task corrente non \u00e8 troppo importante quindi il robot si sposta rapidamente nella nuova missione. Quando succede cos\u00ec, \u00e8 importante dire all’utente cosa sta succedendo: se state eliminando il task attuale e vi state spostando su uno nuovo.<\/p>\n

In questo caso, il robot si aspetta che l’utente confermi la presenza ad una riunione imminente, ma l’utente sta invece iniziando un nuovo e scorrelato meeting:<\/p>\n

\n

Chris ti ha invitato alla riunione per il lancio di progetto venerd\u00ec alle 10am. Vuoi che Accetti o Declini?<\/p>\n

Pianifica un nuovo meeting per domani con @jesse<\/strong><\/p>\n

Okay, salto la conferma per ora.<\/p>\n

Sto confrontando i vostri calendari per un meeting domani (\u2026)<\/p>\n<\/blockquote>\n<\/div>\n

\n

Tornare indietro<\/h2>\n

Allora, abbiamo annullato il task A a favore del nuovo task B. Adesso che B \u00e8 finito, dobbiamo tornare di nuovo al task A?<\/p>\n

In Meekan, abbiamo scoperto che tornare al task precedente sarebbe il modo corretto e smart di agire, ma spesso causa confusione (per esempio, l’utente non si \u00e8 reso conto che si \u00e8 tornati al task A e ha cercato di iniziarne uno da zero). Se decidete di tornare indietro, la chiave \u00e8 di comunicarlo in maniera appropriata. In questo modo, l’utente sa cosa \u00e8 appena successo e le aspettative da entrambe le parti della conversazione sono allineate.<\/p>\n

Tornando al nostro esempio della t-shirt, questo avrebbe perfettamente senso:<\/p>\n

\n

Che taglia porti? Abbiamo medium, large, ed extra-large<\/p>\n

large<\/strong><\/p>\n

Capito. Taglia large. E che colore ti piacerebbe?<\/p>\n

anzi, fai extra large<\/strong><\/p>\n

Ok, extra-large. E che colore ti piacerebbe?<\/p>\n<\/blockquote>\n<\/div>\n

\n

Timing out<\/h2>\n

Questo accade frequentemente in una chat. State parlando di qualcosa e poi andate a pranzo o dovete partecipare a un meeting. Quando tornate, non vi ricordate pi\u00f9 che conversazione stavate facendo. Piuttosto frequentemente, il canale \u00e8 pieno di altre persone che parlano di altre cose e quello che stavate dicendo \u00e8 finito nel dimenticatoio.<\/p>\n

Il robot dovrebbe esserne cosciente. Se l’utente inizia qualcosa, sparisce per un intero giorno, ritorna e comincia qualcosa di nuovo, il robot pu\u00f2 tranquillamente presumere che il task di ieri dovrebbe essere terminato.<\/p>\n<\/div>\n

\n

Aspettare input critico<\/h2>\n

A volte avete bisogno di un’informazione senza cui non potete proprio procedere. Magari \u00e8 l’indirizzo email dell’utente che viene richiesto per le operazioni di base del robot. Magari avete bisogno di cancellare prima qualcosa e non potete procedere senza la conferma dell’utente.<\/p>\n

In un ambiente GUI, potete far apparire una finestra modale. Bloccher\u00e0 l’accesso a tutto finch\u00e9 l’utente non risponde a questa domanda: \u201cSei sicuro di voler cancellare tutto?\u201d La finestra rimarr\u00e0 l\u00ec finch\u00e9 l’utente non cliccher\u00e0 \u201cS\u00ec\u201d o \u201cCancella\u201d.<\/p>\n

Replicare questo comportamento in una conversazione richiede che il robot rifiuti di fare qualsiasi cosa finch\u00e9 non ottiene quell’informazione vitale da parte dell’utente. Questo fa partire un loop che pu\u00f2 diventare molto noioso molto in fretta. Assicuratevi di spiegare esattamente di cosa avete bisogno e perch\u00e9 ne avete bisogno. Preparate qualche versione di questa spiegazione, cos\u00ec se l’utente dovesse cercare di evitarlo pi\u00f9 e pi\u00f9 volte, il robot non diventi ripetitivo (con l’effetto di peggiorare ancora di pi\u00f9 la situazione).<\/p>\n

\n

Per fare il mio lavoro, devo accedere al tuo calendario. Segui questo link per collegare il tuo calendario.<\/p>\n

Programma una nuova riunione domani<\/strong><\/p>\n

Devi davvero collegare il tuo calendario qui per godere dei miei superpoteri di scheduling.<\/p>\n

Ho impegni domani?<\/strong><\/p>\n

Non vedo l’ora di cominciare a lavorare sui tuoi programmi! Per favore, collega il tuo calendario cos\u00ec posso fare le mie magie.<\/p>\n<\/blockquote>\n

Non si tratta di una situazione ideale: pensate attentamente se davvero non potete proseguire finch\u00e9 non avete quella particolare informazione. Se in qualche modo \u00e8 possibile, fate una stima ragionata e procedete o almeno permettete delle funzionalit\u00e0 limitate e chiedete di nuovo quell’informazione quando ne avete assoluto bisogno.<\/p>\n<\/div>\n

\n

Scegliere da una lista#section13<\/a><\/h2>\n

A seconda del lavoro del vostro robot, potreste alla fine raggiungere un punto in cui l’utente deve scegliere da una lista. Ricordate: nessun menu drop-down, nessuna combo box, nessun radio button. Se avete una lista di item e avete bisogno che l’utente ne selezioni uno o pi\u00f9, dovete dare ad ogni item un nome o un numero unico cos\u00ec che gli utenti possano dire quale opzione preferiscono.<\/p>\n

\n

Meekan, cancella quel meeting che ho domani<\/strong><\/p>\n

Hai 3 meeting domani, quale vuoi che cancelli?<\/p>\n

(1) Lancio progetto alle 10 am
(2) Team stand-up alle 11 am
(3) 1-on-1 con Jake alle 2:30 pm<\/p>\n

Cancella 3<\/strong><\/p>\n

Ok, sto cancellando \u201c1-on-1 con Jake\u201d domani. Invio una notifica a Jake a questo riguardo.<\/p>\n<\/blockquote>\n

Assegnare un numero ai meeting sulla lista d\u00e0 agli utenti un modo semplice per far riferimento ad un item su cui vogliono concentrarsi.<\/p>\n<\/div>\n

\n

Cosa c’\u00e8 dopo?#section14<\/a><\/h2>\n

Non ci sono ancora regole: dobbiamo crearcele noi. Diciamo a tutti cosa funziona e cosa non funziona per noi. Condividiamo, parliamo e scriviamo di questo argomento. \u00c8 un momento incredibile per essere un pioniere.<\/p>\n

Spero che i miei esempi vi abbiano fatto venire delle idee. Considerate questo articolo come una piattaforma di lancio per le vostre avventure nella terra dei robot. Adesso andate a creare un robot! (e parlatene con tutti!)<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Nel secondo articolo della serie in due parti, Matty Mariansky volge l’attenzione agli aspetti pratici della progettazione di conversational interfaces. Discute alcuni dei problemi che ha incontrato, insieme al suo team, lungo la strada e offre delle linee guida per tradurre degli specifici design pattern in forma conversational. Queste linee guida sono principi piuttosto vaghi piuttosto che regole strette: le best practices per progettare conversazioni si formeranno, romperanno e riformeranno. \u00c8 un momento esaltante per essere pionieri.<\/p>\n","protected":false},"author":818,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[7,158,86],"tags":[],"coauthors":[489],"class_list":["post-665","article","type-article","status-publish","hentry","category-design","category-numero-146-3-novembre-2016","category-user-experience"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=665"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=665"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}