Interfacce, UX

Alberto Marinelli

Emmanuel Mazzucchi

UxLab –DigiLab Sapienza

Digilab UX Lab

Interfacce e UX 2

Studi in laboratorio

Lavoriamo con un campione

Task analysis

Card sorting / Tree testing

Eye-tracking test

Contextual

interview

Focus Group

Analytics: il

comportamento di tutti gli

utenti

Visual analytics

Funnel analysis

Online survey

UX research

Interfacce e UX 3

Identifichiamo i pattern di attenzione e valutiamo il visual design

• Dove cade all’inizio lo sguardo dell’utente?

• Quali aree vengono ignorate?

• Dove si soffermano più a lungo?

• La pubblicità viene guardata o ignorata?

Eyetracking study

Identifichiamo problemi di usabilità (efficienza, efficacia,soddisfazione)

Usability Lab Studies (task analysis)

Visual Analytics

Click, scroll, tap, mouse movements

Click Heatmap

Dove cliccano o fanno tap

gli

utenti

Mouse (movement)

Heatmap

Dove si ferma il mouse e co

me si muove nella pagina

Scrollmap

Quanto vengono

scrollate le pagine

Interfacce

user experience

human centered design

Interfacce e UX 7

Interfacce e UX 8

http://www.vox.com/2016/2/26/11120236/bad-doors-human-centered-

design

DoorDonald

NormanNorman door

discoverabilityfeedback

Interfaccia

utenteprogettista

Modello del progettista

Modello dell’utente

Immagine del sistema

Cultura

Dotazione tecnologica

Abilità

Obiettivi

Etc.

Cultura

Dotazione tecnologica

Abilità

Obiettivi

Etc.

Interfacce e UX 9

Problemi di comunicazione come questi possono essere

riconducibili a:

• La qualità del modello del progettista

• La maniera in cui viene rappresentato

Modello del progettista

Modello dell’utente

Situazione idealeSituazione problematica

Interfacce e UX 10

Interfacce e UX 11

Interfacce e UX 12

Interfacce e UX 13

Definizioni

Interfaccia: “zona dell’adattamento fra corpo

dell’uomo e apparecchiatura” (Anceschi)

Un insieme di significati, veicolati attraverso

caratteristiche fisiche, convenzioni di linguaggio e

culturali.

UI (User Interface): tra il sistema informatico e

l’utente. Presenta sistemi di input e output

Interfacce e UX 14

Schermo:

interfaccia per vedereSchermo:

interfaccia per vedere, fare tap,

swipe, etc.Interfacce e UX 15

Internet of things: nuove funzioni per

le «cose» di tutti i giorni

Interfacce e UX 16

Le categorie di interfacce

A un primo livello di generalità si distinguono per

• Sistemi percettivi coinvolti

• Attività cognitive richieste

• Quantità e direzionalità dei messaggi tra utente e sistema

Interfacce e UX 17

Categorie di interfacce

Interfacce grafiche

rappresentazione dell’informazione su uno spazio visivo

bidimensionale, all’interno del quale l’utente si può muovere

rappresentato come un cursore (es. Windows).

– Wimp: Windows, Icons, Menu, Pointing devices

Interfacce a comandi

Vengono fornite dall’utente istruzioni secondo linguaggi codificati

Interfacce conversazionali: viene simulato un dialogo con una

persona, sotto forma di conversazione. Ogni step del dialogo è

influenzato dalla precedente risposta

Interfacce e UX 18

Interfacce e UX 19

Interfacce e UX 20

Interfacce grafiche o a comandi?

Interfacce e UX 21

Interfacce grafiche o a comandi?

Interfacce e UX 22

“Modalità”

Canale di comunicazione tra utente e macchina: corrisponde in

genere a uno specifico canale sensoriale umano o a uno

specifico sensore della macchina

– Modalità visiva

– Modalità uditiva

– Modalità tattile

– Riconoscimento delle emozioni

– etc

Interfacce e UX 23

«Modi»

Stato del sistema in cui un input produce uno specifico risultato. Se

un’interfaccia è multimodale, in corrispondenza di diversi modi il medesimo input produrrà diversi risultati.

– Es. modo silenzioso del sistema

– Es. Caps Lock (maiuscolo)

Interfacce multimodali possono produrre errori basati

sull’oscillazione tra modalità

(Jef Raskin, Interfacce a misura d’uomo)

Interfacce e UX 24

I problemi dei sistemi multifunzione

Il computer ha una molteplicità di funzioni che corrisponde a un

numero limitato di comandi, è necessariamente multimodale

Per Norman («Il computer invisibile») e Wieser («The coming age of

calm technology») le funzioni dovrebbero essere distribuite tra una

molteplicità di interfacce specializzate, in grado di dialogare tra di

loro per ridurre il carico cognitivo dell’utente (ubiquitous computing,

agenti intelligenti, etc)

Interfacce e UX 25

Interfacce e UX 26

Interfacce e UX 27

La caffettiera del masochista

2014

Scopo

Piano di azione

Esecuzione

Interpretazione dello stato del mondo

Valutazione

del risultato

Norman,

modello

multistadiale

dell’azione

Percezione

dello stato del

mondo

Interfacce e UX 28

Scopo

Piano di azione

Esecuzione

Interpretazione dello stato del mondo

Valutazione

del risultato

Golfo dell’esecuzione

Golfo della valutazione

Norman,

modello

multistadiale

dell’azione

Percezione

dello stato del

mondo

Interfacce e UX 29

Problema: esecuzione

Interfacce e UX 30

Problema: interpretazione

Interfacce e UX 31

Compaq sta considerando di cambiare il comando "Press Any

Key" in "Press Return Key" a causa delle continue chiamate che chiedono quale sia il tasto "Any“

A una cliente di AST viene chiesto di spedire indietro una

copia dei suoi dischetti difettosi. Pochi giorni dopo arriva una

lettera della cliente con le fotocopie dei floppy.

Problema: interpretazione

Interfacce e UX 32

interpretazione

Interfacce e UX 33

Problema: valutazione

Interfacce e UX 34

Scopo

Piano di azione

Esecuzione

Interpretazione dello stato del mondo

Valutazione

del risultato

Golfo dell’esecuzione

Golfo della valutazione

Norman,

modello

multistadiale

dell’azione

Percezione

dello stato del

mondo

Interfacce e UX 35

Avvicinare il sistema all’utente

1. Ridurre l’ampiezza del golfo dell’esecuzione →“affordance”

• Si riferisce alla capacità di un oggetto di far capire come deve essere usato:

“non si tratta di una proprietà bensì di una relazione attivata tra l’oggetto e l’organismo che interagisce con esso” (Norman). Parlerà successivamente di signifiers

2. Ridurre l’ampiezza del golfo della valutazione →“feedback”

Interfacce e UX 36

Principi di usabilità

(Norman, 1998)

1. Rendere le cose visibili

2. Fornire feedback

3. Fornire vincoli

– Fisici

– Logici

– Culturali

4. Fornire un mapping naturale

5. Garantire la consistenza

6. Fornire affordance

Interfacce e UX 37

Affordance

Interfacce e UX 38

Affordance e feedback

Interfacce e UX 39

Affordance

Interfacce e UX 40

Vincoli o consistenza?

Interfacce e UX 41

Rendere le cose visibili

Interfacce e UX 42

Mapping

Interfacce e UX 43

Mapping e consistenza

Interfacce e UX 44

Mapping

Interfacce e UX 45

Mapping

Interfacce e UX 46

Principi di usabilità

(Norman, 1998)

1. Rendere le cose visibili

2. Fornire feedback

3. Fornire vincoli

– Fisici

– Logici

– Culturali

4. Fornire un mapping naturale

5. Garantire la consistenza

6. Fornire affordance

Interfacce e UX 47

Interfacce e UX 48Emmanuel Mazzucchi

Norman Shneiderman Nielsen

1 Garantire la consistenza Preservare la coerenza Consistenza

2 Rendere le cose visibili (visibilità)

Visibilità dello stato del sistema

3 Fornire feedback Offrire un feedback informativo per ogni azione dell’utente

4 Fornire vincoli Prevenzione dell’errore

5 Fornire un mapping naturale

Fornire affordance

Corrispondenza tra il sistema ed il mondo reale

6 Offrire una prevenzione e una gestione semplice degli errori

Fornire all'utente i mezzi per riconoscere e riparare gli errori

Inserire strumenti di aiuto e istruzioni di utilizzo

7 Ridurre il carico della memoria a breve termine

Riconoscere piuttosto che ricordare

8 Fornire controllo Dare agli utenti controllo e libertà

9 Estetica e progettazione minimalista

10 Consentire agli utenti abituali di usare comandi rapidi

Permettere un’inversione semplice delle azioni

Flessibilità ed efficienza

11 Progettare dialoghi provvisti di chiusura

Interfacce e UX 49

Regole di Shneiderman per il design delle interfacce

1. Preservare la coerenza

2. Consentire agli utenti abituali di usare comandi rapidi

3. Offrire un feedback informativo per ogni azione dell’utente

4. Progettare dialoghi provvisti di chiusura

5. Offrire una prevenzione e una gestione semplice degli errori

6. Permettere un’inversione semplice delle azioni

7. Fornire controllo

8. Ridurre il carico della memoria a breve termine

Shneiderman, Designing the user interface, III edizione, Addison-

Wesley, 1999

1988 1994 1998

Interfacce e UX 50

2004 2008 2010

Interfacce e UX 51

Emotional design (Norman)

Aspetto emotivo del rapporto tra persona e oggetto.

• Il design viscerale “è quello che fa la natura”. E’ indipendente

da cultura e soggettività, è legato alla reazione condizionata

anche da fattori di tipo bìologico.

• Il design comportamentale è “basato sull’utilizzo”: si avvicina

all’usabilità

• Il design riflessivo “è legato al messaggio, alla cultura e al

significato”. Si parla di significato sia a livello individuale che

culturale.

visceral behavioral

reflective

Usabilità

«L'efficacia, l'efficienza e la

soddisfazione con le quali

determinati utenti

raggiungono determinati

obiettivi in determinati

contesti»

ISO 9241

Interfacce e UX 54

User

Experience«Le percezioni e le reazioni di

un utente che derivano

dall’uso o dall’aspettativa

d’uso di un prodotto, sistema

o servizio»

ISO 9241

«Per user experience si

intendono tutti gli aspetti

dell’interazione dell’utente

finale con un’istituzione, i suoi

servizi e prodotti.»

Nielsen Norman Group

modello della user experience in

Hassenzahl (2003)

Interfacce e UX 56

Usabilitàe esperienza

d’uso

BibliografiaAnceschi, G. (1993), Il progetto delle interfacce. Oggetti colloquiali e protesi

virtuali. Domus Academy, Milano.

Blythe M., Overbeeke K, Monk A., Wright P. (2004), Funology. From Usability to

Enjoyment, Kluwer Academic Publishers, Dordrecht

Card, Stuart; Thomas P. Moran and Allen Newell (1983). The Psychology of Human

Computer Interaction. Lawrence Erlbaum Associates

Galloway A. (2012), The Interface Effect, Polity

Hassenzahl, M. (2010). Experience Design: Technology for all the right reasons.

Synthesis Lectures on Human-Centered Informatics, 3(1), 1-95.

Raskin, J., 2000, The human interface, Boston, Addison-Wesley Professional; trad. it.

2003, Interfacce a misura d'uomo,Milano, Apogeo

Shneiderman (1987), 1987. Designing the User Interface: Strategies for Effective

Human-Computer Interaction

Interfacce e UX 57

Bibliografia

Nielsen-Norman Group, User Experience - Our Definition,

http://www.nngroup.com/about/userexperience.html (01.12.2008).

Norman D.A., The design of everyday things, 1998; trad. it. La caffettiera del

masochista: psicopatologia degli oggetti quotidiani, Giunti, Firenze, 1990.

Norman D.A., Things that make us smart, 1993; trad. it. Le cose che ci fanno

intelligenti, Feltrinelli, Milano, 1995.

Norman D., The invisible computer, 1998, trad it. Il computer invisibile, Apogeo,

Milano, 2000.

Norman, D., A,. Emotional Design: Why We Love (Or Hate) Everyday Things, Basic

Books (trad. it. Emotional Design. Perche amiamo (o odiamo) gli oggetti di tutti i

giorni, Apogeo, 2004) 2004

Norman, D. A. (2011). Living with Complexity. Cambridge, MA: MIT Press (Trad it

vivere con la complessità)

Norman D., The Design of Future Things, Basic Books, New York (NY), 2007 (trad. it.

Il design del futuro, Milano, Apogeo,. 2008).

Interfacce e UX 58