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
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
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
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
Feedback e apprendimento motorio
tentativi
err
ori
Feedback quantitativo
Feedback qualitativo
Nessun feedback
Grafica ed interfacce per la comunicazione A.A. 2013/14 5
Feedback qualitativo: esempio
Grafica ed interfacce per la comunicazione A.A. 2013/14 6
Feedback quantitativo: esempio
posizione del
cursore Grafica ed interfacce per la comunicazione A.A. 2013/14 7
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
iPhone: feedback
9 Grafica ed interfacce per la comunicazione A.A. 2013/14
Personalizzazione
Grafica ed interfacce per la comunicazione A.A. 2013/14 10
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
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
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
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
T0 OK
OK T0 - ΔT
OK T0 - ΔT
Legge di Fitts: esempio
Grafica ed interfacce per la comunicazione A.A. 2013/14 15
Esempio
T(S) = 100 log2 (25/S + 0.5)
Grafica ed interfacce per la comunicazione A.A. 2013/14 16
Esempio
T(D) = 100 log2 (D/0.5 + 0.5)
Grafica ed interfacce per la comunicazione A.A. 2013/14 17
Grafica ed interfacce per la comunicazione A.A. 2013/14 18
19 Grafica ed interfacce per la comunicazione A.A. 2013/14
Qui tutta l’area grigia è cliccabile
Qui è cliccabile solo il testo
Esempio: evoluzione di Windows
Grafica ed interfacce per la comunicazione A.A. 2013/14 20
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
Pop-up menu
Grafica ed interfacce per la comunicazione A.A. 2013/14 22
Pie menu
Grafica ed interfacce per la comunicazione A.A. 2013/14 23
Pie menu nidificati
Grafica ed interfacce per la comunicazione A.A. 2013/14 24
Menu a tendina
MAC OS 8 Grafica ed interfacce per la comunicazione A.A. 2013/14 25
Grafica ed interfacce per la comunicazione A.A. 2013/14 26
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
Grafica ed interfacce per la comunicazione A.A. 2013/14 28
Grafica ed interfacce per la comunicazione A.A. 2013/14 29
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
Menu responsive: bottom (expandable)
Grafica ed interfacce per la comunicazione A.A. 2013/14 31
Menu responsive: left (hidden)
Grafica ed interfacce per la comunicazione A.A. 2013/14 32
Esempio: Tableconnect (smartphone+tavolo)
Grafica ed interfacce per la comunicazione A.A. 2013/14 33
https://www.youtube.com/watch?v=0MDwvALVf_k
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
Top Related