Quali elementi catturano l’attenzione degli utenti nel design di un sito
Cosa troverai in questo articolo. Ci sono alcuni elementi nel design di un sito web, come immagini e titoli, su cui l’attenzione dell’utente tende a cadere più di frequente e a soffermarsi per un tempo decisamente maggiore. Non sempre, tuttavia, questi elementi sono effettivamente ottimizzati in base al comportamento dell’utente, in modo cioè da guidarlo verso ciò che ha maggiore rilevanza in termini di conversioni. Lo squint test è un metodo più rapido e meno oneroso da mettere in pratica rispetto ai test di eye tracking (che permettono di ottenere una mappatura precisa dei punti di una pagina web che calamitano maggiormente l’attenzione degli utenti) attraverso il quale è possibile individuare, senza aver bisogno di particolari software, su quali aree del design del proprio sito sia possibile intervenire.
Indice
Vi siete mai chiesti quali sono gli elementi che attirano maggiormente l’attenzione degli utenti quando atterrano sul vostro sito? Esploriamo l’argomento in questo articolo, aiutandovi a capire quale ruolo svolgono elementi grafici e testuali nello user engagement.
I metodi per capire cosa attrae l’attenzione degli utenti
Gli studi di eye tracking sono il metodo più conosciuto quando si parla di comprendere in quali punti di una pagina web si ancorino gli occhi dell’utente. Potreste pensare che ognuno di noi ragioni, e dunque interagisca con le informazioni presenti su una pagina web, in un modo tutto suo; invece questi percorsi, nonché i trigger che accendono il nostro interesse, sono condivisi fra ampi gruppi di persone. L’eye tracking lo mostra analizzando l’interazione tipica degli utenti con una pagina – dove si soffermino più a lungo, quali zone rimangano ai margini della loro attenzione – e restituendo una vera e propria mappa di calore della geografia dell’interazione utente-sito.
Per quanto efficaci si siano dimostrati questi studi, si tratta di una metodologia piuttosto onerosa in termini sia di tempo sia di denaro. Una scorciatoia, però, può essere rappresentata dallo squint test, un esperimento veloce e informale, attuabile a costo zero, che prende il suo nome dall’azione di stringere gli occhi a fessura (in inglese to squint) quando qualcosa attrae la nostra attenzione. Questa metodologia prevede infatti di valutare molto rapidamente quali elementi della composizione visiva di un sito web risultino più prominenti osservandola con gli occhi a fessura: quando stringiamo gli occhi, gran parte del campo visivo si sfoca e l’attenzione si concentra sugli elementi più prominenti. Se provate a farlo adesso, sicuramente il vostro sguardo cadrà sulle righe in grassetto che avete letto poco fa.
Lo squint test e gli elementi di spicco nel design di un sito
Attraverso lo squint test possiamo individuare la gerarchia visiva e l’equilibrio generale di una pagina. Più nello specifico, l’ordine con cui vediamo le cose attraverso questa visuale sfocata ci permette di individuare i gruppi principali di informazioni e i loro rapporti di interdipendenza. Senza farvi venire le zampe di gallina intorno agli occhi, però, potete condurre lo stesso esperimento catturando uno screenshot della pagina che volete analizzare e sfocandola attraverso un software di image editing.
Lo squint test ci permette anche di individuare quali elementi perdano di prominenza attraverso la sfocatura quando invece dovrebbero rimanere fra i più evidenti in quanto importanti per la fruizione dei contenuti da parte dell’utente. Ciò accade molto spesso con i titoli, specialmente quelli inseriti all’interno di slideshow o immagini fisse: in certi casi, infatti, aumentando la sfocatura vediamo come l’elemento che risalta non sia più il testo, ma l’immagine sottostante, specialmente se caratterizzata da colori molto vividi.
Le immagini, in effetti, specialmente se di grandi dimensioni, sono spesso il primo elemento che viene notato, seguito da tutto ciò che ha un elevato livello di contrasto con lo sfondo sottostante, come ad esempio gli H1 stilizzati con un carattere molto grande o le caselle dei moduli di contatto.
Come migliorare la gerarchia visiva di un sito
Come si può evincere da quanto detto finora, i tre elementi fondanti della gerarchia visiva di un sito sono il colore (e il contrasto), la grandezza e i raggruppamenti. Un testo può essere reso più prominente utilizzando colori e contrasto maggiori: nel caso delle CTA inserite in trasparenza sopra a un’immagine, se ne può migliorare la prominenza visiva utilizzando, per lo sfondo del pulsante, un colore ben definito e con un livello di opacità del 100% seguendo sempre le best practice che riguardano le CTA. Anche per il testo degli heading è importante ricorrere a un contrasto adeguato rispetto allo sfondo, mentre per quanto riguarda i paragrafi un buon modo per calamitare l’attenzione degli utenti è quella di impiegare elenchi puntati che facilitino la scansione del contenuto.
Un altro consiglio è quello di utilizzare gli spazi bianchi in modo strategico per separare i diversi elementi e migliorare la leggibilità; i margini dovrebbero rimanere coerenti in tutte le sezioni della pagina e anche nelle altre pagine del sito in modo da garantire una presentazione pulita e organizzata. Infine, i gruppi di elementi inseriti dovrebbero rispecchiare la gerarchia delle informazioni più rilevanti per i vostri obiettivi di conversione: in particolare collocando in alto le informazioni o contenuti prioritari, dal momento che è essenziale catturare subito l’attenzione degli utenti, la cui scansione della pagina va inevitabilmente dall’alto verso il basso.
Ricordate infine che queste considerazioni devono sempre essere calate in una realtà di interazione multipiattaforma, per cui la leggibilità del vostro design dovrà essere adattata anche allo schermo dei dispositivi mobili.
Coming soon:
La prossima settimana, sul blog di Seed, parleremo di cos’è lo scroll fading e di come può aiutare la UX. Tornate a leggerci!
