UX - Sapienza › sites › default › files...Regole di Shneiderman per il design delle interfacce...
74
Emmanuel Mazzucchi 26.04.2017 Interfacce – usabilità – architettura dell’informazione – service design
Transcript of UX - Sapienza › sites › default › files...Regole di Shneiderman per il design delle interfacce...
Emmanuel Mazzucchi
26.04.2017
Interfacce – usabilità – architettura
dell’informazione – service design
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
27/04/2017 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
27/04/2017 UX slide 7
27/04/2017 UX 8
27/04/2017 UX slide 9
Un approccio centrato sulla
comunicazione
• Molteplicità dei soggetti coinvolti
• Meno vincolato alle specifiche tecnologie
di volta in volta utilizzate
• Prende in considerazione efficacia e
efficienza sia dal punto di vista dell’utente
che del committente
Il percorso
27/04/2017 UX 10
interfacce
Usabilità
Task analysis User experience
Architettura dell’informazione
Card sorting Service design
Customer journey
UX 11
http://www.vox.com/2016/2/26/11120236/bad-doors-human-centered-
design
27/04/2017
DoorDonald
NormanNorman door
discoverabilityfeedback
Una storia vera
Gentile XXXX,
può farsi rispedire la password da
questa pagina indicando l’indirizzo
con cui si è registrato
Emmanuel Mazzucchi
"
"
27/04/2017 UX 12
Interfaccia
utenteprogettista
Modello del progettista
Modello dell’utente
Immagine del sistema
Cultura
Dotazione tecnologica
Abilità
Obiettivi
Etc.
Cultura
Dotazione tecnologica
Abilità
Obiettivi
Etc.
UX 1327/04/2017
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
UX 1427/04/2017
27/04/2017 UX 15
UX 1627/04/2017
UX 1727/04/2017
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
UX 1827/04/2017
Schermo:
interfaccia per vedereSchermo:
interfaccia per vedere, fare
tap, swipe, etc.
UX 1927/04/2017
Internet of things: nuove funzioni per
le «cose» di tutti i giorni
UX 2027/04/2017
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
UX 2127/04/2017
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
UX 2227/04/2017
UX 2327/04/2017
UX 2427/04/2017
Interfacce grafiche o a comandi?
UX 2527/04/2017
Interfacce grafiche o a comandi?
UX 2627/04/2017
“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
UX 2727/04/2017
«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)
UX 2827/04/2017
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)
UX 2927/04/2017
UX 3027/04/2017
UX 3127/04/2017
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
UX 3227/04/2017
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
UX 3327/04/2017
Problema: esecuzione
UX 3427/04/2017
Problema: interpretazione
UX 3527/04/2017
interpretazione
UX 3627/04/2017
Problema: valutazione
UX 3727/04/2017
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
UX 3827/04/2017
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”
UX 3927/04/2017
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
UX 4027/04/2017
Affordance
UX 4127/04/2017
Affordance e feedback
UX 4227/04/2017
Affordance
UX 4327/04/2017
Vincoli o consistenza?
UX 4427/04/2017
Rendere le cose visibili
UX 4527/04/2017
Mapping
UX 4627/04/2017
Mapping e consistenza
UX 4727/04/2017
Mapping
UX 4827/04/2017
Mapping
UX 4927/04/2017
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
UX 5027/04/2017
UX 5127/04/2017
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
UX 5227/04/2017
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
Emmanuel Mazzucchi
26.04.2017
architettura dell’informazione
27/04/2017 UX slide 54
Architettura di cosa?
27/04/2017 UX slide 55
Modalità di ricerca di informazioni
Strategie spesso
usate insieme
Search monitorare
browsingMantenersi
consapevoli
Dirette
Indirette
Attive Passive
27/04/2017 UX slide 56
User needs: diversi tipi di ricerca
27/04/2017 UX slide 57
La classificazione ideale
Ogni classe è identificata da alcune proprietà. Se un elemento
le possiede, fa parte di quella classe, altrimenti non ne fa
parte. Non ci sono vie di mezzo.
• Confini chiari tra le classi
• Classificazione indipendente dal classificatore
• Tutti gli item sono sullo stesso piano (non ce ne sono alcuni più
rappresentativi)
27/04/2017 UX slide 58
Tassonomie gerarchiche
• Usare un unico criterio di classificazione
• Coerenza del criterio di classificazione
• Attenzione all’ordine in cui sono presentate le classi
Esseri viventi
animali
mammiferi Rettili etc
piante
27/04/2017 UX slide 59
Tassonomia poligerarchicaPermette il cross – listing (un item può stare in più di una categoria)
Catalogo prodotti
Prodotti usati
…… Libri
Libri
….. Usati
27/04/2017 UX slide 60
Ma per le persone…. (Lakoff)
• Non esistono categorie che siano giuste o sbagliate a priori,
indipendentemente dal contesto
• Esistono categorie ibride
• Si possono ottenere confini netti solo tra gli elementi centrali di
una classe
• Usando tali elementi come prototipi si facilita l’orientamento
degli utenti
27/04/2017 UX slide 61
Criteri di organizzazione tipici per classificazioni pure
• Alfabetico
• Cronologico
• Geografico
• Per argomento
• Per task
• Per tipologia di utente
• Per singolo utente
• Metafore
• Modelli ibridi
27/04/2017 UX slide 62
Card sorting
27/04/2017 UX slide 63
Card sorting
27/04/2017 UX slide 64
Card sorting: le varianti
• Aperto: per definire le categorie.
Viene chiesto agli utenti di scegliere i nomi dei gruppi
• Chiuso: per verificare la categorizzazione proposta
Viene chiesto agli utenti di collocare gli item tra una lista di
categorie
• Per definire l’elenco degli item (brainstorming tra progettisti)
• Per verificare la comprensione degli item (con gli utenti)
• Per classificare gli item (brainstorming tra progettisti o con gli
utenti)
27/04/2017 UX slide 65
Card sorting: istruzioni per
l’utente• Organizza gli item in gruppi che ritieni significativi
• Non pensare all’interfaccia, pensa all’organizzazione dei contenuti
• Se vuoi puoi creare sottogruppi
• Se vuoi puoi correggere un’etichetta
• Non ti preoccupare di riprodurre un’organizzazione coerente con l’attuale sito
• Una volta che i gruppi sono stati creati, bisogna dare un nome a ciascuno
• Se vuoi segnalare qualcosa che secondo te manca, puoi scriverlo su uno dei cartellini vuoti
• Se c’è qualcosa che non riesci a classificare puoi lasciarlo da parte
27/04/2017 UX slide 66
Cosa si impara
• Meglio organizzare i contenuti per argomento, task, gruppo di
utenti, etc…?
• Gruppi diversi hanno comportamenti omogenei al loro
interno?
• Quanto sono diversi i bisogni di gruppi distinti?
• Quante categorie dovrei creare?
• Quali etichette dovrei usare per queste categorie?
27/04/2017 UX slide 67
Risultati
• Analisi statistica
– Cluster (gruppi di comportamenti omogenei)
– Correlazioni tra item
– Livello di accordo tra gli utenti circa gli item
• Altri dati
– Think aloud
– Commenti e suggerimenti sulla comprensibilità delle etichette
– Proposte di nuovi item
– Elementi di difficile classificazione
– Differenti modelli mentali corrispondenti a diversi tipi utente
27/04/2017 UX slide 68
Varianti
• Priorità. Quali contenuti vorresti in home page?
• Task di verifica. Domandare agli utenti, sulla base delle
categorie scelte. dove metteresti l’item X?
• Questionario. è stato semplice classificare l’item x?
27/04/2017 UX slide 69
Organizzare il card sorting: le card
• Evitare ambiguità
• Assicurarsi di aver incluso tutti i termini da classificare
• Presentare gli item in maniera casuale
• Mantenere un livello uniforme di granularità
• Prevedere sempre cartellini vuoti che l’utente possa
compilare
• Si consiglia un numero di cards compreso tra 30 e 100
• Valutare gli aspetti logistici (card sorting digitale e
cartaceo, etichette adesive e non, post it)
27/04/2017 UX slide 70
Organizzare il card sorting: gli
utentiGli utenti devono essere rappresentativi
• Card sorting individuali (finalizzati ad analisi statistiche dei dati
raccolti)
Jacob Nielsen consiglia 15 utenti. La numerosità necessaria è
influenzata dalla variabilità del target e dagli obiettivi (generativi – valutativi)
• Card sorting di gruppo (dimensione qualitativa)
Buoni risultati anche con 5 gruppi di 3 persone
27/04/2017 UX slide 71
Riferimenti sul Card sorting
• Donna (Maurer) Spencer, Card sorting, Rosenfeld Media,
http://rosenfeldmedia.com/books/card-sorting/
• Donna Maurer e Todd Warfel, Card sorting: a definitive guide
http://boxesandarrows.com/card-sorting-a-definitive-guide/
• Web based card sorting
http://www.optimalsort.com
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
UX 7227/04/2017
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).
UX 7327/04/2017
27/04/2017 UX slide 74
Sull’architettura dell’informazione
Abbey Covert http://www.howtomakesenseofanymess.com/
IAinstitute
https://docs.google.com/spreadsheets/d/1fxLmmCsy2PmfPCWOtHbdlnut
2gaopcy_S8b0_Z7Wkd8/edit#gid=0
Morville, P., Rosenfeld, L., & Arango, J. (2015). Information Architecture for
the Web and Beyond.
Rosati, L. (2007), Architettura dell’informazione, Apogeo, Milano
