Matteo Frana

I principi Gestalt: Closure, Continuity e legge di Pragnanz

Matteo Frana, 1 Ottobre 2014

In questo articolo analizzeremo 3 nuovi principi Gestalt: il principio di Closure, il principio di Continuity e la legge di Pragnanz.

Vedremo come questi 3 principi siano strettamente correlati tra loro e possano quindi anche essere riuniti in un unico principio più generale che li accomuna.

Vai al primo articolo della serie “UX Design – Principi fondamentali”.

Principio di Closure

Il principio di Closure afferma che le persone tendono a percepire un insieme di elementi come un singolo oggetto riconoscibile, piuttosto che come parti distinte. Questa tendenza porta anche a chiudere inconsciamente le figure aperte, creando le informazioni mancanti per completare il pattern.

Gli esempi classici

Principio di Closure - esempio classico

Principio di Closure - esempio mina

Nell’esempio classico di sinistra percepiamo un triangolo bianco sovrapposto ai 3 cerchi, piuttosto che 3 figure a forma di “pacman”.

Nella figura di destra vediamo una mina, percependo le punte come uscenti da una palla che nel disegno non esiste. Non vengono percepiti i singoli triangoli o triangoli con un lato arrotondato, perché la particolare disposizione ci fa percepire l’oggetto come unitario e tridimensionale: il nostro cervello completa quindi la figura “creando” la palla bianca al centro.

Applicazione al design dei loghi

Il principio di closure consente ai designer di ridurre la complessità, riducendo il numero di elementi necessari per comunicare l’informazione. Nel caso dei loghi, ridurre il numero di elementi non solo riduce la complessità, ma rende anche il logo più interessante, poiché chi lo visualizza partecipa inconsciamente al completamento del design.

Vediamo due noti loghi che sfruttano il principio di Closure:

Principio di Closure - logo IBM

Nel logo IBM, disegnato da Paul Rand nel 1960 (la sua prima versione del 1956 utilizzava lettere intere) possiamo vedere come, nonostante gli spazi vuoti occupino quasi metà della superficie del logo, si riesce comunque a leggere la scritta “IBM” come se fosse vista attraverso una veneziana. In questo modo il logo è immediatamente riconoscibile, nonostante oggi magari appaia un po’ datato.

Principio di Closure - logo WWF

Qui vediamo il panda del logo WWF, disegnato da Peter Scott nel 1961.
L’immagine del panda non è completa perché le aree bianche non sono delimitate da un tratto visibile.
In questo caso la collaborazione del lettore nel completare il logo rende il design più interessante.

Il principio di Closure nel mondo reale

E’ importante soffermarsi sul fatto che il principio di Closure non è una bella invenzione per creare loghi più affascinanti, ma, come gli altri principi gestalt, è una risposta evolutiva che ha “cablato” nel nostro cervello un sistema per riconoscere velocemente forme note da un’immagine parziale.

In effetti il nostro processo visivo si trova molto spesso ad interpretare da un’immagine parziale. Pensiamo ad esempio a quando si guida al buio: il principio di Closure ci consente di ricostruire mentalmente le altre automobili vedendo solo i fari e di ricostruire i limiti della strada dalla visione parziale notturna.

Probabilmente i nostri antenati che avevano una maggior capacità di percepire la presenza di un predatore a partire da un’immagine incompleta erano quelli che potevano fuggire prima; oppure potevano scovare prima una preda nella savana e nutrire quindi meglio la propria famiglia. In entrambi i casi possedere questa abilità consentiva di tramandare più facilmente il proprio DNA alle generazioni successive, fino a noi.

Un altro esempio è quello della ricerca di un oggetto: se vediamo sporgere una parte del cellulare da sotto un foglio, percepiamo immediatamente il cellulare come intero. Quest’ultima dote evolutiva sembra risiedere specialmente nelle mogli dei mariti disordinati ;)

Applicazione al design delle interfacce

Nel design di interfacce è meglio dare la maggior visibilità possibile allo stato del sistema, alle azioni possibili e ai conseguenti effetti: è quindi meglio lasciare poco spazio all’immaginazione per evitare errori dovuti al disallineamento tra il modello mentale dell’utente e il funzionamento effettivo del sistema.

Principio di Closure - esempio icone

Tuttavia nel design delle icone, dove bisogna riassumere in un’immagine semplice un concetto a volte complesso, può essere utile sfruttare questo principio. Un’icona come quella rappresentata qui a sinistra viene letta come “insieme di documenti” perché, per il principio di closure, leggiamo i tratti in basso a destra come un altro documento intero nascosto.

Principio di Closure - esempio loading

Anche le iconcine di “loading” animate tipiche del caricamento asincrono dei dati sfruttano il principio di Closure. Una serie parziale di tratti viene percepita come un cerchio in completamento, naturalmente grazie anche al movimento circolare.

Principio di Continuity

Il principio di Continuity (o Good Continuation) afferma che gli elementi allineati sono percepiti come un gruppo singolo e sono interpretati come correlati tra loro.

Esempio classico

Principio di Continuity - esempio classico

Qui vediamo due linee lunghe, una blu e una rossa, che si intersecano dietro al cerchio, non vediamo 4 distinte linee corte. La percezione più lineare, con meno “spezzettamenti”, è dominante.

Applicazione al design di interfacce

Sulla base del principio di Continuity, uno slider non è percepito come due linee con un rettangolo in mezzo, ma come una singola barra sulla quale può scorrere il cursore.

Principio di Continuity - esempio slider

In modo simile un istogramma in cui le colonne sono disposte in ordine crescente di altezza è molto più facile da leggere di uno in cui i valori delle colonne formano una linea discontinua:

Principio di Continuity - esempio grafico 2

Principio di Continuity - esempio grafico 1

Legge di Pragnanz

La legge di pragnanz (o di semplicità) afferma che le persone tendono ad interpretare le immagini ambigue nel modo più semplice, ovvero con meno elementi, più semplici, e con composizioni più simmetriche.

Esempio classico

Legge di Pragnanz - esempio classico 1

In questo caso, ad esempio, percepiamo un triangolo e un rettangolo sovrapposti, anziché le 3 forme complesse presentate qui sotto.

Legge di Pragnanz - esempio classico 2

Ricerche moderne infatti suggeriscono che esiste un set di forme base che vengono riconosciute velocemente a livello subconscio, chiamate “geons” (geometric icons). In particolare uno studio di Irving Biederman del 1985 suggerisce che esistano 24 diverse forme base che possono essere identificate nella fase di pre-attentive processing. Un altro studio sempre del 1985 di Gary Hatfield e William Epstein conferma che le persone sono in grado di processare e memorizzare più facilmente le figure semplici piuttosto che quelle complesse.

Applicazione al design delle interfacce

Poiché le figure semplici vengono percepite più facilmente, nel design di interfacce è meglio prediligere le forme semplici e le composizioni simmetriche.

Quando invece è importante creare interesse, è utile realizzare composizioni asimmetriche.

Un esempio interessante

Legge di Pragnanz - Marte Viking 1976

Questa è una fotografia della Nasa scattata sulla superficie di Marte dall’orbiter Viking 1 il 31 Luglio del 1976. Vedete qualcosa di strano?

Quasi tutti notano una formazione rocciosa a forma di faccia (qui sotto a sinistra in un’altra immagine ingrandita). Il teorico cospiratore Richard Hoagland arrivò a teorizzare che questa faccia era la prova dell’esistenza di una civiltà aliena su Marte. Per la cronaca, la fotografia di destra mostra un’immagine scattata nel 2001 dal Mars Global Surveyor che fuga ogni dubbio. Naturalmente i cospiratori affermano che la Nasa ha falsificato tutte le immagini successive a quelle del Viking 1 per nascondere la verità :)

Legge di Pragnanz - viso su Marte 1976

Legge di Pragnanz - viso su Marte 2001

Vediamo quindi anche qui come il cervello cerchi di riconoscere pattern semplici o noti. In questo caso poi si tratta di un volto umano, che è una figura del tutto particolare, come vedremo nel prossimo paragrafo.

Il riconoscimento dei volti

Riconoscere i volti è un processo piuttosto complesso dal punto di vista computazionale, eppure, se camminiamo per strada sovrappensiero e incontriamo un amico, lo riconosciamo istantaneamente, e solitamente si ha anche una risposta emotiva.

Questo perché esiste una parte speciale del cervello, al di fuori della corteccia visiva, con il solo scopo di riconoscere i volti. Quest’area è stata scoperta nel 1997 da Nancy Kanwisher, si chiama Fusiform Face Area (FFA) e agisce in parallelo ai canali tradizionali di interpretazione delle immagini, in modo da consentire un riconoscimento molto veloce dei volti. Quest’area è vicina all’amigdala che è il centro emozionale del cervello. Una ricerca del 1999 di Catherine Mondloch mostra addirittura come i neonati, dopo nemmeno un’ora dalla nascita, mostrino già una preferenza per i volti piuttosto che altre immagini.

Dal punto di vista del design è quindi interessante considerare che i volti vengono riconosciuti prima di altri elementi su una pagina web; inoltre un volto che guarda il lettore ha un grande impatto emozionale.

Legge di Pragnanz - viso su toast

Ultimo esperimento: cosa vedete nell’immagine qui sopra?

P.S. Io scorgo diversi volti anche nelle piastrelle del mio bagno: non so sia deformazione professionale o, più probabilmente, una cosa che mi è rimasta da quando mio nonno mi faceva vedere le figure nel marmo durante la lunga predica della messa del sabato sera :)

3 principi o uno solo?

Io penso che questi 3 principi possano essere tranquillamente fusi in un unico principio:

le persone tendono a riconoscere forme semplici o note e, qualora manchi una parte a completare una forma nota, questa viene creata mentalmente per completare il pattern.

Le forme note rappresentano qualcosa che può essere utile riconoscere velocemente (cibo, pericolo, un volto amico o sconosciuto). Il nostro algoritmo di “pattern matching” cerca quindi parti di forme note, e questa è la legge di Pragnanz. Da qui deriva direttamente anche il principio di Closure quando il pattern è presente solo parzialmente. La Continuity deriva dal fatto che solitamente in natura è più facile trovare linee che continuano lineari piuttosto che linee spezzate (“natura non facit saltus” dicevano i romani) e quindi le linee continue sono forme note.

Andando oltre, possiamo racchiudere anche i principi di raggruppamento visti in precedenza (proximity, similarità e common fate) all’interno di questo ragionamento. Poiché la memoria di breve termine consente di avere attivi in un certo istante 2-3 concetti per volta (su questo punto magari torneremo più avanti con un articolo dedicato), quando gli elementi da analizzare sono molti devono essere raggruppati per essere gestibili. E’ come se l’algoritmo di visual processing debba comprimere il più possibile l’informazione da passare agli strati di elaborazione successiva: quindi non un insieme complesso di forme, ma “un volto”, “una forbice nascosta dietro a un foglio”, “due cerchi e 3 quadrati”.

Questa “compressione” dell’informazione passa quindi dalla suddivisione in insiemi alla successiva assegnazione di un’etichetta agli elementi di ciascun insieme, cercando il più possibile di trovare elementi semplici o noti, i quali sono più interessanti e facilmente etichettabili.

Per ora direi che abbiamo messo abbastanza carne al fuoco. La prossima volta vedremo l’ultimo principio Gestalt rimanente, ovvero Figure/Ground.

Buon design! :)