Corso di Interazione Uomo Macchina
AA 2013-2014
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocc...
Comunicazione visiva e interaction design
 La comunicazione visiva ha un ruolo preponderante
nell’interazione uomo-macchi...
Chiarire gli obbiettivi
R.Polillo - Aprile 2014
4
La progettazione grafica di un sistema interattivo può avere
obiettivi d...
5 R.Polillo - Aprile 2014
Un esempio analogo
R.Polillo - Aprile 20146
Un esempio analogo
R.Polillo - Aprile 20147
La grafica per la usabilità
“La presentazione dell’informazione visiva dovrebbe
abilitare l’utente ad eseguire i compiti p...
Organizzazione delle pagine
 Strutturare le pagine in modo facilmente
riconoscibile, semplice, ordinato, suggerendo
perco...
Griglie logiche e allineamenti10
R.Polillo - Aprile 2014
R.Polillo - Aprile 201411
R.Polillo - Aprile 201412
I disallineamenti
generano una
percezione di
complessità
R.Polillo - Aprile 201413
Va bene?
R.Polillo - Aprile 2014
14
L’ esempio precedente, ristrutturato
R.Polillo - Aprile 2014
15
 Le slides che seguono mostrano il progressivo
miglioramento del layout di una pagina Web
R.Polillo - Aprile 2014
16
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201417
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201418
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201419
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201420
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201421
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201422
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201423
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201424
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201425
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201426
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201427
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201428
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
AFDGH
R.Polillo - Aprile 20...
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
AFDGH
R.Polillo - Aprile 20...
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
Siamo partiti da
qui ….
R.Polillo - Aprile 201431
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
AFDGH
… e siamo
arrivati qu...
Equilibrio33
R.Polillo - Aprile 2014
da Rudolf Arnheim, Arte e percezione visiva, 1954
La “regola dei terzi” in fotografia
R.Polillo - Aprile 2014
44
R.Polillo - Aprile 201445
R.Polillo - Aprile 201446
Ricerca visiva47
R.Polillo - Aprile 2014
Dov’è
Waldo?
R.Polillo - Aprile 2014
48
Meglio organizzare la tabella in ordine alfabetico per colonne
Facile da
scandire?
Lettura
orizzontale
o diagonale?
Percorsi visivi: siete d’accordo con questo
layout?
R.Polillo - Aprile 2014
51
Esempio: Power Point
R.Polillo - Aprile 2014
52
Power Point 2010
R.Polillo - Aprile 2014
53
PowerPoint 2010,
Windows
Direzione54
R.Polillo - Aprile 2014
Diagonali
1
2
3
4
1
2
3
4
Minimalismo vs
massimalismo
63
R.Polillo - Aprile 2014
Minimalismo vs massimalismo
"La perfezione si raggiunge non quando non
c'è più niente da aggiungere, ma quando
non c'è più...
Minimalismo
R.Polillo - Aprile 2014
65
www.google.com
Minimalismo
R.Polillo - Aprile 2014
66
www.dropbox.com
Massimalismo
R.Polillo - Marzo 2014
www.brigaderia.com.br
Massimalismo
R.Polillo - Aprile 2014
68
www.glamour.it
Il ruolo delle immagini69
R.Polillo - Aprile 2014
Il ruolo delle immagini
 A che cosa serve un'immagine nel contesto
della schermata complessiva?
 Come decorazione ?
 Co...
Ruolo delle immagini: esempio
R.Polillo - Aprile 2014
71
www.ibm.com
Ruolo delle immagini: esempio
R.Polillo - Aprile 2014
72
Il ruolo delle immagini: esempio
R.Polillo - Aprile 2014
73
Ruolo delle immagini: esempio
R.Polillo - Aprile 2014
74
www.fiat.com
Ruolo delle immagini: esempio
R.Polillo - Aprile 2014
75
(segue)
R.Polillo - Aprile 2014
76
Siete d'accordo con questa
sitemap?
R.Polillo - Aprile 2014
77
E con questa?
(Sitemap dei siti della Regione Toscana)
R.Polillo - Aprile 2014
78
E con questa?
R.Polillo - Aprile 2014
79
Coerenza visiva80
R.Polillo - Aprile 2014
Coerenza
 Utilizzare uno stile e segnali visivi coerenti
all’interno dell’applicazione e fra applicazioni
“della stessa c...
Link interni al sito Link esterni al sito Link alla home page
Search engine interna Banners pubblicitari Login /registrazi...
Dialogo consistente
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
Es. di incoerenza: menu che si trasformano
R.Polillo - Marzo 2014
Stile dei messaggi coerente: esempio
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
15. Ancora sulla comunicazione visiva
Upcoming SlideShare
Loading in...5
×

15. Ancora sulla comunicazione visiva

664

Published on

Slides dalle lezioni del corso di Interazione Uomo Macchina per gli studenti del corso di laurea in Informatica - Università di Milano Bicocca (prof.R.Polillo) - Lezione del 16 aprile 2014

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
664
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

15. Ancora sulla comunicazione visiva

  1. 1. Corso di Interazione Uomo Macchina AA 2013-2014 Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione ANCORA SULLA COMUNICAZIONE VISIVA R.Polillo - Aprile 2014 1
  2. 2. Comunicazione visiva e interaction design  La comunicazione visiva ha un ruolo preponderante nell’interazione uomo-macchina: immagini, testo, animazioni, video  Quindi la cura degli aspetti grafici nell’interaction design è di grande importanza  Occorre considerare aspetti percettivi, psicologici, culturali  Grande tradizione e cultura dell’immagine, ma poche indicazioni scientificamente dimostrabili  E’ utile che anche gli informatici acquisiscano sensibilità in quest’area. R.Polillo - Aprile 2014 3
  3. 3. Chiarire gli obbiettivi R.Polillo - Aprile 2014 4 La progettazione grafica di un sistema interattivo può avere obiettivi diversi, che possono essere fra loro in conflitto:
  4. 4. 5 R.Polillo - Aprile 2014
  5. 5. Un esempio analogo R.Polillo - Aprile 20146
  6. 6. Un esempio analogo R.Polillo - Aprile 20147
  7. 7. La grafica per la usabilità “La presentazione dell’informazione visiva dovrebbe abilitare l’utente ad eseguire i compiti percettivi (per esempio, la ricerca di informazioni sullo schermo) in modo efficace, efficiente e con soddisfazione […] R.Polillo - Aprile 2014 8 Nel progettare l’informazione visiva si devono considerare le seguenti caratteristiche: Chiarezza Discriminabilità Concisione Consistenza Scopribilità Leggibilità Comprensibilità" ISO 9241-12, “Presentation of information”
  8. 8. Organizzazione delle pagine  Strutturare le pagine in modo facilmente riconoscibile, semplice, ordinato, suggerendo percorsi visivi coerenti con i casi d'uso  Usare griglie logiche coerenti  Curare gli allineamenti  Evitare rumore visivo  Evitare le ridondanze  Tenere presenti i principi della teoria della Gestalt  Usare il colore per migliorare la comprensione della pagina  Coerenza, coerenza, coerenza…. R.Polillo - Aprile 2014 9
  9. 9. Griglie logiche e allineamenti10 R.Polillo - Aprile 2014
  10. 10. R.Polillo - Aprile 201411
  11. 11. R.Polillo - Aprile 201412 I disallineamenti generano una percezione di complessità
  12. 12. R.Polillo - Aprile 201413
  13. 13. Va bene? R.Polillo - Aprile 2014 14
  14. 14. L’ esempio precedente, ristrutturato R.Polillo - Aprile 2014 15
  15. 15.  Le slides che seguono mostrano il progressivo miglioramento del layout di una pagina Web R.Polillo - Aprile 2014 16
  16. 16. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201417
  17. 17. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201418
  18. 18. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201419
  19. 19. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201420
  20. 20. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201421
  21. 21. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201422
  22. 22. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201423
  23. 23. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201424
  24. 24. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201425
  25. 25. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201426
  26. 26. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201427
  27. 27. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201428
  28. 28. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH R.Polillo - Aprile 201429
  29. 29. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH R.Polillo - Aprile 201430
  30. 30. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii Siamo partiti da qui …. R.Polillo - Aprile 201431
  31. 31. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH … e siamo arrivati qui …. R.Polillo - Aprile 201432
  32. 32. Equilibrio33 R.Polillo - Aprile 2014
  33. 33. da Rudolf Arnheim, Arte e percezione visiva, 1954
  34. 34. La “regola dei terzi” in fotografia R.Polillo - Aprile 2014 44
  35. 35. R.Polillo - Aprile 201445
  36. 36. R.Polillo - Aprile 201446
  37. 37. Ricerca visiva47 R.Polillo - Aprile 2014
  38. 38. Dov’è Waldo? R.Polillo - Aprile 2014 48
  39. 39. Meglio organizzare la tabella in ordine alfabetico per colonne
  40. 40. Facile da scandire? Lettura orizzontale o diagonale?
  41. 41. Percorsi visivi: siete d’accordo con questo layout? R.Polillo - Aprile 2014 51
  42. 42. Esempio: Power Point R.Polillo - Aprile 2014 52
  43. 43. Power Point 2010 R.Polillo - Aprile 2014 53 PowerPoint 2010, Windows
  44. 44. Direzione54 R.Polillo - Aprile 2014
  45. 45. Diagonali
  46. 46. 1 2 3 4
  47. 47. 1 2 3 4
  48. 48. Minimalismo vs massimalismo 63 R.Polillo - Aprile 2014
  49. 49. Minimalismo vs massimalismo "La perfezione si raggiunge non quando non c'è più niente da aggiungere, ma quando non c'è più niente da togliere" Antoine de St-Exupery R.Polillo - Aprile 2014 64
  50. 50. Minimalismo R.Polillo - Aprile 2014 65 www.google.com
  51. 51. Minimalismo R.Polillo - Aprile 2014 66 www.dropbox.com
  52. 52. Massimalismo R.Polillo - Marzo 2014 www.brigaderia.com.br
  53. 53. Massimalismo R.Polillo - Aprile 2014 68 www.glamour.it
  54. 54. Il ruolo delle immagini69 R.Polillo - Aprile 2014
  55. 55. Il ruolo delle immagini  A che cosa serve un'immagine nel contesto della schermata complessiva?  Come decorazione ?  Come riempitivo?  Per illustrare un contenuto?  Per veicolare un messaggio?  Per dirigere l'attenzione su un contenuto (es.banner)? R.Polillo - Aprile 2014 70
  56. 56. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 71 www.ibm.com
  57. 57. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 72
  58. 58. Il ruolo delle immagini: esempio R.Polillo - Aprile 2014 73
  59. 59. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 74 www.fiat.com
  60. 60. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 75
  61. 61. (segue) R.Polillo - Aprile 2014 76
  62. 62. Siete d'accordo con questa sitemap? R.Polillo - Aprile 2014 77
  63. 63. E con questa? (Sitemap dei siti della Regione Toscana) R.Polillo - Aprile 2014 78
  64. 64. E con questa? R.Polillo - Aprile 2014 79
  65. 65. Coerenza visiva80 R.Polillo - Aprile 2014
  66. 66. Coerenza  Utilizzare uno stile e segnali visivi coerenti all’interno dell’applicazione e fra applicazioni “della stessa categoria” R.Polillo - Aprile 2014 81
  67. 67. Link interni al sito Link esterni al sito Link alla home page Search engine interna Banners pubblicitari Login /registrazione Shopping cart Help Links ai prodotti Bernard, 2001 Organizzazione abituale R.Polillo - Marzo 2014
  68. 68. Dialogo consistente R.Polillo - Marzo 2014
  69. 69. R.Polillo - Marzo 2014
  70. 70. R.Polillo - Marzo 2014
  71. 71. R.Polillo - Marzo 2014
  72. 72. R.Polillo - Marzo 2014
  73. 73. Es. di incoerenza: menu che si trasformano R.Polillo - Marzo 2014
  74. 74. Stile dei messaggi coerente: esempio R.Polillo - Marzo 2014
  75. 75. R.Polillo - Marzo 2014
  76. 76. R.Polillo - Marzo 2014
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×