Circa L’Autore

Jon era un visual designer per molti anni prima di fare il salto di interaction design. Ha un master in Human-Computer Interaction presso la DePaul …Più aboutJon↬

Il processo percettivo ci permette di percepire il mondo attraverso i nostri sensi di vista, olfatto, suono, gusto e tatto. In particolare, il nostro sistema visivo elabora grandi quantità di informazioni nel suo ambiente. Piuttosto che percepire gli elementi separatamente, il nostro cervello organizza modelli, oggetti e forme in forme intere che possiamo capire.

I principi di raggruppamento della gestalt della percezione visiva descrivono questa organizzazione come un insieme di principi che spiegano come percepiamo e organizziamo questa enorme quantità di stimoli visivi. I principi della gestalt-somiglianza, prossimità, chiusura, figura-terra, continuità e destino comune — sono uno strumento popolare utilizzato dai progettisti per organizzare visivamente le informazioni. Come visual designer, e ora interaction designer, applico questi principi su base regolare per creare relazioni e differenze tra gli elementi nei miei progetti. Capire come funzionano questi principi e come usarli nei tuoi progetti, produce un lavoro più forte e più coinvolgente.

Sei pronto a migliorare i tuoi progetti? Iniziamo scavando nella somiglianza.

Similarità

Il principio di somiglianza della gestalt dice che gli elementi che sono simili sono percepiti come più correlati di elementi che sono dissimili. La somiglianza ci aiuta a organizzare gli oggetti in base alla loro relazione con altri oggetti all’interno di un gruppo e può essere influenzata dagli attributi di colore, dimensione, forma e orientamento.

L’uso del colore per assegnare relazioni

La somiglianza è particolarmente influenzata dal colore. Nell’esempio seguente, si noti come le forme colorate hanno un forte effetto nell’assegnare un raggruppamento o una relazione, anche quando sono incluse forme diverse.

Usare Size per assegnare relazioni

Size è un altro utile strumento che possiamo usare per creare similarità. Nell’esempio seguente, la somiglianza nelle dimensioni fa sì che le forme più grandi si distinguano e formino un gruppo, anche se tutte le forme sono uguali.

Usare Shape per assegnare relazioni

Shape è utile nel raggruppamento per somiglianza, ma ha l’effetto di raggruppamento più debole rispetto al colore e alle dimensioni. Nell’esempio visto qui, la forma ci fa interpretare gli elementi come colonne di cerchi e quadrati, al contrario di file di cerchi e quadrati alternati.

Usare l’orientamento per assegnare relazioni

L’orientamento può essere usato anche per raggruppare per somiglianza. Ruotando alcuni dei quadrati di questo gruppo di 45 gradi, viene creato un raggruppamento separato che viene percepito come correlato. Sembrano quasi muoversi insieme in una direzione simile rispetto alle forme che li circondano. Questo in realtà tocca il principio della gestalt del destino comune, un principio che entreremo in un prossimo articolo. Ma sentitevi liberi di saltare avanti e Google (dopo aver letto questo articolo, ovviamente!). È un principio affascinante che accade spesso intorno a te.

Altro sul colore

Come accennato in precedenza, la somiglianza è particolarmente influenzata dal colore e può sovrascrivere altri attributi. Ad esempio, possiamo ignorare l’esempio di somiglianza nella forma aggiungendo colore. Ora percepiamo righe alternate di forme rosse e bianche rispetto a colonne di cerchi e quadrati. Provaci. Prova a vedere le colonne di cerchi e quadrati. Possibile ma piuttosto difficile ora, non è vero?

Inoltre, il colore può sovrascrivere la dimensione. Quando aggiungiamo colore all’esempio di somiglianza in termini di dimensioni, creiamo due raggruppamenti separati l’uno dall’altro. Ora percepiamo i grandi quadrati rossi come un gruppo e il singolo grande quadrato bianco come un gruppo separato, non correlato (e solitario).

Questi due esempi illustrano quanto sia potente il colore nell’assegnare relazioni tra elementi. Prova a usare il colore nel tuo lavoro per differenziare gli elementi e sarai stupito di quanto siano più forti i tuoi raggruppamenti.

Similarità In pratica

Quando stiamo progettando possiamo usare la somiglianza per trasmettere organizzazione e associazioni mostrando quali elementi sono correlati, o non correlati, l’uno all’altro. Ad esempio, le due sezioni mostrate sul sito di Salon di seguito sono raggruppate in base alle loro dimensioni relative. Percepiamo chiaramente due gruppi separati, con le prime storie a sinistra e le più lette a destra. Anche se entrambe le sezioni forniscono la stessa funzione — visualizzazione articoli da leggere-raggruppamento per dimensione assegna più salienza al raggruppamento di sinistra, che permette Salon per guidare l’attenzione alle loro storie migliori.

Al contrario, la mancanza di differenze di dimensioni in questo esempio da Amazon non assegna alcuna particolare importanza a nessuna sezione. Nonostante ciò, la somiglianza è ancora raggiunta attraverso l’uso della ripetizione di dimensioni e forme simili, facendoci percepire file di oggetti.

Uso simile del colore

Sappiamo che il colore è un forte indicatore di somiglianza, che aiuta a organizzare e rendere comprensibile il contenuto. In questo esempio da Cars.com, l’uso di colore simile ci aiuta a differenziare tra quello che è un’intestazione, copia di corpo, e testo di collegamento. (Full disclosure: Io lavoro a Cars.com come interaction designer.) Usando colori distinti per ciascuno di questi elementi, ci aspettiamo che funzionino in modo simile e, nel caso del testo del collegamento blu, si comportino in modo simile.

Proximity

Il principio gestalt della prossimità dice che gli elementi che sono più vicini tra loro sono percepiti come più correlati rispetto agli elementi che sono più distanti. Come per la somiglianza, la prossimità ci aiuta a organizzare gli oggetti in base alla loro relazione con altri oggetti. La prossimità è il principio più forte per indicare la relazione degli oggetti, aiutandoci a comprendere e organizzare le informazioni in modo più rapido ed efficiente.

Gli esempi di cerchi qui sotto mostrano come la prossimità può essere utilizzata per aiutarci a percepire gli oggetti come correlati. Come vediamo qui, i cerchi sono sparsi, non esibendo alcuna relazione, con ogni essere percepito come un oggetto separato.

Tuttavia, quando i cerchi vengono tirati in stretta vicinanza spaziale l’uno all’altro, viene assegnata una relazione e non vengono più percepiti come oggetti separati.

Spazio bianco

Lo spazio bianco è uno strumento prezioso per la creazione di prossimità. Prendere lo stesso gruppo di cerchi e aggiungere spazi bianchi ci aiuta a percepire le cose in modo diverso. Ora, a sinistra, la vicinanza delle forme ci fa percepire i due gruppi come colonne, ognuno il proprio gruppo. A destra, la vicinanza delle forme ci fa percepire i due gruppi come file, di nuovo ognuno il proprio gruppo. Usa lo spazio bianco nei tuoi progetti per rafforzare i raggruppamenti e differenziarli dagli altri elementi.

Il potere della prossimità

La prossimità è abbastanza forte da sopraffare altri elementi di variazione. Si noti come la prossimità vince ancora anche quando vengono aggiunti altri attributi, come il colore e la forma. Prova come potrebbero, il colore e la forma non sopraffare la vicinanza qui e ogni raggruppamento è ancora percepito come un elemento separato.

Prossimità In pratica

Quando organizziamo le informazioni nei nostri progetti, possiamo usare la prossimità per creare relazioni tra gli elementi per aiutare a comprendere le informazioni presentate. Ad esempio, raggruppando queste immagini dall’Apple Store insieme nelle immediate vicinanze, assegniamo una relazione all’intero gruppo. Li percepiamo come correlati e ci aspettiamo che il contenuto sia simile.

Tuttavia, quando rimuoviamo la colonna centrale, improvvisamente percepiamo due gruppi separati e abbiamo un’aspettativa di contenuti diversi tra loro.

Combinando prossimità e somiglianza

Il raggruppamento per prossimità può anche essere combinato con la somiglianza per creare relazioni più forti. Visto in questo esempio da Amazon, il raggruppamento per prossimità e somiglianza nelle dimensioni ci fa percepire due raggruppamenti separati e assegna più risalto al gruppo di sinistra.

Prossimità e gerarchia

La prossimità è eccellente per l’organizzazione di elementi gerarchici. In questo esempio da Crate & Barrel, le opzioni sono raggruppate in titoli comuni, creando relazioni, il che rende la scansione e la ricerca di informazioni molto più facili.

Quando le intestazioni vengono rimosse e le opzioni sono raggruppate senza prossimità, perdiamo le relazioni che sono state create e diventa molto più difficile scansionare rapidamente e trovare le informazioni desiderate. Prova tu stesso. Vai avanti e vedere quanto velocemente si possono trovare tazze da caffè nel raggruppamento con intestazioni contro il raggruppamento senza intestazioni. Un po ‘ più difficile da saltare rapidamente ad esso, non è vero?

Conclusione

Capire come usare la somiglianza e la vicinanza per influenzare le relazioni tra gli elementi nel tuo lavoro ti aiuterà a creare progetti che consentano un’organizzazione più semplice e migliorare l’usabilità del tuo lavoro. Usa la somiglianza e la prossimità per creare relazioni e differenze tra gli elementi nei tuoi progetti. Sperimenta l’uso dello spazio bianco, del colore, della dimensione, della forma e dell’orientamento degli elementi e mescola entrambi i principi per produrre relazioni molto forti e coinvolgenti.

Nella prossima parte di questa serie, esamineremo la chiusura e la figura-terra, ed esploreremo come questi due principi della gestalt utilizzano lo spazio positivo e negativo per creare relazioni semplici ma potenti.

Risorse e buone letture

• Principi Gestalt su Scholarpedia.
• “Laws of Organization in Perceptual Forms”: Testo del documento seminale di Max Wertheimer del 1923.
• Principi universali del design Rivisti e aggiornati: 125 modi per migliorare l’usabilità, influenzare la percezione, aumentare l’appeal, prendere decisioni di progettazione migliori e insegnare attraverso il design, di William Lidwell, Kritina Holden e Jill Butler. Rockport Pub, 2010.
• Visualizzazione delle informazioni: percezione per il design, di Colin Ware. Elsevier, 2012.

• Principi di progettazione: Percezione visiva E I Principi Della Gestalt
• Collegamento E di Elementi di Separazione Attraverso il Contrasto E Somiglianza
• Equilibrio Compositivo, la Simmetria E l’Asimmetria
• Come Migliorare la Tua Email Flusso di lavoro Con Design Modulare
• Miglioramento dell’Esperienza Utente Con Funzionalità in Tempo Reale

(ml, da, og, jb, il)