Web Design: linee guida per siti web che funzionano (dal neuromarketing)

Come creare siti web davvero efficaci? Ecco alcune soluzioni pratiche con Stefano Civiero per ottimizzare il web design e la user experience dei nostri siti web.
Web design
01 Giugno 2021
Come creare siti web davvero efficaci? Ci aiuta il neuromarketing. In questa intervista Stefano Civiero ci ha dato alcune soluzioni pratiche per ottimizzare il web design e la user experience dei nostri siti web.


Indice:
Come testare l'usabilità di un sito web
> Strumenti per test di usabilità
> Perché questi test sono utili
Web design: esempio di un sito web "migliorato"
Web design: linee guida dal neuromarketing
Web design, ma non solo

✅ Se preferisci guardare la versione video, eccola:

Web Design: linee guida per siti web che funzionano (dal neuromarketing)

Come creare siti web davvero efficaci? Stefano Civiero ci ha dato alcune soluzioni pratiche per ottimizzare il web design e la user experience dei nostri siti web.



Marta: Ciao Stefano benvenuto in casa Smshosting! L'argomento di oggi è il web design, cercheremo di capire con te in che modo possiamo realizzare dei siti web che convertono, con spunti ed esempi pratici.
Questo è sicuramente interessante anche per ottimizzare il processo di lead generation🧲 e la creazione di landing page - per avvicinarci al nostro mondo.
Lascio che tu ci racconti chi sei e quello di cui ti occupi Stefano, grazie!

Stefano: Sì certo Marta, quello che vedremo oggi è utile anche nella lead generation, assolutamente! Per spiegarvi il mio lavoro vi dico che faccio cose stranissime con strumenti altrettanto strani (che poi vi spiegherò). Nel 2017 ho fondato Neurowebdesign, una startup innovativa che ha come focus l'applicazione del neuromarketing al web design in particolare, ma anche in altri ambiti (come per esempio il packaging)
. In azienda abbiamo proprio un laboratorio interno con particolare strumenti che ci aiutano a misurare le dinamiche legate al web design e alla user experience.

Come testare l'usabilità di un sito web

Marta: Inizierei con una domanda: come possiamo testare l'usabilità di un sito web?

Stefano: Il nostro punto di partenza è la misurazione attraverso degli strumenti specifici (di cui ti parlavo prima), che in gergo vengono definiti strumenti biometrici nel senso che vanno a raccogliere i dati direttamente dal comportamento dell'utente quando si trova di fronte a specifici stimoli di marketing e comunicazione.
Oggi parliamo di web design quindi in questo caso lo stimolo sarà la navigazione del sito web.

Strumenti per test di usabilità

Gli strumenti che utilizziamo sono diversi, lo strumento principale di cui non si potrebbe fare a meno è l’eye tracker o la tecnologia eye tracking che va ad analizzare a registrare il comportamento visivo di una persona mentre naviga un sito web. web_design_eye_tracking

Il puntino verde che vedete è il punto di fissazione dell’utente (dove guarda l'utente): l'occhio si muove in maniera molto veloce e ogni tanto vedete anche una linea rossa che si sposta da un pallino all'altro, quella viene definita saccade, tra una saccade e l’altra noi non vediamo assolutamente niente, si tratta di frazioni di millesimi di secondo.
Nel momento in cui invece il pallino si ferma vuol dire che compiamo una fissazione e che ci concentriamo su un determinato elemento del sito.
Grazie all’eye tracking possiamo dirvi quanto l'occhio si è soffermato su quell’elemento, quante fissazioni sono state compiute su quel determinato elemento di design e quindi anche se questo elemento è stato elaborato a livello cognitivo oppure no (perché può essere una cosa venga vista, ma non venga percepita - sono due cose completamente diverse).

Un altro strumento molto particolare è l’elettroencefalogramma: web_design_test_di_usabilita In questo esempio vediamo una persona che sta facendo un test di usabilità su una piattaforma che era oggetto di analisi. Sullo schermo del PC vedete l’attività elettrica che viene assorbita dall’elettroencefalogramma e questo non fa altro che assorbire la nostra attività elettrica.
Incrociato ai dati dell'eye tracking ci serve per capire se quel determinato elemento ha coinvolto positivamente oppure negativamente l'utente.

Un altro strumento molto particolare di cui però non riesco farvi vedere niente perché di fatto non ha un output visivo è il Galvanic Skin Response, che misura l'attività elettrotermica della pelle. Più ci emozioniamo, sia in modo positivo che negativo, più sudiamo: sto parlando di micro emozionalità e micro sudorazione perché ovviamente sapete anche voi che quando navighiamo un sito web non è che proviamo forti emozioni, sto parlando di micro emozionalità.
Nel momento in cui studiamo la nostra pelle riesce a condurre in maniera più facile l'elettricità e questo strumento riesce a registrarla, riesce a raccoglierla e quindi capiamo anche qual è il livello di intensità emotiva provata dall'utente in un determinato istante. Per farvela semplice, se l'utente è coinvolto positivamente il GSP ci aiuta a rispondere alla domanda: quanto positivamente è stato coinvolto?

Immaginatevi ad esempio di applicare questa metodologia ad un AB test online: inseriamo nel sito una foto A e una foto B, l'utente può avere un coinvolgimento positivo nel vedere entrambe le foto, tuttavia grazie al GSP si può capire quanto è stato maggiore il coinvolgimento positivo della foto B rispetto alla foto A.

Perché questi test sono utili

Marta: Rispetto a strumenti come Hotjar - che monitorano come l'utente si comporta nel sito - ritieni che gli strumenti biometrici siano più efficaci?

Stefano: Sicuramente vi consiglio di utilizzare strumenti come Hotjar o anche semplicemente Google Analitycs, che vi permettono di tracciare il comportamento degli utenti nel sito - questo è un dato che dobbiamo avere sicuramente. Sono però strumenti "clic-centrici", nel senso che riescono a raccogliere i dati una volta che è stato effettuato un clic oppure un tap da smartphone.

Vi pongo però una domanda: siete sicuri che il vostro occhio segua sempre la freccetta del mouse? Vi posso assicurare che c’è solo una minima correlazione sia verticale che orizzontale tra movimento del mouse e movimento oculare. Quindi quello che vi possono dare questi strumenti è solo una piccola percentuale di quello che succede all'interno del vostro sito web.
Una ricerca scientifica pubblicata da Google stesso nel 2006, ha dimostrato che il movimento del mouse e il movimento dell'occhio all'interno di una SERP con o senza la scheda Google My Business erano completamente diversi. web_design_ricerca_google L'immagine di sinistra è la SERP di Google con la scheda My Business, ed è per questo che vediamo dei movimenti oculari e dei clic del mouse sulla destra.
La seconda immagine invece è una SERP di Google senza la scheda My Business: le linee verdi sono i movimenti oculari e le fissazioni che sono state fatte dai partecipanti al test, mentre i pallini viola sono i luoghi dello schermo dove si sono concentrati i movimenti del mouse e i click / tap dell'utente e notate come sia la differenza visibile sostanzialmente ad occhio umano.

Ovviamente non vi sto dicendo che Google Analytics e gli altri software non siano utili, anzi sono utilissimi e sono anche complementari al metodo di ricerca che vi sto ponendo adesso. Sono due cose diverse nel senso che il neuromarketing e i test di usabilità vengono anche definiti ricerche di tipo qualitativo mentre Google Analytics o Hotjar fanno parte di un altro ramo della ricerca che viene definita anche ricerca quantitativa - perché si basano su big data, mentre il neuromarketing utilizza un campione molto ristretto di partecipanti (sono sufficienti anche sette utenti per riuscire a scovare fino all’85% dell’usabilità di un sito web).

Web design: esempio di un sito web "migliorato"

Marta: Hai qualche esempio di come viene migliorato un sito web dopo aver eseguito un test di usabilità? Così ci possiamo rendere conto "visivamente" del cambiamento 😊

Stefano: Sì certo. Vi faccio l'esempio di un sito web di un hotel, con uno stile molto classico: logo in alto a sinistra, menù esploso orizzontalmente sulla destra, foto a schermo piena e Unique Selling Proposition al centro. web_design_esempio

I pallini che vedete sullo schermo sono una sintesi del comportamento visivo dell'utente ovvero dove si è posizionato maggiormente l'occhio dell'utente mentre scrutava la first viewport di questa piattaforma.
Se i pallini sono numerati progressivamente da 1 a 30:

  • le fissazioni rosse sono relative ad un'attenzione acuta cioè sono le prime dieci fissazioni che si fanno in un sito web. Sono quelle fissazioni che fanno giudicare come utile o non utile un sito web ad un utente
  • poi abbiamo una fase di attenzione moderata dove il colore delle fissazioni è giallo e vanno dalla dall'undicesima alla ventesima
  • ed infine siamo in una fase di attenzione lieve (colore verde) con fissazioni dalla ventunesima alla trentesima.

Se notate c'è una cosa che stona dall'analisi delle fissazioni: la call to action relativa alla prenotazione - che è posizionata in alto a destra - si trova alle diciannovesima fissazione, quindi in uno stato di attenzione al limite tra la moderata e la lieve (e non acuta come dovrebbe).

Inoltre, la foto che è stata utilizzata come sfondo ha un punto luce molto particolare legato al riflesso del ghiaino e di conseguenza la prima fissazione solitamente veniva compiuta lì. Insomma, diciamo che c'erano diversi problemi di usabilità.
Dopo aver effettuato degli studi di eye tracking, abbiamo proposto diverse soluzioni, tra cui sostituire la foto di sfondo con una che evocasse maggiormente il territorio di Conegliano (dove si trovata l'hotel), ma che avesse allo stesso tempo dei punti luce vicini alla UVP. web_design_soluzione Come vedete è stata modificata anche la struttura grafica e architettonica del booking form, posizionandolo in alto a sinistra, questo perché tutti noi siamo abituati a leggere da sinistra a destra partendo dall'angolo in alto a sinistra, quindi solitamente le prime fissazioni della fase acuta vengono compiute sulla diagonale alta a sinistra.
Altro cambiamento: l'utente scrollava poco e quindi è stato inserito uno stimolo dinamico allo scroll (delle freccette in movimento verso il basso)

Ecco l'output eye tracking, vi faccio vedere quanto ci mette l’occhio ad arrivare al booking form: web_design_linee_guida Vedete nei pallini gialli che ci sono due numerini: uno del numero progressivo di fissazioni e come vedete l'utente individua il booking form nella fissazione numero 10, l'altro numerino ci dice per quanto tempo l'utente si è soffermato su quell'elemento.
L'utente si è soffermato 0,6 e qualcosa decimi di secondo: questa è una buona fissazione nel senso che tutto quello che è sopra di 0,3 decimi di secondo è un elemento che non è stato solo visto, ma anche elaborato cognitivamente (letto). Ciò significa che è più probabile anche che venga utilizzato.

Se ci fossimo basati solo su strumenti di analisi quantitativa non avremmo capito perché il booking form non veniva utilizzato, se il motivo era che non veniva elaborato o meno. Tenete conto che tutte queste modifiche sono state realizzate in fase pre-pubblicazione del sito, se si fanno delle modifiche a posteriori quando il sito web è già pubblicato, è ovvio che si possono perdere delle possibili conversioni, perché vi accorgete che ci sono determinate lacune di user experience solamente in un secondo momento.
Con una metodologia simile si riesce invece ad andare online con un sito performante fin da subito.

Web design: linee guida dal neuromarketing

Marta: Stefano hai qualche linea guida generale da darci per realizzare dei siti web che convertono?

Stefano: La prima cosa che mi sento di consigliare è restare il più semplici possibili, quantomeno all'inizio. Capisco l'entusiasmo e la voglia di realizzare un sito web che si distingua dai propri competitor, però dobbiamo tenere conto che l'utente è abituato a determinati standard nel web.
Ci sono alcuni accorgimenti che mi sentirei di dirvi di tenerli "fissi" come:

  • il logo in alto a sinistra, perché è fisiologico controllare di essere atterrati nel sito web giusto e come vi dicevo prima, l'occhio cade subito in alto a sinistra
  • il menu in alto a destra, se utilizzate "l'hamburger menù" (quello aggregato, non esploso con le tre lineette) teniamolo in alto a destra, perché se ci pensate la maggior parte degli utenti usa lo smartphone con la mano destra e quindi arriva molto più facilmente con il pollice nella parte alta di destra (e non di sinistra)
  • riprendete i colori utilizzati dai big player: per esempio nel turismo consiglio di riprendere il giallo di Booking.com, perché spesso l'utente medio non è abituato a utilizzare il mio sito web, ma quello dei big player. In linea generale date sempre un occhio a quello che fanno i big player del vostro settore, perché loro fanno tantissimi test di usabilità anche quotidianamente
  • utilizzate nelle vostre immagini l'elemento umano, perché il volto di una persona è uno dei catalizzatori di attenzione più importanti che ci siano, siamo fisiologicamente attirati dai volti e soprattutto ci sono delle espressioni che sono riconosciute a livello universale. Inserire il volto di una persona sorridente all'interno del sito web, che allo stesso tempo con l'occhio o con il dito indichi o guardi la call to action principale del vostro sito, ci permette di attirare attira l'attenzione sul volto e canalizzarla poi verso quell’elemento di design che lo spinge alla conversione.

Marta: Qualche settimana fa in una chiacchierata con Vincenzo Mastrobattista è emerso che nei social il volto umano e quindi l'idea di fiducia aiuta molto ad aumentare l'engagement di un post. Lo stesso concetto vale quindi anche per i siti web.

Stefano: Assolutamente sì anche perché l'elemento umano riduce quel distacco che si crea nel web tra persona e sito web. Sempre nell'esempio dell'hotel, se si inserisce la foto dello staff che poi sarà davvero il personale che si trova nella struttura, ecco questo è un modo per aprire la porta del tuo hotel senza che il cliente sia lì fisicamente.

Marta: E secondo te il fatto di utilizzare per comodità delle immagini di stock ha senso?

Stefano: Dipende ovviamente da che base a partite, dal settore in cui siete, in generale lo sconsiglio perché l'utente capisce subito se state utilizzando un'immagine di stock oppure se usate uno scatto reale. Io sconsiglierei l'immagine di stock, ma per carità, ci sono alcune immagini che possono essere usate, soprattutto se siete agli arbori della creazione della vostra piattaforma.

Web design, ma non solo

Marta: Vorrei capire se le tecniche di neuromarketing di cui ci hai parlato sono applicabili anche ad altri elementi della comunicazione, oltre al web design.

Stefano: Assolutamente sì. Il neuromarketing ha infinite possibilità di applicazione, noi abbiamo avuto modo di lavorare avendo come oggetto di analisi per esempio packaging, spot televisivi, identità visiva. La cosa interessante è verificare se i valori che stiamo effettivamente comunicando sono anche quei valori che si crede vengano percepiti dal proprio target.
Per fare questo c'è una metodologia di indagine di cui non vi ho parlato, che si chiama Implicit Association Test ed è molto interessante perché ci permette di vedere se si sta prendendo la strada giusta a livello comunicativo oppure se si sta sbagliando qualcosa.

Marta: Quindi anche per la creazione delle nostre newsletter per esempio - come quelle che si possono realizzare con Smshosting - potremmo utilizzare le tecniche di neuromarketing.

Stefano: Certo, dal copy fino ovviamente all'immagine che viene inserita e al layout grafico architettonico con cui viene costruita la newsletter senza dubbio. Anche l'utilizzo nelle newsletter di foto reali e di indicatori di posizione potrebbe essere molto interessante.

Grazie mille Stefano per il tuo prezioso intervento e per il tuo tempo 😊
> Contatta Stefano


✅ Stai cercando una piattaforma per fare marketing e inviare comunicazioni? Smshosting è la piattaforma italiana di SMS e email marketing, con strumenti integrati per gestire al meglio il rapporto con i clienti. 👉Ecco come funziona

Prova gratis per 30 giorni
Senza carta, senza rinnovo.

Compilando il modulo acconsenti al trattamento dei dati personali secondo l'informativa Privacy. Leggi informativa.

Ti piacciono i nostri contenuti?

Iscriviti al nostro canale Youtube ✅ Ogni settimana nuovi contenuti sul digital marketing