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