corso di interazione uomo-macchina iium1/presentazioni/lezione9s... · tipi di risorse • fisiche...
TRANSCRIPT
![Page 1: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/1.jpg)
Corso di Interazione Uomo-Macchina I
Paolo Bottoni
Lezione 9: Scelte nel progetto di interazione
Lucidi tradotti e adattati dal materiale presente sul sito http://www.hcibook.com/e3/resources/
![Page 2: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/2.jpg)
Lezione 9 Scelte ProgettoIUM-I 2
Fondamenti
• Progetto:– Cos'è, interventi, obiettivi, vincoli
• Processo di progetto– Cosa succede quando
• Utenti– Chi sono, come sono
• Scenari– Storie ricche per il progetto
• Navigazione– Muoversi in un sistema
• Iterazione e prototipi– Necessità di cambiare!
![Page 3: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/3.jpg)
Lezione 9 Scelte ProgettoIUM-I 3
Errare è umano
• Rapporti da incidenti
– Disastri aerei, incidenti industriali, errori in ospedale
– Inchiesta incolpa "errore umano"
• ma …
– Architrave di cemento si spezza sotto peso eccessivo
– Si incolpa „errore di architrave‟ ?… no – errore di progetto
– Sappiamo come si comporta cemento sotto sforzo
• "errore" umano è normale
• Sappiamo come si comportano umani sotto tensione
– Quindi progettare tenendone conto
• Trattare umani almeno altrettanto bene che materiali fisici!
![Page 4: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/4.jpg)
Lezione 9 Scelte ProgettoIUM-I 4
Errori e Risorse
• Cause di errore
– Assenza di risorse richieste / desiderate
– Presenza di risorse che permettono esecuzione di
processi in contrasto con piano
– Discrepanza fra risorse percepite e effettive
![Page 5: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/5.jpg)
Lezione 9 Scelte ProgettoIUM-I 5
Tipi di risorse
• Fisiche– Dispositivi di ingresso e uscita, spazio su schermo
– Mediate da sensori logici o fisici
• Computazionali– Dati
• Ingressi utente, generati da calcolatore, modelli di utente
– Di controllo
• Aspetti espliciti, stati, transizioni
– Politiche
• Da attività di modellazione dei compiti, assicurano sincronizzazione, sequenzializzazione, o concorrenza
• Percettive– Strutture osservate o percepite
![Page 6: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/6.jpg)
Lezione 9 Scelte ProgettoIUM-I 6
Risorse nel linguaggio
• rectangle (id = R1; x = 2, y = 2; w = 6, h = 3)
• circle (id = C1; x = 30, y = 15, r = 2)
__________________________________
• button (id = B1; action = “r-c_arrow”)
• button (id = B2; action = “rectangle”)
• button (id = B3; action = “c-r_arrow”)
• button (id = B4; action = “circle”)
![Page 7: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/7.jpg)
Lezione 9 Scelte ProgettoIUM-I 7
Risorse nel processo
• holder(id= H1; token = true)
• holder(id= H2; token = false)
• holder(id= H3; token = true)
• holder(id= H4; token = false)
![Page 8: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/8.jpg)
Lezione 9 Scelte ProgettoIUM-I 8
Tassonomia di errori
• Sintattico - viola regola linguaggio
– Crea una freccia pendente
• Semantico - produce discrepanza tra
interpretazione umano e calcolatore
– Differenza tra ordine di selezione e direzione freccia
• Pragmatico – viola regola da pratiche migliori
– Creazione di un modello scorretto
![Page 9: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/9.jpg)
Lezione 9 Scelte ProgettoIUM-I 9
Errori legati al linguaggio
In editor guidato da sintassi, che permetta
creazione di soprainsieme linguaggio visivo
richiesto, utente crea sentenza non in linguaggio.
![Page 10: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/10.jpg)
Lezione 9 Scelte ProgettoIUM-I 10
Errori connessi al compito
• Tentare di stampare documento con drag &
drop mentre stampante è sconnessa
• Tentare di aprire documento in rete senza
avere a disposizione applicazione corretta
• Stampare pagina Web maggiore di spazio di
stampa
![Page 11: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/11.jpg)
Lezione 9 Scelte ProgettoIUM-I 11
Progettare per l’errore
• Linguaggi visivi e linguaggi di compito
• Definizione sentenze corrette
• Derivazione dell‟interazione
• Gestione degli errori
![Page 12: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/12.jpg)
Lezione 9 Scelte ProgettoIUM-I 12
Sulla recuperabilità
• recuperabile: si può procedere a produrre
sentenza visiva corretta da stato corrente
(sfruttando regole linguaggio)
• irrecuperabile: si deve tornare indietro per
procedere verso sentenza visiva corretta
![Page 13: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/13.jpg)
Lezione 9 Scelte ProgettoIUM-I 13
Alfabeti visivi
![Page 14: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/14.jpg)
Lezione 9 Scelte ProgettoIUM-I 14
Regole visive
![Page 15: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/15.jpg)
Lezione 9 Scelte ProgettoIUM-I 15
Derivazione di ambienti di interazione
![Page 16: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/16.jpg)
Lezione 9 Scelte ProgettoIUM-I 16
Derivazione dell’interazione
![Page 17: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/17.jpg)
Lezione 9 Scelte ProgettoIUM-I 17
Il nucleo di controllo completo
![Page 18: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/18.jpg)
Lezione 9 Scelte ProgettoIUM-I 18
Aggiunta di sottomacchine standard
![Page 19: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/19.jpg)
Lezione 9 Scelte ProgettoIUM-I 19
Stili di interazione alternativi
![Page 20: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/20.jpg)
Lezione 9 Scelte ProgettoIUM-I 20
Stili di interazione alternativi
![Page 21: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/21.jpg)
Lezione 9 Scelte ProgettoIUM-I 21
Da alfabeti a interazione
• Azioni ad alto livello per tipo
– Statiche
• Creazione
– Di istanza
• Selezione / Deselezione
• Modifica / Trasferimento
• Cancellazione
• Interrogazione
• Sequenze di azioni a basso livello
– movePointer* click
– drag* click
• Produzione risorse corrispondenti
![Page 22: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/22.jpg)
Lezione 9 Scelte ProgettoIUM-I 22
Risorse di interazione
![Page 23: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/23.jpg)
Progetto della navigazione
Struttura locale – schermata singola
struttura globale – intero sito
start
the systems
info and help management messages
add user remove user
main
screen
remove
userconfirm
add user
![Page 24: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/24.jpg)
Lezione 9 Scelte ProgettoIUM-I 24
Livelli
• Scelta dei congegni
– menu, pulsanti etc.
• Progetto schermo
• Progetto navigazione in applicazione
• Ambiente
– Altre applicazioni, O/S
![Page 25: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/25.jpg)
Lezione 9 Scelte ProgettoIUM-I 25
Sul web …
• Scelta dei congegni
• Progetto schermo
• Progetto navigazione
• Ambiente
• elementi e etichette– <a href=“...”>
• Progetto pagina
• Struttura sito
• Rete, navigatore,
collegamenti esterni
![Page 26: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/26.jpg)
Lezione 9 Scelte ProgettoIUM-I 26
Dispositivi fisici
• Scelta dei congegni
• Progetto schermo
• Progetto navigazione
• Ambiente
• Controlli– pulsanti, manopole, quadranti
• Disposizione fisica
• Modalità dispositivo
• Mondo reale
![Page 27: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/27.jpg)
Lezione 9 Scelte ProgettoIUM-I 27
Pensando alla struttura
• In schermata– Abilitazioni / disabilitazioni / trigger
• Locale– A partire da questa schermata
• Globale– Struttura sito, movimento fra schermate
• Ancora più ampio– Relazioni con altre applicazioni
![Page 28: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/28.jpg)
Locale
Da una schermata verso l'esterno
![Page 29: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/29.jpg)
Lezione 9 Scelte ProgettoIUM-I 29
Regole d'oro
• Sapere dove ci si trova
• Sapere cosa si può fare
• Sapere dove si sta andando
– O cosa succederà
• Sapere dove si è stati
– O cosa si è fatto
![Page 30: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/30.jpg)
Lezione 9 Scelte ProgettoIUM-I 30
Dove ci si trova – briciole di pane
Mostra cammino in gerarchia sito
Sito web
Categoria alto livello Sotto-categoria
Questa pagina
Collegamenti
attivi a
livelli superiori
![Page 31: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/31.jpg)
Lezione 9 Scelte ProgettoIUM-I 31
Attezione a trappole pulsanti
• Dove vanno?– Spazio per maggiore informazione!
things
the thing from
outer spacemore things
other things
![Page 32: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/32.jpg)
Lezione 9 Scelte ProgettoIUM-I 32
Modalità
• Blocco per prevenire uso accidentale
– Rimuovere blocco – tasto "c" + "yes" per confermare
– Azione frequente
• Se blocco dimenticato
– In tasca si preme "yes"
– Va a rubrica
– In rubrica …
"c" – cancella elemento
"yes" – conferma
… oops!
![Page 33: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/33.jpg)
Globale
Tra schermate
All'interno dell'applicazione
![Page 34: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/34.jpg)
Lezione 9 Scelte ProgettoIUM-I 34
Diagrammi gerarchici I
Il sistema
Info e aiuti Gestione Messaggi
Aggiungi utente Rimuovi utente
![Page 35: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/35.jpg)
Lezione 9 Scelte ProgettoIUM-I 35
Diagrammi gerarchici II
• Parti di applicazione
– Schermate o gruppi di schermate
• Tipicamente separazione funzionale
the systems
info and help management messages
add user remove user
![Page 36: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/36.jpg)
Lezione 9 Scelte ProgettoIUM-I 36
Navigazione nelle gerarchie
• Profondità complica!
• Uso improprio regola 7 ± 2 di Miller
– Memoria a breve termine, non taglia del menu
– Ma profondità rilevante
• Ottimale?
– Molti elementi su ogni schermo
– Ma strutturati entro schermo
see /e3/online/menu-breadth/
![Page 37: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/37.jpg)
Lezione 9 Scelte ProgettoIUM-I 37
Diagrammi di rete I
• Mostrano diversi cammini nel sistema
main
screen
remove
userconfirm
add user
![Page 38: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/38.jpg)
Lezione 9 Scelte ProgettoIUM-I 38
Diagrammi di rete II
• Cosa porta a cosa
• Cosa succede quando
• Includono ramificazioni
• Più orientati a compito che gerarchia
main
screen
remove
userconfirm
add user
![Page 39: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/39.jpg)
Ancora più ampio
tra applicazioni
e oltre ...
![Page 40: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/40.jpg)
Lezione 9 Scelte ProgettoIUM-I 40
Ancora più ampio
• Questioni di stile:
– Standard piattaforma, coerenza
• Questioni funzionali
– Taglia e incolla
• Questioni di navigazione
– Applicazioni incorporate
– Collegamenti ad altre applicazioni … a Web
![Page 41: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/41.jpg)
Progetto della schermata e disposizione
Principi di base
Raggruppamento, struttura, ordine
Allineamento
Uso di spazio bianco
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
![Page 42: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/42.jpg)
Lezione 9 Scelte ProgettoIUM-I 42
Principi di base
• Domandarsi – Cosa sta facendo utente?
• Pensare– Quale informazione, confronti, ordine
• Progettare– Forma segue funzione
![Page 43: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/43.jpg)
Lezione 9 Scelte ProgettoIUM-I 43
Strumenti disponibili
• Raggruppamento di elementi
• Ordine elementi
• Decorazioni – fonti, scatole, etc.
• Allineamento elementi
• Spazio bianco fra elementi
![Page 44: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/44.jpg)
Lezione 9 Scelte ProgettoIUM-I 44
Raggruppamenti e struttura
Insieme logicamente insieme fisicamente
Billing details:
Name
Address: …
Credit card no
Delivery details:
Name
Address: …
Delivery time
Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …
![Page 45: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/45.jpg)
Lezione 9 Scelte ProgettoIUM-I 45
Ordinamento di gruppi ed elementi
• Qual è ordine naturale?
• Deve corrispondere a ordine su schermo!– Usare scatole, spazio, etc.
– Impostare tabulazione correttamente!
• Istruzioni– Attenzione a sindrome da ricetta torta
… mescolare latte e farina, aggiungere frutta
dopo averla battuta
![Page 46: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/46.jpg)
Lezione 9 Scelte ProgettoIUM-I 46
Decorazioni
• Usare scatole per raggruppare elementi logici
• Usare fonti per enfasi, titoli
• … ma non troppe!
ABCDEFGHIJKLMNOPQRSTUVWXYZ
![Page 47: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/47.jpg)
Lezione 9 Scelte ProgettoIUM-I 47
Allineamento - testo
• Si legge da sinistra a destra (occidentali)
allineare a sinistra
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior PrincessBuono per effetti speciali,
ma difficile da esaminare
Noioso ma
leggibile!
![Page 48: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/48.jpg)
Lezione 9 Scelte ProgettoIUM-I 48
Allineamento - nomi
• Di solito si cercano cognomi
renderlo facile!
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
![Page 49: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/49.jpg)
Lezione 9 Scelte ProgettoIUM-I 49
Allineamento - numeri
Pensare a utilizzo!
Quale maggiore?
532.56
179.3
256.317
15
73.948
1035
3.142
497.6256
![Page 50: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/50.jpg)
Lezione 9 Scelte ProgettoIUM-I 50
Allineamento - numeri
visivamente:
numero lungo = numero grande
Allineare punti decimali
O allineare interi a destra
627.865
1.005763
382.583
2502.56
432.935
2.0175
652.87
56.34
Importanza del tipo di carattere!!!
![Page 51: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/51.jpg)
Lezione 9 Scelte ProgettoIUM-I 51
Colonne multiple I
• ispezione attraverso spazi difficile!
(anche difficile da evitare con campi grandi)
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
![Page 52: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/52.jpg)
Lezione 9 Scelte ProgettoIUM-I 52
Colonne multiple II
• Usare conduttori
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
![Page 53: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/53.jpg)
Lezione 9 Scelte ProgettoIUM-I 53
Colonne multiple III
• O riempimento (anche verticale)
• Pattern: Row Striping
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
![Page 54: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/54.jpg)
Lezione 9 Scelte ProgettoIUM-I 54
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
Colonne multiple IV
• O anche (con cautela!) allineamento„cattivo‟
![Page 55: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/55.jpg)
Lezione 9 Scelte ProgettoIUM-I 55
Esperimento: Trovare prezzo stanza doppia a
Holiday Inn in Bradley
![Page 56: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/56.jpg)
Lezione 9 Scelte ProgettoIUM-I 56
Esperimento: Trovare prezzo stanza doppia a
Quality Inn in Columbia
![Page 57: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/57.jpg)
Lezione 9 Scelte ProgettoIUM-I 57
Risultati
• Tullis (1987): risultati diversi– 1° schermata - 5.5 secondi in media
– 2° schermata - 3.2 secondi in media
• Schermate con stessa densità di informazione (31%)
• Ruolo spaziatura
![Page 58: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/58.jpg)
Lezione 9 Scelte ProgettoIUM-I 58
Implicazioni
• Rendere informazione evidente
• Usare tecniche che fanno risaltare elementi:
ordinamento, spaziatura, sottolineatura,
sequenzializzazione, animazione
• Evitare intasamento interfaccia: progetto nitido e
semplice, es. Google
• Evitare di usare troppe caratteristiche solo perché
software lo permette.
![Page 59: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/59.jpg)
Lezione 9 Scelte ProgettoIUM-I 59
Quale è più facile da leggere?
What is the time?
What is the time?
What is the time?
What is the time?
What is the time?
![Page 60: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/60.jpg)
Lezione 9 Scelte ProgettoIUM-I 60
Implicazioni di progetto
• Rappresentazione informazione va progettata
– percepibile
– riconoscibile
• Icone e altre rappresentazioni suggeriscano rapidamente significato.
• Bordi e spaziature mezzi visivi efficaci per raggruppare informazione
• Suoni udibili e distinguibili
• Uscite audio devono permettere di distinguere fra insiemi di parole
• Testo leggibile e distinguibile dal background.
![Page 61: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/61.jpg)
Lezione 9 Scelte ProgettoIUM-I 61
Spazio bianco
QUELLO CHE VEDI
![Page 62: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/62.jpg)
Lezione 9 Scelte ProgettoIUM-I 62
Spazio bianco
GLI SPAZI IN MEZZO
QUELLO CHE VEDI
![Page 63: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/63.jpg)
Lezione 9 Scelte ProgettoIUM-I 63
SPAZIO PER SEPARARE
![Page 64: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/64.jpg)
Lezione 9 Scelte ProgettoIUM-I 64
SPAZIO PER STRUTTURARE
![Page 65: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/65.jpg)
Lezione 9 Scelte ProgettoIUM-I 65
SPAZIO PER EVIDENZIARE
![Page 66: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/66.jpg)
Lezione 9 Scelte ProgettoIUM-I 66
Contrasto di colore è efficace? Trovare “Italian”
![Page 67: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/67.jpg)
Lezione 9 Scelte ProgettoIUM-I 67
Bordi e spazi meglio? Trovare “French”
![Page 68: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/68.jpg)
Lezione 9 Scelte ProgettoIUM-I 68
Risultati
• Weller (2004): meno tempo per trovare informazione
raggruppata
– Usando bordo (2) rispetto a contrasto di colore (1)
• Troppo spazio bianco su web dannoso per ricerca?
– Rende difficile trovare informazione
• Siete d‟accordo?
![Page 69: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/69.jpg)
Lezione 9 Scelte ProgettoIUM-I 69
CONTROLLI FISICI
• Raggruppamento elementi
Tipo di cibo
Tempo di cottura
Imposta scongelare
![Page 70: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/70.jpg)
Lezione 9 Scelte ProgettoIUM-I 70
CONTROLLI FISICI
• Raggruppamento elementi
• Ordine elementi
4
4) Avvia2
2) Temperatura
3
3) Tempo per cucinare
11) Tipo di riscaldamento
![Page 71: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/71.jpg)
Lezione 9 Scelte ProgettoIUM-I 71
CONTROLLI FISICI
Colori diversi perfunzioni diverse
Linee attorno pulsanti correlati (temp su/giù)
• Raggruppamento elementi
• Ordine elementi
• Decorazioni
![Page 72: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/72.jpg)
Lezione 9 Scelte ProgettoIUM-I 72
CONTROLLI FISICI
• Raggruppamento elementi
• Ordine elementi
• Decorazioni
• Allineamento
? Più facile da leggere?
Testo centrato nei pulsanti
![Page 73: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/73.jpg)
Lezione 9 Scelte ProgettoIUM-I 73
CONTROLLI FISICI
• Raggruppamento elementi
• Ordine elementi
• Decorazioni
• Allineamento
• Spazio bianco
Separazioni facilitano gruppo
![Page 74: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/74.jpg)
Azioni utente e di controllo
Introdurre informazione
Sapere cosa si può fare
Carattere di offerta
![Page 75: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/75.jpg)
Lezione 9 Scelte ProgettoIUM-I 75
Introdurre informazione
• Moduli, scatole di dialogo– Presentazione + ingresso dati
– Questioni di disposizione simili
– Allineamento • N.B. lunghezza etichette diverse
• Disposizione logica– Usare analisi compiti
– Raggruppamento
– Ordine naturale per introdurre informazione
• Alto-basso, sinistra-destra (culturale)
• Ordinamento della tabulazione per ingresso da tastiera
N.B. see extra slides for widget choice
Name:
Address:
Alan Dix
Lancaster
Name:
Address:
Alan Dix
Lancaster
Name:
Address:
Alan Dix
Lancaster
?
![Page 76: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/76.jpg)
Lezione 9 Scelte ProgettoIUM-I 76
Sapere cosa fare
• Cosa è attivo, cosa è passivo
– Dove si fa clic
– Dove si scrive
• Uso di stile coerente facilita
– es. Collegamenti sottolineati nel Web
• Etichette e azioni
– Standard per azioni comuni
– linguaggio – grassetto = azione o stato corrente
![Page 77: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/77.jpg)
Lezione 9 Scelte ProgettoIUM-I 77
Carattere di offerta
• Termine psicologico
• Per oggetti fisici– Forma e grandezza suggeriscono azioni
• Raccogli, gira, getta
– Anche culturali – pulsanti "offrono" spinta
• Per oggetti su schermo– Oggetti tipo pulsante "offrono" clic
– Oggetti simili a quelli fisici suggeriscono uso
• Cultura uso calcolatore– Icone "offrono" possibilità di fare clicc
– Ma anche doppio clic … non come pulsanti reali!
Manico boccale
‘offre’afferrabilità
![Page 78: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/78.jpg)
Apparenza appropriata
Presentazione informazione
Estetica e utilità
Colore e 3D
Localizzazione & internazionalizzazione
![Page 79: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/79.jpg)
Lezione 9 Scelte ProgettoIUM-I 79
Presentazione dell'informazione
• Scopo è importante– Ordinamento (quale colonna, numerico alfabetico)
– Testo vs. diagramma
– Grafo di dispersione vs. istogramma
• Usare principi di presentazione su carta!
• Ma aggiungere interattività– Rilassare scelte di progetto
• es. riordinare le colonne
chap1
chap10
chap11
chap12
chap13
chap14
…
17
12
51
262
83
22
…
sizename size
chap10
chap5
chap1
chap14
chap20
chap8
…
12
16
17
22
27
32
…
name size
![Page 80: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/80.jpg)
Lezione 9 Scelte ProgettoIUM-I 80
Estetica e utilità
• Progetti esteticamente piacevoli
• Maggiore soddisfazione utente maggiore produttività
• Bellezza e utilità possono entrare in conflitto
– Mescolare stili visivi facile da distinguere
– Progetto pulito – poca differenziazione può confondere
– Sfondo dietro a testo
… bello da guardare, ma difficile da leggere
• Ma possono lavorare insieme
– es. Progetto del contatore
– In prodotti di consumo –differenziatore chiave (es. iMac)
![Page 81: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/81.jpg)
Un classico esempio di presentazione
Un riassunto per dirigenti
![Page 82: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/82.jpg)
Principi di visualizzazione di Tufte
• Mostrare confronti, contrasti, differenze
• Causalità, meccanismo, struttura, spiegazione
• Analisi multivariate
• Integrazione di Evidenze
• Documentazione
• Contenuto più importante di ogni altra cosa
![Page 83: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/83.jpg)
Principi di visualizzazione di Schiff
• Semplicità
• Consistenza
• Compatibilità
• Congruenza
• Rilevanza
• Aderenza a convenzioni
![Page 84: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/84.jpg)
Mantra dell’interazione di Shneiderman
• Overview
• Focus
• Details on demand
![Page 85: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/85.jpg)
Lezione 9 Scelte ProgettoIUM-I 85
Colore e 3D
• Entrambi spesso usati male!
• Colore
– Schermi vecchi con tavolozza limitata
– Colore usato perché "c'è"
– Attenzione a utenti ciechi ai colori
– Usare parsimoniosamente per rinforzare altra informazione
• Effetti 3D
– Buoni per informazione fisica e qualche grafico
– Ma se usati troppo …
es. Testo in prospettiva!! Diagrammi a pizza 3D
![Page 86: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/86.jpg)
Lezione 9 Scelte ProgettoIUM-I 86
cattivo uso del colore
• uso eccessivo - senza vere buone ragioni (e.g. sito bambini)
• Cecità ai colori
• scarso uso del contrasto
• Aggiustare le impostazioni!
– Aggiustare schermo a soli livelli di grigio
– Si può ancora leggere schermo?
![Page 87: Corso di Interazione Uomo-Macchina Iium1/Presentazioni/Lezione9S... · Tipi di risorse • Fisiche –Dispositivi di ingresso e uscita, spazio su schermo –Mediate da sensori logici](https://reader035.vdocuments.mx/reader035/viewer/2022070218/612604a38b7cff073278d61d/html5/thumbnails/87.jpg)
Lezione 9 Scelte ProgettoIUM-I 87
Differenze fra paesi e fra culture
• Localizzazione & internazionalizzazione
– Cambiare interfacce per culture/linguaggi particolari
• Globalizzazione
– Pensare a scelta di simboli ecc. che funzionino ovunque
• Semplicemente cambiare linguaggio?
– Usare base di dati di risorse invece di costanti stringa
… ma cambia grandezze, ordine sinistro-destro ecc.
• Questioni più profonde
– Assunzioni e valori culturali
– Significato simboli
es. Segno di spunta e croce … in alcune culture valore positivo e negativo
… ma significano stessa cosa (marcatura) in altre