UX e psicologia: perché serve una gerarchia visiva

Iniziamo con un giochino. Leggi questa lista di parole una sola volta e cerca di ricordarla:

MELA

BANANA

ALBICOCCA

AUTOMOBILE

ANANAS

PESCA

Quali parole hai ricordato? Forse non le hai ricordate tutte, ma sicuramente la parola “automobile”, l’unica a non essere un frutto, non ti è sfuggita.

Lo stesso accade agli utenti quando osservano un’interfaccia: a colpirli maggiormente e restare impresso è ciò che si distingue dal resto, che riesce ad attrarre la loro attenzione.

Come funziona l’attenzione

Il nostro cervello si trova costantemente a elaborare enormi quantità di informazioni. Anche mentre siamo in ufficio, apparentemente concentrati, davanti allo schermo, siamo bombardati di stimoli: la notifica di un’email in arrivo, i colleghi che si allineano sui task da chiudere, l’altro collega che si alza per andare in bagno al margine del nostro campo visivo, e così via.

L’unico modo per riuscire a districarci in questo marasma di informazioni è applicando un filtro, che decide a cosa dare importanza e cosa invece può restare in background. E il cervello ha appreso a farlo nel modo più efficiente, stabilendo una priorità in maniera automatica.

Lo stesso avviene quando guardiamo una schermata di un prodotto digitale. Per questo è importante capire come funzioniamo e come indirizzare i nostri utenti a prestare attenzione a ciò che vorremmo mettere in evidenza.

Un’automobile in mezzo alla frutta: l’effetto Von Restorff

Ma come scegliamo quali elementi passano il filtro della nostra attenzione e quali no? Se lo è chiesto anche una ricercatrice tedesca nel 1933, Hedwig von Restorff. E ha perciò condotto uno studio che ha tratto un’interessante conclusione:

Nell’esperimento originale di Von Restorff l’elemento particolare era un numero in una lista di sillabe, un colore diverso in una lista di elementi di colore uguale, e così via. L’effetto si presentava:

• Solo quando la lista era altrimenti omogenea.
• Indipendentemente dalla posizione dell’elemento nella sequenza.

Questo effetto, che prende il nome dalla ricercatrice, ma è talvolta anche chiamato effetto di isolamento, si applica anche ai tuoi prodotti digitali: l’utente percepisce dei pattern visivi e ciò che rompe il pattern cattura la sua attenzione.

L’effetto Von Restorff nella UX

Una volta compreso, l’effetto Von Restorff può essere trovato ovunque, anche nella UX. È la ragione per cui gli elementi nella pagina non devono comparire tutti sullo stesso piano; si decide cosa l’utente vorrà probabilmente vedere per primo e lo si mette in evidenza.

Troppe CTA e nessuna veramente importante

Trovarsi su una schermata con molte CTA, tutte uguali, dello stesso colore, forma e stile, crea confusione nell’utente. L’utente vuole essere guidato nell’esplorazione della pagina:

• Cosa è più importante?
• Qual è l’azione che desideriamo che compia?

Ad esempio, un modal con due pulsanti primari, dello stesso colore e con lo stesso peso visivo, in realtà equivale a una pagina con zero pulsanti.

Allo stesso modo, quando proponiamo all’utente un pricing, se desideriamo che scelga il piano premium o l’abbonamento annuale anziché quello mensile, dovremmo evidenziarlo, ad esempio con un bordo colorato, o una CTA a colore pieno anziché con il solo bordo colorato.

Differenziare gli elementi riduce il carico decisionale dell’utente, che capisce così in maniera immediata dove spostare la propria attenzione.

Avvisi ed errori: distinguersi non è opzionale

Anche per quanto riguarda alert di sicurezza ed errori, se questi utilizzassero lo stesso linguaggio visivo del resto della piattaforma rischierebbero di passare inosservati. Per questo, spesso vengono differenziati con colori dedicati (a proposito, hai già letto cosa significano i colori in una piattaforma?) e icone specifiche.

Fai attenzione però: il colore non può essere l’unico modo di distinguere un messaggio importante dal suo contorno. Secondo le linee guida per l’accessibilità, e nello specifico il criterio 1.4.1, per accomodare anche gli utenti con problemi a distinguere i colori, ad esempio daltonici o con scarsa acuità visiva, è opportuno prevedere modi alternativi di trasmettere il messaggio:

• Contenuto testuale
• Bordi
• Icone dal significato inequivocabile

Come progettare secondo l’effetto Von Restorff

Come usare concretamente l’effetto Von Restorff? Di fronte a ogni schermata bisogna porsi una domanda semplice: cosa deve vedere l’utente per primo? 

L’attenzione dell’utente non si conquista evidenziando ogni elemento, ma scegliendo con parsimonia cosa valga la pena mettere in risalto. Infatti, se si moltiplicano colori, badge e animazioni, il risultato non è di moltiplicare l’attenzione, ma di annullare l’effetto.

Una curiosità a riguardo: nel 1998, Benway e Lane, due studiosi di web usability, riscontrarono un effetto chiamato banner blindness. Gli utenti, posti di fronte a dei banner, tendevano a ignorarli completamente, nonostante il colore sgargiante, perché li associavano a inserti pubblicitari. Anche qui il cervello interviene con efficienza a tagliare le risorse a ciò che riconosce istintivamente come poco rilevante.

Perciò, perché l’effetto venga preservato, si procede con:

• Una sola priorità per ciascuna visualizzazione
• Contrasto tra gli elementi
• Riduzione del rumore visivo

Se guardando la tua ultima schermata non sai dire qual è l’azione principale, il problema non è la grafica, ma la priorità nel tuo prodotto. Questa situazione può facilmente essere risolta da un occhio esterno, in grado di progettare con te la tua applicazione. Scrivici se vuoi un aiuto a strutturare la UX del tuo prodotto digitale.