Home page Design 101: cosa includere nella pagina iniziale del vostro sito web

La home page del vostro sito web serve sia per introdurre il vostro brand sia per creare una serie di istruzioni codificate che aiutino i clienti, nuovi e non, a trovare in quello che offrite ciò di cui hanno bisogno.

Ogni dettaglio della home page dovrebbe essere costruito per dare una forte prima impressione e incoraggiare una determinata azione, che sia vendere il prodotto o ottenere nuovi iscritti alla newsletter.

Non esiste un unico modo giusto di creare la vostra home page, ma ci sono alcuni suggerimenti che dovreste tenere a mente in fase di progettazione. Si tratta di consigli utili sia che stiate creando l’home page del vostro primo negozio online, sia che vogliate rivedere questa parte fondamentale del sito web.

Cosa dovete chiedervi quando progettate la vostra home page?

Una home page di successo per un’attività potrebbe essere insoddisfacente per un’altra.

Se state scegliendo tra varie opzioni di design e non sapete esattamente in quale direzione andare, ecco alcune domande che vi aiuteranno a decidere:

• Cosa volete che faccia chi visita il vostro sito? (ad esempio, fare un acquisto, iscriversi alla mailing list, ecc.)
• Avete reso quell’operazione abbastanza semplice?
• Quanti passaggi sono necessari per completare l’operazione?
• Di quante informazioni hanno bisogno i visitatori per procedere al prossimo step?
• Ci sono dei passaggi che si possono eliminare?

A volte chi visita un sito sa cosa vuole, altre volte no. Dovete progettare la vostra home page tenendo in considerazione entrambi i casi, e assicurarvi che le decisioni che prendete siano allineate con i vostri obiettivi primari.

Una home page ben fatta deve accogliere i visitatori che cercano un prodotto specifico e attirare l’attenzione degli altri.

Quali risultati volete ottenere con il design della vostra home page?

In media, i visitatori si soffermano 10-20 secondi sulla home page. Dal punto di vista del design questo significa che dovete rendere il flusso di navigazione chiaro, in modo che i visitatori possano scegliere rapidamente il percorso migliore per se stessi (e per la vostra attività).

È importante che la scelta sia rapida, per non attivare il fenomeno psicologico chiamato “evitamento delle decisioni”, ovvero la tendenza degli esseri umani ad evitare una decisione che richiede troppo tempo per essere presa.

Evitare di prendere una decisione nella home page significa “rimbalzare” uscendo dalla pagina o premendo il pulsante “indietro”. Se non volete che ciò accada, il primo compito della vostra home page deve essere quello di convincere i potenziali clienti a restare.

Per fare ciò, dovete comprendere bene il ruolo dei terreni più preziosi del vostro sito web.

1. Contenuti above the fold che incoraggiano l’azione

Quando i web designer parlano di un’area della homepage chiamata above the fold (letteralmente “sopra la piega”, ovvero, in un giornale, la parte più alta e visibile della prima pagina), si riferiscono a ciò che i visitatori vedono prima di scorrere la pagina.

Per decidere cosa deve stare above the fold e come ciò accompagnerà il resto della home page, focalizzatevi sulle azioni che il visitatore deve compiere quando arriva sul vostro sito, sulle informazioni di cui ha bisogno subito e su come facilitare le sue decisioni.

Prendete la home page di Morning Recovery, ad esempio. Morning Recovery vende come unico prodotto un rimedio per i postumi della sbornia. L’obiettivo è indirizzare i potenziali clienti all’acquisto del loro prodotto di punta, perciò la sezione above the fold presenta immagini dai colori vivaci e incentrate sul prodotto, con un invito all’azione chiaro che guida i visitatori all’acquisto.

In questa home page ci sono due decisioni rapide che un utente può prendere:

1. Procedere all’acquisto
2. Oppure scorrere verso il basso per ulteriori informazioni below the fold (sotto la piega): recensioni, video e informazioni sugli ingredienti del prodotto. 

La maggior parte delle intestazioni (header) dei siti web utilizza una combinazione di titoli che attirano l’attenzione, sottotitoli persuasivi e immagini accattivanti above the fold per tenere i nuovi visitatori sul sito e farli familiarizzare con il brand.

Tuttavia, ci sono molti altri modi per catturare l’interesse del cliente fin dall’inizio, come includere un banner promozionale sopra la navigazione per pubblicizzare un’offerta speciale o la spedizione gratuita.

2. Navigazione chiara

La forza di una pagina web sta nella sua semplicità di navigazione. Potrebbe sembrare in contraddizione con la necessità di considerare diversi tipi di visitatori, ma ha senso se pensiamo a quanto velocemente le persone si spostano da una pagina all’altra.

L’intestazione dovrebbe essere il più diretta possibile, dando la priorità ai percorsi più importanti per la maggior parte dei visitatori. Andy Crestodina, direttore strategico di Orbit Media Studios, raccomanda di non avere nella home page più di sette link.

Gli esseri umani usano un metodo di memorizzazione organizzativa chiamato “chunking”(dall'inglese: suddivisione in blocchi), che consiste nel suddividere l’informazione in unità mentali più piccole dette appunto “blocchi”.

Meno “blocchi” ci sono, più è facile memorizzare. In un autorevole articolo pubblicato nel 1956, il professore di psicologia George Miller giunge alla conclusione che la nostra memoria a breve termine è generalmente in grado di contenere solo sette nozioni alla volta.

I siti con troppe opzioni di navigazione possono sembrare sovraccarichi e disordinati, ed è più probabile che i visitatori li abbandonino o prendano la strada sbagliata. Una buona pratica è ordinare i link da sinistra a destra con le pagine più importanti a sinistra.

Se avete molti prodotti e molte collezioni, inserite nella vostra home page le collezioni più importanti e usate un mega menu o un menù a tendina per creare la navigazione secondaria.

La navigazione secondaria è un ottimo modo per organizzare i prodotti e le pagine, facilita l’esplorazione ed evita di travolgere i clienti da subito con un eccesso di scelte.

La home page di UNCONDITIONAL, ad esempio, bilancia una navigazione minimale e l’inventario completo grazie a un menù a tendina ben organizzato.

Alcuni siti web hanno anche collegamenti nell’header alle pagine chi siamo, contatti, FAQ, o ad altre pagine che supportano i loro obiettivi primari.

Se però vi accorgete che chi visita queste pagine non viene persuaso ad agire come vorreste, probabilmente significa che quei link distolgono l’attenzione dal vostro obiettivo. In questo caso è meglio aggiungere i collegamenti nel footer.

3. Immagini accattivanti

L’evitamento delle decisioni si applica non solo alla navigazione ma a tutti gli altri elementi della vostra home page. Riconoscere i limiti di attenzione dell’utente vi aiuterà a progettare la vostra home page mettendo in evidenza solo ciò che conta di più.

Che si tratti di promuovere prodotti o collezioni o di acquisire nuovi contatti (lead), lo scopo delle vostre immagini è di attirare l’attenzione degli utenti non appena arrivano sul vostro sito.

Ecco alcuni modi per incorporare elementi visivi nella sezione above the fold della home page:

Immagine con testo sovrapposto

Questo stile di immagini spesso unisce una singola immagine potente, una copia diretta e una call to action. Funziona soprattutto se vogliamo concentrare l’attenzione su un’offerta in particolare posta above the fold, ad esempio uno sconto limitato o una collezione stagionale.

Slideshow

È possibile scegliere di includere una presentazione con ciascuna delle slide che pubblicizzano una vendita specifica, un gruppo di prodotti o una foto prodotto di alta qualità.

Chi ha un negozio che vende un’ampia selezione di prodotti di diverse categorie spesso sceglie questo approccio, in modo da promuovere più collezioni o pagine.

Le slide vanno messe in ordine di importanza, partendo dalla più importante. È meglio limitare le immagini a tre, dato che gli utenti non si soffermano su una singola foto a lungo prima di passare alla successiva.

Video

Alcuni brand traggono maggiore beneficio da una home page visiva che racconta la loro storia. Per attirare l’interesse dei visitatori su prodotti innovativi o complessi, ad esempio, potrebbe essere necessario illustrare come utilizzare il prodotto.

Prendiamo l’homepage di Bottle Cutting Inc. Molti visitatori probabilmente non sanno ancora di avere bisogno del prodotto, quindi lo scopo della home page è suscitare la loro curiosità attraverso una dimostrazione video, che è il primo passo nel processo di conversione.

Poiché le immagini hanno un impatto così immediato e significativo, è importante assicurarsi che siano di alta qualità e rappresentative del vostro brand.

Se non siete fotografi potete assumere qualcuno che lo sia o utilizzare il selettore di immagini nell’editor del tema di Shopify per selezionare dalla nostra raccolta di foto gratuite.

4. Una call to action diretta

Pensate a una call to action come a un cartello di uscita dell’autostrada: deve essere breve, difficile da perdere e deve indirizzare chi guida verso la strada da prendere.

Le vostre call to action e i relativi link devono essere in linea con i passaggi successivi che un cliente può intraprendere per raggiungere gli obiettivi principali della vostra home page. Potrebbe trattarsi quindi del link alla nuova collezione o a un video esplicativo che permetta all’utente di avere maggiori informazioni.

L’utente deve capire immediatamente dove cliccare, perciò il pulsante della call to action deve distinguersi dal design circostante. Più tempo impiega un utente a trovare la call to action, più è probabile che si confonda o clicchi uscita.

La home page di PopSockets, che vediamo sopra, fa un ottimo lavoro nel percorso di conversione dell’utente. Immagini del prodotto brillanti vengono utilizzate per catturare l’attenzione, mentre la call to action è centrale e frontale in bianco e nero (in contrasto con lo sfondo colorato).

Niente di ciò che è posto in alto nella pagina distrae dall’obiettivo principale della home page: indirizzare l’utente a sfogliare la loro ultima linea di prodotti. Scorrendo verso il basso si trovano ulteriori CTA per acquistare altri prodotti.

5. Un accesso semplice al carrello

Il carrello è parte integrante della home page per la maggior parte dei siti di ecommerce.

Rendere la navigazione il più intuitiva possibile significa anche assicurarsi che il carrello sia semplice da individuare. Un carrello “fisso” (a volte chiamato carrello slide-out, disponibile in alcuni temi di Shopify) è un carrello presente e disponibile sullo schermo durante tutta la navigazione, solitamente nell’angolo in alto a destra.

Funziona ancora meglio se permette al cliente di visualizzare il numero di articoli che ha già caricato. Una notifica in grassetto ben visibile sul carrello, che indica il numero di articoli attualmente aggiunti, ricorda ai clienti che il loro acquisto è ancora in corso e li incoraggia a completare il checkout.

In sostanza, deve essere chiaro quando gli articoli sono nel carrello e come accedervi.

La homepage di Chubbies presenta una notifica rossa che evidenzia il numero di articoli nel carrello dell’utente, nonché un carrello a scorrimento che consente agli utenti di continuare facilmente gli acquisti o procedere al checkout.

6. Una barra di ricerca (per grandi collezioni)

Oltre alla navigazione semplice e a un carrello fisso, molti negozi online includono una barra di ricerca per aiutare i visitatori a trovare quello che stanno cercando. La barra di ricerca è uno strumento utile ai visitatori che sanno già cosa cercare, soprattutto se ci sono molti prodotti diversi o molti contenuti da esplorare.

Morphe, ad esempio, ha una vasta collezione di diversi prodotti per il trucco. Affinché i propri clienti trovino facilmente ciò che stanno cercando, Morphe ha aggiunto una barra di ricerca intelligente che completa automaticamente la query con prodotti, collezioni e pagine suggeriti. In questo modo l’utente viene reindirizzato alla pagina che sta cercando direttamente dalla home page.

In genere, un utente che completa una ricerca è più incline a convertirsi. Se il vostro brand vende molti prodotti, una barra di ricerca facile da trovare offre un’alternativa a una navigazione complessa, che rischia di allontanare i clienti.

Se desiderate aggiungere una barra di ricerca intelligente al vostro negozio in Shopify, potete provare Smart Search & Instant Search o Instant Search +.

Beyond the fold: Altri elementi della home page da considerare

Gli elementi che vengono visualizzati nella parte inferiore della pagina, ovvero scorrendo in basso, non sono necessariamente meno importanti; spesso rafforzano e ampliano le informazioni precedenti, forniscono altri percorsi per raggiungere l’obiettivo della conversione e rendono disponibili altre pagine ai clienti che ne hanno bisogno.

Ecco una breve lista di elementi che potete includere come parte del design della home page o del footer, a seconda di quanto sono importanti per i vostri obiettivi.

1. Blog, video e altri contenuti

I contenuti di blog e video possono essere ottimi per la SEO, ma se inseriti above the fold potrebbero distrarre i clienti e allontanarli dai prodotti. In genere lo scopo dei contenuti è indirizzare gli utenti al prodotto, non viceversa.

Considerate la possibilità di inserire i link ai vostri contenuti nella parte della pagina visibile dopo lo scorrimento o anche nel footer, soprattutto se non si tratta di aspetti fondamentali della vostra attività. In questo modo consentirete agli utenti che hanno deciso di esplorare il vostro sito di trovarli.

Per promuovere i vostri contenuti potete aggiungere un link nella navigazione principale, ma in genere è meglio farlo sui social media, tramite email e siti di terze parti, così da indirizzare il traffico verso il vostro sito web.

BioLite Energy, ad esempio, vende apparecchi portatili sostenibili per la cottura e l’illuminazione. Il loro video informativo nella home page è posizionato dopo lo scorrimento e sopra il footer, in modo da non distrarre il cliente dalla proposta principale. Tutto il resto, dal loro blog al canale YouTube, è disponibile in basso, se i visitatori lo cercano.

2. Social proof: recensioni dei clienti, sponsorizzazione e stampa

Il social proof è una sponsorizzazione del vostro brand che sfrutta la fiducia già esistente di clienti/esperti per guadagnare la fiducia di nuovi visitatori. Può includere citazioni della stampa, recensioni, post sui social media, gallerie di Instagram o testimonianze di influencer o esperti.

Se avete un buon social proof da sfruttare, la vostra home page potrebbe essere il posto giusto per farlo.

La home page di ErgoDox di seguito fornisce citazioni tratte dai social media e foto di dipendenti di aziende note come testimonianza della qualità del loro prodotto. Ad ogni modo, tutto questo è stato inserito in basso, solo dopo la descrizione di ciò che fa il loro prodotto.

3. Priorità bassa e prodotti aggiuntivi

I prodotti più vecchi e i prodotti aggiuntivi possono benissimo essere spostati verso la parte inferiore della home page. Dopotutto, quello che deve attrarre l’attenzione sono i vostri prodotti di punta e le ultime collezioni.

Gli articoli meno costosi che completano i prodotti principali funzionano di più come acquisti impulsivi da aggiungere al momento del checkout. Tuttavia, possono anche essere inclusi più in basso nella home page, per far sapere ai visitatori che ci sono (in particolare se il prodotto che vendete richiede parti di ricambio o ricariche).

LIV Watches, ad esempio, si concentra chiaramente sugli orologi, ma pubblicizza anche i propri prodotti aggiuntivi premium, come i cinturini, nella parte inferiore della home page.

4. Pagine con priorità inferiore

Le pagine che considerate a bassa priorità cambiano in base al vostro modello di business.

In genere, i collegamenti alle pagine termini e condizioni di servizio, informativa sulla privacy o politiche di reso vanno inserite nel footer. Dal momento che nella maggior parte dei casi si trovano in basso è lì che il visitatore le andrà a cercare.

Anche altre pagine, ad esempio chi siamo, contatti, trova negozio o monitora il tuo ordine, possono essere aggiunte al footer. Ma se possono davvero aiutare i potenziali clienti a comprare da voi o vi aiutano a raggiungere un altro obiettivo chiave, allora ha senso considerare la possibilità di posizionarle più in alto nella navigazione o persino nel design della home page.

Ad esempio, per chi vende un servizio in abbonamento potrebbe essere utile aggiungere un link FAQ in evidenza nella home page per limitare i ticket di assistenza. Oppure, come nel caso di Bellroy, dove i loro prodotti sono spesso acquistati di persona, è utile per i visitatori poter trovare facilmente il negozio più vicino a loro, quindi il link trova negozio dovrà essere più in evidenza.

Per decidere se una pagina ha una bassa priorità, chiedetevi che beneficio avrete indirizzando i visitatori immediatamente a quella pagina, e se ciò li avvicinerà o allontanerà dal risultato che volete ottenere.

Tenete a mente il design della home page sullo smartphone

Il traffico web su dispositivi mobili è in continua crescita. Poiché è probabile che una buona parte del vostro traffico provenga da smartphone e tablet, ogni decisione sul design della vostra home page dovrebbe tenere conto degli utenti che utilizzano questi dispositivi.

Semplificare la home page per indirizzare gli utenti verso una serie specifica di azioni diventa ancora più importante per chi naviga dallo smartphone.

Se siete proprietari di un negozio di Shopify, gli elementi di qualsiasi tema nel Shopify theme store verranno modificati in base alle dimensioni dello schermo. Tuttavia, tenete presente che immagini che sembrano eccezionali sullo schermo grande del desktop potrebbero essere ridotte o tagliate in modo diverso sullo schermo del telefono. Le call to action possono essere più difficili da trovare, o posizionate in modo da rendere più probabile che il visitatore esca dal sito.

Potete visualizzare in anteprima il design della home page su diversi dispositivi nell’editor del tema di Shopify, utilizzando le opzioni di attivazione della visualizzazione nella parte superiore dell’anteprima.

Migliorate il design della home page nel tempo

Come avrete probabilmente capito, non esiste un unico modo per progettare al meglio la vostra home page. Fattori come i dati demografici degli utenti, il brand, il numero di prodotti, i canali di marketing e altro ancora possono influenzare il comportamento dell’utente in una serie di modi.

Ecco perché è così importante considerare sempre la propria home page come un work in progress, utilizzando il traffico e le vendite generate per misurare l’impatto della home page e apportare modifiche nel tempo.

Per ulteriori informazioni su come testare il design della vostra home page e migliorarlo consapevolmente, leggete anche:

• Test A/B: guida completa e consigli degli esperti di Google e HubSpot

• Come migliorare la user experience sul vostro sito ecommerce (e vendere di più)

---

Articolo originale di Evan Ferguson, tradotto da Cristina Tormen.