Come creare una landing page? Parte II - trucchi di design

In questo articolo, presenteremo diversi trucchi e regole per costruire una landing page che la renderà più accessibile ai tuoi utenti. Dopotutto, proprio come un uomo d'affari ha bisogno del vestito giusto, una donna del vestito perfetto, la landing page ha bisogno del giusto design e di contenuti ben posizionati.

Se non sai come creare una landing page da zero, vai al nostro articolo “Come creare una landing page? Parte I”, in cui descriviamo l’intero processo in dettaglio.

Tieni presente che, a differenza della lettura di questo articolo, progettare il tuo sito web è un processo che richiede tempo. Tuttavia, non scoraggiarti. Progettando il sito da solo, puoi risparmiare fino a 5.000 dollari. Allora, iniziamo?

Trucco 1 - Quattro dimensioni di potere

Forse ti è capitato di vedere la "griglia" sullo schermo mentre scattavi una foto? Questo è legato alla "regola dei terzi" e, guarda caso, viene utilizzata anche nel web design. Secondo questa regola, la pagina è visivamente divisa in tre parti e composta da 9 quadrati identici.

I punti al centro delle quattro intersezioni delle linee sono proprio le "dimensioni di potere". Tutto ciò che si trova entro questi limiti verrà notato per primo dall’occhio umano. Quando crei una landing page, cerca di posizionare gli elementi più importanti nelle loro intersezioni.

Trucco 2 - Legge di Hick

Un altro trucco che potrebbe esserti utile proviene da William Edmund Hick, psicologo britannico. Egli affermò che il tempo necessario per prendere una decisione aumenta con il numero di scelte possibili. Questo significa che più opzioni abbiamo, più tempo ci servirà per decidere.

Durante le ricerche, Mark Lepper e Sheen Iyengar hanno scoperto che un tavolo con 24 tipi di marmellata è meno attraente di uno con 6 tipi. Quando una persona ha troppe scelte, la probabilità di acquistare qualcosa diminuisce di 10 volte. Come usarlo nella creazione di una landing page? Limita il numero di CTA e pulsanti e concentrati su un solo obiettivo. Considera tutte le possibili decisioni dell’utente sulla pagina e riducile il più possibile.

Trucco 3 - Il Modello “F”

Molti studi dimostrano che, durante la lettura di un testo, l’occhio umano si muove inconsciamente secondo uno schema preciso. Prima guardiamo da sinistra a destra, poi scendiamo verso il basso e prestiamo meno attenzione all’angolo in basso a destra - lo scansioniamo appena.

Se vuoi facilitare l’assimilazione delle informazioni e migliorare la conversione, posiziona gli elementi più importanti lungo la lettera F e quelli meno importanti oltre essa. I mezzi di contatto comodi dovrebbero essere in evidenza: social network, telefoni, ecc.

Trucco 4 - La Regola degli 8 Secondi

Hai solo 8 secondi per interessare l’utente (e anche meno, secondo le ultime ricerche). Ci dispiace dirlo, ma questa è la capacità di una persona di concentrarsi su una cosa sola. Quindi, come catturare l’attenzione in 8 secondi?

• Rendi il titolo accattivante e interessante, è importante che informi rapidamente e in modo conciso sui vantaggi del prodotto/pagina e tocchi i problemi che il cliente sta affrontando.
• Completa il messaggio con immagini accattivanti che trasmettano lo scopo principale del prodotto.
• Rendi il pulsante CTA visibile e breve.

Trucco 5 - La Legge della Somiglianza

Gli esseri umani percepiscono l’intera struttura in modo diverso rispetto ai suoi singoli elementi. Ci piace avere oggetti vicini tra loro che sono simili ma in gruppi separati.

Sfrutta questa regola. Supponiamo che il tuo prodotto abbia ottime recensioni. Approfittane e posiziona l’applicazione o un modulo accanto alla referenza.

Trucco 6 - Prova sociale

La prova sociale è una varietà di certificati e diplomi. Uno studio di Data Insight e AliExpress ha rilevato che 9 acquisti su 10 vengono finalizzati dopo che il cliente ha letto le recensioni. Come usarlo nella creazione di un sito web? Aggiungi le recensioni dei clienti al tuo sito.

Trucco 7 - Above the fold

Ne hai mai sentito parlare? Se no, te lo spieghiamo. Above the fold è la parte del sito web che è visibile senza dover scorrere per vedere il resto della pagina.

Probabilmente non ti sorprenderà sapere che ogni anno le persone leggono sempre meno. Di solito scansioniamo solo l’articolo con gli occhi. The Nielsen Norman Group Research ha dimostrato che i contenuti posizionati above the fold vengono recepiti dall’84% in più degli utenti rispetto a quelli sotto.

Perché? La risposta è semplice: visualizzare contenuti sotto richiede uno sforzo extra (scorrere la pagina). Significa che più lungo è il tuo contenuto, meno è probabile che gli utenti si immergano nel tuo testo.

Landing Page - Design e UX

Il primo passo nella scelta del design del tuo sito è considerare chi appartiene al tuo gruppo target. Donne o uomini? Che lavoro fanno? Cosa fanno nel tempo libero? Qual è il loro scopo e cosa si aspettano? Rispondendo a queste domande, ti faciliti il compito. Saprai se usare colori pastello e rilassanti o magari scuri e misteriosi. Una volta che conosci le basi del tuo sito e hai una visione iniziale, attieniti alle regole qui sotto.

Regola #1 - Immagini di alta qualità

Uno studio di Bright Local ha rilevato che il 60% delle persone preferisce risultati di ricerca che includano immagini. A sua volta, la ricerca di Skyword ha dimostrato che immagini interessanti hanno in media il 94% di impressioni in più. Quindi, quando scegli le immagini, cerca di evitare quelle noiose e stereotipate, trova qualcosa di originale e interessante. Di solito per immagini così bisogna pagare, ma ci sono molti siti che offrono immagini di alta qualità gratuitamente. Ecco alcuni esempi:

• Pexels,
• Unsplash,
• StockSnap,
• Negative Space,
• Superfamous Studios,
• Little Visuals,
• Gratisography,
• Kaboompics,
• Picjumbo.

Dimensione delle immagini

Un altro fattore importante che influisce sull’esperienza utente è la velocità del sito, e quindi la dimensione di immagini e video. Devono essere il più leggere possibile senza perdere qualità.

Per comprimere le immagini se sei un utente Windows, ti consigliamo:

• Riot,
• File Minizer Pictures,
• Caesium Image Compressor,
• File Optimizer,
• Pingo,
• JPEG mini.

Per comprimere le immagini se sei un utente MacOS, ti consigliamo:

• JPEG mini,
• ImageOptim,
• TinyBeest,
• Photo Size Optimizer.

Software online per la compressione delle immagini:

• TinyJPG.com,
• Compressor.io,
• Kraken.io.

Dimensione dei video

Per quanto riguarda la dimensione dei file video, il caso è simile a quello delle immagini. Tuttavia, è un po’ più complicato. Le foto possono essere di pochi MB, mentre i video di solito superano i cento MB, il che può rallentare notevolmente il tuo sito.

I migliori compressori video:

• Any Video Converter Free,
• Leawo Prof. Media,
• Freemake Video Converter,
• WinX Video converter,
• MediaCoder (solo Windows),
• AVS Video converter (solo Windows),
• Total Video Converter,
• HandBrake.

Regola #2 - Colori

I colori nel marketing giocano un ruolo molto importante e la loro scelta dovrebbe essere attentamente valutata. Essi influiscono principalmente su come l’utente percepisce la tua azienda. Se vuoi saperne di più sulla psicologia del colore nell’affiliate marketing, dai un’occhiata al nostro articolo “La psicologia del colore nell’affiliate marketing. Come i dettagli cambiano i tuoi guadagni?”.

Ricorda che i colori del brand devono essere coerenti con la sua missione e, soprattutto, devono piacere al tuo pubblico target. Tuttavia, la cosa più importante è la tua offerta e la qualità dei servizi.

Inoltre, l’uso dei colori è importante quando si tratta di accessibilità per le persone con disabilità, di cui parliamo nella quarta regola. Ricorda di non mettere due colori chiari diversi uno accanto all’altro, soprattutto blu e verde, poiché può essere problematico per i daltonici. La combinazione di colori più leggibile è nero su bianco.

Regola #3 - Titoli chiari e luminosi

L’utente deve ricordare la tua pagina e volerci tornare. Scegliendo un titolo luminoso (non invadente) e chiaro, lo aiuti molto. Vale la pena prestare attenzione alle persone con disabilità o digitalmente escluse e facilitare loro l’uso del sito. Ecco come dovrebbe essere.

Regola #4 - Accessibilità per persone con disabilità

Per facilitare la navigazione alle persone con disabilità, abbiamo raccolto un elenco di punti da considerare nella progettazione di un sito web. Inoltre, contenuti così adattati avranno un impatto positivo sulla SEO, traducendosi in un miglior posizionamento su Google o altri motori di ricerca.

Descrizioni ALT

Le descrizioni ALT sono descrizioni alternative delle immagini inserite nel tuo sito. Questo permette ai software di lettura delle pagine di comunicare all’utente cosa c’è. E in caso di internet lento, vedrai cosa c’è nell’immagine, quindi questa soluzione non è solo leggibile dai software.

Sottotitoli per i video

Se il tuo sito ha molti video, è una buona idea aggiungere i sottotitoli per aiutare le persone sorde. Per registrazioni audio più lunghe, è bene trascriverle. Un programma online che può aiutarti ad aggiungere sottotitoli automaticamente è ad esempio veed.io.

Link correttamente modificati e marcati

Invece di inserire un link nelle parole “Clicca qui”, è meglio scrivere “Per maggiori informazioni, visita [indirizzo del sito]”, questo aiuterà molto le persone cieche. Inoltre, evidenzia i link ipertestuali con un colore diverso dal testo normale. In questo modo, gli utenti non dovranno cercarli con il mouse.

Dimensione dei pulsanti

Se i pulsanti che reindirizzano alle sottopagine del tuo sito sono troppo piccoli, possono essere un problema per chi ha difficoltà di navigazione. Assicurati che l’area "cliccabile" del pulsante sia sempre abbastanza grande.

Navigazione da tastiera

Il tuo sito dovrebbe essere strutturato in modo che premendo il tasto "TAB" ci si sposti in modo logico e intuitivo dalla barra degli indirizzi al menu e alle altre aree del sito. In questo modo, anche gli utenti con disabilità potranno navigare comodamente.

Regola #5 - Spazio

Un altro aspetto è lo spazio sul tuo sito: l’utente deve sapere rapidamente e senza sforzo di cosa tratta il sito e cosa aspettarsi. Ovviamente non vuoi che la tua landing page sembri un sito del 2010 pieno di testo e annunci ovunque e l’utente non sappia cosa fare. Oggi queste situazioni sono molto rare. Tuttavia, guarda l’esempio qui sotto di una pagina che poteva essere progettata molto meglio.

L’inizio non è male: informazioni semplici su cosa fa l’azienda e cosa aspettarsi. Ora concentrati su ciò che c’è sotto. L’utente viene bombardato da vari link e frasi che ricordano lo spam. Questo è ciò che dovresti evitare.

Regola #6 - Menu trasparente e simmetria

Così come l’header deve essere semplice, anche il menu lo deve essere. Oggi lo standard è una barra di menu principale in alto, chiara e facile da navigare. Assicurati che la tua landing page sia simmetrica, l’occhio umano lo apprezza molto.

Regola #7 - Footer

Ultimo ma non meno importante: il footer. Come dovrebbe essere e cosa dovrebbe contenere? Il footer dovrebbe essere soprattutto ragionato, semplice e interessante. Devi pensare a cosa ti aspetti dagli utenti che arrivano in fondo alla pagina. Se conosci la risposta, ti sarà molto più facile progettare un buon footer. Di solito, i visitatori scorrono il sito per trovare le informazioni di contatto.

Questo non significa che non puoi inserire lì cose per te molto importanti. Ricorda che il footer deve soddisfare le esigenze degli utenti e allo stesso tempo permetterti di raggiungere i tuoi obiettivi. Ecco alcuni esempi di informazioni che un footer può contenere:

• politica sulla privacy e termini d’uso,
• dati di contatto,
• navigazione,
• link ai social media,
• iscrizione alla newsletter.

Landing Page - contenuto testuale

Dopo aver creato header e pulsanti adeguati, il passo successivo è creare il contenuto della pagina. È logico che tutto debba essere correlato all’offerta che stai promuovendo e incoraggiare l’acquisto di quel prodotto.

I principi fondamentali per creare contenuti chiari sono gerarchia e sistema: ogni blocco deve essere al suo posto. Puoi fare uno schizzo in PowerPoint o su un foglio di carta per provare a ricreare la struttura. Un’interfaccia chiara si ottiene solo se rispondi alle domande principali: cosa, dove, quando e perché. Le informazioni devono essere sequenziali: quale prodotto, perché l’utente ne ha bisogno. Puoi specificare le credenziali per aumentare la fiducia. I siti di LeadGeneration dovrebbero pubblicare i contenuti passo dopo passo nel modo più breve e semplice possibile. Minimizzare i passaggi aumenterà i tassi di conversione.

Sul mercato puoi trovare soluzioni interessanti che ti aiutano a creare e personalizzare il tuo sito, che appare perfetto su qualsiasi dispositivo. Uno degli esempi è Kubio - un plugin site builder che estende Gutenberg per offrire piena libertà di design e un’esperienza di creazione sito fluida. Permette di modificare intere pagine in un’unica interfaccia intuitiva senza dover conoscere la struttura dei template WordPress.

Questo sito offre una vasta galleria di template per darti un punto di partenza rapido per il tuo nuovo sito. Fornisce inoltre una libreria di blocchi con elementi come tabelle prezzi, gallerie immagini, slider e accordion per aiutarti a costruire pagine avanzate velocemente. Vale la pena menzionare che il sito salva automaticamente ogni area della pagina, come header, footer e contenuto, nei template corretti.

Caratteristiche principali di Kubio Builder:

• creare intere pagine in un’unica interfaccia intuitiva,
• opzioni avanzate di design e responsive,
• creare pagine combinando sezioni predefinite,
• vasta galleria di template,
• libreria di blocchi estesa.

Sei già arrivato fin qui?

Speriamo che, arrivato a questo punto, tu sappia già come progettare il tuo sito come un professionista. Non ci resta che augurarti buona fortuna!