Psicologia e design: quali i segreti di un sito che converte?

psychology

Il design del tuo sito è davvero molto, molto importante per aumentare le conversioni. Colpisce la mente degli utenti come una freccia, e a differenza del copywriting lo fa nella maniera più immediata possibile. Come già ho detto in un altro articolo, il nostro cervello elabora le immagini 60mila volte più velocemente rispetto a un testo.

Tradotto in termini di web marketing, vuol dire che all’utente bastano pochi istanti per farsi una idea giusta o sbagliata di te e del tuo business, e nel secondo caso provare a convincerlo del contrario diventa davvero difficile.

Un luogo comune che dovremmo tutti imparare a superare è la distinzione tra marketing e design. Questa differenza a mio parere non esiste!

Il marketing, inteso come “l’arte e la scienza di individuare, creare e fornire valore per soddisfare le esigenze di un mercato di riferimento, realizzando un profitto” (Philip Kotler, 1967) non è altro che una categoria più vasta, e il design ne è un sottoinsieme.

Non ha senso parlare di una estetica fine a se stessa quando si investono migliaia di euro per progetti da cui ci si aspetta un ritorno economico! Quindi o i web designer cominciano a ragionare in ottica di aumento delle conversioni, oppure occorrerà direzionare i loro talenti verso strategie più profittevoli.

Nessuno vorrebbe avere un sito bello ma che non vende, giusto?

Prima comprendi le modalità attraverso cui l’occhio umano elabora le immagini, prima potrai fare modifiche al sito web e portare un reale vantaggio sia ai tuoi utenti (li aiuti nella navigazione creando interfacce più intuitive e user friendly) sia al tuo business (con una navigazione agevole e intuitiva i visitatori saranno più propensi a diventare tuoi clienti).

Di seguito voglio mostrarti alcuni principi di psicologia applicati all’aumento delle conversioni, con tanto di case study ed esempi concreti.

1. Legge dell’esperienza passata

Questa legge ci dice che le nostre esperienze passate influiscono pesantemente sul modo in cui interpretiamo le esperienze presenti. Ad esempio, sappiamo tutti che il simbolo del cestino indica la rimozione di una pagina, che la X significa annulla e che quando compare la manina al posto del cursore del mouse vuol dire che c’è un link.

La legge dell’esperienza passata è qualcosa a cui bisogna fare estrema attenzione. Ci sono stati casi di Redesign drastico di un sito che hanno portato un crollo del tasso di conversione. Non importa se il sito nuovo era più bello e più usabile: in alcuni casi gli utenti erano talmente abituati ad un certo tipo di navigazione si sono trovati disorientati e hanno smesso di comprare!

 

case study #1 – Fab.com + 49% conversioni

Per un ecommerce così grosso come Fab.com anche i piccoli dettagli possono fare la differenza e portare ad un significativo aumento delle conversioni. Il layout di partenza era infatti molto ben progettato, con una immagine del prodotto espandibile e un carrello “icona” accattivante e originale. C’erano però ancora molti margini di miglioramento!

legge esperienza passata

fonte: Kissmetrics

 

Le variazioni hanno interessato essenzialmente 2 elementi:

– l’aggiunta del nome del produttore sotto al nome del prodotto (“by Blu Dot x Fab” e “by Quality”)

– la Call to Action (“Add to Cart” e “+ Cart” al posto del simbolo del carrello)

La variazione 2 ha ottenuto un modesto ma comunque significativo aumento delle conversioni del 15%. Ma è la variazione 1 ad avere ottenuto risultati incredibili, con un incremento delle conversioni del 49%!

Qual’è il motivo? Semplice. La Call to Action a forma di carrello è sicuramente bella esteticamente, ma nonostante sembri molto intuitiva generava confusione tra gli utenti.

In neanche vent’anni di shopping online, si è sedimentata l’idea che il pulsante di aggiunta al carrello debba contenere la frase “aggiungi al carrello”. Infrangere questa “regola dell’esperienza passata” può portare ad un miglioramento del design, ma confondere al contempo i potenziali clienti e generare frizione.

2. Legge di Fitt

La legge di Fitt (sviluppata nel 1954 dallo psicologo Paul M. Fitts), dice che il tempo necessario per spostare il mouse in una area di destinazione (es. un pulsante di iscrizione) dipende dalle dimensioni dell’oggetto e dalla distanza dell’oggetto.

Banalmente, più grande e vicino è l’oggetto, più veloce sarà il compito di puntamento, e questo spiega perché i pulsanti delle call to action sono generalmente sovradimensionati.

Tenendo in considerazione questo principio, puoi aumentare il CTR (click through rate) di una azione desiderata rendendo l’obiettivo di grandi dimensioni (come un grande pulsante) e/o posizionarlo vicino alla posizione prevista del mouse

(Quest’ultimo accorgimento è importante in casi come form da compilare a più pagine. In questo caso i pulsanti di ciascuna pagina dovranno essere collocati nel medesimo punto in modo che il cursore del mouse può restare fermo su quel punto).

Alla maniera inversa, è possibile diminuire le azioni indesiderate come le cancellazioni utilizzando piccoli link testuali al posto di pulsanti. Questo è il caso della bacheca di WordPress dalla quale scrivo. Noti differenze tra le call to action “Sposta nel cestino” e “Pubblica”?legge di fitt wordpress

 

case study #2 – SAP + 32,5 % conversioni

La Società di Software Enterprise SAP voleva aumentare il download del loro software di Crystal Reports.

legge di fitt case study

fonte: Kissmetrics

 

La pagina originale era quella di un comune sito web aziendale, piuttosto formale e con molto testo, tant’è che anche la call to action era in forma testuale, nascosta da qualche parte alla fine del testo. Per aumentare le conversioni sono state realizzate un paio di versioni alternative e messe a confronto con l’originale attraverso un A/B/n test.

Nel design vincente (foto a destra) sono state rimosse alcune distrazioni ed è stata inserita una seconda call to action in fondo al testo, ma un cambiamento in particolare spicca: il pulsante per il download è chiaramente differenziato rispetto al resto della pagina.

Invece di costringere i potenziali clienti a trovare e fare click sul piccolo collegamento testuale, la nuova variante invita al download con un grande pulsante facilmente trovabile.

Risultato? Il download è aumentato del 32,5 %

 

case study #3 –  Campagna Obama – 22% di disiscrizioni

Per le elezioni del 2012, la campagna di email marketing di Obama generò circa 500 milioni di dollari di donazioni. D’altra parte, la campagna di Obama era portata avanti da un Optimizer Team micidiale che testò diverse strategie di aumento delle conversioni.

In un loro esperimento, decisero di testare alcune differenti variazioni per l'”Unsubscribe Link” nel footer delle mail.

legge di fitt case study2

fonte: Kissmetrics

 

Ed ecco la Legge di Fitt in azione. Nascondendo il pulsante di didiscrizione all’interno del testo e rendendolo più piccolo (here invece di Unsubscribe) il tasso di disiscrizione si abbassò del 22%!

Questo risultato può anche essere dovuto in parte alla Legge dell’esperienza passata: gli utenti che cercano il link di disiscrizione automaticamente setacciano il footer della mail alla ricerca del link in evidenza “Unsubscribe”, e il non trovarlo può essere un elemento di frizione che li fa desistere.

3. Legge dei costi/benefici

costi_benefici

Il comportamento umano è fortemente influenzato dal rapporto tra il beneficio percepito di una azione (es. scaricare un ebook gratuito) rispetto al costo percepito (inserimento di un indirizzo di posta elettronica).

Questo è il motivo per cui la gente sarà lieta di darti un indirizzo email in cambio di un ebook a loro utile, ma storcerà il naso se gli chiederai in cambio di compilare un questionario di 50 pagine.

NB: Ho detto benefici e costi percepiti, non effettivi. Ciascun utente ha una propria personale percezione dei vantaggi che offri, basata sulla sua esperienza passata, sul proprio temperamento e sulle interazioni con il tuo brand e con quelli della concorrenza.

 

case study #4 – Soocial + 28% conversioni

costi_benefici2

fonte: Kissmetrics

 

Ecco un esempio semplice di come la legge dei costi/benefici può eliminare le incertezze ed aumentare significativamente le conversioni. La società Soocial fa acquisizione di clienti attraverso un grande pulsante di signup sulla propria homepage. é stato deciso di testare una semplice modifica del pulsante di iscrizione, ovvero l’aggiunta della scritta “It’s free!” a destra del pulsante “Sign up Now!”. Tutto il resto è stato lasciato identico.

Risultato? Un aumento del CTR del 28%.

“Gratis” è una parola davvero potente, in grado di rimuovere i fattori di incertezza ed esitazione che frenano l’utenza dal compiere un azione. Occorre però stare attenti ad usarla nel modo giusto.

  1. Se quello che offri non è davvero gratis o lo è solo in parte, si genererà un effetto boomerang con una folta schiera di utenti frustrati dalla tua falsa promessa.
  2. A volte “gratis” fa rima con “Economico”. Se la tua value proposition è focalizzata sulla qualità e su servizi costosi, rischi di attirare il tipo sbagliato di utenti.

Le Leggi della Gestalt

La Psicologia della Gestalt

Nata ad inizio Novecento in Germania, la psicologia della Gestalt considera le esperienze mentali come delle totalità che vanno studiate nella loro interezza, in quanto il significato dei singoli elementi è dato dallo specifico contesto nel quale sono inseriti.

La mente, in questa concezione, non si limita a "ricevere passivamente" le informazioni dagli organi di senso, ma elabora in maniera attiva le informazioni ricevute e le compone per formare un "tutto", sulla base di principi innati. Conoscendo questi principi è possibile sfruttarli a proprio vantaggio per creare layout grafici più intuitivi.

4. Legge di gerarchia visuale

Facciamo un gioco: guarda i 4 cerchi sopra e prova a classificarli in ordine di importanza.

legge di gerarchia visuale

Senza sapere NULLA su quei cerchi, non avrai certo problemi a classificarli dal più grande al più piccolo. Questa è la Legge di Gerarchia Visuale. 

Devi riuscire ad applicare lo stesso principio al tuo sito web. Nelle varie pagine sono presenti pulsanti, form di contatto, barre del menù, titoli e immagini. Stabilisci una gerarchia per ognuno di questi elementi  sulla base delle priorità del tuo business.

Per fare questo devi avere chiari quali sono i tuoi obiettivi e dei percorsi (funnels) che portano i visitatori alle call to action.

Se in una pagina non esistono gerarchie tra i diversi elementi, l’utente dovrà decidere da solo cosa è importante e cosa no, e questo è un fattore che genera ansia e diminuisce le conversioni.

psicologia del web design principio di gerarchia visuale

Ecco un esempio di sito web dove la legge di gerarchia è stata applicata correttamente. L'immagine del ragazzo [1] viene visualizzata per prima, per il motivo che le immagini vengono processate prima dal cervello rispetto ai testi (per approfondire leggi questo articolo su come ottimizzare le immagini nelle schede prodotto) seguita da una Call to Action [2] scritta a caratteri cubitali.

L'offerta che il sito directline.it vuole promuovere è più importante del normale form di richiesta del preventivo [3], il quale a sua volta è più importante del menù in alto [4] e delle informazioni racchiuse nei rettangoli in basso [5].

In un sito come quello sotto, invece, tra gli elementi della pagina non è presente alcuna gerarchia visuale, e per i visitatori diventa davvero difficile capire cosa è importante o cosa cliccare.

unum-work

 

La gerarchia visuale non si manifesta però solo in termini di Grandezza, e altri elementi possono contribuire a portare in primo piano un elemento.

Ad esempio Amazon utilizza sapientemente i colori per rendere la call to action "Aggiungi al carrello" prominente rispetto alla call to action "Aggiungi alla lista Desideri".

E sono pronto a scommettere che Amazon avrà fatto gli opportuni A/B test prima di arrivare a questa conclusione!

gerarchia visuale 2

5. Legge di somiglianza

Per la legge di somiglianza tendiamo a mettere assieme gli elementi che appaiono simili (stesso colore, stessa forma o altre caratteristiche comuni) ed a considerarli parte di una stessa categoria.

gestalt

Nella costruzione di un sito web è importante tenere a mente questa legge ogni volta in cui vogliamo creare divisioni tra categorie di oggetti tra loro differenti, o raggrupparli in una unica categoria visiva.

Grazie a questo meccanismo possiamo ad esempio creare dei riquadri per i testimonials identici, in modo che l'utente possa riconoscerli come parte dello stesso gruppo.

6. Legge di Prossimità

legge di prossimità

Quando alcuni elementi sono disposti l'uno accanto all'altro, diventano per la nostra mente un singolo oggetto percettivo. Trasportato nel web design, questo significa che occorre fare attenzione a non mettere assieme elementi diversi tra loro, per non creare confusione.

Allo stesso modo, mettendo vicini tra loro gli elementi diventerà facile capire che formano un unico insieme (menu di navigazione, footer, ecc.)

Il layout del sito Craiglist.com utilizza bene questa legge visuale per mostrare quale sotto-categoria cade sotto la voce "in vendita":

craiglist

 

 

Conclusioni

Questi che ho mostrato sono solo alcuni esempi di come le leggi della psicologia influiscono sulle azioni dei tuoi potenziali clienti. Comprendere queste leggi ti sarà di grande aiuto se vorrai capire dove intervenire per aumentare le conversioni del tuo sito. Se invece sei all'inizio e ti stai orientando nella scelta di un template (Magento, Prestashop o WordPress che sia) fai attenzione a sceglierne uno che soddisfi (almeno in parte) questi principi!

 

Marketing Automation Specialist - Mi occupo di marketing comportamentale e personalizzazione dell'esperienza di acquisto online. Ogni utente è diverso ed ha specifiche esigenze: è il sito che deve adattarsi a loro e non viceversa!
3 Comments
  1. dario palumbo 28 gennaio 2015 at 12:19

    Ottimo articolo, interessantissimo!

    Reply
  2. Alessandro Gnola 18 febbraio 2016 at 20:51

    Ottimo articolo e ottimi consigli. Avere un sito che non converte non serve a nulla, è uno strumento inutile!

    Reply
    • Francesco Chiappini 20 febbraio 2016 at 23:17

      Grazie Alessandro!

      Reply

Leave a reply

[i]
[i]