Presentazione standard di PowerPoint · 2019-11-25 · Modello del progettista Modello...
Transcript of Presentazione standard di PowerPoint · 2019-11-25 · Modello del progettista Modello...
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