Esplorare i principi della Gestalt del design

Ascolta la versione audio di questo articolo

Lo spazio negativo è stato a lungo un punto fermo del buon design. Lasciare uno spazio bianco attorno agli elementi di un design è la prima cosa che di solito viene in mente. Ma poi ci sono progetti che usano quello spazio bianco per dedurre un elemento che in realtà non c'è (la freccia nascosta tra la E e la X nel logo FedEx mi viene subito in mente come esempio).

Il cervello umano è eccezionalmente bravo a riempire gli spazi vuoti in un'immagine e creare un tutto che è maggiore della somma delle sue parti. È per questo che vediamo facce in cose come le foglie degli alberi o le crepe del marciapiede.

Questo principio è una delle idee più importanti alla base dei principi della Gestalt della percezione visiva. La prima proposta più influente scritta sulla teoria fu pubblicata da Max Wertheimer nelle sue leggi della Gestalt dell'organizzazione percettiva del 1923, sebbene la discussione di Wolfgang Kohler del 1920 sulla Gestalten fisica contenga anche molte idee influenti sull'argomento.

Indipendentemente da chi per primo ha proposto le idee (ci sono stati saggi che risalgono al 1890), i principi della Gestalt sono un importante insieme di idee da apprendere per qualsiasi designer e la loro implementazione può migliorare notevolmente non solo l'estetica di un progetto, ma anche la sua funzionalità e facilità d'uso.

Nei termini più semplici, la teoria della Gestalt si basa sull'idea che il cervello umano tenterà di semplificare e organizzare immagini o progetti complessi costituiti da molti elementi, disponendo inconsciamente le parti in un sistema organizzato che crea un tutto, piuttosto che solo un serie di elementi disparati. I nostri cervelli sono costruiti per vedere la struttura e gli schemi in modo da poter comprendere meglio l'ambiente in cui viviamo.

Esistono sei principi individuali comunemente associati alla teoria della Gestalt: somiglianza , continuazione , chiusura , prossimità , figura/ fondo e simmetria e ordine (chiamato anche pragnanz ). Ci sono anche alcuni principi aggiuntivi e più recenti a volte associati alla gestalt, come il destino comune.

Somiglianza

È nella natura umana raggruppare cose simili insieme. Nella gestalt, elementi simili sono raggruppati visivamente, indipendentemente dalla loro vicinanza l'uno all'altro. Possono essere raggruppati per colore, forma o dimensione. La somiglianza può essere utilizzata per legare insieme elementi che potrebbero non essere uno accanto all'altro in un progetto.

Certo, puoi rendere le cose dissimili se vuoi farle risaltare dalla massa. Ecco perché i pulsanti per gli inviti all'azione sono spesso progettati in un colore diverso rispetto al resto di una pagina, in modo da distinguersi e attirare l'attenzione del visitatore sull'azione desiderata.

Nella progettazione UX, l'uso della somiglianza rende chiaro ai visitatori quali elementi sono simili. Ad esempio, in un elenco di funzionalità che utilizza elementi di progettazione ripetitivi (come un'icona accompagnata da 3-4 righe di testo), il principio di somiglianza renderebbe più semplice esaminarli. Al contrario, la modifica degli elementi di design per le caratteristiche che si desidera evidenziare li fa risaltare e conferisce loro maggiore importanza nella percezione del visitatore.

Anche cose semplici come assicurarsi che i collegamenti in un design siano formattati allo stesso modo si basano sul principio di somiglianza nel modo in cui i tuoi visitatori percepiranno l'organizzazione e la struttura del tuo sito.

Continuazione

La legge di continuità presuppone che l'occhio umano seguirà il percorso più agevole durante la visualizzazione delle linee, indipendentemente da come le linee sono state effettivamente disegnate.

Questa continuazione può essere uno strumento prezioso quando l'obiettivo è guidare l'occhio di un visitatore in una certa direzione. Seguiranno il percorso più semplice sulla pagina, quindi assicurati che le parti più vitali che dovrebbero vedere rientrino in quel percorso.

Poiché l'occhio segue naturalmente una linea, posizionare gli elementi in una serie in una linea attirerà naturalmente l'occhio da un elemento all'altro. I cursori orizzontali sono uno di questi esempi, così come gli elenchi di prodotti correlati su siti come Amazon.

Chiusura

La chiusura è uno dei principi della Gestalt più interessanti e uno che ho già toccato all'inizio di questo pezzo. È l'idea che il tuo cervello riempirà le parti mancanti di un disegno o di un'immagine per creare un tutto.

Nella sua forma più semplice, il principio di chiusura consente all'occhio di seguire qualcosa come una linea tratteggiata fino alla sua fine. Ma nei loghi si vedono spesso applicazioni più complesse, come quella del World Wildlife Fund. Mancano grandi pezzi del contorno per il panda, ma il tuo cervello non ha problemi a riempire le sezioni mancanti per vedere l'intero animale.

La chiusura è abbastanza spesso utilizzata nella progettazione di loghi, con altri esempi inclusi quelli per USA Network, NBC, Sun Microsystems e persino Adobe.

Un altro esempio molto importante di chiusura al lavoro nella progettazione di UX e UI è quando mostri un'immagine parziale che svanisce dallo schermo dell'utente per mostrare loro che c'è altro da trovare se scorre a sinistra oa destra. Senza un'immagine parziale, cioè se vengono mostrate solo immagini complete, il cervello non interpreta immediatamente che potrebbero esserci altre cose da vedere, e quindi è meno probabile che l'utente scorri (poiché la chiusura è già evidente).

Prossimità

La vicinanza si riferisce a quanto sono vicini gli elementi tra loro. Le relazioni di prossimità più forti sono quelle tra soggetti sovrapposti, ma anche il solo raggruppamento di oggetti in una singola area può avere un forte effetto di prossimità.

È vero anche il contrario, ovviamente. Mettendo spazio tra gli elementi, puoi aggiungere separazione anche quando le loro altre caratteristiche sono le stesse.

Prendi questo gruppo di cerchi, ad esempio:

Nella progettazione UX, la prossimità viene spesso utilizzata per indurre gli utenti a raggruppare determinate cose senza l'uso di elementi come i bordi rigidi. Avvicinando cose simili, con uno spazio tra ogni gruppo, lo spettatore capirà immediatamente l'organizzazione e la struttura che vuoi fargli percepire.

Figura/Terra

Il principio figura/fondo è simile al principio di chiusura in quanto sfrutta il modo in cui il cervello elabora lo spazio negativo. Probabilmente hai visto esempi di questo principio fluttuare nei meme sui social media o come parte dei loghi (come il logo FedEx già menzionato).

Il tuo cervello distinguerà tra gli oggetti che considera in primo piano di un'immagine (la figura o punto focale) e lo sfondo (l'area su cui poggiano le figure). Il punto in cui le cose si fanno interessanti è quando il primo piano e lo sfondo contengono effettivamente due immagini distinte, come questa:

Un esempio più semplice può essere visto con questa immagine, di due facce che creano un candeliere o un vaso tra di loro:

In termini generali, il tuo cervello interpreterà l'area più grande di un'immagine come il terreno e quella più piccola come la figura. Come mostrato nell'immagine sopra, tuttavia, puoi vedere che i colori più chiari e più scuri possono influenzare ciò che è visto come la figura e ciò che è visto come il terreno.

Il principio figura/sfondo può essere molto utile quando i progettisti di prodotti vogliono evidenziare un punto focale, in particolare quando è attivo o in uso, ad esempio, quando viene visualizzata una finestra modale e il resto del sito scompare sullo sfondo, o quando si fa clic su una barra di ricerca e si aumenta il contrasto tra essa e il resto del sito.

Simmetria e ordine

La legge della simmetria e dell'ordine è anche conosciuta come pragnanz , la parola tedesca per "buona figura". Ciò che dice questo principio è che il tuo cervello percepirà forme ambigue nel modo più semplice possibile. Ad esempio, una versione monocromatica del logo olimpico è vista come una serie di cerchi sovrapposti piuttosto che come una raccolta di linee curve.

Ecco un altro buon esempio del principio di progettazione della Gestalt “ pragnanz ”:

Il tuo cervello interpreterà l'immagine a sinistra come un rettangolo, un cerchio e un triangolo, anche quando i contorni di ciascuno sono incompleti perché sono forme più semplici dell'immagine complessiva.

Destino comune

Sebbene il destino comune non fosse originariamente incluso nella teoria della Gestalt, da allora è stato aggiunto. Nella progettazione UX, la sua utilità non può essere trascurata. Questo principio afferma che le persone raggrupperanno cose che puntano o si stanno muovendo nella stessa direzione.

In natura, lo vediamo in cose come stormi di uccelli o banchi di pesci. Sono costituiti da un mucchio di elementi individuali, ma poiché si muovono apparentemente come uno solo, il nostro cervello li raggruppa e li considera un unico stimolo.

Questo è molto utile in UX poiché gli effetti animati diventano più prevalenti nel design moderno. Nota che gli elementi in realtà non devono essere in movimento per beneficiare di questo principio, ma devono dare l' impressione di movimento.

Principi della Gestalt in UX Design

Come con qualsiasi principio psicologico, imparare a incorporare i principi di percezione visiva della gestalt nel tuo lavoro di progettazione può migliorare notevolmente l'esperienza dell'utente. Comprendere come funziona il cervello umano e quindi sfruttare le tendenze naturali di una persona crea un'interazione più fluida che fa sentire l'utente a proprio agio su un sito Web, anche se è la sua prima visita.

I principi della Gestalt sono relativamente facili da incorporare in qualsiasi progetto e possono elevare rapidamente un progetto che sembra casuale o come se stesse lottando per attirare l'attenzione dell'utente su uno che offra un'interazione naturale e senza interruzioni che guida gli utenti verso l'azione che si desidera che eseguano.

Ulteriori letture sul blog di Toptal Design:

• Principi di progettazione: introduzione alla gerarchia
• Procedure consigliate per la progettazione dell'interfaccia utente ed errori comuni
• Come utilizzare potenti principi della Gestalt nel design (con infografica)
• La guida completa all'architettura dell'informazione
• Potenzia la tua UX con questi principi di progettazione dell'interazione di successo