Design persuasivo
Indice

Design persuasivo: layout e grafiche che convertono

Cosa troverai in questo articolo. Il design persuasivo è una disciplina che unisce principi psicologici e tecniche di design per creare layout web capaci di guidare gli utenti verso specifiche azioni di conversione. Esso si fonda sull’idea, corroborata da ampi studi scientifici, secondo la quale comportamenti umani innati influenzerebbero la percezione visiva e le interazioni che abbiamo con le pagine web; in base a questo, fornisce strategie pratiche per ottimizzare la navigazione, la gerarchia delle informazioni e l’uso del colore. Una progettazione web che voglia seguire tale approccio dovrà cercare di ridurre il sovraccarico cognitivo degli utenti riducendo adeguatamente le scelte di interazione a loro disposizione, usare in modo strategico lo spazio negativo per migliorare l’equilibrio visivo e guidare l’attenzione dell’utente e, infine, posizionare attentamente elementi come voci di menù e pulsanti in base alle priorità delle azioni che l’utente deve effettuare sul sito. L’A/B testing e tecniche come l’analisi delle heatmap permetteranno di validare e ottimizzare continuamente le scelte di design, garantendo che esse siano efficaci nel raggiungere gli obiettivi di conversione.

I contenuti testuali non sono l’unico elemento all’interno della progettazione di un sito web in cui intervengano fattori psicologici. Il potere persuasivo delle pagine web si lega indissolubilmente anche al modo in cui è pensato il suo layout e la sua grafica: insieme vediamo in questo articolo quali sono i criteri e gli elementi a cui prestare attenzione per progettare siti in grado di conquistare anche l’occhio dell’utente e condurlo più facilmente alla conversione.

Quali fattori psicologici intervengono nella persuasività di un design web?

Un assunto fondamentale da cui partire quando parliamo di design persuasivo è quello per cui le azioni intraprese in questo senso debbano essere corroborate da dati sia quantitativi sia qualitativi: solo così è infatti possibile aggirare la nostra prospettiva, che è per forza di cose influenzata dai nostri personali pregiudizi, e individuare ciò che funziona e cosa invece disorienta i nostri utenti.

La prima cosa di cui essere ben informati quando si lavora in questa direzione è dunque capire quali comportamenti umani di base vadano presi in considerazione per ideare design intuitivi. Ecco i più importanti:

  1. Facciamo fatica a scegliere tra molte opzioni. Questo ci blocca talvolta completamente nella scelta: se c’è di mezzo la possibilità di una conversione, è chiaro che troppe scelte rappresentano un grosso problema;
  2. Veniamo attirati dalla grandezza dei pulsanti e dalla vicinanza che hanno rispetto al nostro punto di partenza: da ricordare nel posizionamento delle CTA e dei tasti su cui vogliamo guidare gli utenti;
  3. Abbiamo bisogno di dare ordine al caos, ovvero tendiamo a guardare a un’immagine nel suo insieme prima di focalizzarci sui singoli elementi che la compongono: come vedremo nel prossimo paragrafo, questo principio ha molte implicazioni per quanto riguarda il modo in cui accompagniamo gli utenti nella navigazione di un sito web;
  4. Preferiamo le soluzioni semplici a quelle complicate: se siete indecisi fra due design con la stessa funzione, il più semplice è quasi sempre la scelta migliore;
  5. Prestiamo più attenzione ai pochi elementi che si staccano dal resto, piuttosto che a un gruppo più nutrito di elementi fra loro in armonia;
  6. Interrompere un’attività senza averla completata ci provoca tensione, rendendola più memorabile e spingendoci a volerla terminare;
  7. Tendiamo a ricordare meglio il primo e l’ultimo elemento di una lunga lista, mentre facciamo più fatica con tutto ciò che viene nel mezzo.

Vediamo adesso alcune indicazioni, sviluppate sulla base dei meccanismi psicologici appena descritti, da seguire per creare pagine altamente accattivanti per gli utenti.

Persuasive Businesswoman in Meeting

Suggerimenti per un design web persuasivo

Trovi di seguito i nostri suggerimenti per un design web persuasivo, suddivisi in base all’effetto principale che mirano a produrre.

Velocizzare le interazioni

Da quanto detto finora ci sono molti suggerimenti che possiamo ricavare per rendere i nostri design più persuasivi. Il primo è quello di usare i filtri per ridurre la quantità di opzioni disponibili, frammentando una grossa decisione iniziale in tante piccole decisioni consecutive che non sovraccarichino cognitivamente l’utente.

Questo è un elemento di cui troviamo ampio riscontro nella nostra esperienza quotidiana di interazione con i siti web e riguarda sia la quantità di voci presenti nei menù sia il modo in cui, ad esempio, esploriamo il catalogo di uno shop online, a prescindere dal fatto che ci arriviamo con in mente un prodotto specifico da acquistare o che ci troviamo più indietro nel percorso di conversione, in una fase di window shopping virtuale.

In generale, tutti i generi di scorciatoia sono accattivanti per gli utenti: un ulteriore esempio che possiamo fare relativamente agli e-commerce è quello dei tasti veloci per l’aggiunta al carrello o alla lista dei desideri, che permettono all’utente di compiere queste azioni direttamente dalla griglia riepilogativa dei prodotti, senza aprire la scheda del singolo prodotto, scorrere la pagina e raggiungere il pulsante necessario, con tutte le distrazioni e le lungaggini che ciò comporta.

Questo stratagemma è molto utile quando si abbia a che fare con utenti di ritorno che già conoscono i nostri prodotti, ma anche nel caso di shop dove il carrello medio, di importo variabile, sia composto da tanti oggetti diversi di importo piuttosto basso: non vi risulterà alieno immaginare che un utente possa non avvertire l’impellente necessità di controllare ogni singolo dettaglio di un oggetto da 5€ prima di acquistarlo a paragone di uno da 50€ (acquirenti abituali di Temu, we feel you). Anche le app di delivery ruotano intorno a questo elemento interattivo fondamentale.

Ulteriore elemento in grado di velocizzare le interazioni sulla base del modo in cui opera la nostra mente è rappresentato, specialmente nell’interazione fra l’utente e la versione mobile del sito o un’app, dalla posizione dei pulsanti: poiché ricordiamo meglio il primo e l’ultimo elemento di una lista, è consigliabile posizionare i link più utilizzati dai nostri utenti, anche in forma di icona, agli estremi esterni del menù (vedi il pulsante Home e il pulsante Profilo su Instagram  o il pulsante Home e quello delle notifiche su Facebook, di gran lunga i più cliccati sulle due piattaforme).

A tal proposito, è di fondamentale importanza analizzare accuratamente qual è la sequenza-tipo di interazioni degli utenti con il sito web in modo da ridurre al minimo la perdita di informazioni importanti per loro durante la navigazione.

Suddividere le informazioni in modo chiaro

Sarà poi importante dare prominenza ai pulsanti delle azioni che per noi sono più importanti rendendoli di una grandezza tale da calamitare naturalmente l’attenzione dell’utente, spostandolo lì dal suo punto di partenza, che dovrà essere relativamente vicino. Su mobile, tutto questo deve essere calibrato attraverso accurati test di usabilità incentrati sull’effettiva conformazione anatomica di una mano umana, progettando accuratamente le distanze fra i vari elementi.

Questo fattore va considerato in stretta connessione con un altro elemento della nostra interazione con i siti web e cioè il fatto che tendiamo a raggruppare elementi graficamente e cromaticamente simili in un unico insieme, non percependoli come separati.

Ciò significa che per attirare l’attenzione degli utenti su ciascun blocco di informazioni ed evitare che continuino a scorrere la pagina senza soffermarsi sulle diverse sezioni pensandole come un mero approfondimento delle informazioni fornite in apertura dobbiamo segnalare questa separazione utilizzando colori a contrasto ben distinti fra loro, elementi di chiusura come caselle e separatori oltre a margini (spazio negativo) che rendano chiaro il passaggio fra blocchi diversi. La nostra tendenza naturale è infatti quella di scansionare, piuttosto che leggere dettagliatamente ciò che abbiamo di fronte.

Allo stesso modo, possiamo prevedere effetti grafici di scorrimento particolari a seconda degli elementi su cui vogliamo attirare l’attenzione, ad esempio mantenendo bloccata la spalla destra dello schermo in cui si trova il modulo di contatto mentre la schermata con le informazioni può essere scorsa sulla parte sinistra e centrale dello schermo (corrispondenti a circa ¾ del viewport): se il nostro scopo è spingere gli utenti a compilare il modulo, questo è uno stratagemma estremamente efficace. Un altro effetto molto impiegato a questo scopo è quello dello scroll fading, di cui abbiamo parlato in un precedente articolo.

Animazioni, grandezza, colori e contrasti sono ovviamente fondamentali anche per la gerarchia delle informazioni testuali, la cui lettura segue un ordine ben preciso che ha a che fare con meccanismi cognitivi innati insieme a peculiarità culturalmente definite (vedi ad esempio la direzione di lettura diversa di un europeo o di un americano rispetto a un giapponese o un arabo).

Guidare il percorso dell’utente

Poiché, come abbiamo detto, gli elementi differenti attirano subito la nostra attenzione, potremo guidare l’attenzione degli utenti sui binari che preferiamo utilizzando elementi visuali che mettano in risalto una sezione piuttosto che un’altra.

Questo è un principio largamente applicato (ed efficacissimo!) sui siti che vendono servizi in abbonamento o bundle di prodotti di livello crescente: le diverse opzioni, generalmente poste in linea orizzontale in modo da permettere un confronto immediato fra le rispettive caratteristiche, hanno di solito una certa uniformità grafica salvo per un’unica opzione proposta come, a turno, “la più amata dai nostri clienti” o quella che offre “il miglior rapporto qualità-prezzo”, corrispondente, per il venditore, al pacchetto che per svariate ragioni ha interesse a spingere; quest’unica opzione presenta una veste grafica differente, prominente, in grado dunque di attirare di più lo sguardo dell’utente e inevitabilmente influenzarne le decisioni.

Un’altra strategia da applicare quando si tratta di guidare il percorso dell’utente è legata all’ansia creata in noi dalla consapevolezza di aver lasciato incompleta una certa attività: questa tensione si accompagna al nostro desiderio di spegnerla ricavandone una sensazione di appagamento.

Un design persuasivo può utilizzare questa consapevolezza implementando elementi grafici che suggeriscano all’utente la sua collocazione all’interno di un determinato processo rimasto incompleto: le barre colorate orizzontali, ad esempio, che segnalano il numero di passaggi mancanti al termine dell’inserimento dei propri dati in un modulo di registrazione sono un modo per incoraggiare l’utente a terminare l’azione intrapresa.

Ricordate, infine, che tutti i vostri sforzi in termini di design persuasivo saranno del tutto vani senza un rigoroso testing di accessibilità: per saperne di più, potete consultare le nostre linee guida su come sviluppare siti inclusivi.

research

Testing del design persuasivo: come capire se funziona

Un aspetto fondamentale nel design persuasivo è la validazione delle scelte di design attraverso l‘A/B testing. Questo metodo permette di confrontare due versioni della stessa pagina per determinare quale sia più efficace nel raggiungere gli obiettivi di conversione, utilizzando dati reali piuttosto che intuizioni soggettive.

Accanto a questa pratica, è importante considerare la teoria dei colori, che gioca un ruolo chiave nel comprendere come evocare emozioni specifiche e influenzare il comportamento degli utenti. Ad esempio, il rosso è spesso associato a urgenza e azione, rendendolo una scelta ideale per pulsanti di chiamata all’azione (CTA) anche se non la migliore in assoluto.

Per ottimizzare ulteriormente il layout, si può fare ricorso alle heatmap: queste evidenziano le aree che ricevono più clic o che attraggono maggiormente l’attenzione visiva, fornendo preziose indicazioni su come riorganizzare i contenuti per massimizzare l’interesse e l’interazione.

Infine, il design persuasivo beneficia notevolmente dei principi del neuromarketing, che applica le scoperte neuroscientifiche allo studio del comportamento dei consumatori. Utilizzando tecniche come l’eye-tracking o la risonanza magnetica funzionale (fMRI), è possibile comprendere meglio le reazioni inconsce degli utenti a specifici stimoli visivi, migliorando così l’efficacia complessiva del design.

Riassumendo: le domande più comuni sul design web persuasivo

Concludiamo questo approfondimento con una serie di FAQ sul design web persuasivo. Se non trovate risposta alla vostra domanda, scriveteci: saremo felici di chiarire tutti i vostri dubbi e arricchire ulteriormente questo contenuto grazie alle vostre segnalazioni.

  1. Che cos’è il design persuasivo? Il design persuasivo utilizza strategie psicologiche nella progettazione di siti web per influenzare il comportamento degli utenti guidandoli verso azioni specifiche, come una conversione o un acquisto, attraverso un layout e una grafica studiati per attirare e mantenere l’attenzione.
  2. Come si selezionano le voci da inserire in un menù di navigazione? È fondamentale ridurre le opzioni nel menù di navigazione per evitare il sovraccarico decisionale degli utenti. Inserite, specialmente sulla versione mobile del sito, solo le voci essenziali e usate filtri o sottomenù per gestire categorie più ampie. Posizionate le voci più importanti all’inizio o alla fine del menù, poiché gli utenti tendono a ricordare meglio questi elementi.
  3. È possibile utilizzare colori diversi all’interno della stessa pagina? Sì, l’uso di colori diversi può essere molto efficace, ma è importante farlo in modo strategico. Colori contrastanti possono essere utilizzati per distinguere chiaramente tra diverse sezioni della pagina o per mettere in risalto elementi specifici, come pulsanti di chiamata all’azione (CTA) o informazioni importanti. Mantenete però un equilibrio cromatico per non creare confusione visiva.
  4. Come far risaltare le informazioni più importanti su una pagina web? Grandezza del testo, colori contrastanti e posizionamento sono gli elementi di cui tenere conto. Ad esempio, i pulsanti delle CTA dovrebbero essere ben visibili e collocati in posizioni chiave, vicini al punto di partenza dell’utente. Anche l’uso dello spazio negativo e di separatori può aiutare a focalizzare l’attenzione su determinate sezioni.
  5. Cos’è lo spazio negativo nel design web? Lo spazio negativo, noto anche come whitespace, è l’area vuota tra gli elementi di una pagina web.
  6. Qual è il modo migliore di sfruttare lo spazio negativo? Lo spazio negativo può essere utilizzato per separare sezioni, creare un senso di equilibrio e rendere l’interfaccia visivamente più accattivante e meno caotica. Un uso efficace dello spazio negativo facilita la navigazione e aiuta a guidare l’utente attraverso il contenuto del sito in modo intuitivo e piacevole.
  7. Come si testa l’efficacia persuasiva di un design web? L’A/B testing è essenziale per verificare l’efficacia di un design persuasivo. Questo metodo consente di confrontare diverse versioni di una pagina per vedere quale funziona meglio. Le heatmap sono un altro strumento utile, poiché mostrano dove gli utenti cliccano di più, aiutando a ottimizzare il layout. Tecniche di neuromarketing, come l’eye-tracking, possono inoltre fornire insight su come gli utenti reagiscono a specifici stimoli visivi.
  8. Qual è il ruolo della teoria dei colori nel design persuasivo? La teoria dei colori è cruciale perché i colori possono evocare emozioni e influenzare il comportamento degli utenti. Ad esempio, il rosso è spesso associato all’urgenza, rendendolo una fra le scelte più comuni per i pulsanti delle CTA, mentre il blu può trasmettere fiducia e sicurezza: per questo viene adottato spesso per sezioni informative o siti governativi.
  9. Quali elementi grafici sono utili per guidare l’utente all’interno del sito? Usate elementi visivi come frecce, barre di avanzamento o icone prominenti che indichino chiaramente i passaggi successivi. Strumenti come le barre di progressione, che mostrano quanto manca al completamento di un processo, possono inoltre ridurre l’abbandono e migliorare l’esperienza utente.

Coming soon:

Il blog di Seed torna fra due settimane con un approfondimento su come ottimizzare le conversioni di un e-commerce di abbigliamento, tornate a leggerci!

Facebook
Twitter
Pinterest
LinkedIn

Growth Plan

Piano di crescita gratuito
per il tuo sito web

Articoli Correlati

Growth Plan

Piano di crescita gratuito
per il tuo sito web

Formazione

Webinar gratuito
“il futuro della SEO”

×