Principi di progettazione: un'introduzione alla gerarchia visiva

Man mano che le tecnologie e le interfacce utente cambiano, la necessità di competenze di progettazione nel design visivo continua a crescere. Con nuovi esempi di una tipica interfaccia utente che emergono ogni anno, la nostra comprensione fondamentale della gerarchia visiva, della percezione e della composizione è cambiata?

Il moderno concetto di percezione visiva è radicato non solo nella scienza ma anche nella psicologia. Di conseguenza, indipendentemente dal continuo cambiamento delle interfacce utente, il modo in cui vediamo e percepiamo le informazioni visive rimarrà lo stesso. Considerando questo, è possibile per l'interaction design contemporaneo migliorare le basi della composizione grafica e della gerarchia visiva?

Le regole fondamentali della percezione visiva sono fondamentali per qualsiasi progetto visivo, poiché istruiscono su come le informazioni con un significato incorporato possono essere veicolate il più rapidamente possibile. Tuttavia, poiché il design visivo è un cugino stretto del design grafico, questi standard sono stati stabiliti per i supporti di stampa e devono ancora essere ridefiniti per il digitale.

Qualcosa come una "scuola Bauhaus digitale" che potrebbe potenzialmente stabilire nuovi principi di progettazione non si è ancora formata. Poiché le persone sperimentano un'interfaccia utente in un modo completamente diverso dalla stampa, le regole della gerarchia e della composizione visiva non sono solo datate, ma semplicemente collassano in un'interfaccia utente.

Per la maggior parte, i designer tendono ancora a trattare lo schermo come un oggetto statico e bidimensionale e la sfida per i designer interattivi è innovare oltre la semplice applicazione dei formati di stampa ai loro progetti multimediali digitali. Ma prima che nuovi progetti possano avanzare, è necessario rivedere una comprensione fondamentale della gerarchia visiva, della percezione e della composizione.

Gerarchia visiva: una nuova comprensione della composizione visiva per interfacce interattive

Cos'è la gerarchia visiva e perché è importante? La gerarchia visiva è la disposizione del contenuto in una composizione al fine di comunicare efficacemente informazioni e trasmettere significato. La gerarchia visiva indirizza gli spettatori prima alle informazioni più importanti e poi al contenuto secondario.

Stabilito attraverso l'uso appropriato di dimensioni, colore, forma, distanza, proporzione e orientamento, il significato, il concetto e l'atmosfera di una composizione è veicolato attraverso l'uso creativo di elementi grafici che determinano la gerarchia visiva.

La gerarchia visiva è fondamentale per ogni tipo di progettazione visiva, sia che si tratti di una pagina di destinazione che deve guidare l'occhio del visitatore o della navigazione di un'interfaccia utente mobile. La comprensione di ogni elemento da parte dell'utente si basa sugli altri elementi nella composizione e nel loro contesto. Gli elementi compositivi vengono trattati di conseguenza al fine di formare relazioni visive e quindi stabilire una gerarchia visiva all'interno di un progetto.

Colore nella gerarchia visiva

Molte delle regole della gerarchia visiva possono sembrare abbastanza semplici e persino banali, ma sono una base fondamentale per un buon visual design. Ad esempio, il colore è l'elemento creativo di maggior impatto nel visual design.

Considera le connotazioni immediate di una croce rossa rispetto a una monocromatica. Quasi universalmente, la croce rossa significa neutralità e protezione. Tale è il potenziale per una comunicazione immediata con l'uso del colore. Il colore è spesso usato anche per identificare i gruppi, come quando una croce rossa tra tre monocromatiche si distingue in qualche modo come più significativa.

I colori brillanti e ricchi risaltano più di quelli tenui e quindi hanno un maggiore impatto visivo. In un'interfaccia, il colore potrebbe essere utilizzato per presentare un senso di struttura e indicare le interazioni disponibili. Un singolo colore all'interno di un'interfaccia monocromatica può distinguere una selezione e persino suggerire cosa c'è oltre un pulsante su cui l'utente sta passando il mouse.

Il colore è anche seminato di significato ed emozione che possono trasmettere informazioni esplicite al subconscio di uno spettatore. Nel branding, è stata fatta una grande quantità di ricerca psicologica sul colore perché crea una risposta viscerale nei consumatori prima che abbiano qualsiasi interazione significativa con un marchio. Ad esempio, i blu sono spesso percepiti come affidabili, sicuri e calmanti, mentre i rossi sono stimolanti e sono noti per aumentare la frequenza cardiaca delle persone. Tuttavia, i colori possono avere un significato diverso a seconda della cultura.

Un buon esempio di un uso strutturale e significativo del colore nel web design è il sito The Names for Change. Il sito comunica immediatamente la sua struttura attraverso l'uso del colore; l'organizzazione è sparpagliata per impostazione predefinita ma può essere riorganizzata per argomento e/o colore.

Tuttavia, i toni scelti aiutano a superare una delle potenziali difficoltà per il significato del sito. La raccolta fondi per oggetti quotidiani come calze o tamponi non è abbastanza eccitante per vendersi, quindi il tono grafico radicale del sito aumenta il valore percettivo degli oggetti di uso quotidiano, stabilendo la necessaria struttura organizzativa sottostante.

Dimensioni nella gerarchia visiva

Immaginiamo un'illustrazione di un grande uccello seduto accanto a tre uccelli più piccoli. Senza ulteriori informazioni, questa semplice grafica comunica immediatamente la relazione tra i suoi elementi: un genitore e dei figli, che comunica collettivamente una famiglia.

Nella progettazione grafica tradizionale, una strategia tipica consiste nel rendere gli elementi più importanti i più grandi, quindi ridimensionare gli elementi in modo gerarchico. La dimensione stabilisce la gerarchia visiva perché gli elementi più grandi attirano per primi l'attenzione e quindi sembrano essere i più importanti.

Diverse dimensioni dei caratteri vengono spesso utilizzate anche nei corpi di testo per indicare differenze significative, come intestazioni, sezioni e virgolette. I contenuti secondari, come le didascalie delle immagini, sono generalmente più piccoli per non competere con il corpo principale del testo.

Considera alcune delle interfacce visive più utilizzate, come Instagram. Niente sullo schermo compete con le immagini e i video: occupano più del 60% della maggior parte degli schermi. Lo scopo dell'interfaccia utente è immediato.

Un esempio che ribalta la struttura tipica della gerarchia visiva nel web design è il sito portfolio per lo studio di arte/design Ro/Lu. Il loro sito insolito potrebbe non essere il più intuitivo, ma sfida la disposizione visiva del tipico portfolio creativo online. A causa della randomizzazione intenzionale dei loro vari progetti, uno diverso appare dominante ogni volta che un visitatore arriva al sito, il che rende ogni visita unica e interessante.

Il lavoro non è organizzato gerarchicamente nei portafogli della maggior parte degli studi di design creativi perché ogni progetto è unico e considerato ugualmente importante. Il design del sito Ro/Lu crea una composizione dinamica con vari livelli di interesse ad ogni visita e incoraggia gli spettatori a indagare sull'ampio portfolio dello studio. Di conseguenza, la natura eclettica e interdisciplinare dello studio di design è rappresentata dalla visualizzazione randomizzata dei contenuti.

Allineamento nella gerarchia visiva

L'allineamento nella gerarchia visiva comunica un senso di ordine collegando gli elementi nello spazio. Come per i capitoli di un romanzo non lineare, immagina un quadrato fuori linea in una composizione grafica. Quando un singolo elemento rompe una struttura stabilita, si distingue dalla composizione e quindi acquista significato rispetto al resto.

Una composizione rigida può apparire stagnante e visivamente poco interessante a meno che un elemento non si distingua dalla griglia visiva, cioè da un senso di ordine. Il disallineamento, o "rottura della griglia", è un'opportunità per conferire maggiore peso visivo a un elemento grafico. Questo concetto è fondamentale per la gerarchia visiva nel design.

Secondo un principio del visual design tradizionale, gli elementi posti al centro di una cornice sembrano essere più significativi. Ad esempio, il contenuto principale o gli elementi dell'interfaccia possono essere messi al centro, mentre la navigazione, i menu e altri contenuti secondari sono spesso tenuti in disparte.

Ma i designer pionieri amano sfidare lo status quo. Quando il design interattivo applica i principi fondamentali della gerarchia visiva e poi spinge i confini in composizioni visive innovative, vengono create nuove interessanti esperienze. Utilizzando un diverso allineamento, si creano nuove associazioni e significati tra gli elementi.

Ad esempio, il progetto DNA è un sito che utilizza una serie di gerarchie disgiunte per comunicare la costruzione creativa dell'album del musicista. La struttura del sito è complessa, così come la costruzione dell'album.

In primo luogo, i visitatori sono invitati ad ascoltare la musica facendo clic sui brani dell'album, che sono tradizionalmente allineati in un formato album. Tuttavia, consentendo ai visitatori di riallineare gli elementi del DNA del sito, il concept dell'album viene comunicato, non solo come una serie di brani, ma come una costruzione non lineare di elementi frammentati nel tempo.

Forme nella gerarchia visiva

Quando si tratta di forme, consideriamo come immediatamente la semplice forma del cuore comunica il suo potenziale utilizzo per "mi piace" nella maggior parte delle interfacce utente dei social network. Per stabilire l'importanza oi gruppi, considera un cuore tra quattro cerchi. Le forme geometriche sono come i colori in quanto le forme portano determinate connotazioni che conferiscono agli elementi personalità o significato.

Nella progettazione interattiva, le forme geometriche sono essenziali per una comunicazione efficiente poiché trasmettono un significato più rapidamente e universalmente rispetto al testo. Invece del testo, le icone (simboli), che spesso sono semplici forme geometriche, sono diventate l'analogo per la maggior parte dei sistemi di navigazione e delle interfacce utente.

L'obiettivo di "piacere" a un'immagine, scaricare un file, fare una telefonata o controllare un messaggio è veicolato in modo semplice e diretto con le icone (forme geometriche). Questa forma di comunicazione visiva efficiente diventa sempre più importante in un mercato globale in cui i prodotti digitali spesso servono un vasto pubblico internazionale con più lingue.

Per evidenziare le diverse modalità di interazione tra la stampa tradizionale e i media digitali, considera la differenza tra la ricerca in un vero giornale per la sezione Arte e l'utilizzo dell'icona di ricerca nella maggior parte delle app. Fino a poco tempo, la maggior parte dei siti web dei giornali disponeva le proprie pagine come se fossero stampate e l'esperienza di vagliare i contenuti era goffa e disorientante.

Rompendo i tradizionali layout web, il sito web Signes du Quotidien utilizza forme quadrate e circolari di base in modo sottile per presentare una gerarchia visiva unica che guida i visitatori attraverso il contenuto. Il menu si trova al centro della pagina e quando i visitatori lo cliccano compaiono quattro punti colorati che rappresentano le quattro sezioni del sito. I visitatori quindi trascinano uno dei punti nel quadrato per andare in quella sezione.

Il movimento nella gerarchia visiva

Un elemento in movimento avrà un peso visivo maggiore in un gruppo di elementi stagnanti e il movimento nella gerarchia visiva è un principio impossibile da usare nella stampa ma può sicuramente essere incluso nel toolkit del visual designer.

Che cosa può comunicare il movimento se non una traduzione letterale di se stesso? Il movimento viene spesso utilizzato in un'interfaccia utente come indizio con cui è possibile interagire con un elemento. L'uso del movimento può essere ulteriormente spinto e utilizzato come mezzo per comunicare qualcosa di unico? Se la gerarchia visiva non riguarda solo l'efficienza della comunicazione, ma anche il significato incorporato, come potrebbe essere utilizzato il movimento come strumento essenziale di comunicazione visiva?

Per il sito I Remember, l'interfaccia principale (che è animata) si distingue immediatamente in quanto invita all'interazione. Sebbene il movimento e l'interfaccia siano strumenti di navigazione funzionali, i designer visivi hanno utilizzato la potenziale perdita di questi elementi come un modo per comunicare la missione alla base del sito Web: il morbo di Alzheimer. Proprio come i ricordi sbiaditi dei pazienti per i quali l'organizzazione raccoglie fondi, il sito web scompare lentamente nel nulla senza un'interazione attiva.

Suono nella gerarchia dell'informazione

Il suono è un altro strumento impossibile da usare sulla carta stampata, ma ancora da sviluppare all'interno dei principi della gerarchia. Poiché il suono è del tutto non visivo, non ci sono regole a cui fare riferimento. Ma il suono può anche essere uno strumento di progettazione che comunica efficacemente il contenuto, nonché l'umore o il significato. Gli elementi di design che portano determinati suoni possono essere raggruppati l'uno rispetto all'altro e quelli che sono più audaci possono sembrare i più importanti o possono significare separazione dal gruppo.

La qualità di un suono associato a un elemento dovrebbe identificare, caratterizzare o aiutare rapidamente a strutturare il contenuto. In che modo un suono che contrasta con il suo elemento visivo associato può trasmettere un nuovo significato?

I suoni stessi possono essere così complessi da stabilire un intero stato d'animo o il messaggio di un progetto prima che venga percepito qualcosa di visivo. Proprio come uno sfondo colorato crea un'atmosfera, un suono può rimanere in sottofondo o fornire feedback in un'interfaccia utente, ad esempio rispondere al tocco di un pulsante sul dispositivo mobile. Il principio della tecnica è basilare, ma la creatività con cui può essere impiegata è dove la magia può avvenire.

Per la sua importanza nel lavoro creativo del collettivo, il sito web creato per la mostra del gruppo di artisti tedeschi ZERO al Guggenheim utilizza il suono come sfondo suggestivo e anche come forma di feedback durante la navigazione nel sito. Suonerie audaci stabiliscono i brani che rappresentano l'inizio di un tema, mentre i progetti terziari fanno clic sullo sfondo.

Il concetto di gerarchia visiva

La gerarchia visiva è un concetto semplice e comprendere la teoria è in realtà più facile della capacità pratica di un designer di eseguire una composizione ben strutturata. Tuttavia, essere fantasiosi in un nuovo mezzo pur mantenendo un buon design è una sfida.

Nuovi mezzi appaiono continuamente e le situazioni difficili non diminuiranno, al contrario. Oggi sono in uso oltre 200 diverse dimensioni dello schermo. E sono solo quelli bidimensionali. Prima sono stati Internet, i browser desktop, poi sono arrivati ​​i cellulari e i tablet, e ora ci stiamo spostando in un nuovo territorio con tecnologie come TV interattiva, IoT, dispositivi indossabili, realtà virtuale e aumentata.

Il design che supera davvero i confini dei media digitali è ancora agli albori. Si spera che i principi della gerarchia visiva e del buon design tengano il passo con il rapido progresso della tecnologia in modo che la nostra esperienza dei media digitali rimanga piena di significato e piacere.

Ulteriori letture sul blog di Toptal Design:

• Potenzia la tua UX con una chiara gerarchia visiva
• Design Foundations: una guida alla gerarchia visiva (con infografica)
• Principi di progettazione: introduzione alla gerarchia
• Best practice per la progettazione dell'interfaccia utente per una migliore scansionabilità
• Potenzia la tua UX con questi principi di progettazione dell'interazione di successo