12. Progettare la grafica
•Download as PPT, PDF•
2 likes•522 views
Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2009-2010
![Scopo di questa lezione ,[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Recommended
More Related Content
More from Roberto Polillo
More from Roberto Polillo (20)
Recently uploaded
Recently uploaded (7)
12. Progettare la grafica
- 1. PROGETTARE LA GRAFICA Corso di Interazione Uomo Macchina AA 2009-2010 Roberto Polillo Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione
- 4. Comunicazione visiva e interaction design
- 10. Originalità Gradevolezza Emozione Comprensibilità Usabilità
- 15. Le leggi della Gestalt
- 17. Salvador Dalì, 1935 “ Face of Mae West which may be used as an apartement”
- 19. Legge della vicinanza Gli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità (a parità di altre condizioni)
- 20. Legge della somiglianza Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità (a parità di altre condizioni)
- 21. Legge della chiusura Le 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 fra chiusura 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 “buona forma” 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 “buona forma”: altri esempi
- 26. Legge dell’esperienza passata L’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. Vicinanza
- 30. L’ esempio precedente, ristrutturato
- 32. Perché questa immagine è poco comprensibile?
- 33. (segue)
- 34. (segue)
- 35. Somiglianza a b c Yahoo (2009) British-airways (2003) Vista (2009)
- 37. Vista (2009)
- 38. iPhone OS version 3.0 on the iPhone 3GS
- 43. Siete d’accordo con l’uso dei colori nella tabella seguente?
- 44. (MAC OS 8)
- 48. Chiusura
- 49. L’importanza dei riquadri: esempio (I )
- 50. L’importanza dei riquadri: esempio (II)
- 55. Colore
- 58. EXIT PERICOLO ! AVANTI STOP
- 61. Percorsi visivi: siete d’accordo con questo layout?
- 62. Percorsi visivi
- 63. Yarbus, 1967 1 2 3 4 5 6 7
- 66. RUMORE
- 67. RUMORE
- 68. RUMORE L’informazione utile è solo questa
- 69. OK, ma troppo minimalista?
- 71. CONTRASTO?
- 74. CocaCola tedesca nel 2003
- 75. CocaCola USA nel 2003
- 76. www.cocacola.com nel 2003
Editor's Notes
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- www.fanta.it Nel sito della coca-cola italiana, dic 003 R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- Questa legge è detta anche “legge della continuità di direzione” R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- 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
- 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
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- 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
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- R.Polillo, Interazione uomo macchina - Parte terza, 2
- 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
- http://www.ibm.com/ibm/hci/guidelines/design/designers_iceberg.html R.Polillo, Interazione uomo macchina - Parte terza, 2
- 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
- Www.bluemountain.com Invio di e-cards gratuite per ogni occasione Ha anche I-Ching R.Polillo, Interazione uomo macchina - Parte terza, 2