Matteo Frana

I principi Gestalt: Similarity

Matteo Frana, 8 Luglio 2014

Il principio di similarity afferma che, a parità di altre condizioni, gli elementi simili tra loro vengono percepiti come raggruppati e correlati.

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

Così come avviene per il principio di proximity, anche il principio di similarity si basa sul fatto che il nostro cervello si è evoluto in modo da raggruppare velocemente gli elementi percepiti, in modo da poter elaborare un’informazione più semplice e organizzata. Il raggruppamento di elementi consente anche, come vedremo, di identificare ed evidenziare velocemente gli elementi diversi, che non appartengono ad un gruppo “conosciuto”. In ottica evolutiva questo ha consentito di percepire prima e meglio i potenziali pericoli.

L’esempio classico

Prendiamo la figura qui sotto, a sinistra: in base al principio di proximity, percepiamo gli elementi come organizzati su 4 colonne.

Se però sovrapponiamo anche il principio di similarità, cambiando il colore di alcuni elementi, vediamo come possiamo modificare la percezione dei gruppi. Vediamo nell’immagine a destra come l’effetto del principio di similarity sia in questo caso superiore a quello di proximity, facendo sì che percepiamo gli elementi come disposti su 4 righe:

Principio di Similarity - esempio classico colore

Oltre a cambiare il colore possiamo raggruppare gli elementi in base al principio di similarità utilizzando anche la forma e la dimensione:

Principio di Similarity - esempio classico forma e dimensione

L’efficacia dei diversi fattori di similarità

Il principio di similarità è un po’ più complesso di quello di proximity, proprio perché si può giocare su diversi aspetti. I 3 accorgimenti visti negli esempi qui sopra (colore, forma, dimensione) sono quelli principali. Il fatto che si possano utilizzare questi diversi accorgimenti porta a chiedersi cosa succeda nel momento in cui si utilizzino più accorgimenti contemporaneamente e se ci sia una efficacia diversa tra i differenti fattori utilizzabili.

In effetti si riscontra che i 3 fattori hanno un’efficacia differente. Il colore ha sicuramente l’impatto più rilevante, mentre forma e dimensione sono meno efficaci, come appare abbastanza evidente già dai primi esempi.

Diverse fonti riportano dati diversi per il secondo e terzo posto del podio: ad es. il designer Billy Hollis indica come meno efficace la dimensione, mentre Lidwell, Holden e Butler nel testo Universal Principles of Design indicano la forma come fattore meno efficace. Vediamo di capire come mai la questione sia un po’ ambigua, attraverso l’analisi di qualche esempio un po’ più complesso. Visto che in questo caso non mi baso su letteratura esistente, ma sul buon senso (cosa che solitamente funziona nel design), vi chiederei di darmi anche la vostra opinione in merito, per avere una visione più globale della questione.

Principio di Similarity - esempio forma vs dimensione 1

Secondo voi è più efficace la forma (figura sopra) oppure la dimensione (figura sotto)?

In questo caso secondo me è più efficace la dimensione. Ma adesso vediamo altri due esempi, cambiando un po’ le carte in tavola a parità di disposizione degli oggetti:

Principio di Similarity - esempio forma vs dimensione 2

In questo caso cosa ne dite? A mio parere in questo caso è più efficace la forma (immagine sopra) che non la dimensione (immagine sotto).

Questi esempi evidenziano secondo me due problemi di forma e dimensione, che illustrerò qui sotto.

Il problema della forma

La forma funziona bene nel momento in cui si possono utilizzare anche forme complesse, le quali risaltano molto bene nel confronto con le forme semplici. Se invece si utilizzano forme semplici, come cerchi e quadrati, questi sono più difficili da distinguere a colpo d’occhio e quindi non costituiscono un buon raggruppamento che possa essere percepito facilmente già nella fase di pre-attentive processing, poiché richiedono già un minimo di elaborazione visiva successiva. Probabilmente per questo alcuni testi riportano la forma come più debole rispetto agli altri meccanismi di similarità. Inoltre la forma è difficilmente utilizzabile come fattore di raggruppamento nell’ambito delle interfacce software, dal momento che solitamente vengono utilizzate esclusivamente forme semplici, le quali conferiscono un maggiore senso di ordine.

Il problema della dimensione

La dimensione funziona bene solo quando è possibile differenziare molto le diverse dimensioni degli oggetti; diversamente è poco percepibile. Considerate che nell’esempio qui sopra (il secondo) i quadrati più piccoli hanno come lato quasi la metà di quelli grandi, eppure è difficile percepire bene la differenza a colpo d’occhio. Nel primo esempio invece i quadrati piccoli hanno lato che è poco più di un quinto di quello dei quadrati grandi e qui la dimensione funziona bene per la similarity.

Per questo motivo è bene non utilizzare troppe dimensioni diverse nei testi, in modo da poter differenziare bene i testi più grandi da quelli più piccoli e consentire così la comprensione della gerarchia dei contenuti.

E ora… il colore!

Principio di Similarity - esempio colore prevale

Ho preso l’immagine in cui la dimensione esprimeva un ottimo fattore di raggruppamento, ma con un po’ di colore: io percepisco prima la suddivisione per colore in quadrati blu / arancioni piuttosto che in quadrati grandi / piccoli.

Sul colore ci sono pochi dubbi, è il metodo più efficace di raggruppamento per similarità.

Il colore viene percepito istantaneamente, ed è per questo che viene molto utilizzato nel regno animale per evidenziare o camuffare una caratteristica tramite mimetismo (ad es. “sono pericoloso” o “sono velenoso”) oppure, al contrario, per confondersi con l’ambiente circostante tramite mimetizzazione.

Anche il colore però ha i suoi problemi…

I problemi e l’utilizzo del colore

Innanzi tutto ho un po’ “imbrogliato” utilizzando sempre varianti di colore che differiscono molto come tonalità e anche nella luminanza. Chiaramente anche per il colore (come per forma e dimensione), il principio funziona bene quando si differenzia bene un colore dall’altro, ma è molto più semplice utilizzare colori diversi in un’interfaccia piuttosto che utilizzare forme o dimensioni molto diverse tra loro. Per differenziare in modo efficace i colori è bene utilizzare più di una delle caratteristiche fondamentali (tonalità, saturazione, luminanza).

Per avere elementi contrastanti è comodo utilizzare colori con tonalità opposte, che di solito funzionano bene (ad eccezione di rosso e verde!). Quando invece si vuole dare unitarietà al layout è invece utile utilizzare varianti della stessa tonalità.

Naturalmente bisogna prestare attenzione ad un altro limite del colore, ovvero il fatto che una porzione significativa della popolazione è daltonica e quindi bisogna scegliere con cura i colori in modo che siano distinguibili da tutti (evitando ad es. contrasti verde/rosso, verde/marrone), oppure, se opportuno, abbinare al colore un’altra tipologia di raggruppamento.

La diluizione dell’effetto

Qualunque sia il sistema utilizzato per raggruppare per similarità, è molto importante il seguente concetto: ogni fattore di raggruppamento perde rapidamente di efficacia quando il numero di diverse possibilità cresce. Ad esempio, se si utilizzano 10 diversi colori, il cervello non riesce a distinguere velocemente i gruppi nella fase di pre-attentive processing. Guardate qui sotto come sia già difficile cogliere la correlazione con soli 4 colori ben distinguibili tra loro:

Principio di Similarity - esempio diluizione colore

Per questo in un grafico è meglio non utilizzare mai più di 3 o 4 colori e nei testi è meglio utilizzare al massimo 3 o 4 diverse dimensioni per titoli / sottotitoli e testo normale.

Similarity e interfacce software

Il raggruppamento dato dalla similarità aiuta a ridurre la complessità e quindi il carico cognitivo sull’utente. Per questo è importante rappresentare gli elementi correlati in modo simile e consistente ed elementi non correlati utilizzando diversi colori, forme e dimensioni, restando però su un numero di combinazioni il più basso possibile: troppe combinazioni diverse finiscono infatti per aumentare il carico cognitivo anziché aiutare l’utente nella comprensione dell’interfaccia.

Esempio pagina web

Vediamo un esempio di un sito web da noi sviluppato nel quale è stato utilizzato il principio di similarity:

Principio di Similarity - esempio sito web Bigli

Nell’immagine ho evidenziato con un puntino rosso le parti in cui è stato applicato il principio di similarity per raggruppare elementi logicamente correlati. Vediamo quindi come le bandierine simili indichino il cambio lingua, le voci del menù siano simili e diano unitarietà alla navigazione, così come per le sezioni di sinistra e destra e le voci sotto relative ai servizi. Il principio di similarity e quello di proximity insieme consentono di conferire un senso di ordine e di pulizia nel design.

Interplay tra similiarity e proximity

Principio di Similarity - esempio grafico

In questo tipo di grafico è possibile notare come, prima ancora di comprendere il significato delle serie rappresentate, il principio di proximity ci faccia cogliere 3 raggruppamenti di barre e il principio di similarity ci faccia invece cogliere la relazione tra le barre con il medesimo colore.

Highlighting: violare la similarity

Quando si vuole dare particolare rilievo ad un certo elemento, il principio di similarità può essere utilizzato proprio per evidenziare un elemento diverso da tutti gli altri.

Principio di Similarity - esempio highlighting

Questo è il principio di design chiamato “highlighting”, che indica semplicemente le tecniche per portare l’attenzione su un elemento specifico di un’immagine o di un testo.

In generale la parte evidenziata non deve mai superare il 10% del contenuto, altrimenti l’effetto viene “diluito”: pensiamo ad esempio a come si studi male su un libro dove è stata evidenziata una frase sì e una frase no! :) E’ bene scegliere poche tecniche di evidenziazione e utilizzarle in modo consistente.

Highlighting per il testo

Nel caso del testo, oltre a colore, forma (font, o meglio type-face) e dimensione, è possibile utilizzare altri accorgimenti, quali il grassetto, l’italico e il sottolineato. Il grassetto è di solito il metodo preferito perché aumenta molto poco il “rumore” rispetto al contenuto. La sottolineatura invece compromette molto la leggibilità.

Un esempio web

L’highlighting viene spesso utilizzato per evidenziare in modo chiaro la pagina corrente all’interno di un menù di navigazione, in modo da fornire un chiaro riferimento spaziale agli utenti.

Con molta fantasia, dallo stesso sito web mostrato prima:

Principio di Similarity - esempio highlighting menu

Highlighting e link

I link sono fondamentali per gli ipertesti ed è quindi importantissimo che vengano riconosciuti facilmente all’interno del testo. Una volta lo standard era avere link blu e sottolineati e questo in effetti aiutava molto nel riconoscere i link. Come indicato sopra, però, la sottolineatura compromette un po’ la leggibilità del testo e la pulizia del design, così oggi si tende ad eliminarla.

Principio di Similarity - esempio highlighting link

Ritengo che in questi casi sia importante evidenziare il link con un colore ben evidente (possibilmente una variante di blu) e mantenere la sottolineatura quando si passa con il mouse sopra al link (cosa che purtroppo non è visibile su dispositivi touch).

Voglio il titolo che lampeggia! :)

Parlando di highlighting, non può non venire in mente il famoso tag <blink> delle prime pagine HTML, che causava il lampeggio del testo contenuto. Una vera chicca per chi alla fine degli anni 90 creava pagine HTML (insieme al tag <marquee> che causava lo scorrimento orizzontale :) Per fortuna oggi questo tag non è più supportato da alcun browser, perché era veramente psichedelico! E’ meglio mantenere l’utilizzo del lampeggio esclusivamente per i segnali di emergenza (pensiamo al software di controllo di un impianto) e, anche in quel caso, far sì che possa essere spento, una volta riscontrato da parte dell’operatore.

Compito! :)

Vi lascio come ultima immagine, la stessa con cui ho concluso l’articolo sulla proximity: oggi, naturalmente, bisogna scovare la similarity! ;)

Principio di Proximity - esempio flat ui

Libri consigliati


100 Things every designer needs to know about people

di Susan M. Weinschenk

Questo libro di Susan Weinschenk (dottorato in psicologia) è un libricino di 240 pagine che si legge molto velocemente, ma contiene moltissimi spunti interessanti di psicologia cognitiva applicata al design. Consiste di 100 microcapitoli da 1-2 pagine ciascuno, suddivisi in questo modo: Come le persone vedono, come le persone leggono, come le persone ricordano, come le persone pensano, come le persone focalizzano l’attenzione, cosa motiva le persone, le persone sono animali sociali, come le persone provano emozioni, le persone fanno errori, come le persone decidono.



Universal Principles of Design

di Lidwell, Holden, Butler

Questo libro contiene 125 principi di design spiegati e illustrati con esempi. E’ molto utile come reference, un po’ meno per lo studio iniziale dei principi, perché questi sono presentati in ordine strettamente alfabetico, quindi non organizzati secondo un criterio logico.



Designing with the Mind in Mind

di Jeff Johnson

Ottimo libro per comprendere i concetti alla base dei principi di design attraverso la psicologia cognitiva. Il capitolo 2 è dedicato ai principi Gestalt.