menu
hamburger
Percezione visiva per progettare siti web

Percezione visiva: come usarla per progettare un sito web

Definizione di gerarchia visiva

Il termine gerarchia visiva suggerisce che ci sia un modo appropriato per vedere i contenuti: in maniera gerarchica. In altre parole, c’è un metodo per mettere in ordine le cose… alcuni contenuti dovrebbero essere visti per primi, altri per secondi, altri per terzi, e così via. Il contenuto più importante deve essere in cima alla gerarchia. È l’elemento visivo che guarderai per primo, l’elemento che poi ti indirizza sul cosa guardare dopo. Così come un grande scrittore inizia con un incipit interessante che ti fa arrivare col fiato sospeso al paragrafo successivo, un designer riflessivo farà spostare lo sguardo da un contenuto a quello successivo.

52 Weeks of UX fornisce anche degli esempi di siti con una forte e con una debole gerarchia visiva:

Gerarchia visiva per un web design efficace

Un bravo web designer deve quindi classificare - in termini di importanza - i vari elementi di un sito web rispetto agli obiettivi di business.

Per esempio, il punto focale di una homepage dovrebbe essere una grande immagine che catturi istantaneamente l’attenzione del visitatore. A questa dovrebbe seguire una headline che dica cosa viene offerto e poi una Call To Action (CTA) su cui i visitatori possono cliccare per approfondire.

Ecco un esempio ben fatto: l’homepage di TOMS.

Percezione visiva nel web design

La chiave è classificare gli elementi del sito in base alla loro importanza e posizionarli in modo che guidino in maniera fluida i visitatori attraverso il sito.

Ecco un esempio ben fatto: l’homepage di TOMS.

Percezione visiva in un sito web

La prima pagina sulla sinistra è una sezione “chi siamo” di un sito web. La pagina accanto è una pagina prodotto di un e-commerce. La terza pagina è una pagina risultati di un motore di ricerca (SERP).

Come si può notare, c’è un pattern riconoscibile in tutti e tre i tipi di pagina.

La forma a F è preponderante sulla pagina prodotto dell’e-commerce o sulla SERP, ma è chiaro che altri tipi di contenuti sono scandagliati in maniera simile.

Un’ottimale UX da desktop può spesso essere raggiunta strutturando il layout della pagina tenendo conto di questo principio per direzionare l’attenzione del visitatore.

Ecco un esempio ben fatto: l’homepage di TOMS.

Il web design efficace
Progettazione sito web

Gli spazi bianchi rendono lo stile del sito più pulito ed è più facile per l’utente focalizzarsi sul messaggio principale. I visitatori riescono così ad assorbire più efficacemente il copy e più probabilmente noteranno i punti focali del sito, come le CTA.

Gli occhi sono naturalmente attratti verso il contrasto

Uno dei modi più efficaci di attirare lo sguardo verso i punti focali è creare contrasto.

Questo è infatti uno dei principi della Gestalt Theory che “tenta di descrivere come le persone tendono a organizzare elementi visivi in gruppi o in un insieme unico quando vengono applicati determinati principi”.

Gestalt Theory nel web design

La somiglianza aiuta nell’assimilazione dei contenuti

La somiglianza è un altro dei principi della Gestalt Theory che afferma che “elementi che condividono caratteristiche simili sono percepiti come maggiormente correlati rispetto a gli elementi che non hanno quelle caratteristiche”.

Per dirla in modo semplice, organizzare i diversi elementi in gruppi permette agli utenti di distinguerli rapidamente dal resto del sito. Questo è un bene perché permette di creare una UX più continuativa e richiede un minor sforzo di progettazione.

Ecco un semplice esempio preso dall’homepage dell’Harvard Business Review in cui hanno posizionato le newsletter HBR in un unico gruppo.

Web design: applicazione della Gestalt Theory

Usare elementi simili è dunque un metodo efficace per dividere le varie sezioni del sito in modo che il tutto sia più facilmente assimilabile.

Anche la vicinanza aiuta

C’è un ultimo principio della Gestalt Theory che merita di essere trattato: la vicinanza.

È molto semplice: “gli oggetti più vicini sono percepiti come maggiormente correlati tra loro rispetto a quelli più lontani”.

Dai un’occhiata a questi gruppi di punti.

Progettazione siti web e percezione visiva

Siamo naturalmente inclini a considerare i punti a sinistra come un elemento singolo. Invece, percepiamo i punti a destra come due elementi separati.

La legge della vicinanza ci permette di meglio comprendere il contenuto di un sito e dividere i vari elementi in differenti categorie.

È possibile usare questo aspetto della percezione visiva per spezzare i contenuti creando categorie e anche sotto-categorie.

A sua volta, questo dovrebbe migliorare il flusso del sito e aiutare gli utenti a navigarlo più facilmente.

La sezione aurea può ottimizzare l’estetica globale del sito web>

Il concetto della sezione aurea risale a oltre 2.000 anni fa ed è stato studiato da Platone a Euclide, fino ai moderni matematici come Roger Penrose.

La sezione aurea corrisponde a 1,618 e visivamente appare così:

Sezione aurea

Conosciuta anche come divina proportione, la sezione aurea è una relazione in cui gli elementi sono proporzionati in modo da essere esteticamente piacevole all’occhio umano.

È un fenomeno che ritroviamo nell’architettura antica e in tutta la natura. E, cosa ancor più interessante, può essere applicata anche al design dei siti web.

Ecco un buon esempio:

La divina proportione nel web design di un sito web

Il layout e l’organizzazione degli elementi si adattano perfettamente alla sezione aurea.

Conclusioni

La percezione visiva riferita al web design è estremamente complessa e ricca di sfaccettature e i principi qui discussi sono solo una minima parte dell’intero processo.

Per ottimizzare al meglio un sito web e creare la migliore user experience possibile è però fondamentale comprendere come le persone percepiscono visivamente i contenuti e quali reazioni psicologiche questi scatenano.

Liberamente tradotto da The Daily Egg.

messages
Cerchi una agenzia specializzata nel Branding B2B?
skeuomorphic design

Skeuomorphic design

II critici sostengono che lo scheumorfismo sia obsoleto, ma l’IoT, la virtual reality e i wearables stanno cambiando i trend del design. In questo post ti spieghiamo come!

Idee creative per la pagina 404

Realizzare pagine 404 creative

Durante la navigazione di un sito web capita di incontrare una pagina di errore 404, scopriamo insieme cos'è e come si può personalizzare.

Perché è importante la web analytics

Analisi dei dati: perché è fondamentale per un sito web

Ogni decisione aziendale è guidata da obiettivi che vanno raggiunti e misurati. Lo stesso vale per un sito web!

Il linguaggio che converte

Il linguaggio converte

Scegliere le parole giuste per i contenuti di un sito web può fare la differenza in termini di conversioni. Vediamo insieme da dove partire!

Trappole nel tracciamento delle transazioni di un ecommerce

Transazioni e-commerce: le trappole nel tracciamento

Il tracciamento dell’e-commerce avanzato è stato implementato correttamente, ma le transazioni riportate sono diverse da quelle reali. Scopriamo insieme i motivi!

Mobile design del checkout dell'ecommerce

E-commerce e mobile: ecco l’anatomia di un perfetto checkout

Considerando che oltre il 50% del traffico è effettuato da dispositivi mobili, è fondamentale progettare la user experience del checkout da mobile. Ecco alcuni consigli utili!

Perché ottimizzare il sito per le ricerche vocali

Ricerca vocale: perché ottimizzare il sito web per la voice search

Google Home, Amazon Echo, Siri, Cortana… sempre più utenti utilizzano gli smart speaker per effettuare ricerche online. Scopriamo insieme come intercettarli!