web design

Si dice che per riuscire a persuadere qualcuno – mentre ci parli – devi apparire sicuro di te, devi parlare veloce, e anche dire qualche parolaccia. Ma รจ possibile persuadere qualcuno senza usare le parole? Utilizzando magari le immagini? Per esempio su un sito web? Secondo Peep Laja รจ assolutamente possibile, seguendo i 5 principi del web design persuasivo (tradotti in questo post dal sottoscritto).

1. Chiarezza, prima di tutto

Il nostro cervello รจ un organo che si interroga continuamente. Quando vediamo qualcosa per la prima volta, ci chiediamo subito: “Che cos’รจ?” (o altre cose come “Posso mangiarlo?” oppure “Sarร  lui a mangiare me?”). Non c’รจ da meravigliarsi che quando si chiede alla gente cos’รจ la cosa piรน importante su un sito web, la tipica risposta รจ “trovare cose che mi interessano”.

I fattori piรน importanti del design di un sito web

Quanto un visitatore accede ad un sito, ha bisogno di risposte rapide. Bisogna chiarirgli subito:

  • Cos’รจ questo sito?
  • Cosa posso farci / รจ quello che sto cercando?
  • Perchรฉ dovrei farlo / come puรฒ essermi utile?

Impara a creare una value proposition irresistibile, che risponda a questa domanda: “Perchรฉ dovrei comprare qui, e non da un concorrente?” Non รจ solo la tua home page che deve essere chiara, tutte le pagine devono essere chiare e comprensibili, come ad esempio questa:

L'home page di Square

  • Cos’รจ? “Inizia ad accettare le carte di credito da oggi” + una immagine chiara e pertinente
  • Cosa posso fare qui? Posso ottenere un lettore di carte di credito
  • Perchรฉ dovrei farlo? Perchรฉ รจ gratuito e costa solo il 2,75% a transazione

Un altro esempio:

L'home page di Ditto

Qui viene utilizzata una immagine per comunicare il concetto: รจ un’ottima strategia, perchรฉ il cervello umano elabora le immagine 50 volte piรน velocemente rispetto al testo scritto. Ma c’รจ un punto che non va: “il modo piรน veloce per trovare…”. Oggigiorno le persone non credono piรน ai superlativi. Meglio essere specifici, anzichรฉ utilizzare un superlativo. Si tende sempre ad utilizzare termini come “il migliore”, “il piรน facile”, “il piรน veloce”, e cosรฌ via. Se รจ davvero cosรฌ, dimostralo citando fonti autorevoli. Se invece non lo pensi, non dirlo. Siamo circondati da insegne tipo questa:

L'insegna di una pizzeria

“La miglior pizza della zona”. Ci crederesti davvero? Non credo. Ma sotto c’รจ la scritta “pasta fatta in casa”. Ecco, a questa magari ci credo! Perchรฉ รจ specifica e non contiene superlativi. Cosรฌ, anzichรฉ pretendere di essere il “migliore”, magari potresti dire “consegnamo la tua pizza a domicilio in 20 minuti”, e saresti molto piรน credibile.

2. Impatto visivo

Una volta che la gente capisce che รจ in un posto giusto e che ciรฒ che offriamo รจ interessante, il nostro lavoro diventa quello di farli passare attraverso il sales funnel.

La prima impressione รจ quella che conta

Le persone tendono a dare giudizi affrettati, e un utente impiega circa 50 millisecondi (ovvero 0,05 secondi) per decidere se gli piace o meno il tuo sito, se restare o andarsene. Uno studio focalizzato su siti web che trattano il tema della salute, ha evidenziato chiaramente che dal look and feel del sito deriva la prima impressione. Il 94% dei rispondenti si รจ infatti focalizzato sul design (complessitร , layout, navigazione, uso dei colori, pubblicitร , dimensione dei font, quantitร  del testo, strumenti di ricerca), mentre solo il 6% ha dato un feedback sull’effettivo contenuto del sito. Gli elementi visuali sono risultati di gran lunga quelli che piรน hanno influenzato i visitatori. La prima impressione รจ importante per 3 motivi:

  • genera una soddisfazione maggiore
  • l’impatto visivo รจ percepito dagli utenti come piรน importante dell’usabilitร 
  • la prima impressione puรฒ durare per anni

Questa รจ la Tesla Model S:

Tesla Model S

La maggior parte delle persone afferma che “รจ una buona macchina”, basandosi esclusivamente sul suo aspetto. Lo stesso accade col tuo sito web: se offri una buona prima impressione, avrai giร  fatto il grosso del lavoro. Se invece la prima impressione รจ negativa, verrร  influenzata anche la percezione dei tuoi prodotti e servizi.

Ma cosa puรฒ rendere piacevole un sito?

Secondo Google, ci sono 2 fattori chiave che “fanno in modo che alla gente piaccia un sito web”: la bassa complessitร  visiva (=piรน รจ semplice, meglio รจ) e l’alta “prototipicitร ” (=quanto รจ rappresentativo un design per una determinata tipologia di siti). In pratica un design semplice e “familiare”, che segue certe convenzioni (=se tutti gli ecommerce sono fatti in un certo modo, anche il tuo dovrebbe essere molto simile ai concorrenti). Layout innovativi, non convenzionali, rischiano di piacere meno. Per esempio, in questo layout รจ difficile capire che le voci del menu sono quelle sulla sinistra:

Layout difficile

Questo invece รจ un sito con una impostazione grafica giร  vista piรน volte:

Layout semplice

anche se รจ in lingua olandese, e probabilmente non comprenderai una sola parola del testo, risulta familiare. E ancora. Questo รจ un layout con un impatto “complicato”, poco attraente:

Layout complicato

Mentre questo รจ esattamente l’opposto:

Layout lineare

semplice e lineare.

3. Forte Gerarchia Visiva

Questo รจ uno dei principi piรน importanti di un web design efficace: รจ l’ordine con cui l’occhio umano percepisce ciรฒ che vede. Se dovessi ordinare questi 4 cerchi in ordine di importanza,

4 cerchi

probabilmente lo faresti partendo dal piรน grosso al piรน piccolo: questa รจ gerarchia visiva. Alcune parti del tuo sito sono piรน importanti di altre (moduli di contatto, call to action, value proposition), e devi fare in modo che ottengano piรน attenzione rispetto ad altre parti meno importanti. Se nel menu hai 10 voci, han tutte la stessa importanza? Dove desideri che l’utente clicchi? Fai in modo che gli elementi piรน importanti siano piรน prominenti. Non รจ solo una questione di dimensioni. Amazon rende il pulsante “Aggiungi al carrello” piรน prominente, utilizzando semplicemente i colori:

Il pulsante di Amazon

Qual รจ il tuo obiettivo di business?

Dovresti posizionare gli elementi del tuo sito sulla base dei tuo obiettivi: se non hai in mente un obiettivo specifico, avrai difficoltร  a pensare a cosa dare la prioritร . Questo รจ il sito di una azienda che vende pentole per la cottura all’aperto:

Landing page con bistecca

Possiamo notare subito un enorme pezzo di carne (che ti fa venire voglia di mangiarlo), seguito dell’headline (che indica chiaramente cosa fa il prodotto), e quindi la call to action (che invita a comprarlo). Segue un paragrafo di testo sotto l’headline, il banner che indica la spedizione gratuita e infine il menu di navigazione.

L’occhio tende a seguire questa gerarchia visiva. Prova a visitare vari siti web del tuo settore, e a classificarne gli elementi in base ad una gerarchia; poi visita il suo sito e guarda se c’รจ qualcosa di importante che non si trova al vertice di tale elenco. E quindi mettici mano per cambiare la situazione.

Non รจ (solo) una questione di colori

Si parla spessissimo di quale colore converte meglio. C’รจ chi dice di utilizzare il cosiddetto “BOB”, che sta per Big Orange Button (un grosso bottone arancione); secondo altri il rosso รจ il colore migliore. In base a questo noto A/B test,

A/B test

il pulsante rosso ha performato meglio del verde del 21%. Ma in moltissimi non si sono accorti che il motivo non รจ il colore del pulsante in sรฉ. Il pulsante rosso ha ottenuto un risultato migliore del verde perchรฉ era inserito in un sito il cui colore dominante era il verde, e quindi il rosso spiccava. Se devi scegliere il colore di un bottone per il tuo sito, che salga in alto nella gerarchia visiva, fai i modo che sia diverso da quello dominante.

Gli spazi bianchi aiutano ad enfatizzare ciรฒ che conta

Piรน spazio lasci vuoto sulla pagina, piรน attenzione otterranno gli spazi pieni. In questa pagina, vogliono venderti un letto:

Scheda prodotto di un letto

Quale elemento attira maggiormente la tua attenzione? Ma ovviamente il letto stesso! E’ di gran lunga la cosa piรน importante ed evidente sulla pagina. Anche se puรฒ sembrare una cosa ovvia, non sempre lo รจ: la maggior parte delle immagini presenti su vari ecommerce sono molto diverse da quella qui sopra: spesso sono piccole, magari circondate da un sacco di altri elementi distrattivi. Ricorda che la gente acquista un prodotto in base a come appare, quindi fai in modo di enfatizzare l’immagine e relega gli altri elementi ad un livello piรน basso della gerarchia visiva.

4. Mantieni Alta l’Attenzione a Tutti i Costi

Una volta che l’utente sa che il tuo sito contiene qualcosa di suo interesse, il visual design lo guida in una gerarchia visiva che evidenzia ciรฒ che conta, e che mantiene alta la sua attenzione per tutta la durata della visita. Si parte dal dove collocare gli elementi, considerando anche il fatto che la maggior parte del tempo viene spesa above the fold, e sul lato sinistro dello schermo (il 69% delle persone inizia la lettura da quel punto). Ricerche in ambito neuroscientifico ci dicono che poche cose catturano l’attenzione come le grosse immagini che trattano di momenti di vita vissuta (purchรฉ pertinenti al prodotto/servizio che vendi).

Airbnb

Pensa che ci sono persone che visitano regolarmente Airbnb solo per guardare le foto (e sognare di viaggiare): obiettivo raggiunto! Un altro ottimo modo รจ usare le foto di persone, soprattutto quelle che guardano dritto verso di noi:

Persona che guarda negli occhi

tendiamo sempre a guardare le persone negli occhi, e questa tecnica รจ infallibile per ottenere attenzione. Una terza tecnica รจ quella del contrasto: prima e dopo, ieri e oggi. Il nostro cervello รจ progettato per individuare le differenze. In epoca primordiale, avevamo bisogno di scansionare l’orizzonte per notare eventuali cambiamenti (predatori, nemici, cibo, etc.).

Prima e dopo

Ovviamente puรฒ funzionare molto bene per attivitร  come dentisti, parrucchieri o cose legate al fitness, ma รจ possibile utilizzare la tecnica anche in altri ambiti. Mostra quale valore puoi dare con la tua attivitร  tramite il contrasto: funziona alla grande per ottenere attenzione. Un altro modo รจ utilizzare la sorpresa. Quando vediamo qualcosa di imprevisto, che non ci aspettavamo, la nostra attenzione sale. Come qui:

Sorpresa e imprevisto

Cos’ha (o cosa fa) di strano il personaggio in questione? Ovviamente รจ necessaro capire come utilizzare l’elemento sorpresa assieme al tuo brand. Ma non รจ solo questione di immagini. Anche un “uso anomalo” del testo scritto puรฒ attrarre la nostra attenzione. Mettiamo che stai cercando un corso di copywriting. Quale di questi 2 ti attrae di piรน?

Corsi di copywriting

Probabilmente quello a destra รจ quello piรน “classico”. Quello a sinistra, l’inaspettato.

Mantenere l’attenzione

Ottenere l’attenzione non รจ cosรฌ difficile; il difficile รจ mantenerla. Ci sono 2 cose che ammazzano letteralmente l’attenzione.

1. Un muro di testo: se non sai di cosa parlo, questo รจ un esempio.

2. Una pagina scritta in linguaggio tecnico, egocentrica e irrilevante. Come questa:

Pagina scritta in jargon

  • “Benvenuti sul nostro sito web”: completo spreco dello spazio, che non ha senso per nessun lettore. Tutti sono i benvenuti, su tutti i siti web.
  • “Chi siamo” e “La nostra filosofia”: su quel genere di sito web, le persone non vanno per leggere queste cose.
  • Foto dozzinali: sono le classiche foto che si vedono su tutti gli archivi fotografici del mondo, assolutamente false e impersonali.

Cerca invece di mettere sempre l’utente al centro: WIIFM (ovvero “What’s in it for me”) รจ il motto da tenere sempre presente, in ogni momento. L’obiettivo dovrebbe essere sempre quello di creare contenuti pertinenti e interessanti, e di presentarli bene. Quale di queste 2 pagine ha piรน appeal?

Come funziona

Sicuramente quella di destra! Testo stilizzato, percorsi per gli occhi, ampio utilizzo di immagini, layout non troppo scontato. Siamo troppo assuefatti a modelli troppo preconfezionati, che tendiamo ad ignorare; รจ bene insaporire il tuo layout con qualche elemento di novitร , per alzare l’attenzione.

Design pensando alle “novitร ”

Se vuoi fare in modo che quello che scrivi venga letto, devi inserirlo in una giusta cornice. Devi offrire delle “novitร ” in ogni schermata. Ciรฒ significa aggiornare costantemente il layout, per mantenerlo interessante: le cose troppo uguali e simili ad altre sono noiose, e allontanano le persone. Viceversa, i neuroscienziati affermano che la novitร  agevola la trasmissione di informazioni.

Siamo attratti dalle novitร : non solo le nuove esperienze catturano la nostra attenzione, ma sembrano essere un bisogno costante per la mente. Il nostro cervello impara rapidamente ad ignorare tutto ciรฒ che รจ ripetitivo, prevedibile o semplicemente noioso, per fare spazio a ciรฒ che รจ nuovo e diverso. Le novitร  sono le cose alle quali la gente presta attenzione. Ti sei mai chiesto perchรฉ molti siti alternano costantemente la posizione dei paragrafi del testo e delle immagini, da sinistra a destra?

Alternanza fra testi e immagini

Questa tecnica porta piรน persone a leggere il contenuto. Stesso dicasi per l’uso dei sottotitoli e di ampi spazi bianchi.

Aiuta le persone a scegliere

Una volta che gli utenti sono arrivati a navigare fra i tuoi prodotti, devi aiutarli a scegliere. Troppe scelte paralizzano, e un buon sistema di filtri puรฒ essere il primo passo per restringere la selezione ed aiutare l’utente ad orientarsi.

Wine Library

Qui sopra l’esempio di Wine Library, che permette di scegliere una bottiglia di vino in base a moltissimi parametri (provenienza, vitigno, dimensione della bottiglia, e un sacco di altri). Se non รจ possibile applicare un filtro, bisogna agevolare l’utente nella scelta del prodotto. Ciรฒ che spicca, viene raccolto. Per esempio, utilizzando il product badging: secondo Monetate, รจ una tecnica in grado di aumentare in modo considerevole acquisti medi e conversioni.

Foto del prodotto

Qual รจ il fattore piรน importante quando si tratta di scegliere un paio di scarpe, una nuova camicia, o un orologio da polso? Ovviamente, รจ il modo cui l’oggetto si presenta. La maggior parte delle pagine di categoria degli ecommerce si presenta in questo modo,

Ecommerce di scarpe

che sicuramente รจ molto meno efficace di una cosa del genere:

2 paia di scarpe

Aiuta le persone ad amare i tuoi prodotti. Per esempio, passando da una visualizzazione di 4 prodotti per riga,

4 prodotti per riga

ad una da 3 prodotti (e quindi ad immagini piรน grandi),

3 prodotti per riga

l’incremento delle vendite รจ stato del 25%.

5. Una Sola Azione per Ogni Pagina, Quando Sono Pronti

E’ necessario che ogni pagina sia ottimizzata per una singola azione, ben definita. Questa cosa รจ collegata al concetto di messaggio chiaro, gerarchia visiva, e il guidare l’attenzione verso una sola azione. Questa pagina di Campaign Monitor vuole che l’utente crei un account gratuito,

Landing page di Campaign Monitor

e come puoi facilmente notare, la landing รจ ottimizzata solo attorno a quella call to action. Puoi anche puntare ad azioni secondarie, non c’รจ nulla di male, ma devo restare – per l’appunto – secondarie. In questa pagina,

Landing page di Freckle

la call to action principale รจ “see plans and pricing”, mentre quella secondaria, molto piรน in basso e quasi nascosta, invita a fare un “video-tour” per conoscere meglio il prodotto. Ma quando e come รจ il momento di chiedere all’utente una azione? Certamente non cosรฌ:

Landing page di Wizzley

questo sito chiede all’utente di registrarsi, senza spiegare bene di cosa parla e come funziona. Non รจ un buon sistema: รจ necessario presentare all’utente la call to action quando รจ pronto ad agire.

Qui trovi invece un case study di Marketing Experiments sulla lunghezza di una landing page. Lo studio mostra che piรน sono le informazioni fornite all’utente prima della call to action, e piรน l’importo della donazione (scopo della landing page) รจ risultato alto: anche secondo una ricerca di IDC, il 50% degli acquisti non viene completato a causa di informazioni insufficienti.

Qual รจ dunque il momento giusto per presentare la call to action? La regola รจ che piรน il prodotto รจ complesso e/o costoso, piรน informazioni รจ necessario fornire all’utente. Il modello di comportamento Fogg Ideato dal Dr. BJ Fogg, รจ un modello che dimostra che, nel momento in cui presenti la tua call to action, le persone agiscono se la loro motivazione รจ nel punto piรน alto e sono molto facilitate a compiere l’azione.

Fogg Behavior Model

Esemplificando, il top รจ la somma data da alta motivazione + semplicitร . Se hai una forte motivazione ma per raggiungere il risultato hai davanti un grossissimo ostacolo, generi frustrazione. Viceversa, se la cosa รจ molto facile da fare ma non รจ di alcuno stimolo, ottieni fastidio (pensa al portar fuori la spazzatura). E’ quindi molto importante capire quando รจ il momendo giusto per mostrare la call to action, e anche cercare di togliere ogni possibile “attrito”.

Conclusioni

Possiamo influenzare il comportamento delle persone senza usare le parole, solo utilizzando un web design persuasivo. Questi 5 principi lasciano un sacco di margini di interpretazione, e implementarli ti consentirร  di aumentare vendite e conversioni. Buona persuasione!


Max Valle

Da oltre 30 anni, offro consulenza e servizi digitali ad aziende e professionisti che desiderano far crescere il proprio business. Attraverso l’acquisizione di nuovi clienti in modo etico ed efficace, e l’utilizzo delle piรน recenti tecnologie web, aiuto i miei clienti a raggiungere i loro obiettivi nel pieno rispetto delle normative vigenti.

  • Certified Professional Ethical Hacker nยฐ4053103 
  • International Web Association nยฐ0312827
  • Membro Federprivacy nยฐFP-9572
  • Associazione Informatici Professionisti nยฐ3241