Ascolta la versione audio di questo articolo
Lo spazio negativo è stato a lungo un punto fermo del buon design. Lasciare spazio bianco intorno agli elementi di un design è la prima cosa che di solito viene in mente. Ma poi ci sono disegni che usano quello spazio bianco per dedurre un elemento che non è effettivamente lì (la freccia nascosta tra la E e la X nel logo FedEx viene immediatamente in mente come esempio).
Il cervello umano è eccezionalmente bravo a riempire gli spazi vuoti in un’immagine e creare un insieme maggiore della somma delle sue parti. È per questo che vediamo facce in cose come foglie di alberi o crepe sul marciapiede.
Questo principio è una delle idee più importanti alla base dei principi della gestalt della percezione visiva., La più influente proposta iniziale scritta sulla teoria è stata pubblicata da Max Wertheimer nel suo 1923 Gestalt laws of perceptual organization, anche se Wolfgang Köhler 1920 discussione di Gestalten fisica contiene anche molte idee influenti sul tema.
Indipendentemente da chi per primo ha proposto le idee (ci sono stati saggi risalenti fino al 1890), i principi della gestalt sono un insieme importante di idee per ogni designer da imparare, e la loro implementazione può migliorare notevolmente non solo l’estetica di un design, 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 disegni complessi costituiti da molti elementi, disponendo inconsciamente le parti in un sistema organizzato che crea un tutto, piuttosto che solo una serie di elementi disparati. I nostri cervelli sono costruiti per vedere la struttura e i modelli in modo da capire meglio l’ambiente in cui viviamo.,
Ci sono sei principi individuali comunemente associati alla teoria della gestalt: somiglianza, continuazione, chiusura, prossimità, figura/terra e simmetria& ordine (chiamato anche prägnanz). Ci sono anche alcuni principi aggiuntivi, più recenti a volte associati alla gestalt, come il destino comune.
Similarità
È la natura umana raggruppare come cose 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 vicini l’uno all’altro in un disegno.
Naturalmente, puoi rendere le cose dissimili se vuoi distinguerle dalla massa., È per questo che i pulsanti per le chiamate all’azione sono spesso progettati in un colore diverso rispetto al resto di una pagina, in modo da risaltare e attirare l’attenzione del visitatore sull’azione desiderata.
Nel design UX, l’uso della somiglianza rende chiaro ai tuoi visitatori quali elementi sono simili. Ad esempio, in un elenco di caratteristiche che utilizza elementi di progettazione ripetitivi (come un’icona accompagnata da 3-4 righe di testo), il principio di somiglianza renderebbe più facile scansionarli., Al contrario, cambiando gli elementi di design per le caratteristiche che si desidera evidenziare li fa risaltare e dà loro più importanza nella percezione del visitatore.
Anche le cose semplici come fare in modo che i collegamenti in tutto un disegno sono formattati nello stesso modo si basa sul principio di somiglianza nel modo in cui i visitatori percepiranno l’organizzazione e la struttura del tuo sito.
Continuazione
La legge di continuità postula che l’occhio umano seguirà il percorso più regolare durante la visualizzazione delle linee, indipendentemente da come le linee sono state effettivamente disegnate.,
Questa continuazione può essere uno strumento prezioso quando l’obiettivo è quello di 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 un esempio, così come gli elenchi di prodotti correlati su siti come Amazon.
Chiusura
La chiusura è uno dei principi più cool della gestalt 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 intero.
Nella sua forma più semplice, il principio di chiusura consente all’occhio di seguire qualcosa come una linea tratteggiata fino alla sua estremità., Ma applicazioni più complesse sono spesso visti in loghi, come quello per il World Wildlife Fund. Grandi pezzi del contorno per il panda mancano, ma il tuo cervello non ha problemi a riempire le sezioni mancanti per vedere l’intero animale.
La chiusura è abbastanza spesso utilizzata nella progettazione del logo, con altri esempi inclusi quelli per USA Network, NBC, Sun Microsystems e persino Adobe.
Un altro esempio molto importante di chiusura al lavoro nel design UX e UI è quando si mostra un’immagine parziale che svanisce dallo schermo dell’utente per mostrare loro che c’è di più da trovare se scorrono a sinistra oa destra. Senza un’immagine parziale, cioè,, se vengono mostrate solo immagini complete, il cervello non interpreta immediatamente che potrebbe esserci più da vedere, e quindi il tuo utente ha meno probabilità di scorrere (poiché la chiusura è già evidente).
Prossimità
La prossimità si riferisce a quanto gli elementi sono vicini l’uno all’altro. Le relazioni di prossimità più forti sono quelle tra soggetti sovrapposti, ma il solo raggruppamento di oggetti in una singola area può anche avere un forte effetto di prossimità.
È vero anche il contrario, ovviamente., Mettendo spazio tra gli elementi, è possibile aggiungere la separazione anche quando le loro altre caratteristiche sono le stesse.
Prendi questo gruppo di cerchi, ad esempio:
Nel design UX, la prossimità è più spesso utilizzata per convincere gli utenti a raggruppare determinate cose senza l’uso di cose come i bordi rigidi. Mettendo le cose come più vicino insieme, con lo spazio tra ogni gruppo, lo spettatore immediatamente prendere l’organizzazione e la struttura che si desidera loro di percepire.,
Figura/Terra
Il principio figura / terra è 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 fluttuante nei meme sui social media o come parte di 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 il punto focale) e lo sfondo (l’area su cui poggiano le figure)., Dove le cose si fanno interessanti quando il primo piano e lo sfondo in realtà contiene due immagini distinte, come segue:
Un semplice esempio può essere visto con questa immagine, delle due facce, la creazione di una candela, o vaso tra di loro:
In termini generali, il tuo cervello interpreterà l’area più grande di un’immagine come il terreno e il più piccolo come la figura., Come mostrato nell’immagine qui sopra, però, si può vedere che i colori più chiari e scuri possono influenzare ciò che è visto come la figura e ciò che è visto come il terreno.
Il principio figura / base può essere molto utile quando i progettisti di prodotto vogliono evidenziare un punto focale, in particolare quando è attivo o in uso—ad esempio, quando si apre una finestra modale e il resto del sito sfuma in background, o quando si fa clic su una barra di ricerca e il contrasto viene aumentato tra esso e il resto del sito.,
Simmetria e Ordine
La legge di simmetria e ordine è anche conosciuta come prägnanz, 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 una raccolta di linee curve.,
Ecco un altro buon esempio di gestalt principio di progettazione “prägnanz”:
il Tuo cervello interpreta l’immagine a sinistra come un rettangolo, cerchio, triangolo, anche quando i profili di ciascuna sono incompleti, perché quelle sono le forme più semplici di immagine complessiva.
Destino comune
Mentre il destino comune non era originariamente incluso nella teoria della gestalt, da allora è stato aggiunto. Nel design UX, la sua utilità non può essere trascurata., Questo principio afferma che le persone raggrupperanno insieme le 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 gruppo di singoli elementi, ma poiché si muovono apparentemente come uno, il nostro cervello li raggruppa e li considera un unico stimolo.
Questo è molto utile in UX come effetti animati diventano più prevalenti nel design moderno. Si noti 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 nel design UX
Come con qualsiasi principio psicologico, imparare a incorporare i principi della percezione visiva della gestalt nel tuo lavoro di progettazione può migliorare notevolmente l’esperienza dell’utente., Capire 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 loro prima visita.
I principi della Gestalt sono relativamente facili da incorporare in qualsiasi design e possono elevare rapidamente un design che sembra casuale o come se stesse combattendo per l’attenzione di un utente su uno che offre un’interazione naturale e naturale che guida gli utenti verso l’azione che vuoi che intraprendano.