Per diventare UX designer è importante conoscere bene anche la parte visuale della progettazione.

Il visual design è un processo di progettazione che si concentra sull’estetica di un’app e su come è possibile utilizzare tale estetica per migliorare l’esperienza dell’utente.

Si occupa di selezionare e applicare colori, tipografia e stili a un’interfaccia utente, la User Interface. 

Il design si differisce dall’arte perché ha sempre uno scopo.

Ci sono una serie di principi chiave a cui i designer si riferiscono quando mettono insieme un design. Tra questi ci sono le leggi della Gestalt del raggruppamento.

Questi principi possono funzionare come un insieme di linee guida per la creazione di layout facilmente navigabili.

La psicologia Gestalt

La psicologia della Gestalt è una scuola di pensiero focalizzata sulla comprensione del modo in cui le nostre menti organizzano ed elaborano il mondo che ci circonda.

Il movimento è stato fondato in Germania intorno al 1912 e da allora ha contribuito a spiegare come le nostre menti elaborano le informazioni. Il principio centrale della psicologia della Gestalt è stato magnificamente riassunto dalla famosa citazione:

“Il tutto è diverso dalla somma delle parti.” KURT KOFFKA

Il principio sostiene che quando vediamo qualcosa, formiamo una percezione, o “gestalt”, dell’oggetto in cui il tutto ha una realtà indipendente dalle sue parti.

Per comprendere il mondo circostante si tende a identificarvi forme secondo schemi che ci sembrano adatti – scelti per imitazione, apprendimento e condivisione – e attraverso simili processi si organizzano sia la percezione che il pensiero e la sensazione; ciò avviene di solito del tutto inconsapevolmente.

Per esempio:

principi gestalt psicologia

Sono due volti di profilo, o è un calice?

Quello percepiamo è il risultato, derivato, di una complessa organizzazione che guida anche i nostri pensieri.

Perché i principi Gestalt sono importanti

Secondo Nielsen Norman Group, capire questi principi, ed applicarli ci porterà diversi benefici:

  • Aumenta l’usabilità. Seguendo questi principi di progettazione visiva si ottengono spesso layout facili da usare. Se associato a un forte design di interazione, il design visivo aumenterà le percentuali di successo delle attività e il coinvolgimento degli utenti.
  • Provoca emozione e gioia. Le cose belle suscitano emozioni positive. In effetti, l’effetto estetico-usabilità dice che quando le persone trovano un design visivamente accattivante, possono essere più tolleranti di piccoli incidenti di usabilità.
  • Rafforza la percezione del marchio. Un forte sistema visivo crea fiducia ed interesse degli utenti nel prodotto e rafforza in modo appropriato il marchio.

Principi fondamentali

I principi fondamentali del design sono:

  1. Enfasi,
  2. Equilibrio e Allineamento,
  3. Contrasto,
  4. Ripetizione,
  5. Proporzione,
  6. Movimento, e
  7. Spazio bianco.

Principi gestalt: Enfasi

L’enfasi è tutta sull’evidenziare un elemento o una sezione rispetto a un altro, per esempio un invito all’azione (CTA).L’enfasi, come la gerarchia, può essere creata utilizzando dimensioni, colore o posizionamento. Puoi usarla per guidare un utente o indirizzare la sua attenzione verso un elemento o una sezione specifica.Considera la schermata di accesso in basso. Il colore verde viene utilizzato per enfatizzare il pulsante, che è un componente importante della pagina in questione.principi gestalt psicologia

Principi gestalt: Equilibrio e Allineamento

Non dimenticare mai che ogni elemento inserito in una pagina ha un peso.

Il peso può derivare da colore, dimensione o trama.

Pensa se avessi messo tutti i tuoi mobili in un angolo di una stanza, sarebbe un disordine totale. Allora stesso modo, non puoi ammucchiare tutti i tuoi elementi UI in un’area della pagina che stai progettando.

Senza equilibrio, il tuo pubblico sentirà come se il loro occhio scivolasse fuori dalla pagina.

Il design simmetrico crea equilibrio attraverso elementi equamente ponderati allineati su entrambi i lati di una linea centrale.

principi gestalt psicologia

Esempio: Design simmetrico
 

D’altra parte, il design asimmetrico utilizza pesi opposti (come il contrasto di un elemento grande con diversi elementi più piccoli) per creare una composizione che non è uniforme, ma ha ancora equilibrio.

 

Esempio: Design asimmetrico

Principi gestalt: Contrasto 

Il contrasto crea spazio e differenza tra gli elementi del tuo design.

Lo sfondo deve essere significativamente diverso dal colore dei tuoi elementi in modo che funzionino armoniosamente insieme e siano leggibili.

Se hai intenzione di lavorare molto con i testi, capire il contrasto è incredibilmente essenziale perché significa che il peso e le dimensioni della tipografia sono bilanciati.

principi gestalt psicologia

Principi gestalt: Ripetizione

La ripetizione unifica e rafforza un design.

Se solo un elemento ha uno stile, diverso da tutti gli altri, si può percepire come un errore. Se, invece, tre elementi hanno quello stile, allora hai creato un motivo e hai di nuovo il controllo del tuo design.

In questa immagine, dopo averla guardata 10 secondi, sapremo già raggruppare gli elementi del menu laterale, del menu in alto, delle sezioni della pagina, ecc.

principi gestalt psicologia

 

Principi gestalt: Proporzione

La proporzione è la dimensione visiva del peso degli elementi ed il modo in cui si relazionano tra loro.

Spesso aiuta a raggruppare il tuo design in sezioni, anziché nel suo insieme.

La proporzione può essere raggiunta solo se tutti gli elementi del progetto sono di buone dimensioni e posizionati con cura. Una volta padroneggiato l’allineamento, l’equilibrio e il contrasto, la proporzione dovrebbe emergere organicamente.

principi gestalt psicologia

In questo esempio, la foto del prodotto è relativamente più grande di tutti gli altri elementi nell’interfaccia utente per creare un senso di importanza.

Principi gestalt: Movimento

Movimento significa guidare l’occhio dell’utente verso un percorso predeterminato in una pagina.

Un esempio che descrive bene il movimento su una pagina web è questo:

principi gestalt psicologia

Principi gestalt: Spazio Bianco

Finora abbiamo visto sempre elementi che si aggiungono al design. Lo spazio bianco (o spazio negativo) è l’unico che si occupa specificamente di ciò che non si aggiunge.

Lo spazio bianco è esattamente questo: lo spazio vuoto attorno agli elementi.

Per i designer principianti può essere una zona pericolosa. Spesso, dare semplicemente più spazio per respirare ad una pagina può trasformare il vostro progetto da mediocre ad eccellente.

Lo spazio bianco crea, in modo indiretto, la gerarchia e l’organizzazione del design. I nostri cervelli associano naturalmente “importante” un ampio spazio bianco attorno a un elemento.

principi gestalt psicologiaSource: Refactoring UI Book

Ti è piaciuto questo articolo sulla Gestalt? Puoi approfondire l’argomento nel nostro gruppo facebook.

Credits: Link, Link

Risorse Extra

Per avere tanti altri contenuti come questo: