Il ruolo della fluenza nella user experience

class: center, middle

![Esperienza fa rima con fluenza](https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/titolo.jpg)

@sweetdreamerit

---

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

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/labirinto_4_3.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Usabilità

???

Secondo la definizione data dalla norma ISO 9241, l'usabilità è il "grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso."

Maurizio Boscarol: [Che cos'è l'usabilità dei siti web | Usabile.it](http://www.usabile.it/012000.htm)

Daniele Ziggiotto: [Definizione I.S.O. di usabilità.](http://www.hyperlabs.net/ergonomia/ziggiotto/capitolo2/04.html)

[Easy! | My Staples Easy Button.. it doesn't work.it does lit… | Flickr](https://www.flickr.com/photos/r_a_z_e/498818720)

[L'enfant dans le labyrinthe (la FIAC 2011 au jardin des Tu… | Flickr](https://www.flickr.com/photos/dalbera/6275333217)

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/finish_4_3.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;

## Efficacia

???

il grado di raggiungimento di un obiettivo.

Obiettivi prefissati, accuratezza, completezza

[Finish Line | The finish line for the Sport Relief Mile. it … | Flickr](https://www.flickr.com/photos/jayneandd/4450623309)

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/impermanenza.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Efficienza

???

Efficienza = efficacia vs utilizzo di risorse

Sforzo per portare a termine un compito

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/happy_4_3.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Soddisfazione

???

Valutazione soggettiva

Componente cognitiva: rapporto fra aspettative e risultati, e fra efficacia ed efficienza

Componente affettiva: rapporto fra emozioni positive, neutrali e negative

Fattore decisivo per quei prodotti il cui uso è volontario.

[Happy | Adrian Berg | Flickr](https://www.flickr.com/photos/aoberg/9062434243/)

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/equilibrio_4_3.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco, bottom

## Economia dell'esperienza

???

Possiamo vedere l'usabilità come un rapporto fra benefici e costi.

I benefici sono legati alla capacità del prodotto, o servizio, di soddisfare scopi e bisogni degli utenti. Ma i costi?

[balance | Börkur Sigurbjörnsson | Flickr](https://www.flickr.com/photos/borkurdotnet/6413690281)

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/costi_esperienza.svg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;

## I costi dell'esperienza

???

- economici
- tempo
- apprendimento
- attenzione
- risorse cognitive

[Weights | Jamesthe1st | Flickr](https://www.flickr.com/photos/jamesthefirst/6945257500/)

---

## Ridefinizione di usabilità

Un prodotto o servizio è usabile se

- soddisfa i **bisogni** e gli **scopi** degli utenti
- **minimizza i costi** economici, temporali, di apprendimento, di attenzione, e di risorse cognitive
- **massimizza** la soddisfazione e la piacevolezza d'uso

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/information_overload.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Sovraccarico informativo

???

Il modo più diretto per minimizzare tempo, apprendimento, attenzione e cognizione è diminuire il numero di informazioni

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/lumaca_2.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Thinking fast and slow

???

Un modo più sofisticato per diminuire il carico cognitivo è quello di non obbligare l'utente ad usare il Sistema II

Thinking fast and slow - Kahneman

Sistema 2 è razionale ma lento

Sistema 1 veloce ma non razionale

---

## Sistema I vs sistema II

![Sistema 1 e 2](https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/sistema_1_2.svg)

???

parallelo Vs sequenziale

automatico Vs volontario

inconsapevole Vs consapevole

pre attentivo Vs attenzione

funzioni esecutive Vs altre

le decisioni portano a scelte non parallele (di qua o di là)

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/giustizia_luna_4_3.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;

## Fluenza percepita e processi di giudizio

???

Come facciamo a giudicare se Luigi è più simpatico di Mario?

Come facciamo a giudicare chi è più degno di fiducia? Più onesto? Più intelligente?

Utilizzo di indizi, di proxy cognitivi

La fluenza di processo (percettiva, cognitiva) influenza il giudizio.

[Lunar Justice | Moon over the Old Bailey. | Steve Calcott | Flickr](https://www.flickr.com/photos/stevec77/107868154)

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/klimber.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco, bottom

## Fluenza e valutazione

???

Quando devono affrontare un compito, le persone fanno una valutazione implicita della difficoltà a portarlo a termine.

La fluenza è questa valutazione.

La fluenza cognitiva - la difficoltà percepita ad affrontare un compito cognitivo - influenza il processo di giudizio delle persone su dimensioni fra loro molto diverse.

Una elevata fluenza aumenta la credibilità di un messaggio, il giudizio emozionale, affettivo ed estetico, orienta le preferenze e i processi decisionali, le intenzioni di acquisto e persino la disposizione a raccontarsi.

La fluenza può dunque avere un forte impatto sulla user experience di un prodotto o servizio. Molte delle dimensioni che la ricerca ha dimostrato avere un ruolo sulla fluenza possono essere esplicitamente affrontate nella fase di progettazione e test.

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/esempio_applicazione_2.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;

## Fluenza percettiva

???

La facilità a percepire le caratteristiche fisiche di uno stimolo

---

## Contrasto figura sfondo

![contrasto](https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/contrasto.png)

???

Il contrasto fra la figura (o il testo) e lo sfondo correla con la fluenza

Vi sono esperimenti che dimostrano che vi è una correlazione fra contrasto e giudizio di verità

Fluenza e accessibilità

[WebAIM: Color Contrast Checker](http://webaim.org/resources/contrastchecker/)

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/bugiardino.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Font: dimensione

???

La dimensione dei font influisce sulla leggibilità e sulla fluenza

Dimensioni dei font che vanno dai 14 ai 18 pt migliorano la leggibilità, in termini di

- velocità di fissazione (eye tracking)
- comprensione dei testi (18pt è il migliore)
- valutazione soggettiva di leggibilità (14, 18pt)
- valutazione soggettiva di comprensione

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/olivetti.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Font: typeface

???

Typeface:

- secondo alcune ricerce i font sans serif sono più leggibili, ma la differenza non sembra eclatante
- l'uso di *italic* diminuisce la leggibilità, e va dunque usato con parsimonia
- con Verdana e Arial non si sbaglia.

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/density.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Pixel density

???

L'alta densità diminuisce la fatica cognitiva, e migliora la soddisfazione

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/eiffel.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Familiarità

???

Effetto di mera esposizione: le cose che ci sono famigliari, o che abbiamo appena visto, aumentano la fluenza, e sono giudicate più positivamente.

Brand riconoscibili

Consistenza esterna e interna: pattern e metafore note sono più fluenti

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/scrabble.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Fluenza linguistica

???

- fluenza lessicale
- fluenza sintattica
- fluenza semantica

[Scrabble! | Hands down my favourite board game | Elea Chang | Flickr](https://www.flickr.com/photos/elea/3715533561)

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/devoto_oli.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Fluenza lessicale

???

Utilizzare parole comuni aumenta la fluenza

L'autore viene giudicato più intelligente

Meglio usare parole facili da pronunciare

La rima aumenta la fluenza: esperienza fa rima con fluenza

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/sintassi.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Fluenza sintattica

???

La sintassi è l'insieme di regole, principi e processi che governano la struttura delle frasi e l'ordine delle parole.

L'uso di costruzioni sintattiche semplici è più fluente

Per misurare la fluenza, anche indici piuttosto semplici come il Flesch sono molto affidabili: lunghezza delle parole e lunghezza delle frasi.

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/Magritte.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;

## Fluenza semantica

???

Gli elementi con una radice semantica comune sono più fluenti, in quanto vi è un priming semantico

Ripetizione

Uso di sinonimi

Analogie concettuali rendono l'informazione in arrivo più facile da comprendere

---

## Fired up, ready to go!

It just goes to show you, how one voice can change a room.  
And if it can change a room, it can change a city.  
And if it can change a city, it can change a state.  
And if it can change a state, it can change a nation.  
And if it can change a nation, it can change the world.

???

Fluenza lessicale: tutte parole comuni

Fluenza sintattica: nome verbo complemento - se nome verbo complemento allora nome verbo complemento

Fluenza sintattica: ripetizione della struttura

Fluenza semantica: change

Fluenza semantica: room room, city city ...

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/immagina.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Immaginabilità

???

L'immaginabilità è la facilità con cui una persona riesce a generare un modello mentale visivo di un oggetto o di un evento

Le scene più facili da immaginare sono valutate come più probabili e più credibili

---

## Carico informativo

![informazione](https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/grafico2.svg)

???

U rovesciata: troppa informazione diminuisce la fluenza

---

![Complessità](https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/complexity.jpg)

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/confusione.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Complessità

???

Definizione di complessità

La quantità, la varietà e la diversità in un pattern di stimoli (Berlyne 1960).

* Cresce all'aumentare degli elementi
* Cresce se gli elementi sono fra loro dissimili
* Decresce se gli elementi possono essere raggruppati

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/ordine.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Architettura dell'informazione

???

Fine dell'architettura dell'informazione: diminuire la complessità

- Ponderare il numero di elementi
- Limitarne la varietà
- Raggruppare elementi simili

Leggi di gestalt: somiglianza, raggruppamento chiusura

Le leggi della gestalt permettono di caricare sul sistema 1 computazioni altrimenti a carico del sistema 2

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/prototipi_facce_2.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Tipicità

???

I membri prototipici di una categoria sono più fluenti

I membri prototipici hanno un giudizio estetico positivo.

Tolstoj: I belli si assomigliano tutti, mentre i brutti sono brutti ognuno a modo suo

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/decisione.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: bianco

## Fluenza decisionale

???

Aiutare l'utente a decidere aumenta la fluenza e diminuisce il rischio di rinvio dell'acquisto

Choosability

Esperimento delle marmellate: meno scelta, più vendite

3 tipi di decisori

[Difficult choice. | In Paris, on the way up to "Sacre Coeur"… | Flickr](https://www.flickr.com/photos/san_drino/6869126236)

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/estetica.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: inverso, bottom

## Fluenza, estetica, usabilità

???

Quello che è bello è più usabile

Bellezza classica e bellezza espressiva

Quello che è più fluente è sia più bello che più usabile

---

background-image: url(https://s3.eu-central-1.amazonaws.com/immagini.hyperlabs/2016wudrome/soffione.jpg)
background-position: center;
background-repeat: no-repeat;
background-size: contain;
class: inverso, bottom

## Sostenibilità cognitiva

???

sostenibilità economica, sociale, ambientale

---

## Grazie

### Domande?

### Contatti

bussolon@gmail.com - [@sweetdreamerit](https://twitter.com/sweetdreamerit) - [linkedin.com/in/bussolon](http://www.linkedin.com/in/bussolon)

---

# Credits

- [L'enfant dans le labyrinthe (la FIAC 2011 au jardin des Tu… | Flickr](https://www.flickr.com/photos/dalbera/6275333217)
- [Finish Line | The finish line for the Sport Relief Mile. it … | Flickr](https://www.flickr.com/photos/jayneandd/4450623309)
- [Happy | Adrian Berg | Flickr](https://www.flickr.com/photos/aoberg/9062434243/)
- [balance | Börkur Sigurbjörnsson | Flickr](https://www.flickr.com/photos/borkurdotnet/6413690281)
- [Lunar Justice | Moon over the Old Bailey. | Steve Calcott | Flickr](https://www.flickr.com/photos/stevec77/107868154)
- [Scrabble! | Hands down my favourite board game | Elea Chang | Flickr](https://www.flickr.com/photos/elea/3715533561)
- Magritte
- [Barack Obama: "Fired Up? Ready To Go!" - YouTube](https://www.youtube.com/watch?v=BjA2nUUsGxw)
- [FALLinter | Stuart Williams | Flickr](https://www.flickr.com/photos/viamoi/3283842978)
- [Face Research ⇒ Demos ⇒ Make An Average](http://www.faceresearch.org/demos/average)
- [Difficult choice. | In Paris, on the way up to "Sacre Coeur"… | Flickr](https://www.flickr.com/photos/san_drino/6869126236)