La grammatica della user experience

class: profilo
<h1>La grammatica della user experience</h1><h2 class="author">Stefano Bussolon</h2>
---

layout: true
<img src="https://www.bussolon.it/assets/logo_250.png" width="50px" height="50px" style="position:absolute;top:5px;left:5px;"/><div id="footer" style="position:fixed; bottom: 0px;left: 0px;height: 40px; padding:5px; width: 100%;display: flex;align-items: center;"></div>
---

# Introduzione

---

## Definizione classica

Nella definizione classica, una grammatica è un 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

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

Secondo le grammatiche formali, una grammatica è un insieme di regole esplicite finalizzate a generare delle stringhe in un linguaggio formale. [Grammatica formale - Wikipedia](https://it.wikipedia.org/wiki/Grammatica_formale)

Un esempio di grammatica formale è la sintassi del linguaggio Java: [Java Syntax](http://docs.oracle.com/javase/specs/jls/se7/html/jls-18.html)

Contesto più astratto - linguaggi artificiali.

---

## Linguistica cognitiva

Il linguaggio:

* è radicato nell'esperienza
* riflette la nostra esperienza umana
* modella la nostra visione del mondo

---

## Caratteristiche del linguaggio

* rappresenta il **modello concettuale** di un individuo, di una cultura
* ha un insieme di **regole**
* le regole possono venire usate sia per **creare** una rappresentazione che per **valutare** se la rappresentazione è corretta
* ha una struttura **gerarchica**: dalle lettere alle sillabe ai morfemi, alle parole, alle frasi, periodi, testi
* è possibile **tradurre** un testo da un linguaggio ad un altro

---

## La grammatica dell'UX

1. Si analizza il linguaggio verbale delle persone per identificarne la concettualizzazione implicita
2. Si crea una ontologia, che viene elaborata con altre tecniche
3. Attraverso alcune regole si **traduce** la concettualizzazione nell'interfaccia

---

## Il modello

![mente, ambiente, linguaggio, artefatti](http://www.bussolon.it/didattica/hci/slide/img/environment.svg)

---

## Approcci simili (1)

### Atomic design

Il design atomico ha un approccio per molti versi simile, adottando la metafora della chimica. I punti fondanti dell'atomic design sono modularità, e l'utilizzo di un vocabolario di elementi.

[Modeling Structured Content - IAS13 workshop](http://www.slideshare.net/reduxd/modeling-structured-content-ias13-workshop)

### Ooux

[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.

---

## Approcci simili (2)

### Activity, Objects, and Features

* Focalizzati sull'attività principale del servizio
* Identifica gli oggetti 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/)

### La progettazione funzionale

La [progettazione funzionale](https://www.slideshare.net/fedebadaloni/progettare-un-sito-in-10-mosse-41601916) di Federico Badaloni

---

## Il processo

![La grammatica](http://www.bussolon.it/didattica/hci/slide/img/languages.svg)

---

## L'interpretazione

La grammatica della user experience:

>	identificare la concettualizzazione implicita delle persone attraverso l'analisi testuale della ricerca con utenti

Le fonti possono essere interviste, questionari a domanda aperta, netnografia.

---

## Il processo

* 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à/azione, e dunque essere legata ad una funzione
* le azioni sono spesso nominalizzate (registrazione = registrare, pagamento = pagare, invio = inviare); dunque vanno considerati azioni/attività anche quei nomi che sono la nominalizzazione di un verbo
* la nominalizzazione di un verbo potrebbe essere indizio che quella azione è stata concettualizzata in uno script
* quando il partecipante usa una forma verbale del tipo "il X di Y", è possibile che X sia o un componente o una caratteristica di Y

---

## Ulteriori suggerimenti

Se il partecipante dice

* "sto cercando", è una questione di trovabilità;
* "mi aspetto di trovare", è *information scent* - *information foraging*;
* "decido se", è una questione di *choosability*;
* "(l'applicazione) mi chiede dei dati", si aspetta di trovare una form.

---

## Un esempio: slack

Se doveste spiegare slack a qualcuno che non lo conosce, come lo descrivereste?

---

## 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>

un tool di collaborazione, funziona cross-device (pc, telefono, tablet) e ricorda in parte IRC, ma funziona per progetto/azienda.
Apri un profilo slack, inviti le persone che fanno parte del progetto, poi apri tot canali tematici e ognuno decide a quali partecipare. A quel punto funziona come una chat, con condivisione di file, immagini ecc...
Cosa particolare: puoi integrare dei servizi esterni, via webhook. Così quando fai, per esempio, una push su una repo di github, può arrivare un messaggio ai partecipanti a un canale.
</div>

<!--

<div class="analysis">
A collaboration tool, cross-device, it remembers IRC, for a project or a company.

You open a slack profile, you invite the people that are part of the project, then you open some thematic channels, and anybody decide to which partecipate. 
It works like a chat, with the sharing of files, images and so on. 
... you can integrate some external services, via webhook. Doing so, if for example you push a github repo, it comes a message to the participants of a channel.

</div>

-->

---

## Slack: i concetti

* project
* profile
* people (a list of individuals)
* channels
* files
* images
* services

---

## Slack: i verbi

* open a profile
* invite the people
* open one or more channels
* partecipate to one or more channels
* share files and images
* integrate

---

## Slack: la rete semantica

![La rete semantica](https://www.bussolon.it/slide/2017/dolomiti/assets/img/slack.svg)

---

## Rappresentazione e design

### Rappresentazione

* ogni concetto è un nodo nella rete semantica dell'ontologia
* le relazioni fra concetti vanno rappresentate attraverso degli archi

### 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

---

# I verbi

---

## Stati ed eventi

Le persone percepiscono - e si riferiscono - principalmente a stati del mondo o eventi (attività, esperienze).

Gli eventi hanno una complessità interna e una struttura causale. Richiedono uno stato iniziale, uno stato finale, uno o più partecipanti, 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 componenti

Il linguaggio umano usa

* i verbi (o la loro nominalizzazione) per riferirsi agli eventi
* i nomi per riferirsi alle entità
* gli aggettivi alle proprietà

---

## Relazioni fra concetti

I concetti 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

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

---

## I verbi dell'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* dei verbi

* Registrazione / registrare
* Accesso / login
* Ricerca / cercare
* 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

* le interfacce sono linguaggi
* il linguaggio è significato
* possiamo identificare una grammatica del significato (sintassi e semantica)
* possiamo identificare la concettualizzazione implicita che le persone hanno di un domino (processo di decodifica)
* possiamo utilizzare un insieme di regole per codificare la concettualizzazione in una interfaccia
* possiamo reiterare il il processo: ricerca, concettualizzazione, design, test, implementazione