COMUNICAZIONE VISIVA

Temi Gestalt Tipografia 10.2 Lezioni 5 Aprile 2004

GESTALT

“Nella percezione visiva, il tutto è più della somma delle sue parti” GESTALT “Nella percezione visiva, il tutto è più della somma delle sue parti” Luci “in movimento” 10.2 Lezioni 5 Aprile 2004

Le leggi della gestalt Legge della vicinanza Legge della somiglianza Legge della chiusura Legge della continuità “curva buona” Legge della simmetria “buona forma” Legge dell’esperienza (M.Wertheimer, 1923) Governano la percezione di pattern di stimoli che possono essere ricondotte a criteri di: Prossimità con punti che appaiono come gruppi invece che come insiemi casuali di elementi Similarità con tendenza a percepire come raggruppati insieme elementi di forma o colore simile Chiusura dove l’ occhio completa una figura, come nella situazione di un cerchio in cui manchi una piccola parte Continuità dove l’ occhio integra due linee di punti che si intersecano, invece di semplici punti disgiunti Simmetria dove regioni contornate da bordi simmetrici tendono ad essere percepite come figure coerenti. 10.2 Lezioni 5 Aprile 2004

Legge della vicinanza Le parti di un insieme percettivo vengono raccolte in unità conformi alla minima distanza, a parità di altre condizioni 10.2 Lezioni 5 Aprile 2004

10.2 Lezioni 5 Aprile 2004

Legge della somiglianza Di fronte a una moltitudine di elementi diversi, vengono raccolti in gruppo gli elementi fra loro simili - a parità di altre condizioni tendenza a percepire come raggruppati insieme elementi di forma o colore simile 10.2 Lezioni 5 Aprile 2004

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 10.2 Lezioni 5 Aprile 2004

10.2 Lezioni 5 Aprile 2004

10.2 Lezioni 5 Aprile 2004

Www.alpitour.it Ciò che risdalta sono le colonne verticali centrali (gialla e blu). E’ giusto? 10.2 Lezioni 5 Aprile 2004

Da dove inizio? Che cosa è importante? This image, from Webforms, simply hurts the eyes. Labels are not aligned to the fields they are associated with, causing the eyes to zig-zag around the screen as the user attempts to locate a field of interest. The choice of color to distinguish labels from editable fields further adds to the headache. Further, placing help information (will not appear on...WHAT?) in the labels just adds to the mess. Given that their status bar is too difficult to read, they probably decided that this was probably the next best place for it 10.2 Lezioni 5 Aprile 2004

Legge 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 (anche legge della continuità) Questa legge è detta anche “legge della continuità di direzione” “legge della continuità di direzione” 10.2 Lezioni 5 Aprile 2004

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 anche Legge della Simmetria dove regioni contornate da bordi simmetrici tendono ad essere percepite come figure coerenti. 10.2 Lezioni 5 Aprile 2004

la legge della “simmetria” Regione contornate da bordi simmetrici tendono ad essere percepite come figure coerenti. anche Legge della Simmetria dove regioni contornate da bordi simmetrici tendono ad essere percepite come figure coerenti. 10.2 Lezioni 5 Aprile 2004

Legge dell’esperienza L’esperienza modella le nostre impressioni 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. 10.2 Lezioni 5 Aprile 2004

Ambiguità

Ambiguità This type of reversible figure concerns the meaningful content of what is interpreted by your brain from the same static image. Your perception of each figure tends to remain stable until you attend to different regions or contours. Certain regions and contours tend to favor one perception, others the alternative. Even though certain contours in this figure are ambiguous, your perceptual change in this case does not involve a figure/ground reversal “Immagine bistabile” . 10.2 Lezioni 5 Aprile 2004

“Immagine bistabile” 10.2 Lezioni 5 Aprile 2004

Nel design delle interfacce occorre evitare l’ambiguità 10.2 Lezioni 5 Aprile 2004

BOTTONI O TITOLI? Many programmers admit to this problem in their early GUI applications. In this image, the developer has chosen to give the section labels a raised appearance. That's one way of ensuring that the user doesn't confuse them with the editable fields, but does it come as any surprise that users try to click on them? 10.2 Lezioni 5 Aprile 2004

Funzioni Banner (ma non si capisce) 10.2 Lezioni 5 Aprile 2004

Esempi

10.2 Lezioni 5 Aprile 2004

10.2 Lezioni 5 Aprile 2004

10.2 Lezioni 5 Aprile 2004

10.2 Lezioni 5 Aprile 2004

Rappresentazione: Grafica Compromesso fra realismo e capacità di calcolo Considerare le esigenze reali dell’ applicazione (es. simulatori di volo) Rappresentazione tridimensionalità Modelli geometrici 10.2 Lezioni 5 Aprile 2004

Rappresentazione: tridimensionalità Dimensione il più piccolo di due oggetti identici sembra più vicino Interposizione l’ oggetto che copre parzialmente un’ altro sembra più vicino di quello coperto Contrasto e luminosità oggetti più luminosi e meglio definiti sembrano più vicini di oggetti scuri e meno definiti Ombre le ombre proiettate da un oggetto sugli altri danno indicazioni delle posizioni relative Dettaglio con l’ aumentare della distanza apparente il dettaglio della superficie diminuisce Effetto parallasse movendo la testa gli oggetti a distanze maggiori sembrano muoversi più lentamente degli oggetti più vicini etc Depth cue 10.2 Lezioni 5 Aprile 2004

Modelli geometrici Wireframe Boundary solid 10.2 Lezioni 5 Aprile 2004