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