Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca (prof.R.Polillo) - Lezione del 9 aprile 2014

1. Corso di Interazione Uomo Macchina
AA 2013-2014
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Conoscere l'utente: il sistema
motorio
1
R.Polillo - Marzo 2014

2. Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano
tutte le necessarie spiegazioni. Vedi www.rpolillo.it
Queste slide sono disponibili con licenza Creative Commons
(attribuzione, non commerciale, condividi allo stesso modo) a
chiunque desiderasse utilizzarle, per esempio a scopo didattico,
senza necessità di preventiva autorizzazione:
http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it
La licenza non si estende alle immagini fotografiche e alle screen
shots, i cui diritti restano in capo ai rispettivi proprietari, che sono
stati indicati, ove possibile, nelle didascalie del libro. L’autore si
scusa per eventuali omissioni, e resta a disposizione per
correggerle.
R.Polillo - Marzo 2014
2

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

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

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

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

7. Feedback qualitativo: esempio
R.Polillo - Marzo 2014
7

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

9. 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 2014
9
Visualizzazione 3D
della depressione del
tasto

10. iPhone: feedback
R.Polillo - Marzo 2014

11. Personalizzazione
R.Polillo - Marzo 2014
11

12. Blackberry Q10: keyboard
R.Polillo - Marzo 2014
12

13. 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 2014
13

14. 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 2014
14

15. 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 2014
15

16. 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 2014
16

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

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

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

20. R.Polillo - Marzo 2014
20

21. Esempio: evoluzione di
Windows
R.Polillo - Marzo 2014
21

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

23. R.Polillo - Marzo 2014
23
PowerPoint
2010, Windows

24. R.Polillo - Marzo 2014
24
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 2014
25

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

27. R.Polillo - Marzo 2014

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

29. R.Polillo - Marzo 2014

30. R.Polillo - Marzo 2014

31. Pop-up menu
R.Polillo - Marzo 2014
31

32. Pie menu
R.Polillo - Marzo 2014
32

33. Pie menu nidificati
R.Polillo - Marzo 2014
33

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

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

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

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

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

39. 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 2014
39