UX/UI: i Principali Accorgimenti per Catturare l’Attenzione

L’attenzione degli utenti è oggigiorno una risorsa preziosissima e ottenerla è uno degli obiettivi più sfidanti dello UX/UI design e del marketing. La scarsità di questa risorsa è dovuta al fatto che, a differenza di ciò che succedeva in passato, oggi non si sceglie attivamente cosa vedere ma si è letteralmente bombardati da una miriade di informazioni che fluiscono attraverso ogni canale, compreso il digitale, di cui solo una minima parte risulta di nostro effettivo interesse.

Per districarsi nel caos delle informazioni, il cervello umano adotta una serie di scorciatoie cognitive per minimizzare lo sforzo di selezione e acquisizione di ciò che davvero è interessante. Anche le app, che in teoria godono di una condizione un pò diversa e privilegiata (l’utente ha già deciso di scaricare quella specifica app ed è naturalmente più predisposto a dedicarle un certa attenzione), devono fare i conti con questo problema per non perdere il controllo dell’attenzione dell’utente.

Un bravo UI/UX Designer dovrà perciò conoscere queste scorciatoie e adoperare alcuni trucchi del mestiere. Vediamo quali.

Gli occhi: lo specchio dell’anima!

Una buona interfaccia consente di guidare gli utenti in un viaggio emozionale che li porterà, in men che non si dica, a compiere un’azione desiderata senza farli perdere o confondere. Una serie di esperimenti sull’eye-tracking ha ad esempio dimostrato che il cervello umano “scannerizza” una schermata prima di leggerne il contenuto e che lo fa seguendo dei modelli, chiamati pattern. Questi modelli riflettono il movimento degli occhi degli utenti nei primi secondi di interazione con una schermata. Ma quali sono questi modelli? E cosa dicono? Secondo il più importante studio sull’argomento (condotto dalla Jacob Nielsen www.nngroup.com/articles/how-users-read-on-the-web/ ma anche www.nngroup.com/articles/f-shaped-pattern-reading-web-content/), l’utente che visualizza schermate con molto testo tenderà a scannerizzare il contenuto in verticale lungo il lato sinistro, alla ricerca di segni che catturino la sua attenzione. Quando un oggetto cattura il suo interesse, l’utente torna a leggere orizzontalmente, da qui il nome F-Pattern, perché gli occhi percorrono la pagina disegnando un’immaginaria F lungo la schermata.scannability

Viceversa, nel caso di pagine con pochi contenuti testuali il nostro cervello si comporta diversamente: prima traccia una linea visiva orizzontale nella parte superiore della pagina e appena raggiunto il margine destro scende in diagonale fino a posizionarsi all’estremità opposta ripetendo nuovamente una ricerca orizzontale in fondo alla pagina. In questo caso, gli occhi dell’utente disegnano una traiettoria a forma di Z, da cui il modello a “Z” (Z-Pattern). Questo movimento visuale gli permette di farsi un’idea rapida dei contenuti della pagina e del loro peso con il minimo sforzo possibile.

Accorgimenti di design

Impostare una gerarchia visiva

La gerarchia visiva è il modo di gestire e organizzare visualmente il contenuto della pagina nel modo più naturale possibile per la percezione umana. L’obiettivo principale è quello di consentire agli utenti di comprendere immediatamente il livello di importanza di ogni singolo contenuto.
Una solida gerarchia visiva è la base di un prodotto digitale di successo. Aiuta ad organizzare gli elementi dell’interfaccia utente in modo efficace così che il contenuto sia facile da comprendere e piacevole da vedere. La presentazione di elementi visivi ha un grande impatto sull’esperienza utente: se i componenti sono organizzati in modo oculato, gli utenti navigano e interagiscono con un prodotto senza sforzi e godono di questo processo.

gerarchia visiva

Una chiara navigazione principale

Tutti i modelli di scansione degli occhi menzionati sopra hanno una caratteristica comune:  partono entrambi nella parte superiore orizzontale della pagina web o di una schermata app. Questo è il motivo fondamentale per cui il design dell’intestazione del sito Web è considerato un punto essenziale non solo dai progettisti UI / UX, ma anche dai copywriter e marketer.

Ma attenzione, proprio per questo motivo l’intestazione di un schermata non dovrebbe mai essere sovraccarica di informazioni: troppe informazioni rendono più faticosa la messa a fuoco. Il tentativo di mettere tutto nella parte superiore della pagina può trasformare il layout in un vero e proprio caos.

Non dimenticare lo spazio vuoto

Lo spazio vuoto è l’area della schermata che è lasciata vuota e priva di contenuti, non solo attorno agli oggetti ma anche tra e all’interno di essi. Si tratta di uno spazio che serve all’occhio per “respirare” e che definisce i limiti degli oggetti, crea i legami necessari tra loro secondo i principi della Gestalt e costruisce architetture visive efficaci. Nella progettazione delle interfacce utente lo spazio negativo (cioè “vuoto”) è un fattore fondamentale per un’alta navigabilità dell’interfaccia: senza una quantità sufficiente di aria, gli elementi del layout non vengono visualizzati correttamente.

spazio vuoto

Verifica che la CTA sia visualizzata correttamente

La stragrande maggioranza schermate presentano uno o più inviti all’azione ( chiamate CTA: call to action) che gli utenti devono compiere: in una schermata di Email sarà il punto da tappare per scrivere una nuova email, ad esempio; su Facebook, sarà l’area in cui scrivere un nuovo post e così via. Gli elementi che contengono l’invito all’azione – in genere sono pulsanti o moduli di immissione dati – dovrebbero essere visualizzati istantaneamente e senza alcuno sforzo, per consentire agli utenti di comprendere subito quali siano le azioni che possono eseguire su una determinata schermata.

Numeri, volti, forme…non parole!

Fra le tante tecniche per attirare l’attenzione gli UX/UI designer ne preferiscono alcune perché più efficaci: una di queste è l’inserimento di numeri, volti e forme che spezzino l’omogeneità della pagina/schermata. Tali elementi aiutano l’utente ad interpretare lo spazio quando esso è privo di segni distintivi, quando cioè c’è molto testo fitto o in genere quando si verifica una situazione di omogeneità visiva tale da spingere il cervello ad adottare una propria strategia di analisi dello spazio che sia efficace ma anche poco impegnativa.

Ricorda sempre, infatti, che gli utenti non vogliono pensare troppo quando navigano un sito o una app, ne abbiamo parlato qui www.airbagstudio.it/app-user-experience-i-5-errori

Gli studi di tracciamento oculare hanno dimostrato che nel processo di scansione delle pagine Web, i numeri, le forme incongruenti e i volti spesso catturano l’occhio dell’utente e attirano la fissazione del suo sguardo.  Per questo sono un utile mezzo per gestire l’attenzione dell’utente e aiutarla ad arrivare alla fine del contenuto che noi desideriamo che che venga fruito.

Conclusioni

In conclusione, creare una buona interfaccia utente significa anche saper guidare con mano invisibile gli utenti posizionando gli elementi che si vuol far vedere secondo la logica giusta e utilizzando le adeguate tecniche.

Il nostro lavoro di UX/UI designer non è affatto scontato: esistono centinaia di piccole e grandi nozioni che dobbiamo conoscere, non solo operative ma anche legate alle neuroscienze, cioè al funzionamento del cervello umano di fronte ad alcune situazioni.