Downloaded 116 times
Uploaded byRoberto Polillo
12. Progettare la grafica
La lezione si concentra sui principi fondamentali del design grafico delle interfacce per l'interazione uomo-macchina, evidenziando l'importanza della comunicazione visiva. Viene discusso il ruolo delle leggi della Gestalt nel design, sottolineando come la presentazione dell'informazione influenzi la usabilità e la comprensibilità. Alla fine, si enfatizza che una buona grafica deve essere leggibile, strutturata semplicemente e coerente per gli utenti.
12. Progettare la grafica
- 1. PROGETTARE LA GRAFICACorso di Interazione Uomo Macchina AA 2009-2010 Roberto Polillo Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione
- 2. Scopo di questalezione 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 visivae interaction design Le leggi della Gestalt Esempi da discutere
- 4. Comunicazione visiva e interaction design
- 5. Comunicazione visiva einteraction 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
- 6. Gli obiettivi dellacomunicazione 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
- 8.
- 9.
- 10. Originalità Gradevolezza EmozioneComprensibilità Usabilità
- 12. La grafica perla 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” ISO 9241-12, “Presentation of information”
- 13. La grafica perla usabilità (segue) Nel progettare l’informazione visiva si devo considerare le seguenti caratteristiche: Chiarezza Discriminabilità Concisione Consistenza Scopribilità Leggibilità Comprensibilità ISO 9241-12, “Presentation of information”
- 15. Le leggi dellaGestalt
- 16. GESTALT “ Nellapercezione 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 dellagestalt (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 dell’esperienza passata
- 19. Legge della vicinanzaGli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità (a parità di altre condizioni)
- 20. Legge della somiglianzaGli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità (a parità di altre condizioni)
- 21. Legge della chiusuraLe 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 frachiusura 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 “buonaforma” 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 “buonaforma”: altri esempi
- 26. Legge dell’esperienza passataL’esperienza modella le nostre impressioni a b
- 27. Legge dell’esperienza passata:altri esempi a b
- 28. Leggi della gestalt:applicazione al design delle interfacce grafiche
- 29.
- 30. L’ esempio precedente,ristrutturato
- 31.
- 32. Perché questa immagineè poco comprensibile?
- 33.
- 34.
- 35. Somiglianza a bc Yahoo (2009) British-airways (2003) Vista (2009)
- 37.
- 38. iPhone OS version3.0 on the iPhone 3GS
- 43. Siete d’accordo conl’uso dei colori nella tabella seguente?
- 44.
- 48.
- 49. L’importanza dei riquadri:esempio (I )
- 50. L’importanza dei riquadri:esempio (II)
- 55.
- 58. EXIT PERICOLO !AVANTI STOP
- 61. Percorsi visivi: sieted’accordo con questo layout?
- 62.
- 63. Yarbus, 1967 12 3 4 5 6 7
- 65. In sintesi… Unabuona 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
- 66.
- 67.
- 68. RUMORE L’informazione utileè solo questa
- 69. OK, ma troppominimalista?
- 70.
- 71.
- 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