Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo (a.a.2014-15) - Lezione dell'8 aprile 2015

1. 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

2. PERSONA
LIVELLO
COGNITIVO
RUOLO
DIVERSITÀ DEGLI UTENTI
Utente
COMPORTAMENTI
Livelli di descrizione dell’utente
3
R.Polillo - Marzo 2015

3. Temi
 L’importanza del feedback nell’apprendimento
motorio
 La legge esponenziale della pratica
 La legge di Fitts
R.Polillo - Marzo 2015
4

4. L’importanza del feedback
In operazioni che richiedono apprendimento
motorio, è necessario fornire sempre un
feedback all’utente
R.Polillo - Marzo 2015
5

5. Feedback e apprendimento
motorio
tentativi
errori
Feedback quantitativo
Feedback qualitativo
Nessun feedback
R.Polillo - Marzo 2015
6

6. Feedback qualitativo: esempio
R.Polillo - Marzo 2015
7

7. Feedback quantitativo: esempio
posizione del
cursore
R.Polillo - Marzo 2015
8

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

9. iPhone: feedback
10R.Polillo - Marzo 2015

10. Personalizzazione
R.Polillo - Marzo 2015
11

11. Blackberry Q10: keyboard
R.Polillo - Marzo 2015
12

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

13. La legge esponenziale della pratica
0
2
4
6
8
10
12
0 10 20 30 40 50
N (numero tentativi)
T(tempodiesecuzione)
Tn = T1n
-
T1=10; =0.4
Inizialmente si migliora
molto rapidamente
… poi molto
lentamente
prove)
R.Polillo - Marzo 2015
14

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

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

16. T0
OK
OKT0 - ΔT
OK
T0 - ΔT
Legge di Fitts: esempio
R.Polillo - Marzo 2015
17

17. Esempio
T(S) = 100 log2 (25/S + 0.5)
R.Polillo - Marzo 2015
18

18. Esempio
T(D) = 100 log2 (D/0.5 + 0.5)
R.Polillo - Marzo 2015
19

19. R.Polillo - Marzo 2015
20

20. Quale scegliereste?
R.Polillo - Marzo 2015
21

21. Esempio: evoluzione di
Windows
R.Polillo - Marzo 2015
22

22. R.Polillo - Marzo 2015
Percorsi visivi: siete d’accordo con questo layout?
23

23. R.Polillo - Marzo 2015
24
PowerPoint
2010, Windows

24. R.Polillo - Marzo 2015
25
PowerPoint 2008 e 2011, Mac

25. I menu migliori per la legge di Fitts
1. Pie
2. Pop-up
3. Tendina
(nell’ordine)
R.Polillo - Marzo 2015
26

26. Menu a tendina
MAC OS 8
R.Polillo - Marzo 2015
27

27. R.Polillo - Marzo 2015

28. Ahlstrom, CHI 2005
- 3 movimenti verticali V1, V2, V3
- 2 movimenti orizzontali H1, H2
Selezione da menu
R.Polillo - Marzo 2015
29

29. R.Polillo - Marzo 2015

30. R.Polillo - Marzo 2015

31. Pop-up menu
R.Polillo - Marzo 2015
32

32. Pie menu
R.Polillo - Marzo 2015
33

33. Pie menu nidificati
R.Polillo - Marzo 2015
34

34. 35
R.Polillo - Marzo 2015
Qui tutta l’area grigia è cliccabile
Qui è cliccabile solo il testo

35. Menu responsive: top (toggle)
R.Polillo - Marzo 2015
36
https://developer.mozilla.org/en-US/Apps/Design/UI_layout_basics/Responsive_Navigation_Patterns

36. Menu responsive: bottom
(expandable)
R.Polillo - Marzo 2015
37

37. Menu responsive: left (hidden)
R.Polillo - Marzo 2015
38

38. Esempio: Tableconnect
(smartphone+tavolo)
R.Polillo - Marzo 2015
39
https://www.youtube.com/watch?v=0MDwvALVf_k

39. Large touch screen esempi
 https://www.youtube.com/watch?v=cZe16sz0l
PU
R.Polillo - Marzo 2015
40

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
R.Polillo - Marzo 2015
41