UI Design davvero efficace grazie alle Leggi della Gestalt
Teoria della Gestalt: che cos'è?
Chi mi conosce sa che amo tantissimo fare ordine sia nello studio (un'abilità di cui vado molto fiera è prendere appunti senza guardare la tastiera) che nel lavoro (Trello è il mio migliore amico, mi aiuta ad organizzare le tantissime idee che mi passano per la testa).
Ma cosa c'entra l'ordine con le Leggi della Gestalt?
Innanzitutto definiamo questa splendida teoria. La Gestalt è una corrente psicologica nata agli inizi del '900 in Germania che studia il modo in cui il cervello percepisce gli elementi grafici (nel nostro caso, dell'Interfaccia Utente - UI) e l'esperienza che viviamo quando ci relazioniamo ad essi.
Tempo fa ho chiesto a mio padre di consegnarmi tutti i quaderni delle superiori che avevamo custodito con tanta cura nella sua cantina e con grandissimo piacere ho ritrovato quello di Comunicazione Visive che conteneva anche queste leggi.
Il quaderno in questione risale al 2004, quando il digitale era solo agli inizi e in pochissimi avevano un sito web. Ho subito notato gli esempi che avevo scarabocchiato: erano molto generici e non si riferivano alle interfacce grafiche digitali.
Da qui è nata l'idea di disegnare degli esempi concreti per dimostrare chiaramente come i Principi della Gestalt valgono anche per la costruzione di siti web e app. Vediamoli insieme.
Principio di vicinanza
Del principio di vicinanza (anche detto principio di prossimità) avevo parlato anche in questo post.
Il nostro occhio percepisce subito gli elementi più vicini come parte di un gruppo rispetto a quelli più distanti.
Gli stessi, oltre a risultare molto ordinati, aiutano le persone a comprendere quando si parla di argomenti coerenti e quando invece si cambia discorso.
Questo principio è strettamente correlato allo spazio bianco (spesso i clienti ci provano, ma santo cielo, lo spazio bianco non si tocca!). Lo spazio bianco è un'area vuota (o spazio negativo), che serve a distinguere gli elementi grafici in relazione tra loro e aiuta l'occhio a separarli dal resto.
Il principio della vicinanza, come anche lo spazio bianco, ci aiuta a creare ordine e armonia. Scommetto che nell'esempio che ti ho riportato sopra hai subito notato che i gruppi sono due, separati, appunto, dallo spazio bianco.
Principio di somiglianza
Spesso il principio di vicinanza da solo non basta a rendere chiaro il nostro messaggio.
Dai un'occhiata alla coerenza di dimensione, forma e colore che vedi nell'esempio, ci aiuta ad attribuire agli elementi una stessa funzione.
Una call to action sempre uguale, ad esempio, è subito evidente e fa risparmiare tempo. Come anche, in questo caso, tutte le immagini con i bordi squadrati anziché tondi.
Principio di simmetria
Ti è mai capitato di guardare un elemento asimmetrico e pensare come la tua attenzione sia rivolta in un punto specifico dello schermo?
"Le regole sono fatte per essere stravolte". È una frase che mi è stata ripetuta all'infinito durante tutti i miei studi di grafica e cinema.
Perché è così importante? Noi designer abbiamo un potere magico: indirizzare l'attenzione di chi osserva i nostri contenuti dove vogliamo. Ecco quindi il motivo che dovrebbe portarci in alcuni casi a rompere la simmetria.
Immagina una bilancia: è simmetrica quando i pesi sono distribuiti in modo equo e diventa asimmetrica quando un elemento è più pesante dell'altro.
Nel design il principio è lo stesso.
Quando gli elementi grafici sono disposti in modo simmetrico ed equilibrato l'occhio viene soddisfatto e la tua comunicazione diventa più ordinata, veloce ed efficiente.
Principio di chiusura
Questa regola la troviamo applicata spessissimo ai loghi ma la possiamo vedere anche in alcuni elementi delle interfacce grafiche di siti e app che utilizziamo.
Il nostro cervello tende a chiudere le forme aperte per creare una figura "finita". Questo assunto ha un enorme vantaggio per noi designer perché ci permette di ridurre la complessità per rendere i progetti più coinvolgenti.
Less is more, meno elementi inseriamo e meglio comunichiamo (quante volte l'abbiamo sentito dire?). È un pensiero che ricordo sempre ai miei clienti quando mi chiedono di aggiungere, ancora prima di pensare al valore che vogliono dare.
Principio di continuità
Dare una direzione aiuta la lettura. Usiamo le griglie formate da righe e colonne per progettare perché ci aiutano ad organizzare gli elementi con lo scopo di guidare l'occhio, stabilire relazioni tra di essi e indirizzare l'attenzione su gruppi o elementi specifici.
Ci sono diversi componenti che si basano su questo principio, come cards o tab.
Principio del destino comune
Quest'ultimo principio di cui ti voglio parlare è molto simile a quello di continuità. In questo caso però si tratta di elementi che indicano o si muovono nella stessa direzione, come il carosello dell'esempio.
Si chiama così perché il nostro cervello percepisce le immagini come unico gruppo che si differenzia da tutti gli altri elementi di contorno o che si muovono in direzioni diverse.
Ci avevi mai pensato? Un altro esempio è il menù a tendina con tutte le opzioni che si muovono in senso verticale.
Bene! È arrivato il momento di mettersi subito al lavoro per applicare tutti questi meravigliosi principi anche alle nostre interfacce digitali. Solo un’ultima “cosetta” su cui riflettere: se vuoi creare esperienze gratificanti, non affidarti soltanto al tuo istinto.
Valentina Barreca
Freelance dal 2013, mi occupo di Visual e Web Design.
Collaboro con liberi professionisti e aziende a crescere comunicando messaggi che conquistano i clienti.
Scrivimi se hai in mente altri esempi oltre a quelli che ti ho riportato io, sarò felice di leggerti! 😊 Su Instagram sono @ui.playgrafica.
Ti va di condividere l’articolo?
👇 Questi sono i collegamenti