1   PROGETTARE LA GRAFICA
    Corso di Interazione Uomo Macchina
    AA 2010-2011
    Roberto Polillo

    Corso di laurea...
Chiarire gli obbiettivi
4


    La grafica di un sistema interattivo può avere obiettivi diversi,
    che possono essere f...
5   R.Polillo - Ottobre 2010
6   R.Polillo - Ottobre 2010
La grafica per la usabilità
7


     “La presentazione dell’informazione visiva dovrebbe
     abilitare l’utente ad esegui...
La grafica per la usabilità (segue)
8


     Nel progettare l’informazione visiva si devo considerare
     le seguenti car...
9   R.Polillo - Ottobre 2010
La teoria della Gestalt
10


       “Nella percezione visiva, il tutto è più della
                  somma delle sue parti...
Salvador Dalì, 1935

                                “Face of Mae West
                                which may be used a...
Le leggi della gestalt (M.Wertheimer, 1923)
12


        Legge della vicinanza
        Legge della somiglianza
        ...
Legge della vicinanza
13



     Gli elementi del campo visivo che sono fra loro più vicini
     tendono ad essere raccolt...
14   R.Polillo - Ottobre 2010
Legge della somiglianza
15



     Gli elementi del campo visivo che sono tra loro simili tendono
     ad essere raccolti ...
16   R.Polillo - Ottobre 2010
Legge della chiusura
17



     Le linee delimitanti una superficie chiusa si percepiscono
     come unità più facilmente ...
Esempio: conflitto fra chiusura e vicinanza
18




         a




         b




                         R.Polillo - Otto...
Legge della continuità di direzione
     (o della “curva buona”)
19


     Quelle parti di una figura che formano una “cur...
Legge della “buona forma”
20


     Il campo percettivo si segmenta in modo che risultino
     entità per quanto possibile...
Legge della “buona forma”: altri esempi
21




                     R.Polillo - Ottobre 2010
Legge dell’esperienza passata
22


         L’esperienza modella le nostre impressioni




                a              ...
Legge dell’esperienza passata: altri esempi
23




             a         R.Polillo - Ottobre 2010   b
Vicinanza
24




                 R.Polillo - Ottobre 2010
L’ esempio precedente, ristrutturato
25




                     R.Polillo - Ottobre 2010
26




                                Da PowerPoint 2007


     R.Polillo - Ottobre 2010
Perché questa immagine è poco comprensibile?
27




                       R.Polillo - Ottobre 2010
28




     Per farla stare su una riga




        Ma la leggiamo così




             R.Polillo - Ottobre 2010
Somiglianza
29




                     British-airways (2003)


          a
      Yahoo (2009)            R.Polillo - Ott...
30   R.Polillo - Ottobre 2010
31




                Windows Vista (2009)


     R.Polillo - Ottobre 2010
32




     iPhone OS version 3.0 on the iPhone 3GS
                 R.Polillo - Ottobre 2010
33




     R.Polillo - Ottobre 2010
34




     R.Polillo - Ottobre 2010
35




     R.Polillo - Ottobre 2010
36




     R.Polillo - Ottobre 2010
37



     Siete d’accordo con l’uso dei colori nella tabella seguente?




                             R.Polillo - Ottob...
38




                                (MAC OS 8)

     R.Polillo - Ottobre 2010
39   R.Polillo - Ottobre 2010
40   R.Polillo - Ottobre 2010
41   R.Polillo - Ottobre 2010
Chiusura
42




                R.Polillo - Ottobre 2010
L’importanza dei riquadri: esempio (I )




43                    R.Polillo - Ottobre 2010
L’importanza dei riquadri: esempio (II)
44




                        R.Polillo - Ottobre 2010
45   R.Polillo - Ottobre 2010
46   R.Polillo - Ottobre 2010
47   R.Polillo - Ottobre 2010
48




     R.Polillo - Ottobre 2010
Colore
49




              R.Polillo - Ottobre 2010
50   R.Polillo - Ottobre 2010
51   R.Polillo - Ottobre 2010
STOP            EXIT

            PERICOLO !

        AVANTI
52          R.Polillo - Ottobre 2010
53   R.Polillo - Ottobre 2010
54   R.Polillo - Ottobre 2010
Percorsi visivi
55




                   R.Polillo - Ottobre 2010
56




                                    1




     2                              3




     4                         ...
57   R.Polillo - Ottobre 2010
Heat map
58




     Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern)
                   ...
Percorsi visivi: siete d’accordo con questo layout?

59




                          R.Polillo - Ottobre 2010
In sintesi…
60


     Una buona grafica dovrebbe:
        essere facilmente leggibile (testi, immagini) per tutti gli ute...
61   R.Polillo - Ottobre 2010
62   R.Polillo - Ottobre 2010
63   R.Polillo - Ottobre 2010
64   R.Polillo - Ottobre 2010
65   R.Polillo - Ottobre 2010
66   R.Polillo - Ottobre 2010
67   R.Polillo - Ottobre 2010
68   R.Polillo - Ottobre 2010
69   R.Polillo - Ottobre 2010
         CocaCola tedesca nel 2003
70   R.Polillo - Ottobre 2010
         CocaCola USA nel 2003
71   R.Polillo - Ottobre 2010
         www.cocacola.com nel 2003
Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano
tutte le necessarie spiegazioni. Vedi...
Upcoming SlideShare
Loading in …5
×

12. Progettare la grafica

2,656 views

Published on

Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2010-2011

Published in: Education
  • Be the first to comment

12. Progettare la grafica

  1. 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. 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. 3. 5 R.Polillo - Ottobre 2010
  4. 4. 6 R.Polillo - Ottobre 2010
  5. 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. 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. 7. 9 R.Polillo - Ottobre 2010
  8. 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. 9. Salvador Dalì, 1935 “Face of Mae West which may be used as 11 R.Polillo - Ottobre 2010 an apartement”
  10. 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. 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. 12. 14 R.Polillo - Ottobre 2010
  13. 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. 14. 16 R.Polillo - Ottobre 2010
  15. 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. 16. Esempio: conflitto fra chiusura e vicinanza 18 a b R.Polillo - Ottobre 2010
  17. 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. 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. 19. Legge della “buona forma”: altri esempi 21 R.Polillo - Ottobre 2010
  20. 20. Legge dell’esperienza passata 22 L’esperienza modella le nostre impressioni a b R.Polillo - Ottobre 2010
  21. 21. Legge dell’esperienza passata: altri esempi 23 a R.Polillo - Ottobre 2010 b
  22. 22. Vicinanza 24 R.Polillo - Ottobre 2010
  23. 23. L’ esempio precedente, ristrutturato 25 R.Polillo - Ottobre 2010
  24. 24. 26 Da PowerPoint 2007 R.Polillo - Ottobre 2010
  25. 25. Perché questa immagine è poco comprensibile? 27 R.Polillo - Ottobre 2010
  26. 26. 28 Per farla stare su una riga Ma la leggiamo così R.Polillo - Ottobre 2010
  27. 27. Somiglianza 29 British-airways (2003) a Yahoo (2009) R.Polillo - Ottobre 2010 c Vista (2009)
  28. 28. 30 R.Polillo - Ottobre 2010
  29. 29. 31 Windows Vista (2009) R.Polillo - Ottobre 2010
  30. 30. 32 iPhone OS version 3.0 on the iPhone 3GS R.Polillo - Ottobre 2010
  31. 31. 33 R.Polillo - Ottobre 2010
  32. 32. 34 R.Polillo - Ottobre 2010
  33. 33. 35 R.Polillo - Ottobre 2010
  34. 34. 36 R.Polillo - Ottobre 2010
  35. 35. 37 Siete d’accordo con l’uso dei colori nella tabella seguente? R.Polillo - Ottobre 2010
  36. 36. 38 (MAC OS 8) R.Polillo - Ottobre 2010
  37. 37. 39 R.Polillo - Ottobre 2010
  38. 38. 40 R.Polillo - Ottobre 2010
  39. 39. 41 R.Polillo - Ottobre 2010
  40. 40. Chiusura 42 R.Polillo - Ottobre 2010
  41. 41. L’importanza dei riquadri: esempio (I ) 43 R.Polillo - Ottobre 2010
  42. 42. L’importanza dei riquadri: esempio (II) 44 R.Polillo - Ottobre 2010
  43. 43. 45 R.Polillo - Ottobre 2010
  44. 44. 46 R.Polillo - Ottobre 2010
  45. 45. 47 R.Polillo - Ottobre 2010
  46. 46. 48 R.Polillo - Ottobre 2010
  47. 47. Colore 49 R.Polillo - Ottobre 2010
  48. 48. 50 R.Polillo - Ottobre 2010
  49. 49. 51 R.Polillo - Ottobre 2010
  50. 50. STOP EXIT PERICOLO ! AVANTI 52 R.Polillo - Ottobre 2010
  51. 51. 53 R.Polillo - Ottobre 2010
  52. 52. 54 R.Polillo - Ottobre 2010
  53. 53. Percorsi visivi 55 R.Polillo - Ottobre 2010
  54. 54. 56 1 2 3 4 5 6 7 Yarbus, 1967 R.Polillo - Ottobre 2010
  55. 55. 57 R.Polillo - Ottobre 2010
  56. 56. Heat map 58 Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern) R.Polillo - Ottobre 2010
  57. 57. Percorsi visivi: siete d’accordo con questo layout? 59 R.Polillo - Ottobre 2010
  58. 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. 59. 61 R.Polillo - Ottobre 2010
  60. 60. 62 R.Polillo - Ottobre 2010
  61. 61. 63 R.Polillo - Ottobre 2010
  62. 62. 64 R.Polillo - Ottobre 2010
  63. 63. 65 R.Polillo - Ottobre 2010
  64. 64. 66 R.Polillo - Ottobre 2010
  65. 65. 67 R.Polillo - Ottobre 2010
  66. 66. 68 R.Polillo - Ottobre 2010
  67. 67. 69 R.Polillo - Ottobre 2010 CocaCola tedesca nel 2003
  68. 68. 70 R.Polillo - Ottobre 2010 CocaCola USA nel 2003
  69. 69. 71 R.Polillo - Ottobre 2010 www.cocacola.com nel 2003
  70. 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.

×