grafica ed interfacce per la comunicazione - paola vocca · grafica ed interfacce per la...
TRANSCRIPT
![Page 1: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/1.jpg)
Grafica ed interfacce per la comunicazione
Scienze della Comunicazione
Paola Vocca
Lezione 16- Conoscere L’utente: il sistema motorio
Lucidi tradotti e adattati da materiale presente su
http://www.hcibook.com/e3/resources/ e
http://www.robertopolillo.it
![Page 2: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/2.jpg)
PERSONA
LIVELLO COGNITIVO
RUOLO
DIVERSITÀ DEGLI UTENTI
Utente
COMPORTAMENTI
Livelli di descrizione dell’utente
2 Grafica ed interfacce per la comunicazione A.A. 2013/14
![Page 3: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/3.jpg)
Temi
• L’importanza del feedback nell’apprendimento
motorio
• La legge esponenziale della pratica
• La legge di Fitts
Grafica ed interfacce per la comunicazione A.A. 2013/14 3
![Page 4: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/4.jpg)
L’importanza del feedback
In operazioni che richiedono apprendimento motorio, è
necessario fornire sempre un feedback all’utente.
Grafica ed interfacce per la comunicazione A.A. 2013/14 4
![Page 5: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/5.jpg)
Feedback e apprendimento motorio
tentativi
err
ori
Feedback quantitativo
Feedback qualitativo
Nessun feedback
Grafica ed interfacce per la comunicazione A.A. 2013/14 5
![Page 6: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/6.jpg)
Feedback qualitativo: esempio
Grafica ed interfacce per la comunicazione A.A. 2013/14 6
![Page 7: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/7.jpg)
Feedback quantitativo: esempio
posizione del
cursore Grafica ed interfacce per la comunicazione A.A. 2013/14 7
![Page 8: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/8.jpg)
Esempio: feedback visivo e touch screen
Esperimento: digitare numeri di 4 cifre su una tastiera
numerica visualizzata su un touch screen
Visualizzazione 3D della depressione del
tasto Visualizzazione in un campo del
numero digitato Nessun
feedback Entrambi I
feedback
(M.Deron, How Important is Visual Feedback When Using a Touch Screen?,
Usability News, Winter 2000)
Grafica ed interfacce per la comunicazione A.A. 2013/14 8
![Page 9: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/9.jpg)
iPhone: feedback
9 Grafica ed interfacce per la comunicazione A.A. 2013/14
![Page 10: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/10.jpg)
Personalizzazione
Grafica ed interfacce per la comunicazione A.A. 2013/14 10
![Page 11: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/11.jpg)
La legge esponenziale della pratica
Il tempo necessario per effettuare un compito
diminuisce con la pratica.
In particolare, il tempo Tn per effettuare un
compito all’n-esima prova è dato da:
Tn = T1 n -
dove 0.4 [0.2 ~ 0.6]
Grafica ed interfacce per la comunicazione A.A. 2013/14 11
![Page 12: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/12.jpg)
La legge esponenziale della pratica
0
2
4
6
8
10
12
0 10 20 30 40 50
N (numero tentativi)
T (
tem
po
di
ese
cu
zio
ne
)
Series1
Tn = T1n-
T1=10; =0.4
Inizialmente si migliora
molto rapidamente
… poi molto
lentamente
prove)
Grafica ed interfacce per la comunicazione A.A. 2013/14 12
![Page 13: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/13.jpg)
Un esperimento
Un pannello ha 10 tasti situati sotto 10 luci. L’utente deve premere un sotto-insieme di tasti
in risposta all’accensione di un sottoinsieme di luci (Klemmer, 1962). NB: il grafico è su
scala bilogaritmica
Per migliorare del 20%
ci vogliono 50.000
prove
Per migliorare del 20%
ci vogliono 1.000
prove
Grafica ed interfacce per la comunicazione A.A. 2013/14 13
![Page 14: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/14.jpg)
La legge di Fitts
D
S
T = 100 log2(D/S + 0.5)
Il tempo T necessario per muovere la mano su un bersaglio
di dimensioni S a distanza D dipende dalla precisione
relativa richiesta (rapporto D/S)
Più un oggetto è piccolo e
lontano, più tempo ci vuole
a raggiungerlo
Grafica ed interfacce per la comunicazione A.A. 2013/14 14
![Page 15: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/15.jpg)
T0 OK
OK T0 - ΔT
OK T0 - ΔT
Legge di Fitts: esempio
Grafica ed interfacce per la comunicazione A.A. 2013/14 15
![Page 16: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/16.jpg)
Esempio
T(S) = 100 log2 (25/S + 0.5)
Grafica ed interfacce per la comunicazione A.A. 2013/14 16
![Page 17: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/17.jpg)
Esempio
T(D) = 100 log2 (D/0.5 + 0.5)
Grafica ed interfacce per la comunicazione A.A. 2013/14 17
![Page 18: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/18.jpg)
Grafica ed interfacce per la comunicazione A.A. 2013/14 18
![Page 19: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/19.jpg)
19 Grafica ed interfacce per la comunicazione A.A. 2013/14
Qui tutta l’area grigia è cliccabile
Qui è cliccabile solo il testo
![Page 20: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/20.jpg)
Esempio: evoluzione di Windows
Grafica ed interfacce per la comunicazione A.A. 2013/14 20
![Page 21: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/21.jpg)
I menu migliori per la legge di Fitts
1. Pie
2. Pop-up
3. Tendina (nell’ordine)
Grafica ed interfacce per la comunicazione A.A. 2013/14 21
![Page 22: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/22.jpg)
Pop-up menu
Grafica ed interfacce per la comunicazione A.A. 2013/14 22
![Page 23: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/23.jpg)
Pie menu
Grafica ed interfacce per la comunicazione A.A. 2013/14 23
![Page 24: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/24.jpg)
Pie menu nidificati
Grafica ed interfacce per la comunicazione A.A. 2013/14 24
![Page 25: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/25.jpg)
Menu a tendina
MAC OS 8 Grafica ed interfacce per la comunicazione A.A. 2013/14 25
![Page 26: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/26.jpg)
Grafica ed interfacce per la comunicazione A.A. 2013/14 26
![Page 27: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/27.jpg)
Ahlstrom, CHI 2005
- 3 movimenti verticali V1, V2, V3 - 2 movimenti orizzontali H1, H2
Selezione da menu
Grafica ed interfacce per la comunicazione A.A. 2013/14 27
![Page 28: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/28.jpg)
Grafica ed interfacce per la comunicazione A.A. 2013/14 28
![Page 29: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/29.jpg)
Grafica ed interfacce per la comunicazione A.A. 2013/14 29
![Page 30: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/30.jpg)
Menu responsive: top (toggle)
Grafica ed interfacce per la comunicazione A.A. 2013/14 30
https://developer.mozilla.org/en-US/ Apps/Design/Responsive_Navigation_Patterns
![Page 31: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/31.jpg)
Menu responsive: bottom (expandable)
Grafica ed interfacce per la comunicazione A.A. 2013/14 31
![Page 32: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/32.jpg)
Menu responsive: left (hidden)
Grafica ed interfacce per la comunicazione A.A. 2013/14 32
![Page 33: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/33.jpg)
Esempio: Tableconnect (smartphone+tavolo)
Grafica ed interfacce per la comunicazione A.A. 2013/14 33
https://www.youtube.com/watch?v=0MDwvALVf_k
![Page 34: Grafica ed interfacce per la comunicazione - Paola Vocca · Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 16- Conoscere L’utente: il](https://reader030.vdocuments.pub/reader030/viewer/2022021810/5c6742ba09d3f226188b5b78/html5/thumbnails/34.jpg)
Next generation gesture interface
Airtouch technology (video, 46"):
• http://www.youtube.com/watch?v=Bu5_mXj7PA4
Concept design (video, 2'):
• http://www.youtube.com/watch?v=XbVNUImVq-g
Display airtouch system (video, 2'):
• http://www.youtube.com/watch?v=pgLpEF6u6ow
• https://www.youtube.com/watch?v=u9tXEBeh86o
Grafica ed interfacce per la comunicazione A.A. 2013/14 34