I migliori progetti di homepage su Internet e come copiarli

Le persone hanno predetto la “morte della homepage” per anni.

Ma la homepage non andrà mai via.

Ogni sito ha bisogno di una porta d’ingresso per accogliere i suoi nuovi utenti per la prima volta e dare loro la disposizione della terra.

Tuttavia, la homepage si sta evolvendo.

Anche solo pochi anni fa, le homepage contenevano tonnellate di informazioni diverse su ogni aspetto dell’azienda.

Erano pieni di link e posti dove andare., La società ha voluto evidenziare tutti i vari aspetti di ciò che ha fatto.

Il problema è che si è ritorto contro.

C’erano semplicemente troppe opzioni. Era travolgente e distraente per gli utenti.

Uno dei modi migliori per migliorare rapidamente le conversioni di progettazione di siti web è di abbandonare le caratteristiche che sminuiscono l’esperienza utente.

I cursori del carosello sono un esempio perfetto. Sono comunemente usati per mostrare più cose diverse contemporaneamente.

Ma questa versatilità ha spesso un costo. I test hanno dimostrato che danneggiano conversioni, SEO e tempi di caricamento della pagina.,

Vedi quella bassa percentuale di clic nell’immagine sopra? Non e ‘ un buon segno.

In realtà, questo è l’intero motivo per cui ho creato Crazy Egg. Se riesci a vedere che gli utenti non fanno clic su ciò che dovrebbero, puoi modificare il design prima che sia troppo tardi.

Le migliori homepage tengono conto dell’esperienza utente.

Ecco alcuni dei miei disegni preferiti homepage. Puoi iniziare a copiarli per ottenere risultati simili.

Bills.com

La prima grande tendenza da evidenziare è l’homepage come pagina di destinazione.,’

Ha molto senso quando ci pensi.

Il vostro obiettivo finale è quello di guidare fino lead e vendite. Il sito web ‘brochure online’ è morto e andato per anni.

La parte difficile è conoscere l’approccio migliore per generare lead sulla homepage in modo da non spaventare tutti e costringerli a rimbalzare.

Ad esempio, è molto chiedere ai nuovi visitatori che non hanno mai nemmeno sentito parlare di te di acquistare un grande prodotto.

Quindi, invece, hai bisogno di un approccio più semplice e meno invasivo per ottenere ciò che vuoi.

Ed è per questo che amo cosa Bills.com sta facendo.,

Ad esempio, vai al loro sito e vedrai il seguente cursore:

Ora puoi scorrere interattivamente avanti e indietro per scegliere l’importo del debito che potresti dover. È così semplice che un bambino può farlo.

È anche l’unica opzione che ti danno finora! In questo modo non ti senti sopraffatto o distratto.

Dopo aver cliccato su “Continua”, ti chiedono se sei indietro sui pagamenti o meno (e in tal caso, per quanto tempo).

Ti stanno qualificando qui., Se non sei indietro sui pagamenti, potrebbero non essere in grado di aiutarti molto (leggi: fare soldi da te).

Possono usare questa domanda per personalizzare la risposta che alla fine ti daranno. Ciò può anche aiutare a dividere internamente quale persona o reparto sarà meglio gestire il tuo caso se diventi un cliente.

Il passo successivo è selezionare in quale stato vivi:

Ancora una volta, questo ti qualifica ulteriormente e solleva anche potenziali problemi con le restrizioni di stato (che potrebbero dover affrontare in seguito).,

L’ultimo passo è quello che volevano da sempre: le tue informazioni personali!

KlientBoost chiama questa tecnica “Breadcrumb”, perché invece di spaventare le persone con la forma iniziale, li stai facendo fare piccoli micro impegni.

Ogni micro impegno li porta un po ‘ più avanti fino a quando non sono già così investiti da dover terminare il processo.

Ad esempio, se avessero chiesto il tuo nome e numero di telefono in anticipo, potrebbe averti spaventato.,

Tuttavia, convincendoti a impegnarti prima in questi altri passaggi, si danno un colpo migliore alla fine convertendoti in un nuovo cliente.

KlientBoost ha utilizzato con successo questa tecnica per aumentare i tassi di conversione dall ‘ 1% a quasi il 20%.

Il trucco con queste pagine di destinazione multi-step è iniziare con la domanda meno minacciosa possibile.

Deve essere correlato a come alla fine li aiuterai. Tuttavia, dovrebbe essere incredibilmente semplice per qualcuno fornire.,

Ovviamente, non ci dovrebbe essere menzione zero del prezzo o dei loro dati personali a questo punto.

Potrebbe anche essere semplice come chiedere un codice postale.

Il passo successivo diventa un po ‘ più specifico, suggerendo il livello di servizio di cui avranno bisogno.

Dopo averli impegnati in questi primi due passaggi, puoi far apparire alcune domande più personali per seguirle in seguito.

Noterai che Bills.com utilizza anche contenuti interattivi per tenervi impegnati sul loro sito.

Qzzr è uno strumento che è possibile utilizzare per rendere questo accada sul proprio sito., Hanno già pre-costruito ‘widget ‘ che possono essere impostati in pochi minuti (al contrario di pagare uno sviluppatore per fare su misura per voi).

Victoria’s Secret ne usa uno che chiede ” Qual è il tuo personaggio di fitness?”Il Food Network chiede:” Possiamo indovinare la tua età in base alle tue preferenze alimentari?”

In ogni caso, questi marchi utilizzano una domanda divertente che ti coinvolge. Non c’è nessuna minaccia nel rispondere a queste domande inizialmente.

Un altro strumento alternativo è SnapApp., Creano anche calcolatrici interattive e persino infografiche che le persone possono puntare, fare clic e regolare per vedere nuovi risultati.

Ecco un divertente esempio di quanto sia vano il tuo marketing che ti porta a rispondere alle domande in modo diagramma di flusso.

Una raccomandazione finale dello strumento è Brackify. Quel nome suona come “parentesi”, giusto?

Beh, questo è esattamente il punto! È possibile creare staffe interattive o concorsi per quasi tutto, e lasciare che i clienti o visitatori del sito entrare in azione.,

Ecco come potrebbe apparire se qualcuno chiedesse quale sia il tuo film Disney preferito:

Kiva

Kiva è una piattaforma di microlending.

Collegano imprenditori nei paesi del terzo mondo con donatori e sponsor provenienti da altre parti del mondo.

Ad esempio, diciamo che un imprenditore in India ha bisogno di $1.000 per una nuova macchina da cucire commerciale in modo che possano produrre e vendere il doppio dei prodotti.,

Così le persone provenienti da tutto il mondo possono donare in piccole quantità e poi essere rimborsate nel corso di un anno o due dal nuovo flusso di cassa che questo imprenditore è in grado di generare.

La homepage di Kiva è relativamente semplice, ad essere onesti.

Tuttavia, come abbiamo visto, va bene!

Semplice e diretto può mantenere le persone concentrate su ciò che è importante (dandoti le loro informazioni in cambio di qualcosa di valore).,

Il problema è che, mentre le persone potrebbero visitare la tua home page e essere interessati a quello che fai, non c’è sempre un motivo valido per kickstart quel processo.

A volte, devi essere un po ‘ più aggressivo o assertivo per far loro sapere il valore sorprendente che possono ottenere.

In questo caso, Kiva ha deciso di utilizzare una sovrapposizione popup per ottenere semplicemente opt-in newsletter via email.

Volevano iniziare in piccolo (e non usare qualcosa di minaccioso come abbiamo imparato nell’ultimo passaggio).,

Quindi Kiva è andato con una semplice opzione di posta elettronica per ottenere almeno qualcosa da qualcuno prima che rimbalzassero e lasciassero il sito.

Ecco come appariva la nuova sovrapposizione offerta:

Sovrapposizioni come questa sono difficili da realizzare.

Alcuni spettatori li odiano, ovviamente. Ma può pagare dividendi enormi se si posiziona il contenuto e offrire bene.

È anche possibile controllare come o quando si mostra. Ad esempio, puoi decidere di attivarlo solo per i nuovi visitatori (rispetto a quelli di ritorno) e solo quando il loro cursore inizia a spostarsi fuori dalla finestra.,

Questi spesso creano un effetto ‘lightbox’ che de-enfatizza tutto il resto in background in modo che le persone guardino direttamente la tua nuova offerta.

Ecco un altro esempio di quello che uso per i prossimi webinar:

Ci sarà sempre una percentuale del tuo pubblico che odia queste cose.

Quindi devi stare attento a come li usi. (Devi anche fare attenzione agli errori di progettazione che rovineranno anche il tuo SEO.)

Tuttavia, i risultati possono spesso valere il rischio.,

Kiva ha deciso di dividere testare questo overlay per vedere come il proprio pubblico ha risposto.

Hanno collegato Unbounce con MailChimp (per l’eventuale opt-in via email) e hanno deciso di mostrare inizialmente il nuovo overlay solo al 50% del traffico. Che è venuto fuori a circa 5.000 visitatori.

Solo quel singolo overlay ha catturato un 3-4% di visitatori in più.

Incoraggiato, Kiva continuava a iterare con disegni migliori e diverse opzioni per raddoppiare quel numero al 6-7%.

Non male per un pop-up “fastidioso”, giusto?

H. Bloom

Che cosa è esattamente H. Bloom?,

Sono un servizio di consegna di fiori di lusso. Si può andare avanti, pugno nelle vostre preferenze, e si prenderanno cura di tutto il resto.

Quindi sono perfetti per l’imprenditore oberato di lavoro per non dimenticare mai i loro cari.

Diamo una rapida occhiata alla loro homepage, e poi ti dirò perché mi piace così tanto:

Prima di tutto, hanno la loro forma sopra la piega.

Questo rende l’obiettivo di questa pagina chiaro a destra fuori del blocco. I tuoi clienti hanno colpito questa pagina e non hanno bisogno di indovinare cosa dovrebbero fare dopo.,

La forma che è front-and-center mantiene le cose belle e chiare.

La maggior parte dei visitatori del sito web tendono a concentrare la maggior parte della loro attenzione sopra la piega ancora (anche se sono sempre più abituati a scorrere verso il basso).

Il modo più semplice per migliorare l’ottimizzazione del modulo di generazione di lead è mantenere il CTA nel normale schema degli occhi che le persone già usano.

Ad esempio, uno studio è stato fatto anni fa che ha monitorato come e dove gli occhi delle persone hanno monitorato quando hanno colpito la tua pagina. Hanno scoperto che le persone tendono a scansionare il tuo sito Web in una forma “F”.,

Quindi la prima sezione della homepage di H. Bloom dice immediatamente al lettore cosa dovrebbero fare sulla pagina.

E poi la sezione successiva nel mezzo spiega esattamente come funziona il loro processo.

La progressione logica, passo dopo passo, aiuta le persone a capire cosa ci si aspetta da loro e quanto sia difficile o dispendioso in termini di tempo qualcosa di simile sta per essere.,

Questo è fondamentale perché sta immediatamente impostando le aspettative e superando la potenziale obiezione che potrebbe richiedere troppo tempo per iniziare.

Funziona lungo le stesse linee di una barra di avanzamento.

Ad esempio, le barre di avanzamento hanno il potere di aumentare le conversioni del 28%, perché assicurano rapidamente allo spettatore che non c’è molto da fare per ottenere la loro ricompensa.’

Il mio ultimo pezzo preferito di questa pagina è la freccia sottile usata come spunto visivo per aiutare gli spettatori di transizione da una sezione all’altra.,

È un piccolo dettaglio, ma aiuta a dare agli utenti il messaggio di continuare a leggere la pagina, soprattutto se non sono ancora pronti a compilare il modulo e iniziare al più presto.

Basecamp

Prima che Basecamp fosse “Basecamp”, erano 37 segnali con più prodotti software diversi.

E nel corso degli anni hanno costantemente iterato per vedere cosa funziona meglio per guidare nuove iscrizioni di prova gratuite.,

Ecco una delle loro varianti attuali homepage che utilizzano una tecnica di copywriting classico che è stato intorno per decenni:

Leggere la prima riga di quella pagina reale veloce.

“La tua attività sta crescendo e sei sommerso. Il modo in cui lavori non funziona più.”

Continuano a elencare alcuni dei vari problemi e problemi che probabilmente ti aspetti (imprenditore oberato di lavoro).

Questo è un esempio da manuale della tecnica di copywriting PAS., Ecco come funziona:

• Problema: Si taglia rapidamente al cuore della questione confermando chiaramente il problema principale contro cui si trova la prospettiva (ad esempio ” Sei sommerso.”).
• Agitate: quindi si passa a nominare tutti i vari punti di dolore e sintomi che stanno attualmente vivendo a causa di quel problema (ad esempio “e-mail e testi disordinati”, “roba che scivola attraverso le fessure”, ecc.).
• Soluzione: ora presenti la tua soluzione come il salvatore che toglierà tutti questi problemi per loro (ad esempio ” È tempo di Basecamp.”).,

Ecco un altro rapido sguardo a quella homepage ora che è possibile identificare la formula che stanno seguendo.

Troppe aziende vogliono lanciare direttamente le caratteristiche ei vantaggi del loro prodotto sulla homepage.

Tuttavia, il problema è che i visitatori del tuo sito non sono ancora arrivati.

Queste persone potrebbero non riconoscere gli stessi problemi nella loro vita, quindi la “soluzione” che stai vendendo non risuona con loro. Lasciano il tuo sito senza convertire di conseguenza!,

Noterai anche che questa homepage è pesante di testo, il che è insolito rispetto ad altri siti Web di software.

Questo è un altro trucco che hanno imparato dopo aver testato diverse versioni negli ultimi anni.

Anni fa, hanno testato una classica pagina di destinazione a forma lunga e inizialmente hanno visto un enorme salto nelle conversioni (37.5%).

Tuttavia, non erano ancora soddisfatti e pensavano di poter fare meglio.

Così hanno provato un altro test, ma questa volta utilizzando una testimonianza del cliente contro il design originale.,

Il cliente è uscito in cima con un aumento di conversione del 102%.

Hanno poi seguito questo con un altro test per vedere se la lunghezza della copia aveva qualcosa a che fare con i risultati. (Risposta: non è così.)

Quindi puoi vedere che si attengono ancora a un formato pesante nel complesso. Tuttavia, non è necessariamente la lunghezza di quella copia che fa la differenza.

Invece, tutto si riduce alle parole specifiche utilizzate e alla formula intelligente per assicurarsi che i loro clienti sappiano esattamente quali problemi risolve Basecamp.,

MailChimp

La homepage della società di software di email marketing, MailChimp, presenta una delle migliori lezioni su come progettare una homepage che converte.

Tuttavia, a prima vista, non sembra molto:

Una delle prime cose che noterai è che c’è un singolo pulsante sopra la piega.

Non c’è letteralmente nient’altro da cliccare qui!

Diminuendo le opzioni e le scelte ha dimostrato di contribuire a migliorare i tassi di conversione., L’idea è che più decisioni costringi i visitatori a fare, più tempo ci vuole per decidere cosa fare (se non altro).

Homepage di MailChimp offre anche una lezione di spazio bianco (o spazio negativo).

Ad esempio, abbiamo tutti provato a leggere un post sul blog su un sito web, solo per sentirci troppo “angusti” o ingombri. Questa è una massiccia bandiera rossa che il tuo blog design puzza!

Invece, una pagina ben progettata dovrebbe essere aperta e ariosa come quella di MailChimp.

Lo spazio negativo attorno al CTA primario aiuta ad aumentare il suo significato sulla pagina., Quindi le persone sono quasi costrette a prestare maggiore attenzione ad esso.

Scorriamo un po ‘ la pagina e vediamo come giocano con la spaziatura orizzontale per monopolizzare anche la tua attenzione.

Stanno usando un trucco fotografico chiamato “regola dei terzi” che dice che dovresti posizionare gli elementi della pagina più importanti nel mezzo del mirino.

Il contenuto in quella sezione della homepage è fuori centro per un motivo! Finisce per modellare o controllare il modo in cui vogliono che tu visualizzi il contenuto della pagina in ordine di importanza.,

In questo modo possono aiutarti a dare sottilmente la priorità a una gerarchia di pagine che dice “Questa è l’opzione #1, questa è l’opzione #2, ecc.”

Conclusione

Le migliori homepage sul web oggi potrebbero avere obiettivi diversi.

Tuttavia, ce n’è sempre uno grande a cui tornano. Generazione di piombo.

Tutti i siti web oggi hanno bisogno di vendere.

Ciò non significa che debbano convincere le persone ad acquistare subito. Ma ha bisogno di arrivare a quel punto alla fine.

Le migliori homepage utilizzano vari fattori, dalle funzionalità interattive al design, per istruire sottilmente l’utente su cosa fare dopo.,

Che ci crediate o no, anche questo dovrebbe essere nel miglior interesse del visitatore.

Aiuta a semplificare la loro vita prendendo meno decisioni, mentre anche portarli alla destinazione prevista più velocemente (in modo che possano risolvere il problema o il punto di dolore che stanno vivendo).

Qual è il tuo esempio di homepage preferito e cosa ti piace?