class: center, middle # La grammatica della user experience Una grammatica per tradurre la ricerca in requisiti --- ## Chi sono * PhD in Scienze Cognitive * Freelance UX designer: Architettura dell'informazione, Interaction Design, Usabilità * Professore a contratto in Interazione Uomo Computer, Università degli Studi di Trento @sweetdreamerit --- background-image: url(assets/img/visurnet_parte.png) background-position: center; background-repeat: no-repeat; background-size: contain; ##   --- background-image: url(assets/img/facebook_censored.png) background-position: center; background-repeat: no-repeat; background-size: contain; ##   --- ## Problemi della pagina * troppe cose * manca uno stile uniforme * non è chiara (manca) la struttura ??? Cosa si intende, secondo voi, per struttura? --- ## Compito: ricordare i pezzi di una scacchiera  ??? To answer to this question, we should look at what the experts do. I will briefly report a classical experiment carried out by Herbert Simon: some chess players were required to see a chess board with many pieces for few seconds, memorize it and recall it. --- ## Performance, una vera partita  ??? The graph shows the performance of non experts, experts and masters. As you can see, masters have a stellar performance even if the board is presented for just few seconds. --- ## Performance, posizioni casuali  ??? Interestingly, when the participants are asked to memorize a board where the pieces are randomly distributed, the advantage of the masters mostly disappears. But how can the experts overcome the bottleneck? --- ### Non esperti Memoria di lavoro, processo seriale, attentivo ### Esperti \- memoria di lavoro + aree visive della corteccia temporale ### Super esperti aree temporali + memoria a lungo termine la memoria di lavoro viene usata per monitorare il compito processo parallelo, pre-attentivo ??? Non experts need to rely only on the **working memory** to carry out complex tasks; the process is serial and effortfull Intermediates delegate part of the effort to the **visual areas** of the temporal cortex; the activation of the working memory decreases; Experts recognize the patterns and recruit also the **long term memory**; the working memory retains fewer monitoring tasks; the process is mainly parallel, pre-attentive --- ## Chunk Insieme di elementi con forti associazioni fra di loro, e associazioni deboli con gli elementi degli altri chunk ??? A chunk is a collection of elements having strong associations with one another, and weak associations with elements of other chunks. Experts can rely on the visual cortex and on the long term memory because they learned to identify and memorize regular patterns: chunks and templates. - The visual cortex becomes able to identify the chunks - The long term memory recognizes the chuncks The long term memory becomes the virtual ram of the working memory. ---  ---  ---  --- class: center, middle # Cos'è una struttura? --- class: middle ##   Ante hunc enim verborum **quasi structura** et quaedam ad numerum conclusio nulla erat; aut, si quando erat, non apparebat eam dedita opera esse quaesitam—quae forsitan laus sit —; verum tamen natura magis tum casuque nonnunquam, quam aut ratione aliqua aut ulla observatione fiebat. Marco Tullio Cicero --- class: middle ##   Prima di lui infatti non vi era né quella che si potrebbe chiamare una strutturazione delle parole, né una chiusa ritmica delle frasi; o, se talvolta la si poteva trovare, non appariva ricercata di proposito - il che potrebbe forse essere un pregio; tuttavia spesso nasceva più da un istinto naturale e dal caso, che da un metodo scientifico o dal rispetto di un qualche principio. --- class: middle ##   Before him, the artificial structure and harmony of language was unknown;- or if there are any traces of it to be discovered, they appear to have been made without design; which, perhaps, will be thought a beauty:- but whatever it may be deemed, it was, in the present case, the effect rather of native genius, or of accident, than of art and observation --- class: middle ##   Ante hunc enim **verborum** quasi **structura** et quaedam ad numerum conclusio nulla erat; aut, si quando erat, non apparebat eam **dedita opera** esse quaesitam—quae forsitan laus sit —; verum tamen natura magis tum casuque nonnunquam, quam aut **ratione** aliqua aut ulla **observatione** fiebat. ??? La progettazione è una *dedita opera* basata non sul genio individuale e sul caso, ma sul metodo sitematico ed empirico, finalizzata a far emergere la struttura in modo armonioso. --- # Definizione di struttura Insieme di elementi legati da delle relazioni. La tipologia di elementi e le relazioni sono soggetti ad un insieme di regole, che costituisce la grammatica di quella tipologia di struttura. Le tipologie di elementi di una struttura costituiscono i generi, che possono essere distinti in classi. --- class: center, middle # Cos'è una grammatica? ??? Possiamo identificare tre differenti significati del termine grammatica: il significato *classico*, il significato formale, il significato usato nelle grammatiche cognitive. --- ## Definizione classica Insieme di **regole** di un linguaggio naturale, a cui chi parla - e scrive - si deve uniformare [Online Etymology Dictionary](http://www.etymonline.com/index.php?term=grammar) --- ## Le parti della lingua Categorie lessicali - nomi - verbi - aggettivi - avverbi - pronomi - preposizioni - congiunzioni - numerali - articoli - determinanti ??? La sintassi identifica differenti tipologie di vocaboli (di termini lessicali) con proprietà grammaticali simili: nomi, verbi, aggettivi, avverbi, pronomi, preposizioni, congiunzioni, numerali, articoli e determinanti. [Parti del discorso - Wikipedia](https://it.wikipedia.org/wiki/Parti_del_discorso) --- ## Grammatiche formali Insieme di regole **esplicite** finalizzate a generare delle stringhe in un linguaggio formale. Esempio: la sintassi del linguaggio Java Contesto più astratto, linguaggi artificiali. ??? [Grammatica forma - Wikipedia](https://it.wikipedia.org/wiki/Grammatica_formale) [Java Syntax](http://docs.oracle.com/javase/specs/jls/se7/html/jls-18.html) Le grammatiche formali spostano la concezione di grammatica (e di linguaggio) verso un concetto più astratto, meno contestuale. Le grammatiche formali si riferiscono non solo ai linguaggi naturali, ma anche ai linguaggi artificiali. ## Le interfacce sono linguaggi HTML è un linguaggio, con una sua grammatica (XHTML ha una grammatica formale stretta). Possiamo vedere le interfacce come linguaggi? --- ## La grammatica della mente > Pensiero e discorso dunque sono la stessa cosa: solo che l’uno è il dialogo che avviene all’interno dell’anima con se stessa senza voce, ed è proprio questo che viene chiamato pensiero. > Sofista - Platone ??? Secondo la linguistica cognitiva, i linguaggi naturali riflettono la struttura mentale, e dunque ci aiutano a capire come la mente funziona. Una grammatica delle interfacce, che prenda spunto dalle grammatiche classiche (e dal linguaggio naturale), potrebbe dunque essere implicitamente compatibile con l'architettura cognitiva degli utenti. Pertanto, una simile grammatica risulterebbe centrata sugli utenti. --- ## Linguistica cognitiva Il linguaggio: * legato al significato * è radicato nell'esperienza * riflette l'esperienza umana * riflette la struttura cognitiva * modella la nostra visione del mondo ??? Le grammatiche cognitive sono state sviluppate all'interno del paradigma di ricerca della linguistica cognitiva. ### Grammatica cognitiva * la grammatica cognitiva mappa un linguaggio sulla concettualizzazione della mente. * la grammatica cognitiva ha una natura esperienziale --- ## Il linguaggio * rappresenta il modello concettuale di un individuo * ha una struttura * ha un insieme di regole (più o meno formali) * è possibile tradurre un testo da un linguaggio ad un altro ??? La struttura è gerarchica, ma non solo --- ## Le regole permettono di: * creare una struttura * modificare - trasformare una struttura * mappare una struttura su di un'altra (tradurre) * interpretare, leggere una struttura --- class: center, middle # Strutture, grammatiche e UX ??? perché ha senso parlare di strutture in ux? La visione d'insieme: ux, motivazioni, cognizione, emozioni. Le strutture alla base della cognizione, ma non solo --- ## UX - definizioni to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance Nielsen-Norman Group ... user's internal state (predispositions, expectations, needs, motivation, mood, etc.) ... the designed system ... the context Hassenzahl, Tractinsky (2006) The entire set of affects Desmet, Hekkert (2007) --- ## 3 dimensioni psicologiche - Motivazionale - Cognitiva - Affettiva --- # L'approccio evoluzionista  --- ## Stati ed eventi Le persone percepiscono - e si riferiscono - principalmente a stati del mondo, ed eventi. Stati ed eventi sono percepiti (segmentati) in termini di contesti (**dove**), oggetti (**cosa**), agenti (**chi**), su di un asse temporale (**quando**). --- # Gli eventi Un evento è un segmento temporale in un dato luogo che viene percepito da un osservatore, e che ha un inizio e una fine Caratteristiche: * struttura (temporale, causale, gerarchica) * stato iniziale, stato finale * cambiamenti parzialmente prevedibili * classi di oggetti coinvolti ??? Gli eventi hanno una complessità interna e una struttura causale Richiedono uno stato iniziale, uno stato finale e dei cambiamenti fra l'inizio e la fine. Generalmente, questi cambiamenti sono - almeno in parte - prevedibili. Soprattutto, sono in parte prevedibili le classi di oggetti che prendono parte a questi eventi. --- # Le attività Le attività sono eventi che hanno uno o più agenti e uno o più scopi. Componenti (activity theory): - gli agenti - i motivi / gli scopi - la comunità (e dunque altri agenti, possibilmente con ruoli diversi) - i mezzi (gli strumenti, gli artefatti, i servizi) - le regole (regole normative o regole informali) - il contesto culturale - un piano (spesso *situato*) --- # Le esperienze Una esperienza **prototipica** è la rappresentazione soggettiva, conscia ed intenzionale di un evento episodico autobiografico: Può essere - innescata da una motivazione - il risultato di un processo decisionale, una scelta - immaginata - pianificata - ricordata - valutata: prima, durante e dopo - appresa - diventare un'abitudine --- class: center, middle # I concetti --- ## Concettualizzazione Processo di astrazione delle esperienze. Vengono sviluppati dei concetti relativi agli **oggetti**, agli **agenti**, ai **contesti**, ai **comportamenti** incontrati durante le esperienze, nonché alle **esperienze** stesse. ??? Gli individui sviluppano delle concettualizzazioni relative a quelle esperienze - e a quegli elementi delle esperienze - che sono rilevanti e che tendono a ripetersi nella loro struttura. La loro struttura interna ha la forma di schemi i concetti complessi (e astratti) vengono costituiti ricorsivamente, creando schemi composti da concetti più semplici e concreti, in maniera gerarchica. --- ## Concettualizzazione: processo - il riconoscimento di pattern, regolarità, strutture - la formazione di tassonomie e reti semantiche - la costruzione di concetti astratti, attravero analogie, metafore, e composizione meronomica da concetti più concreti - la strutturazione di uno spazio concettuale, multidimensionale --- ## Le componenti dei concetti - proprietà - attributi del concetto - relazioni con altri concetti - regole e comportamenti associabili al concetto - esemplari e prototipi del concetto ??? ## Gli attributi dei concetti Se si chiede alle persone di elencare gli attributi di un concetto, generalmente vengono elencati: * proprietà di superfice * proprietà funzionali * proprietà tassonomiche * proprietà affettive - valutative. Le proprietà funzionali permettono di identificare le affordances di un concetto. Le proprietà di superfice, ad identificare l'oggetto e a constatarne lo stato. --- ## Categorie lessicali e concettualizzazione Il linguaggio umano usa - i verbi (o la loro nominalizzazione) per riferirsi agli eventi e agli scopi - i nomi per riferirsi alle entità e ai concetti - gli aggettivi alle proprietà --- ## La grammatica dell'UX - identificare, attraverso i *protocolli verbali*, le strutture di conoscenza (attività, concetti, schemi) di utenti ed esperti di dominio - mappare le strutture in uno spazio concettuale - disegnare le interfacce corrispondenti a concetti e attività - collaborare a definire basi di dati, processi e funzioni ??? 1. Gli universali dei linguaggi naturali vengono assunti come requisiti per il linguaggio delle interfacce 2. La grammatica costituisce un corpus concettuale ad alto livello di linee guida per IA, UI, ID 3. Si identificano un insieme di regole per tradurre il risultato della ricerca con utenti nella concettualizzazione del dominio ---  ---  --- class: center, middle # Approcci simili --- ## Ooux A design methodology organized around objects rather than "actions" and data rather than logic [Object Oriented UX](http://www.slideshare.net/SophiaVoychehovski/object-oriented-ux-is-the-new-ia/14?src=clipshare)  ??? [Object Oriented UX](http://www.slideshare.net/SophiaVoychehovski/object-oriented-ux-is-the-new-ia/14?src=clipshare) è una metodologia di design focalizzata sull'identificazione di oggetti concettuali. --- ## Activity, Objects, and Features * Focalizzati sull'attività principale del servizio * Identifica gli oggetti (sociali) con cui gli utenti interagiscono per portare a termine l'attività * Identifica l'insieme di proprietà degli oggetti necessarie per portare a termine l'attività [Joshua Porter | End of Business as Usual - Glenn's blog](https://glennas.wordpress.com/tag/joshua-porter/) ??? Determinare l First you determine and research the activity you’re going to support. This helps you identify the social objects within that activity and the actions people take on those social objects. These objects and actions become your feature set. [Joshua Porter](http://bokardo.com/archives/dont-design-for-the-future-design-for-now/) --- ## Atomic design Il design atomico ha un approccio per molti versi simile, adottando la metafora della chimica. I punti fondanti dell'atomic design sono la modularità, e l'utilizzo di un vocabolario di elementi. [Modeling Structured Content - IAS13 workshop](http://www.slideshare.net/reduxd/modeling-structured-content-ias13-workshop) --- ## Progettazione funzionale (Federico Badaloni) - Mappa le funzioni narrative e strutturali di cui hai necessità (in base alla user needs list) - Mappa le classi di cui hai necessità - Definisci Alberatura e Mappe funzionali associando le classi alle funzioni - Crea i wireframe in cui si definiscono i valori da estrarre per ogni elemento della struttura - Realizza la matrice tassonomica (struttura) ??? [Progettare un sito in 10 mosse](https://www.slideshare.net/fedebadaloni/progettare-un-sito-in-10-mosse-41601916) Una funzione per l’intero sito Una funzione per ogni pagina Una funzione per ogni zona di una pagina Definisci le classi necessarie --- class: center, middle # Il metodo --- ## Il processo * intervistare i partecipanti * identificare le strutture di conoscenza * creare un prototipo (coinvolgendo gli stakeholder) * testare il prototipo con nuovi partecipanti * aggiornare struttura e prototipo, ritestare * ripetere finché i feedback di utenti e stakeholder sono positivi --- ## L'interpretazione (1) * se il partecipante usa un sostantivo, potrebbe essere un genere, una categoria, un concetto o un'istanza * se usa la forma plurale di un sostantivo, può riferirsi ad un insieme o una lista di oggetti * quando usa un verbo, potrebbe essere una attività * le attività sono spesso nominalizzate (registrazione = registrare, pagamento = pagare, invio = inviare); vanno considerati attività anche quei nomi che sono la nominalizzazione di un verbo --- ## L'interpretazione (2) * la nominalizzazione di un verbo potrebbe essere indizio che quella azione è stata concettualizzata in uno schema * se usa una forma verbale del tipo "il X di Y", è possibile che X sia o un componente o una caratteristica di Y * se usa un aggettivo, potrebbe essere un attributo * se dice *voglio* o *devo* + verbo sono le motivazioni (gli scopi) ??? L'idea alla base della grammatica della ux è quella di riuscire a rintracciare una concettualizzazione implicita nell'analisi testuale dei trascritti ottenuti nella ricerca con utenti. Il processo elementare identifica questi passaggi: --- ## La rappresentazione * ogni concetto è un nodo nella rete semantica dell'ontologia * le relazioni fra concetti vanno rappresentate attraverso degli archi --- ## Il design * Ogni concetto nell'ontologia (ogni nodo) deve avere un template * Ogni oggetto che è istanza di un concetto deve avere una pagina * Ogni categoria di una tassonomia deve avere una pagina indice * Ad ogni arco della concettualizzazione deve corrispondere un link fra le corrispondenti istanze ??? I generi (i concetti) possono costituire la base per la navigazione --- ## Un esempio: slack <style> .metaphor, .noun, .plnoun, .verb, .reify {border: 2px solid; padding:2px; margin:2px;} .metaphor {border-color: #8f8; } .noun { border-color: #00a; } .plnoun { border-color: #00a; background-color: #ccf;} .verb { border-color: #a00; } .reify { border-color: #a00; background-color: #fcc; } .analysis { line-height: 160%;} </style> <div class="analysis"> un tool di collaborazione, funziona cross-device (pc, telefono, tablet) e <span class="metaphor">ricorda in parte IRC</span>, ma funziona per <span class="noun">progetto</span>/<span class="noun">azienda</span>. <span class="verb">Apri</span> un <span class="noun">profilo</span> slack, <span class="verb">inviti</span> le <span class="plnoun">persone</span> che fanno parte del <span class="noun">progetto</span>, poi <span class="verb">apri</span> tot <span class="plnoun">canali</span> tematici e ognuno <span class="decision">decide</span> a quali <span class="verb">partecipare</span>. A quel punto funziona <span class="metaphor">come una chat</span>, con <span class="reify">condivisione</span> di <span class="plnoun">file</span>, <span class="plnoun">immagini</span> ecc... Cosa particolare: puoi <span class="verb">integrare</span> dei <span class="plnoun">servizi</span> esterni, via webhook. Così quando fai, per esempio, una <span class="verb">push</span> su una <span class="noun">repo di github</span>, può <span class="verb">arrivare</span> un <span class="noun">messaggio</span> ai <span class="plnoun">partecipanti</span> a un <span class="noun">canale</span>. </div> ??? <div class="analysis"> A collaboration tool, cross-device, <span class="metaphor">it remembers IRC</span>, for a <span class="noun">project</span> or a <span class="noun">company</span>. You <span class="verb">open</span> a slack <span class="noun">profile</span>, you <span class="verb">invite</span> the <span class="plnoun">people</span> that are part of the <span class="noun">project</span>, then you <span class="verb">open</span> some thematic <span class="plnoun">channels</span>, and anybody <span class="decision">decide</span> to which <span class="verb">partecipate</span>. It <span class="verb">works</span> <span class="metaphor">like a chat</span>, with the <span class="reify">sharing</span> of <span class="plnoun">files</span>, <span class="plnoun">images</span> and so on. ... you can <span class="verb">integrate</span> some <span class="">external</span> <span class="plnoun">services</span>, via webhook. Doing so, if for example you <span class="verb">push</span> a <span class="noun">github repo</span>, <span class="pverb">it comes</span> a <span class="noun">message</span> to the <span class="plnoun">participants</span> of a <span class="noun">channel</span>. </div> --- ## Slack: la concettualizzazione ### Sostantivi -> concetti * progetto * profilo - persona * canale * file * immagini * servizi ### Verbi -> attività / azioni * aprire un profilo * invitare delle persone * aprire uno o più canali * partecipare ad uno o più canali * condividere file e immagini * integrare --- background-image: url(http://www.hyperlabs.net/ergonomia/presentazioni/bs15/assets/slack.png) background-position: center; background-repeat: no-repeat; background-size: contain; class: bianco ## Slack: la rete semantica --- ## Esempio: conferenza 9 partecipanti intervistati via chat. Domanda: cosa vi aspettate nel sito di una conferenza? --- ## Termini usati * relatori / speaker (7) - curriculum (1) - titoli (1) * registrazione (online) (7) - acquistare i biglietti * le date importanti (6) - le deadline * la sede (5) - come arrivare (3) * il programma (5) * i costi (4) * le sottomissioni (3) - le procedure - mandare una proposta * i contatti * i temi * gli interventi (2) - gli abstract (1) * le affiliazioni (2) (conferenze accademiche) --- background-image: url(assets/img/conferenza.svg) background-position: center; background-repeat: no-repeat; background-size: contain; ## Conferenza: struttura ??? [A prototipe](examples/conference.html) vs [a real example](http://www.bettersoftware.it/) --- ## Esercizio Leggere le due interviste. Identificare: - sostantivi -> concetti - verbi -> attività - gli agenti - i motivi / gli scopi - la comunità (e dunque altri agenti, possibilmente con ruoli diversi) - il contesto culturale - le regole (regole normative o regole informali) - la pianificazione / la sua struttura gerarchica - i mezzi (gli strumenti, gli artefatti) --- ## Esercizio (2) Creare un grafo dell'ontologia --- class: center, middle # Le relazioni tematiche --- ## Relazioni fra sostantivi I sostantivi possono essere in rapporto fra loro in base a tre tipologie di relazioni - relazione tassonomica: il cane e il cavallo sono mammiferi - relazione integrativa: la *combinazione* di due concetti in un'entità: la torta di mele - relazione tematica: si riferisce al legame fra concetti che tendono a co-occorrere, nel tempo e nello spazio: cappuccino e brioche ??? i concetti tematicamente relati spesso giocano un ruolo complementare in determinati eventi o azioni: la serratura e la chiave --- ## Verbi e relazioni tematiche La relazione fra verbi e sostantivi è generalmente tematica - il/la <u>      </u> ha arrestato il/la <u>      </u> - il/la <u>      </u> ha soccorso il/la <u>      </u> - ieri sera abbiamo mangiato il/la <u>      </u> ??? I ruoli tematici dei verbi sono concetti che si sono formati attraverso l'esperienza (o l'apprendimento), in cui le persone hanno imparato chi e cosa gioca uno specifico ruolo in una specifica situazione. ### Adeguatezza tematica Nell'interpretare una frase, gli ascoltatori si basano sull'adeguatezza tematica (thematic fit): la plausibilità che un sostantivo sia l'argomento di un particolare verbo. La comprensione si avvale della conoscenza del contesto e dello schema degli eventi. I verbi offrono un accesso privegiato alla struttura situazionale tipica (lo schema) che corrisponde all'evento o alla situazione a cui si riferisce. A questo punto la distinzione fra conoscenza sintattica e conoscenza semantica diventa più sfumata --- ## Implicazioni per l'IA La distinzione fra relazioni tassonomiche, integrative e tematiche può aiutarci a definire l'architettura informativa. --- # Facebook e i verbi --- background-image: url(assets/img/Facebook_doing.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- ## Guardando --- background-image: url(assets/img/Facebook_watching.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- ## Ascoltando --- background-image: url(assets/img/Facebook_listening.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- ## Leggendo --- background-image: url(assets/img/Facebook_reading.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- ## Viaggiando --- background-image: url(assets/img/Facebook_traveling.png) background-position: center; background-repeat: no-repeat; background-size: contain; --- class: center, middle ## I verbi dell'interaction design --- ## Esercizio Quali sono i verbi più comuni nell'interaction design? ??? Le grammatiche naturali distinguono fra classi di vocaboli aperte e chiuse. Sostantivi, verbi e aggettivi sono classi aperte, le altre classi chiuse. In linea di principio, dunque, non ha senso immaginare una lista finita di verbi e oggetti dell'interaction design. In realtà, il numero di verbi che ricorre più frequentemente fra le applicazioni più popolari è abbastanza circoscritto. Una possibile lista potrebbe essere la seguente. --- * Registrazione * Accesso / login * Ricerca * Check [?] * Compare * Scegliere * Decidere * Leggere, guardare, ascoltare (consumare un prodotto digitale online) * Creare * Scrivere * Aggiornare * Cancellare * Acquistare / comperare * Scaricare / Download * Caricare / Upload * Condividere * Mettere like * Commentare * Dare delle informazioni --- ## Conclusioni - Finalità della ux research: identificare motivazioni e strutture implicite di conoscenza - Le strutture linguistiche ci aiutano a far emergere le strutture di conoscenza implicite - Mappare le strutture principali: attività e concetti - UI / IA / ID: prototipare le interfacce partendo dalle strutture - sviluppatori: progettare basi di dati e funzionalità partendo dalle strutture ??? --- ## Grazie ### Domande? ### Contatti bussolon@gmail.com - [@sweetdreamerit](https://twitter.com/sweetdreamerit) - [linkedin.com/in/bussolon](http://www.linkedin.com/in/bussolon)