Il cervello umano è cablato per vedere struttura, logica e modelli. Ci aiuta a dare un senso al mondo. Negli anni ‘ 20 un gruppo di psicologi tedeschi sviluppò teorie su come le persone percepiscono il mondo che li circonda, chiamati principi della Gestalt.
Ad esempio, cosa vedi quando guardi questa immagine?,
Fonte: The Inspired Eye
Se sei come la maggior parte delle persone, probabilmente vedi un triangolo. Ma in realtà, tutto ciò che è ci sono tre bianchi ” pac men.”Vediamo il triangolo perché il nostro cervello prende le informazioni visive ambigue e le organizza in qualcosa che ha senso per noi—qualcosa di familiare, ordinato, simmetrico e che capiamo.
Quando questo processo cognitivo prende il via, la nostra mente salta dalla comprensione di tutti gli elementi come componenti individuali e non correlati a vedere l’intera forma nel suo complesso., E come risultato, percepiamo forme e oggetti in cui nessuno è stato creato.
Per illustrare ulteriormente questo processo, controlla la GIF qui sotto. Il tuo cervello vede un cane camminare, ma non è altro che una serie di punti in movimento.
Fonte: Gizmodo
Questi sono semplici esempi, ma dimostrano i tipi di scorciatoie che il nostro cervello fa tutto il tempo per dare rapidamente un senso al mondo.
Quali sono i principi della Gestalt?,
Queste scorciatoie sono conosciute come i principi della Gestalt della percezione visiva e descrivono in dettaglio come il nostro cervello crea la struttura per impostazione predefinita. Ma perché è la comprensione di questo importante per il web e mobile design?
Perché i designer dovrebbero preoccuparsi dei principi della Gestalt
I grandi designer comprendono il ruolo potente che la psicologia svolge nella percezione visiva. Cosa succede quando l’occhio di qualcuno incontra le tue creazioni di design? Come reagisce la loro mente al messaggio che il tuo pezzo sta condividendo?, – Laura Busche, Brand Content Strategist di Autodesk
Pensa a quella citazione per un minuto. Quando le persone vedono per la prima volta i tuoi progetti, come li sperimentano? Per capire cosa rende il lavoro di progettazione dell’interfaccia utente, è necessario comprendere la psicologia della percezione umana.
La legge fondamentale che governa un principio della Gestalt è che tendiamo a ordinare la nostra esperienza in modo regolare, ordinato e riconoscibile. Questo è ciò che ci permette di creare significato in un mondo complesso e caotico., E avere una solida comprensione di come funzionano questi principi ti aiuterà in tre modi.
- Ti aiuteranno a determinare quali elementi di design sono più efficaci in una determinata situazione. Ad esempio, quando utilizzare la gerarchia visiva, l’ombreggiatura dello sfondo, i gradienti e come raggruppare elementi simili e distinguerne di diversi.
- Questi principi psicologici hanno il potere di influenzare la nostra percezione visiva, il che consente ai progettisti di indirizzare la nostra attenzione su specifici punti di messa a fuoco, portarci a intraprendere azioni specifiche e creare cambiamenti comportamentali.,
- E infine, al più alto livello, i principi Gestalt aiutano a progettare prodotti che risolvono il problema del cliente o soddisfano le esigenze dell’utente in un modo bello, piacevole e intuitivo da usare.
In questo articolo, discuteremo sette leggi o principi della Gestalt che si applicano direttamente al design moderno e condivideremo alcuni esempi di come vengono utilizzati nella progettazione dell’interfaccia utente. Questo non è un elenco esaustivo, ma inizierai rapidamente a notare che c’è una sovrapposizione tra molti dei principi e che tutti lavorano insieme in modo fluido. Ora tuffiamoci.,
- Figura-sfondo
- Somiglianza
- punti di Prossimità >
- Comune regione
- Continuità
- Chiusura
- punto Focale
il Principio #1: figura-sfondo
La figura-sfondo principio afferma che la gente istintivamente percepire gli oggetti come essere in primo piano o sullo sfondo. O si distinguono prominenti nella parte anteriore (la figura) o si ritirano nella parte posteriore (il terreno).,
Fonte: Un nano di nome Warren
Nell’immagine sopra, ad esempio, il tuo occhio vede istantaneamente una mela bianca seduta su uno sfondo nero.
Questa determinazione avverrà rapidamente e inconsciamente nella maggior parte dei casi. Figura / Terra ci consente di sapere su cosa dovremmo concentrarci e cosa possiamo tranquillamente ignorare in una composizione. – Steven Bradley,web designer
Quando le persone usano il tuo sito web o l’app mobile, una delle prime cose che fanno su ogni schermo è determinare quale è la figura e quale è il terreno.,
Esempi del principio figura-terra
La homepage di Basecamp ha un sacco di grafica, testo, moduli e altre informazioni. E a causa del principio di base della figura, puoi immediatamente dire che dovresti concentrarti sul contenuto nelle aree in primo piano bianche.
AngelList utilizza il principio figura-terra in due modi sotto. Innanzitutto, il testo e il logo sul lato sinistro della pagina sono chiaramente posizionati sopra l’immagine di sfondo. In secondo luogo, il testo bianco nel menu a destra si trova in cima allo sfondo nero.,
Principio #2: somiglianza
Il principio di somiglianza afferma che quando le cose sembrano essere simili tra loro, le raggruppiamo insieme. E tendiamo anche a pensare che abbiano la stessa funzione.
Ad esempio, in questa immagine, sembrano esserci due gruppi separati e distinti in base alla forma: i cerchi e i quadrati.
Fonte: Creative Beacon
Una varietà di elementi di design, come il colore e l’organizzazione, può essere utilizzato per stabilire gruppi simili., Nell’immagine qui sotto, per esempio, anche se tutte le forme sono le stesse, è chiaro che ogni colonna rappresenta un gruppo distinto:
Fonte: Andy Rutledge
Esempi di somiglianza principio
GitHub utilizza la somiglianza principio in due modi sulla pagina qui sotto. Innanzitutto, lo usano per distinguere diverse sezioni. Puoi immediatamente dire che la sezione grigia in alto ha uno scopo diverso dalla sezione nera, che è anche separata e diversa dalla sezione blu.,
In secondo luogo, usano anche il colore blu per distinguere i collegamenti dal testo normale e per comunicare che tutto il testo blu condivide una funzione comune.
Principio #3: prossimità
Il principio di prossimità afferma che le cose che sono vicine tra loro sembrano essere più correlate di quelle che sono distanziate più lontano.
Fonte: Andy Rutledge
La prossimità è così potente che sovrascrive la somiglianza di colore, forma e altri fattori che potrebbero differenziare un gruppo di oggetti.,
Fonte: Steven Bradley
Notate i tre gruppi di punti neri e rossi sopra? La vicinanza relativa degli oggetti ha un’influenza ancora più forte sul raggruppamento rispetto al colore.
Esempi del principio di prossimità
La vicinanza di ogni immagine e il suo testo corrispondente comunica che sono correlati tra loro.
E Vice lo usa per distinguere tra immagini, titoli, descrizioni e altre informazioni per ciascuna delle sue storie.,
Principio #4: regione comune
Il principio della regione comune è altamente correlato alla prossimità. Afferma che quando gli oggetti si trovano all’interno della stessa regione chiusa, li percepiamo come raggruppati insieme.
Fonte: Smashing Magazine
Aggiungere bordi o altre barriere visibili è un ottimo modo per creare una separazione percepita tra gruppi di oggetti, anche se hanno la stessa vicinanza, forma, colore, ecc.,
Esempi del principio della regione comune
Nell’esempio da Pinterest qui sotto, il principio della regione comune viene utilizzato per separare ogni pin—tra cui la sua foto, titolo, descrizione, collaboratore, e altri dettagli—da tutti gli altri pin intorno ad esso.
Ed è usato nell’esempio di Facebook qui sotto per comunicare che i commenti, i mi piace e le interazioni sono associati a questo post specifico e non agli altri post che lo circondano.,
Principio #5: continuità
Il principio di continuità afferma che gli elementi disposti su una linea o una curva sono percepiti come più correlati rispetto agli elementi non sulla linea o sulla curva.
Fonte: Smashing Magazine
Nell’immagine sopra, ad esempio, i punti rossi nella linea curva sembrano essere più legati ai punti neri sulla linea curva che ai punti rossi sulla linea orizzontale diritta., Questo perché il tuo occhio segue naturalmente una linea o una curva, rendendo la continuazione un segnale di parentela più forte della somiglianza del colore.
Esempi del principio di continuità
Amazon utilizza la continuità per comunicare che ciascuno dei prodotti sottostanti è simile e correlato tra loro.
Sprig lo usa per spiegare il processo in tre fasi per utilizzare la loro app.
E Credit Karma lo usa per illustrare i benefici che i loro servizi forniscono.,
Principio #6: chiusura
Il principio di chiusura afferma che quando osserviamo una disposizione complessa di elementi visivi, tendiamo a cercare un modello singolo e riconoscibile.
In altre parole, quando vedi un’immagine che ha parti mancanti, il tuo cervello riempirà gli spazi vuoti e creerà un’immagine completa in modo da poter ancora riconoscere il modello.
Fonte: Eduard Volianskyi
Ad esempio, quando guardi l’immagine sopra, molto probabilmente vedi una zebra anche se l’immagine è solo una raccolta di forme nere., La tua mente riempie le informazioni mancanti per creare un modello riconoscibile in base alla tua esperienza.
Esempi del principio di chiusura
Il principio di chiusura è usato spesso nella progettazione di logo in una varietà di aziende tra cui IBM, NBC, Zendesk e Funding Circle.
Principio #7: punto focale
Il punto focale principio afferma che qualsiasi cosa distingue visivamente sarà catturare e mantenere l’attenzione dello spettatore prima.,
Fonte: Smashing Magazine
Quando si guarda l’immagine qui sopra, per esempio, la prima cosa che si nota è il quadrato rosso perché è diverso da tutti i cerchi neri intorno ad esso. È il primo punto di interesse che attira la tua attenzione, e da lì la tua attenzione si sposta su altre parti dell’immagine.
Esempi del principio del punto focale
Twilio utilizza il principio del punto focale per attirare l’attenzione sul pulsante di chiamata all’azione.,
E nell’esempio seguente, Instacart combina il principio del punto focale con il principio figura-terra per attirare l’occhio sul primo piano bianco e quindi sul pulsante verde “trova negozi”.
Considerazioni finali
Se capisci come funziona la mente umana, è più facile indirizzare l’attenzione delle persone nel posto giusto. E mantenendo questi principi top-of-mind vi aiuterà a mantenere l’utente al centro del processo di sviluppo del prodotto., Se vuoi saperne di più sui principi della Gestalt della percezione visiva, ti consigliamo di controllare le risorse qui sotto.,
Ulteriori letture:
- Semplicità, Simmetria e di Più: la Teoria della Gestalt E I Principi di Progettazione ha Dato i natali A
- Principi di Progettazione: Percezione Visiva E I Principi Della Gestalt
- Il Manuale del Designer Teoria della Gestalt
- Andy Rutledge la serie in cinque parti sulla percezione della Gestalt:
- Parte 1: Figura-sfondo Relazioni
- Parte 2: Somiglianza
- Parte 3: la Vicinanza, l’Uniforme di Connessione, e Buon Proseguimento.
- Parte 4: Destino Comune
- Parte 5: Chiusura
Vuoi saperne di più?,
Per sapere come UserTesting può aiutare a capire i vostri clienti attraverso on-demand human insight, contattaci qui.