Servendo come porta d’ingresso virtuale della vostra azienda, questa pagina è responsabile per il disegno in una maggioranza del traffico del tuo sito web. Tuttavia, nonostante la sua importanza, molte aziende lottano per ottimizzarlo correttamente.

Vedi, la tua homepage deve indossare molti cappelli. Piuttosto che trattarla come una pagina di destinazione dedicata costruita attorno a una particolare azione, dovrebbe essere progettata per servire un pubblico diverso, da origini diverse. E per farlo in modo efficace, deve essere costruito con uno scopo. In altre parole, dovrai incorporare elementi che attraggono traffico, istruiscono i visitatori e invitano le conversioni.

Per migliorare le prestazioni della tua home page, controlla questi elementi che ogni homepage deve avere.

 Scaricare gratis: 77 Esempi Brillanti di Web Design

12 Elementi Critici per Ogni pagina iniziale del Sito Deve Avere

Salva

12 gli elementi fondamentali per un sito web di home page infografica

Salva

Condividi questa Immagine Sul Tuo Sito

Ciò che Si Dovrebbe Includere nella Vostra home page del Sito web Design

Titolo

Entro tre secondi, un sito web ha bisogno di raccontare ai visitatori ciò che l’azienda ha da offrire. Ecco dove entra in gioco il tuo titolo. Può essere solo poche parole, ma è uno dei pezzi più importanti di copia sul tuo sito web.

Molti tipi di persone potrebbero visitare il tuo sito web, e sarete fatica a trovare alcune parole che ha colpito a casa per tutti. Invece, scrivi il tuo titolo per indirizzare un terzo di quelle persone che hanno maggiori probabilità di essere felici con il tuo prodotto.

Mantieni il titolo stesso chiaro e semplice. Il titolo di Dropbox è un ottimo esempio: “Tutto ciò di cui hai bisogno per lavorare, tutto in un unico posto.”È semplice, ma potente: non c’è bisogno di decodificare il gergo per capire cosa fa davvero Dropbox.

Homepage del sito web Dropbox

Titolo secondario

Il titolo secondario dovrebbe integrare il titolo offrendo una breve descrizione di ciò che fai o di ciò che offri. Questo può essere fatto in modo efficace azzerando su un punto di dolore comune che il vostro prodotto o servizio risolve.

Ecco un esempio di un grande sottotitolo di Mirror: “Nascondersi in bella vista.”Si affina sul punto di vendita primario della palestra specchio: È una palestra completa a casa, un personal trainer e un piano di allenamento tutto nel comfort della tua casa senza occupare preziose metrature con le attrezzature. Sottotitolo della homepage del sito web Mirror che legge nascondersi in bella vista

Per ottimizzare i titoli per dispositivi mobili, utilizzare caratteri più grandi per offrire ai visitatori un’esperienza migliore. I caratteri piccoli potrebbero costringere i visitatori mobili a pizzicare e ingrandire per leggere e interagire con il contenuto del tuo sito. Il nostro consiglio? Utilizzare le opzioni di intestazione nell’editor di pagina. Le intestazioni H1 sono perfette per i titoli delle pagine: dovrebbe esserci solo un H1 su una pagina. Le sottovoci dovrebbero seguire l’ordine della gerarchia, H2, H3 … H6, e così via. Puoi avere molti di questi titoli, assicurati solo che siano in ordine. Ad esempio, non vorrai passare da un H1 a un H3: scegli invece un H2.

Primary Calls-to-Action

L’obiettivo della tua home page è quello di costringere i visitatori a scavare più a fondo nel tuo sito web e spostarli verso il basso l’imbuto. Includere due o tre call-to-action sopra la piega che le persone dirette a diverse fasi del ciclo di acquisto – e metterli in punti che sono facili da trovare.

Questi CTA dovrebbero essere visivamente sorprendenti, idealmente in un colore che contrasta con la combinazione di colori della tua home page pur adattandosi al design generale. Mantieni la copia breve-non più di cinque parole-e orientata all’azione, quindi costringe i visitatori a fare clic su qualsiasi cosa tu stia offrendo. Esempi di copia CTA sono “Registrati”,” Fissa un appuntamento “o” Provalo gratuitamente.”

Il sito web di Afterschool HQ presenta due CTA al di sopra della piega, entrambi orientati verso i direttori del programma che sono interessati a promuovere i loro programmi di doposcuola alle famiglie sul sito. La nota qui sotto il più lungo CTA “Crea il tuo profilo gratuito” offre ai visitatori la spinta di cui hanno bisogno per creare un account — il primo passo per diventare un fornitore HQ Afterschool.

Immagine di supporto

La maggior parte delle persone sono visive. Assicurati di utilizzare un’immagine (o anche un breve video) che indica chiaramente ciò che offri. Usa immagini che catturano emozioni, guidano l’azione e raccontano visivamente la storia di cui stai scrivendo.

Per ottimizzare le immagini per gli utenti mobili, utilizzare immagini di alta qualità con dimensioni file ridotte. (I clienti HubSpot non devono preoccuparsi di questo, poiché le immagini caricate sul software HubSpot vengono automaticamente compresse. Altrimenti, strumenti come TinyPNG faranno il trucco.) Inoltre, aggiungi sempre testo alt alle tue immagini per renderle più accessibili ai visitatori che usano screen reader e per aumentare i tuoi sforzi SEO.

La homepage di 4 Rivers Smokehouse è un ottimo esempio di immagini emotive: presenta una serie di video brevi, ad alta definizione e appetitosi che riproducono in loop dietro un semplice titolo, sottotitolo e CTA primario:

4 rivers smokehouse website homepage featured image with a cheese burger

Vantaggi

Non è solo importante descrivere ciò che fai, ma perché ciò che fai conta. Le prospettive vogliono conoscere i vantaggi di acquistare da voi, perché questo è ciò che li costringerà a restare.

Mantieni la copia leggera e facile da leggere e parla la lingua dei tuoi clienti. Evernote fa un ottimo lavoro di elencare i vantaggi sulla loro homepage in un modo avvincente, visivamente piacevole e facile da capire:

Evernote website homepage vantaggi

Social Proof

Social proof è un potente indicatore di fiducia. Il tuo prodotto o servizio potrebbe essere il migliore al mondo, ed è giusto affermare questa affermazione: è solo che le persone potrebbero non crederti a meno che non lo sentano anche da altre persone. E questo è esattamente ciò che fa la prova sociale.

Includere solo alcune delle vostre migliori (brevi) citazioni sulla home page, e link a casi di studio, se applicabile. L’aggiunta di un nome e una foto dà a queste testimonianze più credibilità. Lessonly chiodi questo sulla loro homepage con incandescente testimonianze da clienti reali.

Lessonly website homepage testimonianze e recensioni

Navigazione

Il design e il contenuto nella tua homepage di navigazione potrebbe significare la differenza tra una conversione di un sito web e un rimbalzo. Per ridurre la frequenza di rimbalzo, dai ai tuoi visitatori un percorso chiaro alle pagine di cui hanno bisogno direttamente dalla home page. Rendere visibile il menu di navigazione nella parte superiore della pagina e organizzare i collegamenti in una struttura gerarchica.

Nessuno conosce il tuo sito web meglio di quelli che hanno contribuito a progettarlo, quindi assicurati di condurre test utente per assicurarti che sia semplice e intuitivo per i visitatori trovare ciò che stanno cercando sul tuo sito. Includere una casella di ricerca, se è possibile. (Leggi questo post del blog per ulteriori suggerimenti di navigazione del sito web.)

Ecco un esempio di un design di navigazione chiaro e ben strutturato da Slim & Husky’s Pizza Beeria homepage:

Slim and huskys website homepage navigation

Offerta di contenuti

Per generare ancora più contatti dalla tua homepage, presenta un’offerta di contenuti davvero eccezionale, come un white paper, un ebook o una guida. Le persone che potrebbero non essere pronte ad acquistare potrebbero piuttosto scaricare un’offerta che fornisce loro maggiori informazioni su un argomento a cui sono interessate. Se hai bisogno di ispirazione, qui ci sono diversi tipi di contenuti tra cui scegliere.

Chiamate secondarie all’azione

Includi CTA secondari sulla tua homepage per offrire ulteriori opportunità di conversione per i potenziali clienti che non sono interessati al tuo obiettivo primario. Pensate a loro come il piano di emergenza: Offrono un altro percorso per i visitatori che non sono ancora pronti per qualcosa di alto impegno come si sta chiedendo.

Mentre i tuoi CTA primari dovrebbero essere sopra la piega, posiziona i CTA secondari sotto la piega per dare ai visitatori le cose su cui fare clic quando scorrono verso il basso. Ad esempio, sotto la piega sulla home page di Spanx, troverai tre inviti all’azione chiaramente etichettati che offrono alle persone che hanno fatto scorrere fino a quel punto alcune opzioni su cui fare clic. Questi CTA secondari sono per due diversi tipi di conversioni: uno all’estrema sinistra per off 20 off e un altro, “acquista ora” per esplorare il catalogo online.

Spanx website homepage CTA secondari

Caratteristiche

Oltre ai vantaggi, elencare alcune delle caratteristiche principali. Questo dà alle persone più di una comprensione di ciò che è fornito dai vostri prodotti e servizi. Ancora una volta, mantenere la copia leggera e facile da leggere. Dropbox for Business, ad esempio, non evita di mostrare una matrice di funzionalità direttamente sulla loro homepage sotto la piega.

dropbox for business website homepage caratteristiche

Risorse

Anche in questo caso, la maggior parte dei visitatori del tuo sito web non sarà pronta per l’acquisto … ancora. Per le persone che sono alla ricerca di ulteriori informazioni, offrire un link a un centro risorse dove possono sfogliare le informazioni rilevanti. Non solo questo li tiene sulla tua pagina web più a lungo, ma ti aiuta anche a stabilire la tua credibilità come leader di pensiero nel tuo settore.

Lovesac aggiunge un collegamento risorse al piè di pagina sotto la piega. Si noti come ciascuno di questi CTA secondari coprono più fasi del ciclo di acquisto: un link di carta di credito per aiutare i clienti a comprare i loro mobili facilmente, una guida campione di tessuto per coloro che sono ancora alla ricerca per il colore perfetto prima di effettuare un acquisto, e un catalogo online per le persone che sono nel mercato per

homepage del sito lovesac con risorse e CTA nel piè di pagina

Indicatori di successo

Oltre alle storie di successo dei clienti, sia i premi che il riconoscimento possono anche aiutare a ispirare una buona prima impressione. La vostra azienda è un ristorante acclamato dalla critica? Sei stato votato miglior nuova applicazione di quest’anno? Lasciate che i visitatori homepage conoscere le vostre realizzazioni. Come prova sociale, darà il vostro business più credibilità a coloro che non ti conoscono.

Sulla homepage di Calendly, ad esempio, troverai i nomi di organizzazioni famose che li hanno riconosciuti, come Gartner e Dropbox.

Calendly website homepage

Una Homepage da visitare

La homepage del tuo sito è la prima introduzione che ogni visitatore avrà alla tua attività. Prima di decidere di diventare un cliente, esamineranno la tua home page per avere un’idea di ciò che vendi, perché è importante per loro e come possono beneficiare di ciò che hai da offrire.

Fai una prima impressione brillante con una homepage che incorpora gli elementi sopra descritti. E per ulteriori ispirazioni, dai un’occhiata a splendidi esempi di homepage scaricando il lookbook gratuito qui sotto.

Nota del redattore: Questo post è stato originariamente pubblicato nel gennaio 2012 ed è stato aggiornato per freschezza, accuratezza e completezza.

esempi di progettazione di homepage, blog e landing page brillanti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.