際際滷

際際滷Share a Scribd company logo
PROGETTARE LA GRAFICA Corso di Interazione Uomo Macchina AA 2009-2010 Roberto Polillo Universit di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione
Scopo di questa lezione Discutere le problematiche i principi base del design grafico delle interfacce, discutendo numerosi esempi. Seguir una lezione specificamente dedicata agli aspetti tipografici
Temi Comunicazione visiva e interaction design Le leggi della Gestalt Esempi da discutere
Comunicazione visiva  e interaction design
Comunicazione visiva e interaction design La comunicazione visiva ha un ruolo preponderante nellinterazione uomo-macchina: immagini, testo, animazioni, video Quindi la cura degli aspetti grafici nellinteraction design 竪 di grande importanza Occorre considerare aspetti percettivi, psicologici, culturali Grande tradizione e cultura dellimmagine, ma poche indicazioni scientificamente dimostrabili
Gli obiettivi della comunicazione visiva La grafica di un sistema interattivo pu嘆 perseguire obiettivi diversi: Comprensibilit Usabilit Gradevolezza Capacit di suscitare emozioni Originalit Occorre grande chiarezza nella  definizione dei requisiti, perch辿 ciascuno di questi obiettivi richiede tecniche e approcci differenti, che potrebbero essere fra loro in conflitto
12. Progettare la grafica
Un esempio analogo
Un esempio analogo
Originalit Gradevolezza Emozione Comprensibilit Usabilit
12. Progettare la grafica
La grafica per la usabilit  La presentazione dellinformazione visiva dovrebbe abilitare lutente ad eseguire i compiti percettivi (per esempio, la ricerca di informazioni sullo schermo) in modo efficace, efficiente e con soddisfazione ISO 9241-12, Presentation of information
La grafica per la usabilit (segue) Nel progettare linformazione visiva si devo considerare le seguenti caratteristiche: Chiarezza Discriminabilit Concisione Consistenza Scopribilit Leggibilit Comprensibilit ISO 9241-12, Presentation of information
12. Progettare la grafica
Le leggi della Gestalt
GESTALT  Nella percezione visiva, il tutto 竪 pi湛 della somma delle sue parti Luci in movimento
Salvador Dal狸, 1935   Face of Mae West which may be used as an apartement
Le leggi della gestalt (M.Wertheimer, 1923) Legge della vicinanza Legge della somiglianza Legge della chiusura Legge della continuit di direzione  (o della curva buona) Legge della pregnanza  (o della buona forma) Legge dellesperienza passata
Legge della vicinanza Gli elementi del campo visivo che sono fra loro pi湛 vicini tendono ad essere raccolti in unit  (a parit di altre condizioni)
Legge della somiglianza Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unit (a parit di altre condizioni)
Legge della chiusura Le linee delimitanti una superficie chiusa si percepiscono come unit pi湛 facilmente di quelle che non si chiudono (a parit di altre condizioni)
Esempio: conflitto fra chiusura e vicinanza a b
Legge della continbuit di direzione  (o della curva buona) Quelle parti di una figura che formano una curva buona o che vanno nella stessa direzione si costituiscono in unit pi湛 facilmente delle altre
Legge della buona forma Il campo percettivo si segmenta in modo che risultino entit per quanto possibile equilibrate, armoniche, costi-tuite secondo un medesimo principio in tutte le loro parti
Legge della buona forma: altri esempi
Legge dellesperienza passata Lesperienza modella le nostre impressioni a b
Legge dellesperienza passata: altri esempi a b
Leggi della gestalt: applicazione al design  delle interfacce grafiche
Vicinanza
L esempio precedente, ristrutturato
Da PowerPoint 2007
Perch辿 questa immagine 竪 poco comprensibile?
(segue)
(segue)
Somiglianza a b c Yahoo (2009) British-airways (2003) Vista (2009)
12. Progettare la grafica
Vista (2009)
iPhone OS version 3.0 on the iPhone 3GS
12. Progettare la grafica
12. Progettare la grafica
12. Progettare la grafica
12. Progettare la grafica
Siete daccordo con luso dei colori nella tabella seguente?
(MAC OS 8)
12. Progettare la grafica
12. Progettare la grafica
12. Progettare la grafica
Chiusura
Limportanza dei riquadri: esempio (I )
Limportanza dei riquadri: esempio (II)
12. Progettare la grafica
12. Progettare la grafica
12. Progettare la grafica
12. Progettare la grafica
Colore
12. Progettare la grafica
12. Progettare la grafica
EXIT PERICOLO ! AVANTI STOP
12. Progettare la grafica
12. Progettare la grafica
Percorsi visivi: siete daccordo con questo layout?
Percorsi visivi
Yarbus, 1967 1 2 3 4 5 6 7
12. Progettare la grafica
In sintesi Una buona grafica dovrebbe: essere facilmente  leggibile  (testi, immagini) per tutti gli utenti a cui 竪 destinata aiutarci a comprendere chiaramente la  struttura  di una pagina video, trasmettendoci una sensazione di semplicit aiutarci ad  associare  facilmente contenuti fra loro omogenei  utilizzare  codici visivi e convenzioni familiari  agli utenti a cui 竪 destinata utilizzare  codici visivi coerenti allinterno del prodotto ( e del suo ecosistema) non contenere elementi  ridondanti o ambigui
RUMORE
RUMORE
RUMORE Linformazione utile 竪 solo questa
OK, ma troppo minimalista?
CONFUSIONE E RUMORE
CONTRASTO?
12. Progettare la grafica
12. Progettare la grafica
CocaCola tedesca   nel 2003
CocaCola USA   nel 2003
www.cocacola.com   nel 2003

More Related Content

More from Roberto Polillo (20)

20. Principi e linee guida (II)
20. Principi e linee guida (II)20. Principi e linee guida (II)
20. Principi e linee guida (II)
Roberto Polillo
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)
Roberto Polillo
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)
Roberto Polillo
Wikipedia
WikipediaWikipedia
Wikipedia
Roberto Polillo
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
Roberto Polillo
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
Roberto Polillo
20. Social networks
20. Social networks20. Social networks
20. Social networks
Roberto Polillo
19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg
Roberto Polillo
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sites
Roberto Polillo
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatori
Roberto Polillo
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla grafica
Roberto Polillo
16. Social media
16. Social media16. Social media
16. Social media
Roberto Polillo
14. Progettare il testo
14. Progettare il testo14. Progettare il testo
14. Progettare il testo
Roberto Polillo
15. La forma breve e il microblogging
15. La forma  breve e il microblogging15. La forma  breve e il microblogging
15. La forma breve e il microblogging
Roberto Polillo
13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio
Roberto Polillo
14. I blog
14. I blog14. I blog
14. I blog
Roberto Polillo
13. Internet business models
13. Internet business models13. Internet business models
13. Internet business models
Roberto Polillo
12. Mobile web
12. Mobile web12. Mobile web
12. Mobile web
Roberto Polillo
Internet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionInternet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introduction
Roberto Polillo
20. Principi e linee guida (II)
20. Principi e linee guida (II)20. Principi e linee guida (II)
20. Principi e linee guida (II)
Roberto Polillo
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)
Roberto Polillo
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)
Roberto Polillo
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
Roberto Polillo
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
Roberto Polillo
19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg
Roberto Polillo
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sites
Roberto Polillo
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatori
Roberto Polillo
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla grafica
Roberto Polillo
14. Progettare il testo
14. Progettare il testo14. Progettare il testo
14. Progettare il testo
Roberto Polillo
15. La forma breve e il microblogging
15. La forma  breve e il microblogging15. La forma  breve e il microblogging
15. La forma breve e il microblogging
Roberto Polillo
13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio
Roberto Polillo
13. Internet business models
13. Internet business models13. Internet business models
13. Internet business models
Roberto Polillo
Internet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionInternet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introduction
Roberto Polillo

Recently uploaded (17)

Test Bank for Systems Analysis and Design 8th Edition: Kendall
Test Bank for Systems Analysis and Design 8th Edition: KendallTest Bank for Systems Analysis and Design 8th Edition: Kendall
Test Bank for Systems Analysis and Design 8th Edition: Kendall
alawamajina
Customer Satisfaction a.s. 2023-24 - Questionario Autovalutazione
Customer Satisfaction a.s. 2023-24 - Questionario AutovalutazioneCustomer Satisfaction a.s. 2023-24 - Questionario Autovalutazione
Customer Satisfaction a.s. 2023-24 - Questionario Autovalutazione
belodevici
Improving Code Quality 1st Edition Yiannis Kanellopoulos & Tim Walker
Improving Code Quality 1st Edition Yiannis Kanellopoulos & Tim WalkerImproving Code Quality 1st Edition Yiannis Kanellopoulos & Tim Walker
Improving Code Quality 1st Edition Yiannis Kanellopoulos & Tim Walker
aokasmaany
Presentazione della Dichiarazione di Dubai sulle OER alla comunit italiana -...
Presentazione della Dichiarazione di Dubai sulle OER alla comunit italiana -...Presentazione della Dichiarazione di Dubai sulle OER alla comunit italiana -...
Presentazione della Dichiarazione di Dubai sulle OER alla comunit italiana -...
Damiano Orru
Global Economic Institutions 1st Edition Willem Molle
Global Economic Institutions 1st Edition Willem MolleGlobal Economic Institutions 1st Edition Willem Molle
Global Economic Institutions 1st Edition Willem Molle
koloohgazari67
aristotele_lecture_UNINA_introduzione.ppt
aristotele_lecture_UNINA_introduzione.pptaristotele_lecture_UNINA_introduzione.ppt
aristotele_lecture_UNINA_introduzione.ppt
arienzoalessandro
1_Biomolecole_Carboidrati scienze sup.ppt
1_Biomolecole_Carboidrati scienze sup.ppt1_Biomolecole_Carboidrati scienze sup.ppt
1_Biomolecole_Carboidrati scienze sup.ppt
DanyPagan
Intermediate Accounting Vol 2 Canadian 2nd Edition Lo Test Bank
Intermediate Accounting Vol 2 Canadian 2nd Edition Lo Test BankIntermediate Accounting Vol 2 Canadian 2nd Edition Lo Test Bank
Intermediate Accounting Vol 2 Canadian 2nd Edition Lo Test Bank
jotinlywood
Customer Satisfaction a.s. 2022-23 - Questionario autovalutazione
Customer Satisfaction a.s. 2022-23 - Questionario autovalutazioneCustomer Satisfaction a.s. 2022-23 - Questionario autovalutazione
Customer Satisfaction a.s. 2022-23 - Questionario autovalutazione
belodevici
New Methods of Literacy Research 1st Edition Peggy Albers
New Methods of Literacy Research 1st Edition Peggy AlbersNew Methods of Literacy Research 1st Edition Peggy Albers
New Methods of Literacy Research 1st Edition Peggy Albers
uxhcablende
Engineering Economy Sullivan Wicks Koelling 15th Edition Test Bank
Engineering Economy Sullivan Wicks Koelling 15th Edition Test BankEngineering Economy Sullivan Wicks Koelling 15th Edition Test Bank
Engineering Economy Sullivan Wicks Koelling 15th Edition Test Bank
gadevshahma
Introduction to Programming with C++ 3rd Edition Liang Test Bank
Introduction to Programming with C++ 3rd Edition Liang Test BankIntroduction to Programming with C++ 3rd Edition Liang Test Bank
Introduction to Programming with C++ 3rd Edition Liang Test Bank
toblerleunis
2 - Presentazione disturbo spettro autismo.pdf
2 - Presentazione disturbo spettro  autismo.pdf2 - Presentazione disturbo spettro  autismo.pdf
2 - Presentazione disturbo spettro autismo.pdf
GiovanniBertoni
Test Bank for Understanding Abnormal Behavior, 10th Edition : Sue
Test Bank for Understanding Abnormal Behavior, 10th Edition : SueTest Bank for Understanding Abnormal Behavior, 10th Edition : Sue
Test Bank for Understanding Abnormal Behavior, 10th Edition : Sue
dementogge
The Digital Revolution: A Short History of an Ideology Balbi
The Digital Revolution: A Short History of an Ideology BalbiThe Digital Revolution: A Short History of an Ideology Balbi
The Digital Revolution: A Short History of an Ideology Balbi
obrohepner
Solution Manual for Intermediate Accounting 3rd Edition by Wahlen
Solution Manual for Intermediate Accounting 3rd Edition by WahlenSolution Manual for Intermediate Accounting 3rd Edition by Wahlen
Solution Manual for Intermediate Accounting 3rd Edition by Wahlen
titeuxprasil
Viva training in ENT preparation for the FRCS ORL HNS 1st ed Edition Winter
Viva training in ENT preparation for the FRCS ORL HNS 1st ed Edition WinterViva training in ENT preparation for the FRCS ORL HNS 1st ed Edition Winter
Viva training in ENT preparation for the FRCS ORL HNS 1st ed Edition Winter
munirinkuah
Test Bank for Systems Analysis and Design 8th Edition: Kendall
Test Bank for Systems Analysis and Design 8th Edition: KendallTest Bank for Systems Analysis and Design 8th Edition: Kendall
Test Bank for Systems Analysis and Design 8th Edition: Kendall
alawamajina
Customer Satisfaction a.s. 2023-24 - Questionario Autovalutazione
Customer Satisfaction a.s. 2023-24 - Questionario AutovalutazioneCustomer Satisfaction a.s. 2023-24 - Questionario Autovalutazione
Customer Satisfaction a.s. 2023-24 - Questionario Autovalutazione
belodevici
Improving Code Quality 1st Edition Yiannis Kanellopoulos & Tim Walker
Improving Code Quality 1st Edition Yiannis Kanellopoulos & Tim WalkerImproving Code Quality 1st Edition Yiannis Kanellopoulos & Tim Walker
Improving Code Quality 1st Edition Yiannis Kanellopoulos & Tim Walker
aokasmaany
Presentazione della Dichiarazione di Dubai sulle OER alla comunit italiana -...
Presentazione della Dichiarazione di Dubai sulle OER alla comunit italiana -...Presentazione della Dichiarazione di Dubai sulle OER alla comunit italiana -...
Presentazione della Dichiarazione di Dubai sulle OER alla comunit italiana -...
Damiano Orru
Global Economic Institutions 1st Edition Willem Molle
Global Economic Institutions 1st Edition Willem MolleGlobal Economic Institutions 1st Edition Willem Molle
Global Economic Institutions 1st Edition Willem Molle
koloohgazari67
aristotele_lecture_UNINA_introduzione.ppt
aristotele_lecture_UNINA_introduzione.pptaristotele_lecture_UNINA_introduzione.ppt
aristotele_lecture_UNINA_introduzione.ppt
arienzoalessandro
1_Biomolecole_Carboidrati scienze sup.ppt
1_Biomolecole_Carboidrati scienze sup.ppt1_Biomolecole_Carboidrati scienze sup.ppt
1_Biomolecole_Carboidrati scienze sup.ppt
DanyPagan
Intermediate Accounting Vol 2 Canadian 2nd Edition Lo Test Bank
Intermediate Accounting Vol 2 Canadian 2nd Edition Lo Test BankIntermediate Accounting Vol 2 Canadian 2nd Edition Lo Test Bank
Intermediate Accounting Vol 2 Canadian 2nd Edition Lo Test Bank
jotinlywood
Customer Satisfaction a.s. 2022-23 - Questionario autovalutazione
Customer Satisfaction a.s. 2022-23 - Questionario autovalutazioneCustomer Satisfaction a.s. 2022-23 - Questionario autovalutazione
Customer Satisfaction a.s. 2022-23 - Questionario autovalutazione
belodevici
New Methods of Literacy Research 1st Edition Peggy Albers
New Methods of Literacy Research 1st Edition Peggy AlbersNew Methods of Literacy Research 1st Edition Peggy Albers
New Methods of Literacy Research 1st Edition Peggy Albers
uxhcablende
Engineering Economy Sullivan Wicks Koelling 15th Edition Test Bank
Engineering Economy Sullivan Wicks Koelling 15th Edition Test BankEngineering Economy Sullivan Wicks Koelling 15th Edition Test Bank
Engineering Economy Sullivan Wicks Koelling 15th Edition Test Bank
gadevshahma
Introduction to Programming with C++ 3rd Edition Liang Test Bank
Introduction to Programming with C++ 3rd Edition Liang Test BankIntroduction to Programming with C++ 3rd Edition Liang Test Bank
Introduction to Programming with C++ 3rd Edition Liang Test Bank
toblerleunis
2 - Presentazione disturbo spettro autismo.pdf
2 - Presentazione disturbo spettro  autismo.pdf2 - Presentazione disturbo spettro  autismo.pdf
2 - Presentazione disturbo spettro autismo.pdf
GiovanniBertoni
Test Bank for Understanding Abnormal Behavior, 10th Edition : Sue
Test Bank for Understanding Abnormal Behavior, 10th Edition : SueTest Bank for Understanding Abnormal Behavior, 10th Edition : Sue
Test Bank for Understanding Abnormal Behavior, 10th Edition : Sue
dementogge
The Digital Revolution: A Short History of an Ideology Balbi
The Digital Revolution: A Short History of an Ideology BalbiThe Digital Revolution: A Short History of an Ideology Balbi
The Digital Revolution: A Short History of an Ideology Balbi
obrohepner
Solution Manual for Intermediate Accounting 3rd Edition by Wahlen
Solution Manual for Intermediate Accounting 3rd Edition by WahlenSolution Manual for Intermediate Accounting 3rd Edition by Wahlen
Solution Manual for Intermediate Accounting 3rd Edition by Wahlen
titeuxprasil
Viva training in ENT preparation for the FRCS ORL HNS 1st ed Edition Winter
Viva training in ENT preparation for the FRCS ORL HNS 1st ed Edition WinterViva training in ENT preparation for the FRCS ORL HNS 1st ed Edition Winter
Viva training in ENT preparation for the FRCS ORL HNS 1st ed Edition Winter
munirinkuah

12. Progettare la grafica

  • 1. PROGETTARE LA GRAFICA Corso di Interazione Uomo Macchina AA 2009-2010 Roberto Polillo Universit di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione
  • 2. Scopo di questa lezione Discutere le problematiche i principi base del design grafico delle interfacce, discutendo numerosi esempi. Seguir una lezione specificamente dedicata agli aspetti tipografici
  • 3. Temi Comunicazione visiva e interaction design Le leggi della Gestalt Esempi da discutere
  • 4. Comunicazione visiva e interaction design
  • 5. Comunicazione visiva e interaction design La comunicazione visiva ha un ruolo preponderante nellinterazione uomo-macchina: immagini, testo, animazioni, video Quindi la cura degli aspetti grafici nellinteraction design 竪 di grande importanza Occorre considerare aspetti percettivi, psicologici, culturali Grande tradizione e cultura dellimmagine, ma poche indicazioni scientificamente dimostrabili
  • 6. Gli obiettivi della comunicazione visiva La grafica di un sistema interattivo pu嘆 perseguire obiettivi diversi: Comprensibilit Usabilit Gradevolezza Capacit di suscitare emozioni Originalit Occorre grande chiarezza nella definizione dei requisiti, perch辿 ciascuno di questi obiettivi richiede tecniche e approcci differenti, che potrebbero essere fra loro in conflitto
  • 10. Originalit Gradevolezza Emozione Comprensibilit Usabilit
  • 12. La grafica per la usabilit La presentazione dellinformazione visiva dovrebbe abilitare lutente ad eseguire i compiti percettivi (per esempio, la ricerca di informazioni sullo schermo) in modo efficace, efficiente e con soddisfazione ISO 9241-12, Presentation of information
  • 13. La grafica per la usabilit (segue) Nel progettare linformazione visiva si devo considerare le seguenti caratteristiche: Chiarezza Discriminabilit Concisione Consistenza Scopribilit Leggibilit Comprensibilit ISO 9241-12, Presentation of information
  • 15. Le leggi della Gestalt
  • 16. GESTALT Nella percezione visiva, il tutto 竪 pi湛 della somma delle sue parti Luci in movimento
  • 17. Salvador Dal狸, 1935 Face of Mae West which may be used as an apartement
  • 18. Le leggi della gestalt (M.Wertheimer, 1923) Legge della vicinanza Legge della somiglianza Legge della chiusura Legge della continuit di direzione (o della curva buona) Legge della pregnanza (o della buona forma) Legge dellesperienza passata
  • 19. Legge della vicinanza Gli elementi del campo visivo che sono fra loro pi湛 vicini tendono ad essere raccolti in unit (a parit di altre condizioni)
  • 20. Legge della somiglianza Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unit (a parit di altre condizioni)
  • 21. Legge della chiusura Le linee delimitanti una superficie chiusa si percepiscono come unit pi湛 facilmente di quelle che non si chiudono (a parit di altre condizioni)
  • 22. Esempio: conflitto fra chiusura e vicinanza a b
  • 23. Legge della continbuit di direzione (o della curva buona) Quelle parti di una figura che formano una curva buona o che vanno nella stessa direzione si costituiscono in unit pi湛 facilmente delle altre
  • 24. Legge della buona forma Il campo percettivo si segmenta in modo che risultino entit per quanto possibile equilibrate, armoniche, costi-tuite secondo un medesimo principio in tutte le loro parti
  • 25. Legge della buona forma: altri esempi
  • 26. Legge dellesperienza passata Lesperienza modella le nostre impressioni a b
  • 27. Legge dellesperienza passata: altri esempi a b
  • 28. Leggi della gestalt: applicazione al design delle interfacce grafiche
  • 30. L esempio precedente, ristrutturato
  • 32. Perch辿 questa immagine 竪 poco comprensibile?
  • 35. Somiglianza a b c Yahoo (2009) British-airways (2003) Vista (2009)
  • 38. iPhone OS version 3.0 on the iPhone 3GS
  • 43. Siete daccordo con luso dei colori nella tabella seguente?
  • 58. EXIT PERICOLO ! AVANTI STOP
  • 61. Percorsi visivi: siete daccordo con questo layout?
  • 63. Yarbus, 1967 1 2 3 4 5 6 7
  • 65. In sintesi Una buona grafica dovrebbe: essere facilmente leggibile (testi, immagini) per tutti gli utenti a cui 竪 destinata aiutarci a comprendere chiaramente la struttura di una pagina video, trasmettendoci una sensazione di semplicit aiutarci ad associare facilmente contenuti fra loro omogenei utilizzare codici visivi e convenzioni familiari agli utenti a cui 竪 destinata utilizzare codici visivi coerenti allinterno del prodotto ( e del suo ecosistema) non contenere elementi ridondanti o ambigui
  • 68. RUMORE Linformazione utile 竪 solo questa
  • 69. OK, ma troppo minimalista?
  • 74. CocaCola tedesca nel 2003
  • 75. CocaCola USA nel 2003
  • 76. www.cocacola.com nel 2003

Editor's Notes

  • #3: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #8: www.fanta.it Nel sito della coca-cola italiana, dic 003 R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #9: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #12: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #17: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #18: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #19: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #20: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #21: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #22: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #24: Questa legge 竪 detta anche legge della continuit di direzione R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #25: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #26: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #27: This experiment shows that past experience can affect your perception of such properties as form or depth. Consider what happens when you view this illustration. At first most people cannot tell what this picture depicts, but with continued inspection or a hint, the fragments suddenly are perceptually reorganized and recognized, in this case, as a Dalmatian dog. A recognizable image emerges that had no perceptual reality before. Hence, there is some sort of perceptual change among the neurons in your brain. This also leads to a change in the way in which you perceive the shape and depth of the scene. Perhaps most importantly, the figure now looks like the object it was supposed to represent - it now has the shape and depth relations of a Dalmatian dog. Once you have recognized the Dalmatian dog, it becomes almost impossible to see the picture in its original meaningless interpretation. The picture becomes permanently meaningful. This is in contrast to a truly bistable or ambiguous figure that has two equally likely interpretations. The bistable or ambiguous figure will "flip" between two states perennially, because your brain cannot decide which one is more meaningfully biased over the other one. In the case of the Dalmatian dog, however, once your brain perceives the "correct" image and ascribes meaning to the picture, your brain will not be able to perceive a meaningless image again, because the meaningless interpretation is no longer equally biased with that of your past experience with Dalmatian dogs. During all the time you were staring at the picture, the image on your retina did not change. Rather, your brain worked to construct a correct interpretation of the image, trying out different interpretations, until your brain "recognized" something. This emphasizes that perception is an active process of constructing a scene description. R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #28: This experiment shows that past experience can affect your perception of such properties as form or depth. Consider what happens when you view this illustration. At first most people cannot tell what this picture depicts, but with continued inspection or a hint, the fragments suddenly are perceptually reorganized and recognized, in this case, as a Dalmatian dog. A recognizable image emerges that had no perceptual reality before. Hence, there is some sort of perceptual change among the neurons in your brain. This also leads to a change in the way in which you perceive the shape and depth of the scene. Perhaps most importantly, the figure now looks like the object it was supposed to represent - it now has the shape and depth relations of a Dalmatian dog. Once you have recognized the Dalmatian dog, it becomes almost impossible to see the picture in its original meaningless interpretation. The picture becomes permanently meaningful. This is in contrast to a truly bistable or ambiguous figure that has two equally likely interpretations. The bistable or ambiguous figure will "flip" between two states perennially, because your brain cannot decide which one is more meaningfully biased over the other one. In the case of the Dalmatian dog, however, once your brain perceives the "correct" image and ascribes meaning to the picture, your brain will not be able to perceive a meaningless image again, because the meaningless interpretation is no longer equally biased with that of your past experience with Dalmatian dogs. During all the time you were staring at the picture, the image on your retina did not change. Rather, your brain worked to construct a correct interpretation of the image, trying out different interpretations, until your brain "recognized" something. This emphasizes that perception is an active process of constructing a scene description. R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #30: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #31: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #33: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #37: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #43: Options dialog from MultiEdit 8.0 . To date, we consider this the definitive example of how not to design a tabbed dialog. The sheer number of tabs, combined with the use of iconic labels and the gratuitous use of graphics on the tabs themselves results in a veritable visual assault. Once your eyes recover from the initial assault, you may be able to spot another problem: the use of nested tabs (note that two separate tabs on the dialog are highlighted). R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #44: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #50: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #51: R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #55: If you really want to make things difficult for your users, just slap a screen together without regard for order or organization. This image is taken from IBM's Aptiva Communication Center , and demonstrates to us at least, that the developers simply wanted to get the settings on the screen, rather than make it easy for people to adjust the settings. There is no flow to the screen; your eyes just jump around from place to place as your brain tries to elicit some sort of order. A well-designed screen, in stark contrast to this image, uses position, alignment, and grouping to organize the information, to provide an information flow . This not only makes it easier to locate a specific piece of information, it relieves the brain from having to subconsciously apply order. Some hints: Vertically-arranged options are scanned much easier Make sure fields are long enough to contain the informatio Left-align labels and their fields within a group Assign mnemonics to significant letters in the label ('a' for Wait?, 'i' for Fine?) In all fairness, IBM did not develop the Communication Center ; the application was purchased from a third-party provider. IBM could have saved themselves some embarrassment if they had reviewed the application before the purchase. R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #67: http://www.ibm.com/ibm/hci/guidelines/design/designers_iceberg.html R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #69: Here is the IBM RealCD user interface, that is, about all that most users will likely see. There is a great deal more to it, such as the list of songs contained on the CD, and the "Help Book", as IBM prefers to call it, which explains how to use the application. The problem is, there is no indication from the main interface that these features exist, nor does the interface provide any clue as to how the user can access them. Strangely, this is by design, and the IBM design team is quite proud of this fact: their main goal was to reduce all of the "clutter" created by standard GUI controls. The end result of their efforts to reduce clutter is an interface in which 88% of the space is devoted to a logo , and the remaining 12% provides absolutely no direction to the user. http://www.iarchitect.com/mshame.htm IBM RealCD(TM) is an object-oriented user interface design for listening to digital audio. The real-world interface, modeled on a plastic CD case and combined with controls for playing music, represents the state of the art for on-line music R.Polillo, Interazione uomo macchina - Parte terza, 2
  • #71: Www.bluemountain.com Invio di e-cards gratuite per ogni occasione Ha anche I-Ching R.Polillo, Interazione uomo macchina - Parte terza, 2