Your SlideShare is downloading. ×
0
Corso di Interazione Uomo Macchina
AA 2013-2014
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocc...
Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano
tutte le necessarie spiegazioni. Vedi...
La teoria della Gestalt
3
“Nella percezione visiva, il tutto è più della
somma delle sue parti”
Luci “in movimento”
R.Poli...
Salvador Dalì, 1935
“Face of Mae West
which may be used as
an apartement”4 R.Polillo - Aprile 2014
Le leggi della gestalt (M.Wertheimer, 1923)
5
 Legge della continuità di direzione
 Legge della buona forma
 Legge dell...
Legge della continuità di direzione
R.Polillo - Aprile 2014
6
Quelle parti di una figura che formano una “curva buona” o
c...
Legge della “buona forma”
7
Il campo percettivo si segmenta in modo che risultino
entità per quanto possibile equilibrate,...
Legge della “buona forma”: altri esempi
R.Polillo - Aprile 2014
8
Legge dell’esperienza passata
R.Polillo - Aprile 2014
9
L’esperienza passata influenza il modo con cui vediamo
una immagin...
Legge dell’esperienza passata: altri esempi
R.Polillo - Aprile 2014
10
a b
Ambiguità
R.Polillo - Aprile 2014
11
R.Polillo - Aprile 201412
R.Polillo - Aprile 201413
R.Polillo - Aprile 201414
Legge della vicinanza
15
Gli elementi del campo visivo che sono fra loro più vicini
tendono ad essere raccolti in unità
R....
16 R.Polillo - Aprile 2014
Vicinanza: siete d'accordo?
R.Polillo - Aprile 2014
17
Da PowerPoint 2007
Qual è il problema?
R.Polillo - Aprile 2014
18
Legge della somiglianza
19
Gli elementi del campo visivo che sono tra loro simili tendono
ad essere raccolti in unità
R.Po...
20 R.Polillo - Aprile 2014
Siete d’accordo con questo uso dei colori?
R.Polillo - Aprile 2014
21
Siete d'accordo con questo uso delle
icone?
R.Polillo - Aprile 2014
22
Siete d'accordo con questo
design?
R.Polillo - Aprile 2014
23
Perché questa immagine non è comprensibile?
R.Polillo - Aprile 201424
R.Polillo - Aprile 201425
Per farla stare su una riga
Ma la leggiamo così
Che cosa non va in questa home
page?
R.Polillo - Aprile 2014
26
Legge della chiusura
27
Le linee delimitanti una superficie chiusa si percepiscono
come unità più facilmente di quelle che...
Esempio: conflitto fra chiusura e vicinanza
28
a
b
R.Polillo - Aprile 2014
L’importanza dei riquadri: esempio (I )
29 R.Polillo - Aprile 2014
L’importanza dei riquadri: esempio (II)
30
R.Polillo - Aprile 2014
Chiusura: come migliorare un
menu
R.Polillo - Aprile 2014
31
Uso delle cornici nelle form
Con cornici
Senza cornici
R.Polillo - Aprile 2014
32
Chiusura: esempio
R.Polillo - Aprile 2014
33
34
R.Polillo - Aprile 2014
35
R.Polillo - Aprile 2014
Può essere migliorata?
R.Polillo - Aprile 2014
36
A che cosa servono queste
icone?
R.Polillo - Aprile 2014
37
aYahoo (2009)
British-airways (2003)
E queste?
R.Polillo - Aprile 2014
38
iPhone 3GS
R.Polillo - Aprile 201439
Uso dei colori
 Usate il colore (ma non solo il colore:
daltonismo) per veicolare dei significati
R.Polillo - Aprile 2014...
41 R.Polillo - Aprile 2014
R.Polillo - Aprile 201442
Uso dei colori: esempio
R.Polillo - Aprile 2014
43
Windows Vista (2009)
Daltonismo: esempio
R.Polillo - Aprile 2014
44
(segue)
R.Polillo - Aprile 2014
45
Associazioni di colore
 Siate coerenti con le usuali associazioni di
significato ai diversi colori
 Attenzione: possono ...
STOP EXIT
PERICOLO !
AVANTI
47 R.Polillo - Aprile 2014
48 R.Polillo - Aprile 2014
49 R.Polillo - Aprile 2014
Contrasto di colore
 Il contrasto di colore può essere usato per
dirigere l'attenzione su particolari element
R.Polillo -...
51 R.Polillo - Aprile 2014
52 R.Polillo - Aprile 2014
53 R.Polillo - Aprile 2014
54 R.Polillo - Aprile 2014
Colori "caldi" e "freddi"
COLORI CALDI
azione,
urgenza
richiesta di risposta,
vicinanza
COLORI FREDDI
lontananza,
tranquil...
Colori caldi e freddi
Si dice che i colori caldi tendano ad avanzare,
i colori freddi a recedere
R.Polillo - Aprile 2014
56
R.Polillo - Aprile 201457
R.Polillo - Aprile 201458
Quanti colori in una pagina?
 Usate il colore con parsimonia, evitando
l'effetto "music hall"
 Se i colori sono troppo, ...
Banner
Funzioni
R.Polillo - Aprile 201460
61
R.Polillo - Aprile 2014
R.Polillo - Aprile 201462
Texture di sfondo
 Attenzione alle texture di sfondo, che possono
ridurre fortemente la leggibilità di testi e
controlli
...
64 R.Polillo - Aprile 2014
Stile del design
 Definite lo stile complessivo del design e siate
coerente con esso (es.: brand image)
R.Polillo - April...
66 R.Polillo - Aprile 2014
CocaCola tedesca nel 200367 R.Polillo - Aprile 2014
CocaCola USA nel 200368 R.Polillo - Aprile 2014
www.cocacola.com nel 200369 R.Polillo - Aprile 2014
In sintesi…
Una buona grafica dovrebbe:
 essere facilmente leggibile (testi, immagini) per tutti gli
utenti a cui è desti...
Linee guida
1. Usare vicinanza, somiglianza e chiusura per
organizzare visivamente gli elementi in base alla loro
funzione...
Website: esempi da discutere
 http://www.denisechandler.com/portfolio.html
 http://naldzgraphics.net/inspirations/50-
co...
Upcoming SlideShare
Loading in...5
×

12.Visione e progettazione grafica

844

Published on

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

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

No Downloads
Views
Total Views
844
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
59
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "12.Visione e progettazione grafica"

  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 VISIONE E PROGETTAZIONE GRAFICA R.Polillo - Aprile 2014 1
  2. 2. Queste slides… … si basano sul libro “Facile da usare”, dell’autore, dove si trovano tutte le necessarie spiegazioni. Vedi www.rpolillo.it Queste slide sono disponibili con licenza Creative Commons (attribuzione, non commerciale, condividi allo stesso modo) a chiunque desiderasse utilizzarle, per esempio a scopo didattico, senza necessità di preventiva autorizzazione: http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it La licenza non si estende alle immagini fotografiche e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che sono stati indicati, ove possibile, nelle didascalie del libro. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle. R.Polillo - Aprile 2014 2
  3. 3. La teoria della Gestalt 3 “Nella percezione visiva, il tutto è più della somma delle sue parti” Luci “in movimento” R.Polillo - Aprile 2014
  4. 4. Salvador Dalì, 1935 “Face of Mae West which may be used as an apartement”4 R.Polillo - Aprile 2014
  5. 5. Le leggi della gestalt (M.Wertheimer, 1923) 5  Legge della continuità di direzione  Legge della buona forma  Legge dell’esperienza passata  Legge della vicinanza  Legge della somiglianza  Legge della chiusura R.Polillo - Aprile 2014
  6. 6. Legge della continuità di direzione R.Polillo - Aprile 2014 6 Quelle parti di una figura che formano una “curva buona” o che vanno nella stessa direzione tendono a essere raccolti in unità più facilmente delle altre
  7. 7. Legge della “buona forma” 7 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 R.Polillo - Aprile 2014
  8. 8. Legge della “buona forma”: altri esempi R.Polillo - Aprile 2014 8
  9. 9. Legge dell’esperienza passata R.Polillo - Aprile 2014 9 L’esperienza passata influenza il modo con cui vediamo una immagine a b
  10. 10. Legge dell’esperienza passata: altri esempi R.Polillo - Aprile 2014 10 a b
  11. 11. Ambiguità R.Polillo - Aprile 2014 11
  12. 12. R.Polillo - Aprile 201412
  13. 13. R.Polillo - Aprile 201413
  14. 14. R.Polillo - Aprile 201414
  15. 15. Legge della vicinanza 15 Gli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità R.Polillo - Aprile 2014
  16. 16. 16 R.Polillo - Aprile 2014
  17. 17. Vicinanza: siete d'accordo? R.Polillo - Aprile 2014 17
  18. 18. Da PowerPoint 2007 Qual è il problema? R.Polillo - Aprile 2014 18
  19. 19. Legge della somiglianza 19 Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità R.Polillo - Aprile 2014
  20. 20. 20 R.Polillo - Aprile 2014
  21. 21. Siete d’accordo con questo uso dei colori? R.Polillo - Aprile 2014 21
  22. 22. Siete d'accordo con questo uso delle icone? R.Polillo - Aprile 2014 22
  23. 23. Siete d'accordo con questo design? R.Polillo - Aprile 2014 23
  24. 24. Perché questa immagine non è comprensibile? R.Polillo - Aprile 201424
  25. 25. R.Polillo - Aprile 201425 Per farla stare su una riga Ma la leggiamo così
  26. 26. Che cosa non va in questa home page? R.Polillo - Aprile 2014 26
  27. 27. Legge della chiusura 27 Le linee delimitanti una superficie chiusa si percepiscono come unità più facilmente di quelle che non si chiudono (a parità di altre condizioni) R.Polillo - Aprile 2014
  28. 28. Esempio: conflitto fra chiusura e vicinanza 28 a b R.Polillo - Aprile 2014
  29. 29. L’importanza dei riquadri: esempio (I ) 29 R.Polillo - Aprile 2014
  30. 30. L’importanza dei riquadri: esempio (II) 30 R.Polillo - Aprile 2014
  31. 31. Chiusura: come migliorare un menu R.Polillo - Aprile 2014 31
  32. 32. Uso delle cornici nelle form Con cornici Senza cornici R.Polillo - Aprile 2014 32
  33. 33. Chiusura: esempio R.Polillo - Aprile 2014 33
  34. 34. 34 R.Polillo - Aprile 2014
  35. 35. 35 R.Polillo - Aprile 2014
  36. 36. Può essere migliorata? R.Polillo - Aprile 2014 36
  37. 37. A che cosa servono queste icone? R.Polillo - Aprile 2014 37 aYahoo (2009) British-airways (2003)
  38. 38. E queste? R.Polillo - Aprile 2014 38 iPhone 3GS
  39. 39. R.Polillo - Aprile 201439
  40. 40. Uso dei colori  Usate il colore (ma non solo il colore: daltonismo) per veicolare dei significati R.Polillo - Aprile 2014 40
  41. 41. 41 R.Polillo - Aprile 2014
  42. 42. R.Polillo - Aprile 201442
  43. 43. Uso dei colori: esempio R.Polillo - Aprile 2014 43 Windows Vista (2009)
  44. 44. Daltonismo: esempio R.Polillo - Aprile 2014 44
  45. 45. (segue) R.Polillo - Aprile 2014 45
  46. 46. Associazioni di colore  Siate coerenti con le usuali associazioni di significato ai diversi colori  Attenzione: possono essere diverse a seconda delle diverse culture! R.Polillo - Aprile 2014 46
  47. 47. STOP EXIT PERICOLO ! AVANTI 47 R.Polillo - Aprile 2014
  48. 48. 48 R.Polillo - Aprile 2014
  49. 49. 49 R.Polillo - Aprile 2014
  50. 50. Contrasto di colore  Il contrasto di colore può essere usato per dirigere l'attenzione su particolari element R.Polillo - Aprile 2014 50 (MAC OS 8)
  51. 51. 51 R.Polillo - Aprile 2014
  52. 52. 52 R.Polillo - Aprile 2014
  53. 53. 53 R.Polillo - Aprile 2014
  54. 54. 54 R.Polillo - Aprile 2014
  55. 55. Colori "caldi" e "freddi" COLORI CALDI azione, urgenza richiesta di risposta, vicinanza COLORI FREDDI lontananza, tranquillità, informazioni di stato Nota: le associazioni di cui sopra vengono normalmente date per scontate, ma l’evidenza scientifica è dubbia R.Polillo - Aprile 2014 55
  56. 56. Colori caldi e freddi Si dice che i colori caldi tendano ad avanzare, i colori freddi a recedere R.Polillo - Aprile 2014 56
  57. 57. R.Polillo - Aprile 201457
  58. 58. R.Polillo - Aprile 201458
  59. 59. Quanti colori in una pagina?  Usate il colore con parsimonia, evitando l'effetto "music hall"  Se i colori sono troppo, si crea rumore visivo, e le associazioni colore/signifcato non funzionano più… R.Polillo - Aprile 2014 59
  60. 60. Banner Funzioni R.Polillo - Aprile 201460
  61. 61. 61 R.Polillo - Aprile 2014
  62. 62. R.Polillo - Aprile 201462
  63. 63. Texture di sfondo  Attenzione alle texture di sfondo, che possono ridurre fortemente la leggibilità di testi e controlli R.Polillo - Aprile 2014 63
  64. 64. 64 R.Polillo - Aprile 2014
  65. 65. Stile del design  Definite lo stile complessivo del design e siate coerente con esso (es.: brand image) R.Polillo - Aprile 2014 65
  66. 66. 66 R.Polillo - Aprile 2014
  67. 67. CocaCola tedesca nel 200367 R.Polillo - Aprile 2014
  68. 68. CocaCola USA nel 200368 R.Polillo - Aprile 2014
  69. 69. www.cocacola.com nel 200369 R.Polillo - Aprile 2014
  70. 70. 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 all’interno del prodotto (e del suo “ecosistema”)  non contenere elementi ridondanti o ambiguiR.Polillo - Aprile 2014 70
  71. 71. Linee guida 1. Usare vicinanza, somiglianza e chiusura per organizzare visivamente gli elementi in base alla loro funzione e significato 2. Evitare ridondanza, confusione e rumore visivo 3. Suggerire percorsi visivi coerenti con i casi d'uso 4. Usare forme e stili di raffigurazione fra loro coerenti e contestualmente appropriate 5. Inserire gli elementi grafici in una o più griglie logiche progettate in modo coerente per tutta l'applicazione R.Polillo - Aprile 2014 71
  72. 72. Website: esempi da discutere  http://www.denisechandler.com/portfolio.html  http://naldzgraphics.net/inspirations/50- corporate-website-examples/  http://www.webpagesthatsuck.com R.Polillo - Aprile 2014 72
  1. A particular slide catching your eye?

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

×