Una presentazione in italiano per illustrare l'utilizzo dei principi visivi della Gestalt per la costruzione di siti web

1. I PRINCIPI DELLA
GESTALT ED IL LORO
UTILIZZO NEI SITI
WEB

2. Le leggi della Gestalt
La Gestalt è una corrente di pensiero,
nata in Germania fra la fine
dell'Ottocento e gli inizi del Novecento.

3. I suoi sostenitori affermavano che la
percezione di ciò che ci circonda non è
la semplice somma di elementi e
sensazioni primarie, bensì un'unità
strutturata di esse.
“Il tutto è diverso della somma delle
sue parti”

4. La corrente della Gestalt cerca di
comprendere le leggi o principi con cui
strutturiamo le nostre percezioni.

5. Conoscendo questi principi è possibile
sfruttarli anche per disporre i vari
elementi che compongono una pagina
web in modo da rendere chiara la
struttura e l'organizzazione del proprio
lavoro fin dalla prima occhiata.

6. Vicinanza:
All'interno di una scena visiva, gli
elementi tra loro vicini vengono
percepiti come un tutto.
Nell'esempio percepiamo prima di tutto
3 colonne verticali sottili, e non 2
colonne larghe o semplicemente 6 linee
verticali.

8. Nel design di un'interfaccia possiamo
utilizzare questo principio per rendere
più chiara la struttura della pagina,
avvicinando gli elementi che sono
concettualmente correlati e
allontanando fra loro quelli che non lo
sono.

9. È un principio che spesso, senza
accorgercene, utilizziamo nella
divisione in paragrafi di un testo.
Un uso corretto del principio di
vicinanza lo possiamo vedere nella
homepage di html.it.

10. Similitudine:
All'interno di una stessa scena gli
elementi tra loro simili per forma,
colore e dimensione vengono percepiti
come collegati. Nell'esempio
percepiamo righe di punti pieni,
alternate a righe di punti vuoti, benché
lo spazio fra punto e punto sia lo stesso,
sia in orizzontale che in verticale.

12. Nell'impaginazione questo ha un
riscontro molto comune: l'elenco
puntato.
Riutilizzare elementi, colori o simboli
che visivamente collegano
un'informazione ad un'altra, aiuta a
rendere accessibile e facilmente
navigabile anche un sito con grandi
quantità di contenuti.

13. Chiusura:
Linee e forme familiari vengono
percepite come chiuse e complete,
anche se graficamente non lo sono.

15. Descrivendo la figura dell'esempio,
diremmo che vi sono rappresentati un
cerchio e un quadrato con tratto non
continuo, ma la forma percepita e
riconosciuta è quella della figura
completa. Allo stesso modo possiamo
leggere la parola PRO anche se nessuna
delle lettere è chiusa e completa.

16. Questo principio ha molti riscontri
nell'impaginazione. Primo fra tutti
l'allineamento: organizzare lo spazio
secondo linee e rettangoli invisibili
aiuta il lettore a capire la strutturazione
e l'organizzazione della pagina. Per
questo motivo, in molte occasioni, è
sconsigliabile l'uso dell'allineamento
centrato.

17. Ci si può avvalere di questo principio
anche per sfruttare “virtualmente” lo
spazio che realmente non abbiamo a
disposizione.

18. Come si è detto, la nostra percezione di
un'immagine va oltre ciò che è
rappresentato sulla pagina, così quando
lo spazio a disposizione è poco,
possiamo sfruttare anche quello
“immaginato” da chi guarda.
Eccone un esempio:

20. Organizzazione figura-sfondo:
Questa è la tendenza a distinguere una
figura dal suo sfondo e viceversa.

21. Le figure vengono percepite prima di
tutto in base al loro contorno, il resto
viene inteso come sfondo.
Guardando un'immagine percepiamo
l'oggetto che sta in primo piano come
figura principale e ciò che sta dietro
come sfondo.

22. Nell'esempio è rappresentato un
classico delle illusioni ottiche: il vaso o
i due profili di Rubin.
Possiamo vedere in nero due visi, uno
di fronte all'altro, su sfondo rosso
oppure un vaso rosso su sfondo nero.
A seconda di cosa percepiamo come
“figura” classificheremo gli elementi
restanti come “sfondo”.

24. Questo principio si trasforma in grafica
nel più famoso principio del contrasto.
Proprio perché le figure vengono
riconosciute grazie al loro contorno, più
la figura sarà in contrasto con lo sfondo
(e con gli altri elementi), più facile sarà
riconoscerla e ricordarla, e maggiore
sarà l'importanza che le verrà quindi
data.

25. Si può perciò utilizzare questo criterio
per rafforzare i titoli e dare risalto agli
elementi che gerarchicamente hanno
più importanza degli altri.
Ecco alcuni esempi:

27. Nella figura 1 e 2 e 3 il testo è in
contrasto sia con lo sfondo che con la
sua “ombra”. Nella figura 3 il testo e
l'ombra non hanno contrasti fra di loro
e l'ombra non viene percepita come tale
ma l'occhio tenta di leggere il testo
specchiato come fosse un sottotitolo (è
infatti percepito come tale per la
differenza di dimensione).