1

Interazione Uomo-Macchina

Introduzione al corsoa.a. 2006/2007

2

Termini dell’HCI

• Utente– Un individuo, un gruppo di persone che lavorano

insieme.

• Elaboratore– Ogni tecnologia informatica, dal piccolo PDA

(Personal Digital Assistant) al computer da scrivania, ad un sistema su larga scala, ad un sistema embedded --> ubiquità del computer

• Interazione– Ogni comunicazione tra utente e computer,

diretta o indiretta. – In ogni caso esiste un fine dell’interazione.

3

computerSistemi SW

Algoritmi

Dispositivi I/O

User Interface (UI)

Interfaccia

• Vista dal progettista– la funzionalità dell’applicazione è separata dal UI– UI è spesso vista come un aggiunta

• Vista dall’utente– non distingue tra UI e applicazione sottostante– se la UI è ben progettata e usabile, l’intera applicazione

appare usabile

utente

Documentazione

Training

Ambiente socialee lavorativo

4

Interfaccia (cont.)

• Una UI include tutti gli aspetti di progetto di un sistema che influenzano l’interazione tra il sistema stesso e l’utente.

• In particolare:– la corrispondenza con i compiti dell’utente– la metafora usata (eg., desktop)– i controlli e comportamenti– navigazione entro una schermata e flusso tra schermate– integrazione tra differenti applicazioni– il progetto visuale delle schermate– il progetto di interazioni audio non verbali

5

Obiettivi della IUM

• Migliorare l’interazione tra utenti e computer rendendo I computer più user-friendly e maggiormente ricettivi alle necessità dell’utente.

• Progettare sistemi che minimizzino la barriera tra il modello cognitivo umano di ciò che egli vuole compiere e la “comprensione” del calcolatore del compito dell’utente.

• Specificatamente, la IUM si occupa di:– Metodologie e processi per il progetto di interfaccie– Metodi per l’implementazione di interfaccie– Tecniche per la valutazione ed il confronto di interfaccie– Sviluppo di nuove interfaccie e metodi di interazione– Sviluppo di modelli e teorie dell’interazione che siano descrittivi e

predittivi.

6

Con il termine ‘sicurezza’ si intende che il sistema IUM:

1. Fa quello per cui e’ stato progettato2. Impedisce gravi errori3. Fornisce le funzionalita’ adatte ai compiti

dell’utente

7

Usabilità

• Efficacia– il sistema fa quello per cui è stato progettato?

• Efficienza– Il sistema supporta la produttività aiutando l’utente a

portare a termine il suo comoito?

• Sicurezza – il sistema impedisce gravi errori? aiuta a porvi rimedio?

• Utilità– Il sistema fornisce le funzionalità adatte ai compiti

dell’utente?

• Facilità di apprendimento– Quanto è facile imparare ad usare il sistema?

• Facilità di ricordo– Quanto è facile ricordarne le modalità di uso

8

Con il termine ‘sicurezza’ si intende che il sistema IUM:

1. Fa quello per cui e’ stato progettato2. Impedisce gravi errori3. Fornisce le funzionalita’ adatte ai compiti

dell’utente

9

La UI richiede:

1. Dal 40% al 90% del codice totale di un’applicazione

2. Meno del 10% del codice totale di un’applicazione

3. Quasi il 100% del codice totale di un’applicazione

10

• Una UI richiede dal 40% al 90% del codice totale, in media 70%

• Se fatta male deve essere completamente rifatta, altrimenti il costo passa agli utenti

• Una GUI richiede almeno il 29% del budget di progetto di sviluppo SW

11

La UI richiede:

1. Dal 40% al 90% del codice totale di un’applicazione

2. Meno del 10% del codice totale di un’applicazione

3. Quasi il 100% del codice totale di un’applicazione

12

Caratteristiche di una buona UI

• L’interfaccia utente– deve suggerire all’utente quali operazioni esso possa

compiere sulla UI (affordance);– deve rendere ovvia la relazione tra l’azione del sistema e

l’azione svolta dall’utente (mapping);– deve fornire una retroazione all’azione dell’utente

(feedback);– fornisce un buon modello concettuale del comportamento

del sistema sottostante;– fornisce delle funzioni vincolanti (per prevenire errori

dell’utente);– supporta l’addestramento automatico;– …

13

L’umano

• La psicologia cognitiva studia i processi cognitivi umani

• processi di acquisizione, organizzazione, elaborazione ed uso delle conoscenze

• Processi mentali che mediano tra stimoli e risposta• es. soluzione di problemi, memoria, linguaggio• Modello della mente umana come elaboratore di

informazioni che giungono dagli organi sensoriali

14

In un’onda la frequenza indica:

1. La velocita’ di propagazione2. Il numero di oscillazioni al second3. L’escursione massima dell’ampiezza

15

• Registro il livello dell’acqua in un punto dello stagno (p.es. su un palo): oscilla

• Periodo: T = tempo per ritornare allo stesso livello• Ampiezza: massima escursione• Frequenza: f =1/T (quante oscillazioni al secondo)• Lunghezza d’onda: = T· velocità di propagazione

Periodo

Grandezzafisica

Ampiezza

Tempo

16

In un’onda la frequenza indica:

1. La velocita’ di propagazione2. Il numero di oscillazioni al secondo3. L’escursione massima dell’ampiezza

17

La visione

• Due fasi del processo:

– ricezione fisica dello stimolo

– elaborazione ed interpretazione dello stimolo (percezione visiva)

18

Il ricettore fisico: l’occhio

• Riceve luce e la trasforma in segnale elettrico

• La luce viene riflessa dagli oggetti, che vengono rappresentati rovesciati sulla retina

19

L’acutezza visiva e’:

1. La capacita’ di distinguere il colore2. La lunghezza del cristallino3. L’abilita’ di percepire dettagli fini

20

Percezione visiva

• Percezione delle dimensioni e della profondità– l’angolo visuale indica lo spazio occupato da un

oggetto rispetto al campo di vista (è relativo alla dimensione e distanza dall’occhio)

– l’acutezza visiva è l’abilità di percepire i dettagli fini

21

L’acutezza visiva e’:

1. La capacita’ di distinguere il colore2. La lunghezza del cristallino3. L’abilita’ di percepire dettagli fini

22

Percezione visiva (cont.)

• Percezione della brillantezza– la brillantezza è la reazione soggettiva alla luminanza

(quantità di luce emessa da un oggetto)– il contrasto è il rapporto tra la luminanza dell’oggetto e

quella dello sfondo

– l’acutezza visiva cresce con la luminanza

23

Nella percezione visiva la gradazione e’:

1. La lunghezza dell’onda2. La quantita’ di bianco contenuta in un

colore3. Un sinonimo di acutezza visiva

24

Percezione visiva (cont.)

• Percezione del colore

– Gradazione: lunghezza d’onda

– Saturazione: quantita’ di bianco

– Intensità: brillantezza

25

Nella percezione visiva la gradazione e’:

1. La lunghezza dell’onda2. La quantita’ di bianco contenuta in un

colore3. Un sinonimo di acutezza visiva

26

Quale tra queste affermazioni e’ corretta:

1. La procedura di lettura e’ sequenziale2. La procedura di lettura non e’ sequenziale3. La procedura di lettura e’ sequenziale o

non e’ sequenziale a seconda dell’individuo

27

Lettura

• Diverse fasi– Viene percepito il pattern visivo– Viene decodificato usando la rappresentazione interne del

linguaggio– Le parole sono interpretate usando la conoscenza

sintattica, semantica e pragmatica.

• La lettura comporta i cosiddetti fenomeni saccadici e di fissazione: la percezione avviene durante la fissazione (94% del tempo)

• La lettura non è sequenziale (l’occhio si muove avanti e indietro)

28

Quale tra queste affermazioni e’ corretta:

1. La procedura di lettura e’ sequenziale2. La procedura di lettura non e’ sequenziale3. La procedura di lettura e’ sequenziale o

non e’ sequenziale a seconda dell’individuo

29

Quale fra queste affermazioni e’ corretta:

1. I caratteri maiuscoli accelerano la lettura2. I caratteri maiuscoli rallentano la lettura3. La velocita’ di lettura e’ indipendente dal

tipo di carattere utilizzato

30

• Velocità di lettura di 250 parole al minuto: le parole non vengono scandite carattere per carattere.

• Le parole familiari vengono riconosciute dalla forma

• Il maiuscolo non ha forma, e costringe a scandire i singoli caratteri (rallenta)

• Massima velocità (sperimantale) con – font da 9 a 12– lunghezza riga tra 58 e 132 mm.

• La visualizzazione in negativo (nero su bianco) migliora la lettura (maggior acuità)

31

Quale fra queste affermazioni e’ corretta:

1. I caratteri maiuscoli accelerano la lettura2. I caratteri maiuscoli rallentano la lettura3. La velocita’ di lettura e’ indipendente dal

tipo di carattere utilizzato

32

Udito

• Fornisce informazione sull’ambiente: – distanze, direzioni, oggetti, etc.

• Il soggetto della percezione uditiva sono le sorgenti primarie (che emettono il suono)

• Il soggetto della percezione visiva sono le sorgenti secondarie (gli oggetti che riflettono la luce)

• Canale di input che non richiede attenzione, da sfruttare nelle interfaccie

33

L’essere umano puo’ udire frequenze

1. Inferiori al millesimo di Hertz2. Superiori al milione di Hertz3. Tra i 20 Hz e i 15 kHz

34

• L’essere umano può sentire frequenze dai 20 Hz ai 15 KHz

• Distingue meno accuratamente le alte frequenze rispetto alle basse

• Il sistema uditivo filtra i suoni:– Il rumore di fondo viene eliminato

consentendoci di udire suoni familiari senza prestare attenzione

– Esempio: cocktail party effect

35

L’essere umano puo’ udire frequenze

1. Inferiori al millesimo di Hertz2. Superiori al milione di Hertz3. Tra i 20 Hz e i 15 kHz

36

Percezione aptica

• Fornisce importanti feedback circa l’ambiente.

• Aptica = tatto + cinestetica

• Tatto: gli stimoli sono ricevuti mediante recettori nervosi della pelle:– Termorecettori: sensibili alla temperatura– Nocirecettori: sensibili al dolore– Meccanorecettori: sensibili alla pressione

• Può essere un senso basilare per chi è disabile visivamente

37

La memoria a breve termine e’:

1. Immediatamente legata alla percezione sensoriale

2. Conseguenza di una lunga fase di ripetizione

3. Conseguenza di una breve fase di attenzione

38

Memorie sensoriali - iconica- ecoica- aptica

Memoria a breve termine

STM

Memoria a lungo termine

LTM

attenzione ripetizione (rehearsal)

La memoria

• Distinguiamo 3 tipi di memoria– Sensoriale– Breve termine– Lungo termine

• Sono collegati con un modello a cascata

39

Buffer sensoriali- memoria iconica-memoria ecoica-memoria aptica

Memoria a breve termine

STM

Memoria a lungo termine

LTM

attenzione ripetizione (rehearsal)

Memorie sensoriali

• Memorie tampone che registrano temporaneamente gli stimoli sensoriali:– iconica: stimolo visivo – ecoica: stimolo uditivo– aptica: stimolo aptico

• L’informazione passa dal livello sensoriale alla STM mediante l’attenzione

• Se l’informazione non passa nella STM viene rapidamente sovrascritta e persa (2s audio, 0.3 video)

40

Memoria a breve termine (STM)

• Registrazione temporanea dell’informazione che è oggetto della elaborazione in corso (memoria di lavoro).

• Es: per comprendere una frase bisogna tenerla a mente tutta dall’inizio.– accesso rapido: 70 ms– decadimento rapido: 200 ms– capacità limitata: 72 “pezzi” (chunks) di

informazione

41

La memoria a breve termine e’:

1. Immediatamente legata alla percezione sensoriale

2. Conseguenza di una lunga fase di ripetizione

3. Conseguenza di una breve fase di attenzione

42

La memoria a lungo termine ha

1. Decadimento immediato2. Decadimento lento o nullo3. Lo stesso decadimento della memoria

sensoriale

43

Memoria a lungo termine (LTM)

• Area di archivio di tutta la conoscenza (ciò che sappiamo)– accesso lento: 0,1 s– decadimento lento o nullo– enorme e illimitata capacità– puo’ essere dichiarativa o procedurale

• Esistono 2 tip di LTM dichiarativa:– episodica: memoria di eventi ed esperienze in forma seriale– semantica: memoria strutturata di fatti, concetti, e capacità.

• L’informazione nella memoria semantica deriva da quella episodica– si imparano fatti o concetti dalle esperienze

44

La memoria a lungo termine ha

1. Decadimento immediato2. Decadimento lento o nullo3. Lo stesso decadimento della memoria

sensoriale

45

Buffer sensoriali- memoria iconica-memoria ecoica-memoria aptica

Memoria a breve termine

STM

Memoria a lungo termine

LTM

attenzione ripetizione (rehearsal)

LTM: Memorizzare

• L’informazione si muove dalla memoria STM alla LTM per rehearsal (ripetizione, studio).

• Ipotesi di tempo totale: la quantità di informazione memorizzata è proporzionale al tempo di ripetizione: (più si studia, più si ricorda)

• Distribution of practice effect: a parità di tempo totale, si hanno migliori risultati distribuendo nel tempo

46

LTM: Dimenticare

• Decadimento– l’informazione viene persa gradualmente ma lentamente

• Interferenza– la nuova informazione rimpiazza la vecchia: interferenza

retroattiva– Informazione vecchia può interferire con la nuova:

inibizione proattiva (Es., tornare vs casa vecchia invece della nuova)

• Parole legate ad emozioni si ricordano meglio • È possibile dimenticare?

– il dato è stato rimosso…– …oppure è solo molto difficile recuperarlo?

47

LTM: Recuperare

• Ricordo– l’informazione viene “ripescata dalla memoria”.– il processo può essere agevolato da indizi.

• Riconoscimento– la presentazione di un’informazione provoca la

consapevolezza che tale informazione è stata già vista. – Meno complesso del: l’informazione presentata è un

indizio.

• Indizi per aiutare il ricordo– Uso di categorie– Visualizzazione

48

Ragionamento

• Processo con cui si usa la conoscenza di cui si dispone per trarre conclusioni o dedurre qualcosa di nuovo sul dominio di interesse

• Tre tipi:

– Deduttivo

– Induttivo

– Abduttivo

49

Quale di queste affermazioni e’ falsa:

1. Il ragionamento deduttivo generalizza da casi visti a casi non visti

2. Il ragionamento induttivo generalizza da casi visti a casi non visti

3. Il ragionamento abduttivo permette di risalire dagli eventi alle cause

50

Ragionamento deduttivo

• Le conclusioni sono logicamente derivate dalle premesse date.

• Esempio: • Se è venerdì, egli andrà a lavorare• È venerdì • Quindi: egli andrà a lavorare

• La deduzione umana è fallace, perchè usa anche la conoscenza del mondo (scorciatoie)

• Esempio:• Alcune persone sono bambini• Alcuni bambini piangono• Quindi: alcune persone piangono

51

Ragionamento induttivo

• Generalizza da casi visti a casi non visti. – Esempio: tutti gli elefanti che ho visto hanno la

proboscide, quindi tutti gli elefanti hanno la proboscide

• Si può solo falsificare, ma mai provare vera.• Comunque utile nel mondo reale, per

sapere cosa aspettarsi.• L’essere umano usa meglio l’evidenza

positiva che l’evidenza negativa – Esempio, carte di Wason

52

Ragionamento abduttivo

• Risalire dagli eventi alle cause– Esempio: Marco guida veloce quando ha bevuto– Se vedo Marco guidare veloce, assumo che

abbia bevuto

• Non affidabile: può portare a false spiegazioni

53

Quale di queste affermazioni e’ falsa:

1. Il ragionamento deduttivo generalizza da casi visti a casi non visti

2. Il ragionamento induttivo generalizza da casi visti a casi non visti

3. Il ragionamento abduttivo permette di risalire dagli eventi alle cause

54

Errori

• Svista (errore non intenzionale)– Intenzione corretta, ma fallisco nel metterla in atto– Cause: scarsa abilità fisica, disattenzione …– Cambiamenti di contesto nel comportamento esperto

possono causare errori

• Sbaglio (errore)– Intenzione sbagliata– Causa: comprensione incorretta del sistema o della

situazione• l’uomo crea modelli mentali per spiegare il comportamento

delle cose, se il modello è sbagliato, accadono errori (es. pensavo che l’interuttore accendesse la luce invece era il campanello)

• Non è sempre colpa dell’uomo: il progettista deve tenere presente le convenzioni ed i modelli mentali comuni.

55

• Descriveremo il sistema computer composto da vari elementi.

• Il modello di macchina a cui si fa riferimento è l’architettura Von Neumann.

• Ognuno di questi elementi influisce nell’interazione:– input devices: inserimento del testo e puntamento;– output devices: schermo (video), audio;– input e output cartaceo (stampa e scanner);– memoria: RAM e memorizzazione permanente;– elaborazione: velocità, reti.

Il computer

56

Toccare, sentire, annusare

• Dispositivi aptici– vibrazione, ritorno di forza– Nei giochi – Nella simulazione (chirurgica)

• Odore e gusto– Tecnologia molto limitata allo stato attuale

57

La Random Access Memory (RAM) e’:

1. La memoria a lungo termine di un computer

2. La memoria a breve termine umana3. La memoria a breve termine di un

computer

58

Memoria a breve termine

• RAM (Random Access Memory):– memorie volatili (perdono l’informazione quando

il computer viene spento); – tempo di accesso: 5-70 ns; – transfer rate tipico: 1000 MB/s (a 133 MHz)– alcune RAM non volatili sono utilizzate per

memorizzare informazioni di impostazione– tipicamente un computer ha da 64 MB di RAM in

su (tip. 256 MB);

59

Memoria a lungo termine

• Dischi (non volatile):– supporto magnetico: – floppy disks (1.4 MB), – hard disks:

• tempo di accesso ~ 8ms, • transfer rate ~ 100MB/sec.

– supporto ottico: • letture e scritture con laser; • CD-ROM, CD-RW (~ 600BG)• DVD

60

La Random Access Memory (RAM) e’:

1. La memoria a lungo termine di un computer

2. La memoria a breve termine umana3. La memoria a breve termine di un

computer

61

Sommario

• Modelli dell’interazione– modello di Norman– modello di Abowd e Beale

• Stili di interazione• Modelli concettuali• Paradigmi

62

Il modello di Abowd e Beale e’ costituito da

1. Due componenti: l’utente e il sistema2. Tre componenti: l’utente, il sistema e il

progettista3. Quattro componenti: l’utente, il sistema,

l’input e l’output

63

Modello di Norman

• In questo modello l’attenzione è incentrata maggiormente sulla visione che l’utente ha della interazione.

• È basato su di un ciclo di esecuzione/valutazione

64

Score

Utask

Ooutput

Iinput

Modello di Abowd e Beale

• Interaction Framework • 4 componenti:

– Utente (U)– Sistema (S)– Input (I)– Output (O)

• Ogni componente ha il suo linguaggio– Interazione: traduzione tra linguaggi– Problemi di interazione = problemi di traduzione

65

Il modello di Abowd e Beale e’ costituito da

1. Due componenti: l’utente e il sistema2. Tre componenti: l’utente, il sistema e il

progettista3. Quattro componenti: l’utente, il sistema,

l’input e l’output

66

Modelli concettuali di interazione

Basati sull’attivitàBasati sull’oggetto

Metafore

67

• Modello concettuale– Descrizione del sistema in termini di idee e

concetti integrati sul suo funzionamento, comportamento e modo di presentarsi

– L’elenco dei modelli non è esaustivo, nè i modelli sono tra loro mutuamente esclusivi

68

La manipolazione diretta e’

1. L’ analogo del modelli di Norman2. L’analogo del modello di Abowd e Beale3. Un modello concettuale basato

sull’attivita’ che descrive la manipolazione di oggetti virtuali

69

Modelli basati sull’attività

• Fornire istruzioni (comandi)– Utente fornisce istruzioni al sistema su cosa fare– Es. Videoregistratore, HiFi, computer Unix o DOS

• Conversare– Il sistema si comporta come un interlocutore di una

conversazione– Es. Sistemi di prenotazione telefonica.

• Manipolare e navigare– Manipolazione di oggetti virtuali e navigazione in spazi

virtuali --> manipolazione diretta

• Esplorare e sfogliare– L’utente può esplorare e sfogliare l’informazione come

una rivista o un libro (--> ipertesto)

70

La manipolazione diretta e’

1. L’ analogo del modelli di Norman2. L’analogo del modello di Abowd e Beale3. Un modello concettuale basato

sull’attivita’ che descrive la manipolazione di oggetti virtuali

71

In un modello basato su oggetti, l’agente e’:

1. Una metafora2. Un foglio elettronico3. Una parte dell’interfaccia che esegue

compiti stabiliti dall’utente

72

Modelli basati su oggetti

• Modulo da riempire: – L’interfaccia èun modulo che l’utente deve compilare

• Agente:– L’interfaccia è un agente che esegue compiti stabiliti

dall’utente – Esempi:

• Filtro anti-spam• Assistente di Office• Wizards• ….

73

In un modello basato su oggetti, l’agente e’:

1. Una metafora2. Un foglio elettronico3. Una parte dell’interfaccia che esegue

compiti stabiliti dall’utente

74

Metafore

• L’essenza della metafora è comprendere ed avere esperienza di una cosa in termini di un’altra.

• Le metafore producono modelli concettuali (basati sull’attività o sull’oggetto o altro)

• Alcuni dei precedenti derivano da metafore (p. es. scrivania, modulo cartaceo)

• Le metafore forniscono all’utente analogie (aiutano il problem solving)

• Le metafore rendono l’interfaccia familiare e facilitano l’apprendimento

• La metafora può essere fuorviante: gli utenti potrebbero prendere la metafora alla lettera e farsi un modello concettuale sbagliato del sistema

75

Stili di interazione

ComandiSelezione menu

Riempimento moduliWIMP

76

Stili di interazione

• Sono le modalità concrete attraverso le quali l'utente può comunicare o interagire con il sistema:

– Interfaccia a linea di comando (fornire istruzioni)– Interrogazione (fornire istruzioni)– Selezione in un menu (fornire istruzioni)– Domanda/risposta (dialogare)– Compilazione di moduli (modulo)– Fogli elettronico (modulo)– Point & click (esplorare e sfogliare)– WIMP (manipolazione diretta)– Tridimensionali (manipolazione diretta)– Multimodale (metafore specifiche)

77

In una WIMP le finestre sono

1. Aree dello schermo che si comportano come se fossero indipendenti

2. Piccole frecce che identificano una corrispondenza spaziale tra schermo e posizione del mouse

3. Piccole immagini o figure usati per rappresentare alcuni oggetti dell’interfaccia

78

Elementi della WIMP

• Finestre (Windows)• Aree dello schermo che si comportano

come se fossero indipendenti – può contenere testo o oggetti grafici– può essere spostata o ridimensionata– possono affiancarsi o sovrapporsi ed oscurarsi a

vicenda.– Barra di scorrimento (scrollbar)

• permette di muovere il contenuto della finestra sopra e sotto o da un lato all’altro

– barra del titolo (title bar) • descrive il nome della finestra

79

• Icone (Icons)– Sono piccole immagini o figure usate per rappresentare

alcuni oggetti dell’interfaccia o un’azione.– Le finestre possono essere chiuse (iconificate), ovvero

rappresentate da una icona

• Puntatori (Pointers)– Componente fondamentale – Identifica una corrispondenza spaziale fra lo schermo e la

posizione fisica del mouse– Tipicamente una piccola freccia, ma può cambiare (es.

mano o clessidra)

80

• Menu– Scelta (tramite il puntatore) di operazioni

elencate sul display– Alleggeriscono il compito della memoria a breve

termine– Non bisogna mettere troppe voci, meglio usare

menu a cascata (cascading menu)• la selezione di un menu apre un altro menu adiacente.

– Menu principale visibile sempre come barra dei menu

81

– menu a tendina (pull-down) – fall-down

• simili ai menu a tendina ma non serve fare click

– menu a comparsa (pop-up) • di solito per opzioni contestuali• Appaiono dove si clicca

82

In una WIMP le finestre sono

1. Aree dello schermo che si comportano come se fossero indipendenti

2. Piccole frecce che identificano una corrispondenza spaziale tra schermo e posizione del mouse

3. Piccole immagini o figure usati per rappresentare alcuni oggetti dell’interfaccia