👉 11 principi di progettazione Web che aumenteranno il tasso di conversione

31 idee intelligenti per la generazione di lead che è possibile implementare immediatamente (aggiornato)

Vuoi aumentare le conversioni sul tuo sito web? Come sanno gli esperti di marketing, il tuo design può fare la differenza. In questo post, condivideremo 11 principi di progettazione Web che aumenteranno il tasso di conversione.

Molti marketer insistono sull'importanza del SEO, dei social media, della creazione di magneti di piombo che convertono e simili, ma avere un eccellente design del sito Web per iniziare è spesso trascurato. Mentre tutti questi componenti sono importanti, il tuo web design non è solo un "bel viso": può effettivamente fare o distruggere i tuoi tassi di conversione.

Secondo una ricerca della Stanford University, il 46,1% delle persone afferma che il design di un sito Web è il criterio principale per decidere se un'azienda è credibile o meno. Quindi è estremamente importante che il tuo design sia professionale.

Anche se il tuo sito web è esteticamente gradevole, gioca un ruolo importante nell'ottimizzazione del tasso di conversione. Dato 15 minuti per consumare contenuti, due terzi delle persone preferiscono leggere qualcosa di ben progettato rispetto a qualcosa di semplice (secondo questo studio di Adobe). Quindi, se vuoi che le persone leggano i tuoi post sul blog, devono apparire attraenti.

Ma non è tutto. Se il tuo sito web non è attraente, le persone in realtà lasceranno del tutto il tuo sito. Il 38% delle persone, per essere precisi. Questo è un sacco di lead persi!

Quindi, indipendentemente dal fatto che il design sia il tuo forte, non puoi permetterti di ignorarlo. Impara il web design, assumi un libero professionista, impiega un designer o fai tutto il necessario!

Per cominciare, ecco una manciata di importanti principi di progettazione che ti daranno un impulso immediato e sostenibile nelle conversioni …

1. Segui la legge di Hick

La legge di Hick è una teoria popolare che viene citata da una varietà di individui per scopi diversi, ma viene frequentemente referenziata in termini di web design. Prende il nome dallo psicologo britannico William Edmund Hick, la legge afferma che il tempo necessario a un individuo per prendere una decisione è direttamente proporzionale alle possibili scelte che lui o lei ha.

In altre parole, aumentando il numero di scelte, aumenta anche il tempo di decisione.

Immagine tramite Usabilla

Potresti aver sentito parlare del famoso studio degli psicologi Sheena Iyengar e Mark Lepper in cui hanno scoperto che un tavolo da esposizione con 24 varietà di marmellata ha attratto meno interesse di un tavolo con solo sei varietà di marmellata. Infatti, le persone che hanno visto il display più grande erano solo un decimo come probabile comprare come persone che hanno visto il piccolo display!

Questo è un esempio della legge di Hick in azione: l'azione è persa in proporzione al numero di scelte presentate.

In termini di web design, puoi aumentare le conversioni limitando il numero di scelte che gli utenti hanno. La prima cosa che ti viene in mente quando pensi a dove ridurre il numero di scelte sul tuo sito web è la barra di navigazione. Ovviamente, non vuoi avere troppi collegamenti tra cui scegliere, altrimenti l'utente perderà del tutto l'interesse su di essi.

In altre parole, non farlo:

Tuttavia, la legge di Hick non si ferma qui. Pensa a tutte le diverse e importanti decisioni che gli utenti devono prendere sul tuo sito web, oltre a quale link di navigazione premere.

Qui ci sono solo alcune:

  • Decidere se utilizzare la barra di navigazione o scorrere di più la pagina
  • Scorrere i titoli per vedere quale post del blog leggere
  • Decidere se scaricare il tuo magnete guida, condividere il tuo post sui social media o lasciare un commento
  • Scegliere tra fare un acquisto, leggere recensioni di prodotti o cercare altri prodotti

Questi solo graffiano la superficie delle tante decisioni che i tuoi utenti devono prendere. È normale sentirsi sopraffatti cercando di capire da dove iniziare a ridurre queste decisioni, tuttavia, c'è un modo semplice per usare la legge di Hick in un pizzico …

Tutto quello che devi fare è installare un cancello di benvenuto a schermo intero nella tua home page. Un cancello di benvenuto copre l'intero schermo con una sola chiamata all'azione, quindi l'utente vede solo una scelta disponibile all'inizio. Se vogliono vedere più scelte, dovranno scorrere verso il basso.

Ciò ti consente di ridurre al minimo le distrazioni sulla tua home page, mantenendo intatte le funzionalità della tua home page.

Nel complesso, quando si applica la legge di Hick al tuo sito web, è importante per te sapere quali azioni sono più importanti per il tuo profitto. Ad esempio, vuoi che gli utenti optino per il tuo magnete guida o vuoi che inseriscano un prodotto nel loro carrello? Ogni pagina del tuo sito dovrebbe raggiungere un obiettivo principale.

Più puoi limitare le scelte dell'utente, più facile sarà il tuo sito Web e le tue conversioni aumenteranno vertiginosamente.

2. Sfrutta la regola dei terzi

The Rule of Thirds è un principio di fotografia popolare che può essere applicato anche al web design. Con la regola dei terzi, dovresti dividere visivamente un'immagine (o una pagina del sito web) in terzi (sia verticalmente che orizzontalmente).

Questo ti dà nove quadrati uguali:

Secondo la regola, le quattro intersezioni intermedie sono luoghi di interesse strategico. Quando gli oggetti vengono posizionati in questi punti, crea l'immagine o il design più efficace.

In termini di web design, puoi posizionare gli elementi più importanti della pagina in queste intersezioni per attirare l'attenzione delle persone su di loro, aumentando le conversioni.

Ad esempio, la homepage di Chris Lema ha gli elementi più importanti (la testimonianza e il pulsante "Inizia qui") nelle due intersezioni a sinistra:

L'immagine dell'eroe di John Lee Dumas contiene un pulsante di chiamata all'azione proprio nell'intersezione in basso a sinistra:

Kissmetrics inserisce anche il loro pulsante di chiamata al pulsante di azione nell'intersezione in basso a sinistra:

Nota come nessuno di questi siti web posiziona la barra di navigazione in alcun punto vicino agli incroci.Ciò aiuta a mantenere i visitatori concentrati sulla chiamata principale all'azione sulla pagina, piuttosto che portare l'attenzione a navigare da qualche altra parte.

Non è necessario progettare il tuo intero sito web rigorosamente secondo la regola dei terzi, ma puoi usarlo come strumento per aiutarti a posizionare i tuoi elementi più importanti.

Prova a scattare uno screenshot del tuo sito web (solo sopra la piega o solo la tua intestazione, non l'intera lunghezza della pagina perché nessuno guarda un sito web in questo modo), e dividerlo in nove caselle uguali. Quindi, puoi decidere se vuoi apportare qualche ritocco.

3. Rispetta la pazienza degli utenti

(O piuttosto, sonopazienza.) Si scopre che le persone sono incredibilmente impazienti, in particolare quando si tratta di navigare sul web.

Secondo uno studio del Gruppo Aberdeen, un semplice secondo ritardo nel tempo di caricamento della pagina si traduce in una riduzione del 7% delle conversioni!

Quindi, quando si tratta della velocità di caricamento della pagina, ogni secondo è importante. Per verificare la velocità della pagina e risolvere eventuali problemi, esegui il tuo sito attraverso uno o più di questi strumenti gratuiti:

  • Google PageSpeed ​​Insights
  • Pingdom
  • GTmetrix
  • KeyCDN
  • Sucuri

4. Usa spazio negativo

Nel web design, lo spazio bianco viene spesso definito spazio negativo. Lo spazio positivo è lo spazio che contiene tutti gli elementi sul tuo sito, mentre lo spazio negativo è tutto lo spazio vuoto in mezzo.

Nonostante il nome, lo spazio negativo è in realtà a positivo cosa nel web design, perché senza di esso il tuo sito web sarebbe illeggibile e inutilizzabile.

Lo spazio negativo non si riferisce solo allo spazio tra gli elementi più grandi della pagina, come lo spazio tra l'intestazione e il contenuto, o lo spazio tra la barra laterale e il contenuto. Si riferisce anche allo spazio tra tutti gli elementi più piccoli della pagina, come lo spazio tra i paragrafi, lo spazio tra le righe di testo e persino lo spazio tra le lettere.

Prestare attenzione a tutti delle forme di spazio negativo sul tuo sito serve a mantenere tutto leggibile, scansionabile (molto importante, perché è così che la gente legge i siti web) e facile agli occhi. E, naturalmente, tutto questo porta ad un aumento delle conversioni.

Flat.io utilizza una tonnellata di spazio negativo nella loro home page per mantenere l'attenzione sul loro invito principale all'azione, che è quello di registrarsi con Google o Facebook.

Ecco alcuni suggerimenti per assicurarti di utilizzare abbastanza spazio negativo:

  • Più piccolo è il tuo carattere, più spazio hai bisogno tra le lettere.
  • L'altezza della linea (definisce lo spazio sopra e sotto le righe di testo) dovrebbe corrispondere a circa il 150% delle dimensioni del carattere per la copia del corpo (in CSS, si legge:altezza della linea: 1,5;).Immagine via Pearsonified
  • Tuttavia, i caratteri più piccoli necessitano di un'altezza di riga più generosa. Notare la differenza che una maggiore altezza della linea produce nei due paragrafi seguenti:Immagine via W3.org
  • Suddividi grandi blocchi di testo in paragrafi più piccoli per aumentare lo spazio negativo tra loro e rendere più leggibili i post del tuo blog.
  • Aggiungi uno spazio bianco tra gli elementi più grandi sul tuo sito (barra laterale, intestazione, corpo, piè di pagina, ecc.) Utilizzando ampi margini e spaziatura.

5. Considera F-Layout

I ricercatori hanno scoperto che il comportamento naturale di un utente durante la navigazione sul Web è quello di leggere lo schermo in uno schema "F".

Ecco una heatmap che mostra dove gli occhi dell'utente tipicamente atterrano su una pagina web:

Immagine via Envato

Ed ecco come appare un wireframe:

Come puoi vedere, le persone guardano prima da sinistra a destra nella parte superiore dello schermo. Quindi scandiscono la pagina verso il basso, effettuando piccole incursioni nel contenuto. L'area di una pagina che ottiene la minor quantità di visibilità è in basso a destra.

Che cosa significa questo per incrementare le tue conversioni? Bene, puoi trarre vantaggio da questo comportamento posizionando gli oggetti più importanti e gli inviti all'azione lungo le linee di forma F, e posizionando oggetti di minore importanza nelle aree di visibilità inferiore.

Ad esempio, puoi posizionare la tua chiamata principale all'azione nella parte superiore della pagina verso il lato sinistro perché è lì che l'utente guarda prima.

Quindi, se desideri che il tuo utente resti in attesa di leggere i tuoi ultimi post sul blog, puoi posizionarli nella parte sinistra della pagina. Informazioni meno importanti (come gli annunci sponsorizzati) possono essere visualizzate nella barra laterale sul lato destro della pagina, e puoi inserire le informazioni che desideri ottenere con la visibilità più bassa (come una politica sui cookie) in basso a destra- angolo della mano.

6. Questioni di colore

"Il colore è un aspetto spesso sottovalutato del web design, ma può giocare un ruolo molto importante nell'usabilità e trasmettere il significato complessivo di un marchio, nonché l'umore generale del sito web", afferma il designer Tom Kenny. "Diverse combinazioni di colori possono evocare emozioni e reazioni diverse."

Quando scegli una combinazione di colori per il tuo sito web, assicurati di scegliere una combinazione che evochi l'emozione che vuoi che il tuo marchio trasmetta.

Un modo pratico per farlo è curare una board Pinterest con immagini che riflettano la tua visione per il tuo marchio. Quindi puoi caricare alcune di quelle immagini su Color Wheel di Adobe utilizzando l'icona della fotocamera nell'angolo in alto a destra dello schermo.

Una volta caricati, l'immagine creerà automaticamente una combinazione di colori in base ai colori della foto. Puoi anche spostare le selezioni in giro se desideri modificare i singoli colori.

Una volta che hai creato la tua combinazione di colori, c'è una cosa importante da tenere a mente che farà o distruggerà le tue conversioni:

Contrasto.

Usa il contrasto per mantenere evidenti e leggibili il testo, i titoli e i pulsanti di invito all'azione. In altre parole, i colori dei caratteri e dei pulsanti devono essere in contrasto elevato con lo sfondo (ad es.sfondo bianco con testo nero) e gli elementi che desideri evidenziare (ad esempio i pulsanti di iscrizione) devono avere un colore che si distingue dal resto del tuo sito.

Quindi, se dovessimo usare la combinazione di colori che abbiamo creato sopra, vorremmo fare sfumature di blu il colore predominante, e usare il giallo brillante con parsimonia come un invito al colore dell'azione (poiché fornisce il maggior contrasto).

Diamo un'occhiata a MailChimp per esempio. Quali elementi attirano l'attenzione?

Bene, ovviamente l'immagine al centro con la donna è molto accattivante, tuttavia i due pulsanti di chiamata arancione per l'azione sono davvero accattivanti. Questo perché sono in netto contrasto con tutti gli azzurri sul resto della pagina.

Quando si tratta di scegliere i colori giusti per i pulsanti, si consiglia di consultare il nostro articolo su quale pulsante colore converte meglio (ecco cosa mostra la ricerca).

7. Ricordati di K.I.S.S.

Probabilmente hai già sentito il mantra "Keep it Simple, Stupid". Bene, si applica anche al web design.

La semplicità è molto importante quando si tratta di generare conversioni. Ogni volta che crei una pagina, chiediti se c'è un modo per renderlo più semplice. Il risultato è di solito più esteticamente gradevole e quasi sempre si converte meglio.

Ricorda la legge di Hick? Qui entra in gioco, ma la semplicità non è solo limitando le opzioni. Si tratta di creare un design generale pulito che è ordinato e riduce al minimo le distrazioni.

Simile alla legge di Hick è il fatto che le persone possono gestire così tante informazioni contemporaneamente. Visivamente, se vediamo troppe cose tutte ammassate in una pagina, ci sentiamo sopraffatti e ci infastidisce. Creare una grande esperienza utente sul tuo sito web significa liberarti di nulla questo non è assolutamente necessario per il design.

Apple è uno dei più grandi esempi di semplicità nel web design, ed è così efficace che innumerevoli altri marchi hanno seguito l'esempio.

8. Usa la regola di 8 secondi

La regola generale è che hai solo 8 secondi per attirare l'attenzione di un visitatore, perché questa è la durata dell'intervallo di attenzione umano. (Sì, è più breve dell'attenzione di un pesce rosso!)

Hai solo una piccola finestra di opportunità per coinvolgere un utente quando atterra per la prima volta sul tuo sito, quindi fai in modo che quei secondi contino!

Ecco alcuni suggerimenti per attirare l'attenzione e aumentare le conversioni entro i primi 8 secondi:

  • Utilizzare un titolo ampio e orientato ai benefici, breve e preciso.
  • Usa immagini accattivanti che trasmettono il punto principale o lo scopo della tua pagina e attirano l'attenzione verso la tua chiamata principale all'azione.
  • Rendi i pulsanti di registrazione grandi, semplici e chiari.
  • Usa le parole di potenza per rendere la tua copia più allettante e coinvolgente.
  • Incorporare contenuti multimediali come video, audio o altri contenuti interattivi.
  • Usa gli effetti al passaggio del mouse sui tuoi pulsanti (ad esempio fai in modo che cambino colore al passaggio del mouse) per renderli più soddisfacenti a fare clic.
  • Usa popup di uscita animati per coinvolgere nuovamente i visitatori che hanno perso interesse.

9. Ricorda il principio di somiglianza della Gestalt

I principi di progettazione della Gestalt possono essere riassunti da questa affermazione dello psicologo della Gestalt Kurt Koffka: "Il tutto è altro rispetto alla somma delle parti. "Fondamentalmente, l'occhio umano e il cervello percepiscono un design unificato in un modo diverso rispetto a quello che percepivano i singoli componenti di quel progetto.

Il primo principio della Gestalt è la legge della somiglianza, che dice che l'occhio / cervello umano ama raggruppare oggetti simili. È un meccanismo che ci consente di dare un senso alle cose e di organizzare ambienti rumorosi.

In termini di web design, è possibile sfruttare questa legge raggruppando gli elementi che si desidera associare tra loro, come testimonianze, pulsanti di conversione o immagini.

Ad esempio, se hai una testimonianza straordinaria e desideri utilizzarla per aumentare le conversioni nel modulo di attivazione, puoi posizionarla direttamente sotto il modulo. Anche se la testimonianza non è stata scritta specificamente per il tuo magnete guida, l'utente assocerà i due perché si trovano nelle immediate vicinanze.

via Chris Lema

La legge della similarità è importante anche per l'esperienza dell'utente. Raggruppando tutti gli elementi principali del modulo di iscrizione insieme (il titolo, la descrizione e il pulsante di attivazione) e mantenendoli sufficientemente distanti dagli altri elementi della pagina (utilizzando lo spazio negativo), il cervello dell'utente sarà in grado di per elaborare le informazioni più rapidamente e in modo più efficiente.

Questo ovviamente è ottimo per le conversioni, soprattutto perché, come abbiamo detto nel punto precedente, le persone hanno una capacità di attenzione molto breve!

10. Usa i volti per aumentare la familiarità

Le persone amano i volti umani. "Quando vediamo una faccia, siamo automaticamente innescati per provare qualcosa o per entrare in empatia con quella persona", dice la designer Sabina Idler. "Se riconosciamo il contenuto di un sito web – come un problema, un dilemma, un'abitudine o qualsiasi altra cosa – ci sentiamo connessi e compresi".

Assicurati di incorporare volti nei tuoi articoli, case study e testimonianze, pagine di attivazione e pagine di destinazione per aumentare le conversioni.

Se sei il volto del tuo marchio, questo è semplice da fare. Fai un servizio fotografico e assicurati che il fotografo faccia un sacco di scatti orizzontali con spazio negativo su un lato di te. In questo modo, sarai in grado di mettere un invito all'azione, o del testo lì.

Ecco un esempio di Melanie Duncan:

Tuttavia, se non sei il volto del tuo marchio, puoi comunque utilizzare i volti sul tuo sito web assumendo modelli o utilizzando foto stock. Assicurati solo che i volti che scegli rappresentino il tuo marchio in modo accurato, in modo che l'utente sia in grado di relazionarsi al volto.

Vendeve, un social network per donne imprenditrici, fa un ottimo lavoro usando volti che riflettono il loro target demografico:

11. Fonte di immagini di alta qualità

Se c'è una cosa che può davvero trascinare giù la qualità di un post di blog o di un contenuto, sono immagini di bassa qualità.

In effetti, le immagini possono creare o distruggere un accordo. Bright Local ha rilevato che il 60% dei consumatori è più disposto a considerare i risultati di ricerca che includono immagini e un altro 23% ha maggiori probabilità di contattare un'azienda che presenta un'immagine.

Nello specifico, dovresti evitare di usare foto di stock senza vita che sono irrilevanti e insignificanti. La ricerca di Skyword ha rilevato che se i tuoi contenuti includono immagini convincenti, riceverai in media il 94% di visualizzazioni in più!

Quindi, invece di usare immagini blande, scatta foto di alta qualità che sviluppano associazioni positive con il contenuto e la sensazione personale. Ricorda: le persone come i marchi che sentono sono simili a se stessi. Se le tue immagini sono troppo "soffocanti" o "aziendali", allontanerai i tuoi visitatori.

Ecco alcuni dei nostri posti preferiti per la ricerca di fotografie di stock gratuite di alta qualità e personali:

  • Pexels
  • Morte a Stock
  • StockSnap
  • Unsplash
  • Studi superfamosi
  • Spazio negativo
  • Gratisography
  • Piccole immagini
  • Picjumbo
  • Kaboompics

Ora che hai compreso questi 11 principi del web design, mettili a frutto dando un'occhiata al tuo design esistente. Quali principi stai infrangendo?

Hai troppi collegamenti di navigazione? Spazio negativo insufficiente? O forse non hai volti sul tuo sito?

Molti di questi problemi sono risolti rapidamente e facilmente con poche modifiche. Puoi eseguire un controllo del tasso di conversione per vedere dove il tuo sito potrebbe utilizzare una spinta.

Inoltre, se ti è piaciuto questo articolo, puoi consultare il nostro altro post su 4 Suggerimenti di progettazione per migliorare i tassi di conversione del sito web.

Guarda il video: La terza rivoluzione industriale: una nuova e radicale economia di condivisione

Like this post? Please share to your friends:
Lascia un commento

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: