12. Progettare la grafica
•Download as PPTX, PDF•
2 likes•804 views
Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2010-2011
Recommended
More Related Content
Similar to 12. Progettare la grafica
Similar to 12. Progettare la grafica (18)
More from Roberto Polillo
More from Roberto Polillo (20)
Recently uploaded
Recently uploaded (20)
12. Progettare la grafica
- 1. 1 PROGETTARE LA GRAFICA Corso di Interazione Uomo Macchina AA 2010-2011 Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione R.Polillo - Ottobre 2010
- 2. Chiarire gli obbiettivi 4 La grafica di un sistema interattivo può avere obiettivi diversi, che possono essere fra loro in conflitto: R.Polillo - Ottobre 2010
- 3. 5 R.Polillo - Ottobre 2010
- 4. 6 R.Polillo - Ottobre 2010
- 5. La grafica per la usabilità 7 “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” ISO 9241-12, “Presentation of information” R.Polillo - Ottobre 2010
- 6. La grafica per la usabilità (segue) 8 Nel progettare l’informazione visiva si devo considerare le seguenti caratteristiche: Chiarezza Discriminabilità Concisione Consistenza Scopribilità Leggibilità Comprensibilità ISO 9241-12, “Presentation of information” R.Polillo - Ottobre 2010
- 7. 9 R.Polillo - Ottobre 2010
- 8. La teoria della Gestalt 10 “Nella percezione visiva, il tutto è più della somma delle sue parti” Luci “in movimento” R.Polillo - Ottobre 2010
- 9. Salvador Dalì, 1935 “Face of Mae West which may be used as 11 R.Polillo - Ottobre 2010 an apartement”
- 10. Le leggi della gestalt (M.Wertheimer, 1923) 12 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 dell’esperienza passata R.Polillo - Ottobre 2010
- 11. Legge della vicinanza 13 Gli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità (a parità di altre condizioni) R.Polillo - Ottobre 2010
- 12. 14 R.Polillo - Ottobre 2010
- 13. Legge della somiglianza 15 Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità (a parità di altre condizioni) R.Polillo - Ottobre 2010
- 14. 16 R.Polillo - Ottobre 2010
- 15. Legge della chiusura 17 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 - Ottobre 2010
- 16. Esempio: conflitto fra chiusura e vicinanza 18 a b R.Polillo - Ottobre 2010
- 17. Legge della continuità di direzione (o della “curva buona”) 19 Quelle parti di una figura che formano una “curva buona” o che vanno nella stessa direzione si costituiscono in unità più facilmente delle altre R.Polillo - Ottobre 2010
- 18. Legge della “buona forma” 20 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 - Ottobre 2010
- 19. Legge della “buona forma”: altri esempi 21 R.Polillo - Ottobre 2010
- 20. Legge dell’esperienza passata 22 L’esperienza modella le nostre impressioni a b R.Polillo - Ottobre 2010
- 21. Legge dell’esperienza passata: altri esempi 23 a R.Polillo - Ottobre 2010 b
- 22. Vicinanza 24 R.Polillo - Ottobre 2010
- 23. L’ esempio precedente, ristrutturato 25 R.Polillo - Ottobre 2010
- 24. 26 Da PowerPoint 2007 R.Polillo - Ottobre 2010
- 25. Perché questa immagine è poco comprensibile? 27 R.Polillo - Ottobre 2010
- 26. 28 Per farla stare su una riga Ma la leggiamo così R.Polillo - Ottobre 2010
- 27. Somiglianza 29 British-airways (2003) a Yahoo (2009) R.Polillo - Ottobre 2010 c Vista (2009)
- 28. 30 R.Polillo - Ottobre 2010
- 29. 31 Windows Vista (2009) R.Polillo - Ottobre 2010
- 30. 32 iPhone OS version 3.0 on the iPhone 3GS R.Polillo - Ottobre 2010
- 31. 33 R.Polillo - Ottobre 2010
- 32. 34 R.Polillo - Ottobre 2010
- 33. 35 R.Polillo - Ottobre 2010
- 34. 36 R.Polillo - Ottobre 2010
- 35. 37 Siete d’accordo con l’uso dei colori nella tabella seguente? R.Polillo - Ottobre 2010
- 36. 38 (MAC OS 8) R.Polillo - Ottobre 2010
- 37. 39 R.Polillo - Ottobre 2010
- 38. 40 R.Polillo - Ottobre 2010
- 39. 41 R.Polillo - Ottobre 2010
- 40. Chiusura 42 R.Polillo - Ottobre 2010
- 41. L’importanza dei riquadri: esempio (I ) 43 R.Polillo - Ottobre 2010
- 42. L’importanza dei riquadri: esempio (II) 44 R.Polillo - Ottobre 2010
- 43. 45 R.Polillo - Ottobre 2010
- 44. 46 R.Polillo - Ottobre 2010
- 45. 47 R.Polillo - Ottobre 2010
- 46. 48 R.Polillo - Ottobre 2010
- 47. Colore 49 R.Polillo - Ottobre 2010
- 48. 50 R.Polillo - Ottobre 2010
- 49. 51 R.Polillo - Ottobre 2010
- 50. STOP EXIT PERICOLO ! AVANTI 52 R.Polillo - Ottobre 2010
- 51. 53 R.Polillo - Ottobre 2010
- 52. 54 R.Polillo - Ottobre 2010
- 53. Percorsi visivi 55 R.Polillo - Ottobre 2010
- 54. 56 1 2 3 4 5 6 7 Yarbus, 1967 R.Polillo - Ottobre 2010
- 55. 57 R.Polillo - Ottobre 2010
- 56. Heat map 58 Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern) R.Polillo - Ottobre 2010
- 57. Percorsi visivi: siete d’accordo con questo layout? 59 R.Polillo - Ottobre 2010
- 58. In sintesi… 60 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 ambigui R.Polillo - Ottobre 2010
- 59. 61 R.Polillo - Ottobre 2010
- 60. 62 R.Polillo - Ottobre 2010
- 61. 63 R.Polillo - Ottobre 2010
- 62. 64 R.Polillo - Ottobre 2010
- 63. 65 R.Polillo - Ottobre 2010
- 64. 66 R.Polillo - Ottobre 2010
- 65. 67 R.Polillo - Ottobre 2010
- 66. 68 R.Polillo - Ottobre 2010
- 67. 69 R.Polillo - Ottobre 2010 CocaCola tedesca nel 2003
- 68. 70 R.Polillo - Ottobre 2010 CocaCola USA nel 2003
- 69. 71 R.Polillo - Ottobre 2010 www.cocacola.com nel 2003
- 70. 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. 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.