Potenzia la tua UX con una chiara gerarchia visiva

Il concetto di gerarchia visiva è stato applicato nel design da quando Internet era una fantasia lontana, ed è importante tanto nel design di prodotti moderno quanto lo era all'apice della pubblicità stampata.

La gerarchia visiva determina l'ordine in cui le persone acquisiscono ed elaborano le informazioni su una pagina, indipendentemente dal fatto che sia digitale o stampata. È una parte vitale della creazione di un'esperienza utente ottimale.

In parole povere, un chiaro senso della gerarchia visiva guida le persone verso contenuti o azioni importanti. In una pubblicità stampata, questo sarebbe lo slogan, mentre in un prodotto digitale potrebbe essere un messaggio di marca o un invito all'azione principale.

È un modo incredibilmente utile per creare un'esperienza cliente ordinata e mirata, migliorando al contempo le possibilità di ottenere un risultato strategico.

Ecco alcuni passaggi che i designer UX possono intraprendere per ottenere un chiaro senso di gerarchia visiva nei prodotti digitali e portare le esperienze dei clienti al livello successivo.

Definisci UX e obiettivi del marchio

Utilizzando una varietà di metodi, molti team di prodotto stanno già definendo gli obiettivi UX per ciascuna sezione del loro prodotto.

Dare forma alla definizione degli obiettivi UX soddisfacendo i criteri della metodologia SMART ( S pecific, M easurable, Actionable, R elevant, T rackable ) è un modo popolare per farlo. C'è un buon articolo a riguardo qui.

Altrettanto importanti sono gli obiettivi del marchio. Questi riflettono gli obiettivi generali dell'azienda, sia dal punto di vista del marchio che da quello commerciale. Un esempio di obiettivi del marchio per una pagina di destinazione di un servizio automobilistico potrebbe essere: a) stabilire il marchio come servizio premium e b) incoraggiare le ricerche di auto.

Il modo più semplice ed efficace per documentare la UX e gli obiettivi del marchio nelle varie fasi del percorso del cliente è condurre un workshop collaborativo sulla gerarchia visiva.

Utilizzando uno strumento di collaborazione su larga scala come Milanote, o anche Sketch, disponi gli schermi dei prototipi in ordine cronologico. Invita i professionisti chiave a un incontro online o fisico, assicurandoti che ci sia rappresentazione sia dal punto di vista dell'esperienza utente che del marchio.

Quindi, condividi lo schermo (o collegalo a un monitor) e inizia ad annotare!

Questo avvia il processo di identificazione della UX e degli obiettivi del marchio per ciascuna sezione dell'esperienza del cliente e mette in moto un flusso di lavoro strategico che può essere sfruttato durante il resto del processo di progettazione.

Classifica azioni e contenuto per una chiara gerarchia visiva

Ora che l'UX e gli obiettivi del marchio sono stati definiti, è il momento di definire la gerarchia visiva appropriata di ogni azione o contenuto e documentarla come riferimento durante il successivo lavoro di progettazione.

Prima di tutto, è necessaria una tassonomia. È meglio usare una scala da 1 a 3: 1 è il più importante, 3 il meno.

Utilizzando il formato wide-canvas profilato in precedenza, inizia ad annotare in modo collaborativo il layout del prototipo.

In questo esempio, c'è un obiettivo UX di " Voglio saperne di più sul servizio di questo marchio per determinare se si adatta al mio budget, alle mie esigenze e alle mie preferenze ". Gli obiettivi del marchio sono a) affermare il marchio come servizio premium e b) incoraggiare le ricerche di auto.

Alla luce di ciò, alla messaggistica del marchio Trova la tua auto ideale tra oltre 500 auto è stata assegnata una gerarchia di 1, così come il modulo di accompagnamento e CTA.

Nonostante la sua importanza per l'esperienza generale del cliente, al logo (e alla navigazione) effettivi è stato assegnato un 2, poiché non gioca un ruolo importante nel raggiungimento degli obiettivi di UX e del marchio.

Il contenuto di supporto è contrassegnato con un 3, che può sembrare controintuitivo. Tuttavia, aderisce al flusso narrativo che sta iniziando a prendere forma, con la messaggistica del marchio e la funzionalità "iniziare" come obiettivo principale, quindi il logo e la navigazione per stabilire l'identità premium e la struttura del servizio, quindi il contenuto di supporto per rassicurare, fornire contesto e ispirare il cliente.

Man mano che i designer si abituano a prendere in considerazione la gerarchia visiva, è facile iniziare ad apprezzare le possibilità narrative che rivela, aggiungendo profondità reale alle interfacce utente e alle storie che raccontano.

Costruisci una gerarchia visiva nel sistema di progettazione

Ora che gli obiettivi e le classifiche della gerarchia visiva sono stati impostati, è possibile creare il linguaggio visivo che li darà vita. Supponiamo che ci sia già un sistema di progettazione in atto (in caso contrario, questo dovrebbe essere fatto prima!) e che una serie di elementi dell'interfaccia utente sia già stata progettata.

Il primo punto di partenza è la composizione: il layout dei modelli necessari. Considera dove dovrebbero apparire gli elementi di alto livello (come descritto in precedenza, non è sempre il più atteso). Potrebbero essere necessarie più variazioni per soddisfare una serie di scenari. Per assicurarsi che nulla venga trascurato più avanti nel progetto, i designer dovrebbero prendersi il tempo necessario per crearli ora.

Più avanti nel processo di progettazione, è possibile includere una serie di modelli di esempio nel documento del sistema di progettazione, con simboli in tempo reale dei modelli dell'interfaccia utente (in modo che i designer che lavorano al progetto dispongano delle versioni più recenti).

Una volta stabilita un'idea generale della composizione, è possibile iniziare a creare varianti degli elementi dell'interfaccia utente.

Prendi l'umile intestazione della pagina. In questo esempio tratto da un recente progetto per una consulenza per le risorse umane, ci sono tre varianti nel sistema di progettazione per soddisfare i vari gradi della gerarchia visiva.

I progettisti possono ampliare questo aspetto con gli elementi costitutivi della loro interfaccia utente. Ad esempio, in un recente progetto per una popolare app di reclutamento, la profondità è stata utilizzata per differenziare i riquadri dei contenuti: maggiore è la profondità, maggiore è la gerarchia visiva.

La gerarchia visiva può essere progettata in quasi ogni elemento del linguaggio visivo di un marchio: composizione, tipografia, profondità, immagini, iconografia e tono di voce. Più profondo è il design, più coerente e focalizzata sarà l'esperienza del cliente.

Incartare

L'incorporazione di un flusso di lavoro gerarchico visivo nel processo di progettazione si traduce in esperienze utente notevolmente migliori. Lo fa fornendo ai designer un mezzo per assegnare un rango a diversi tipi di contenuto, ottenendo interfacce utente che non solo sembrano ordinate e intuitive, ma consentono anche di raggiungere gli obiettivi principali del marchio.

Una chiara gerarchia visiva non solo migliora la tua UX, ma imposta anche un flusso di lavoro sostenibile che conferisce al processo di progettazione un focus strategico, essenziale in un moderno ambiente di progettazione di prodotti.

Ulteriori letture sul blog di Toptal Design:

• Principi di progettazione: introduzione alla gerarchia
• Procedure consigliate per la progettazione dell'interfaccia utente ed errori comuni
• Esplorare i principi della Gestalt del design
• La guida completa all'architettura dell'informazione
• Potenzia la tua UX con questi principi di progettazione dell'interazione di successo