Corso di Interazione Uomo Macchina
AA 2014-2015
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Conoscere l'utente: il sistema
motorio
PERSONA
LIVELLO
COGNITIVO
RUOLO
DIVERSITÀ DEGLI UTENTI
Utente
COMPORTAMENTI
Livelli di descrizione dell’utente3
R.Polillo - Marzo 2015
Temi
L’importanza del feedback nell’apprendimento
motorio
La legge esponenziale della pratica
La legge di Fitts
R.Polillo - Marzo 2015
4
L’importanza del feedback
In operazioni che richiedono apprendimento
motorio, è necessario fornire sempre un
feedback all’utente
R.Polillo - Marzo 2015
5
Feedback e apprendimento
motorio
tentativi
err
ori
Feedback quantitativo
Feedback qualitativo
Nessun feedback
R.Polillo - Marzo 2015
6
Feedback qualitativo: esempio
R.Polillo - Marzo 2015
7
Feedback quantitativo: esempio
posizione del
cursoreR.Polillo - Marzo 2015
8
Esempio: feedback visivo e touch screen
Esperimento: digitare numeri di 4 cifre su una tastiera
numerica visualizzata su un touch screen
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)
R.Polillo - Marzo 2015
9
Visualizzazione 3D
della depressione del
tasto
iPhone: feedback
10R.Polillo - Marzo 2015
Personalizzazione
R.Polillo - Marzo 2015
11
Blackberry Q10: keyboard
R.Polillo - Marzo 2015
12
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]
R.Polillo - Marzo 2015
13
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)
R.Polillo - Marzo 2015
14
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
R.Polillo - Marzo 2015
15
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
R.Polillo - Marzo 2015
16
T0OK
OKT0 - ΔT
OKT0 - ΔT
Legge di Fitts: esempio
R.Polillo - Marzo 2015
17
Esempio
T(S) = 100 log2 (25/S + 0.5)
R.Polillo - Marzo 2015
18
Esempio
T(D) = 100 log2 (D/0.5 + 0.5)
R.Polillo - Marzo 2015
19
R.Polillo - Marzo 2015
20
Quale scegliereste?
R.Polillo - Marzo 2015
21
Esempio: evoluzione di
Windows
R.Polillo - Marzo 2015
22
R.Polillo - Marzo 2015
Percorsi visivi: siete d’accordo con questo layout?
23
R.Polillo - Marzo 2015
24
PowerPoint
2010, Windows
R.Polillo - Marzo 2015
25
PowerPoint 2008 e 2011, Mac
I menu migliori per la legge di Fitts
1. Pie
2. Pop-up
3. Tendina
(nell’ordine)
R.Polillo - Marzo 2015
26
Menu a tendina
MAC OS 8R.Polillo - Marzo 2015
27
R.Polillo - Marzo 2015
Ahlstrom, CHI 2005
- 3 movimenti verticali V1, V2, V3
- 2 movimenti orizzontali H1, H2
Selezione da menu
R.Polillo - Marzo 2015
29
R.Polillo - Marzo 2015
R.Polillo - Marzo 2015
Pop-up menu
R.Polillo - Marzo 2015
32
Pie menu
R.Polillo - Marzo 2015
33
Pie menu nidificati
R.Polillo - Marzo 2015
34
35
R.Polillo - Marzo 2015
Qui tutta l’area grigia è cliccabile
Qui è cliccabile solo il testo
Menu responsive: top (toggle)
R.Polillo - Marzo 2015
36
https://developer.mozilla.org/en-US/Apps/Design/UI_layout_basics/Responsive_Navigation_Patterns
Menu responsive: bottom
(expandable)
R.Polillo - Marzo 2015
37
Menu responsive: left (hidden)
R.Polillo - Marzo 2015
38
Esempio: Tableconnect
(smartphone+tavolo)
R.Polillo - Marzo 2015
39
https://www.youtube.com/watch?v=0MDwvALVf_k
Large touch screen esempi
https://www.youtube.com/watch?v=cZe16sz0l
PU
R.Polillo - Marzo 2015
40
Next generation “airtouch”
interfaces
Airtouch technology (video, 46"):
http://www.youtube.com/watch?v=Bu5_mXj7P
A4
Concept design (video, 2'):
http://www.youtube.com/watch?v=XbVNUImV
q-g
Display airtouch system (video, 2'):
http://www.youtube.com/watch?v=pgLpEF6u6
ow
https://www.youtube.com/watch?v=u9tXEBeh8
R.Polillo - Marzo 2015
41
Top Related