La home page non è una galleria né un opuscolo. È un meccanismo di smistamento. Il suo unico compito è portare il visitatore giusto al prodotto giusto il più in fretta possibile. Ogni scelta di design sulla home page dovrebbe servire a questo obiettivo.
Questo articolo spiega come progettare la home page di un negozio online che funziona. Cosa includere, cosa lasciare fuori, quali errori uccidono le conversioni e come pensare il layout su mobile, dove naviga la maggior parte dei tuoi clienti.
Se vuoi il quadro completo delle pagine di cui il tuo negozio ha bisogno, parti da quali pagine servono a ogni negozio online.
A cosa serve davvero la home page?
La home page serve ai visitatori che non hanno ancora deciso. Sanno qualcosa del tuo marchio, oppure ti hanno trovato con una ricerca o sui social, ma non si sono ancora impegnati a comprare. La home page è il momento in cui capiscono se andare avanti.
Deve rispondere subito a tre domande. Cosa vende questo negozio? È per una persona come me? Cosa devo fare adesso? Se una qualsiasi di queste risposte non è chiara, i visitatori se ne vanno. Non perché i tuoi prodotti siano scadenti, ma perché la home page non ha dato loro un motivo per restare.
Come progettare la sezione hero
L'hero è la prima cosa che un visitatore vede. Sta sopra la linea di scorrimento, prima di scorrere la pagina, e porta la maggior parte del peso della prima impressione.
Un buon hero ha quattro elementi. Un titolo che dice cosa vendi in parole semplici. Una breve riga di supporto che aggiunge contesto, spesso un vantaggio chiave o un elemento che ti distingue. Un'immagine che mostra il prodotto o il risultato che crea. Un solo pulsante di invito all'azione che dice al visitatore esattamente dove andare.
Il titolo è il pezzo più importante. Fallo specifico. "Borse in pelle fatte a mano per ogni giorno" funziona. "Dove l'artigianato incontra la funzione" no. Chi compra scorre veloce. Se il tuo titolo richiede un'interpretazione, l'hai già perso.
Il pulsante di invito all'azione dovrebbe indicare una destinazione, non una sensazione. "Scopri le borse" o "Vedi le novità" funziona. "Scopri di più" o "Esplora ora" no. Dai al visitatore una direzione, non un suggerimento.
L'immagine dell'hero dovrebbe mostrare chiaramente il prodotto. Le immagini in situazione funzionano bene quando il prodotto ha bisogno di un contesto per avere senso, come l'abbigliamento o gli articoli per la casa. Le foto del solo prodotto funzionano meglio quando la chiarezza conta più dell'aspirazione, come per attrezzi o elettronica. Usa immagini di alta qualità. Un hero sfocato o poco illuminato vanifica tutto il resto.
Cosa mostrare sotto l'hero
Quando un visitatore scorre oltre l'hero, cerca motivi più specifici per restare. Questa sezione della home page dovrebbe mettere in evidenza prodotti o categorie che corrispondono a ciò che i tuoi clienti hanno più probabilità di volere.
Non cercare di mostrare tutto. Scegli i tuoi prodotti più venduti, quelli con il margine più alto o la categoria in cui finisce la maggior parte dei tuoi clienti. Da tre a sei prodotti in evidenza è una quantità ragionevole. Di più comincia a sembrare affollato e crea paralisi decisionale.
I blocchi di categoria funzionano bene per i negozi con una gamma ampia. Invece dei singoli prodotti, mostra le prime tre o quattro categorie, ciascuna con un'immagine e un'etichetta chiare. Lascia che i clienti scelgano da soli la sezione giusta del negozio.
Anche la sezione in evidenza dovrebbe essere dinamica. Alterna prodotti stagionali, articoli in saldo o novità. Una home page che non cambia mai non dà ai visitatori abituali alcun motivo per scorrere.
Come usare la prova sociale nella home page
I clienti si fidano degli altri clienti più che dei negozi. La prova sociale nella home page crea credibilità prima che il visitatore arrivi a una pagina prodotto.
Le forme più efficaci di prova sociale nella home page sono brevi recensioni dei clienti o valutazioni a stelle, il numero di clienti o di ordini spediti, menzioni sulla stampa o loghi dei media e badge di fiducia di terze parti, come icone di pagamento sicuro o marchi di certificazione riconosciuti.
Resta sintetico. Una o due testimonianze forti sono più efficaci di un muro di recensioni a cinque stelle. Un solo logo di una testata riconoscibile fa più di un elenco di dieci nomi sconosciuti. Scegli la prova che significherà di più per il cliente più scettico sul comprare da te per la prima volta.
Devi includere una sezione sulla storia del marchio?
Una breve sezione sulla storia del marchio nella home page è facoltativa, ma aiuta in certi contesti. Funziona meglio quando la storia del fondatore è parte del motivo per cui un cliente sceglierebbe questo marchio invece di un concorrente più grande. Prodotti fatti a mano, approvvigionamento etico, marchi legati a una comunità e prodotti guidati dal fondatore traggono tutti vantaggio da un breve momento umano nella home page.
Se ne includi una, falla breve. Bastano due o tre frasi e un link alla pagina Chi siamo completa. Non metterla sopra la linea di scorrimento né sopra i prodotti in evidenza. La storia aggiunge calore, ma sono i prodotti a guidare le decisioni.
Per i negozi in cui il prodotto si regge da solo, salta la sezione sulla storia. Una pagina che vende beni di largo consumo non ha bisogno di una storia delle origini. Usa quello spazio per mostrare più prodotti.
Di cosa non ha bisogno la home page
Il disordine in una home page è dannoso quanto una sezione mancante. Ogni elemento che non svolge un compito toglie attenzione a qualcosa che lo svolge.
Gli errori più comuni nella home page includono troppi inviti all'azione in competizione allo stesso livello, video o animazioni in riproduzione automatica che rallentano la pagina, grandi blocchi di testo che nessuno legge, un menu di navigazione con più di sei o sette voci e pop-up che compaiono prima che il visitatore abbia avuto il tempo di vedere qualcosa.
Ogni scelta in più che imponi a un visitatore è un piccolo costo di attrito. La home page dovrebbe sembrare chiara, non trafficata. Se non riesci a decidere tra due elementi, togli quello che non è legato direttamente al portare un visitatore a un prodotto.
Design della home page su mobile
Più della metà del traffico e-commerce arriva da mobile. Il design della tua home page dovrebbe essere pensato prima di tutto per il mobile, non adattato dal desktop in un secondo momento.
Su mobile, il titolo dell'hero dovrebbe essere abbastanza corto da leggersi in due righe. Il pulsante di invito all'azione dovrebbe essere abbastanza grande da toccarlo facilmente. Le immagini dei prodotti dovrebbero impilarsi in modo ordinato in una sola colonna. La navigazione dovrebbe ridursi a un menu che non domini lo schermo.
Prova ogni modifica alla home page su un telefono prima di pubblicarla. Ciò che sembra pulito su un monitor desktop può diventare uno scorrimento confuso su uno schermo piccolo. L'esperienza di chi compra su mobile è il tuo vincolo di design principale, non un ripensamento.
Anche la chiarezza sulla spedizione conta su mobile. Chi usa il telefono è spesso vicino a una decisione d'acquisto. Un banner visibile con le soglie di spedizione gratuita o la consegna stimata nella home page può trasformare una sessione di navigazione in una sessione d'acquisto. Per saperne di più su come impostare le spedizioni del tuo negozio, leggi come impostare le spedizioni per il tuo negozio online.
Come WEMASY supporta il design della home page
Il sistema e-commerce di WEMASY include strumenti per il layout della home page pensati per i negozi online. Sezioni hero, griglie di prodotti in evidenza, blocchi di categoria e sezioni di prova sociale sono tutti disponibili senza codice personalizzato. Lo stesso sistema gestisce il layout mobile in automatico.
Scopri quali strumenti per la home page e per il negozio sono disponibili in ogni livello nella pagina dei prezzi di WEMASY.
Domande frequenti
Quanti inviti all'azione deve avere una home page?
Un invito all'azione principale sopra la linea di scorrimento, poi inviti secondari più in basso nella pagina, legati a sezioni specifiche. L'invito principale dovrebbe essere l'azione più importante che vuoi far compiere a chi arriva per la prima volta, di solito "Acquista ora" o un link a una categoria specifica. Più inviti principali in competizione con lo stesso peso visivo disperdono l'attenzione e riducono i clic su tutti. Con il creatore di siti di WEMASY puoi impostarlo direttamente sul tuo negozio.
Devo mostrare i prezzi nella home page?
Non necessariamente nella home page stessa, ma mostrare i prezzi sulle schede dei prodotti in evidenza è utile. I clienti scorrono le fasce di prezzo per capire se il negozio rientra nel loro budget. Nascondere i prezzi fino alla pagina prodotto aggiunge attrito e può sembrare evasivo. Se i tuoi prodotti sono di fascia alta, mostrare un prezzo di partenza crea aspettative positive invece di una sorpresa.
Con che frequenza devo aggiornare la home page?
Aggiorna i prodotti in evidenza e le sezioni stagionali ogni volta che hai novità, una promozione in corso o un cambio di stagione in ciò che i clienti cercano. La sezione hero può restare stabile più a lungo, ma rinnovala quando cambiano la tua offerta principale o il tuo posizionamento. Una home page che sembra uguale per un anno intero fa pensare a un negozio non attivo.
La velocità di caricamento della home page influisce sulle vendite?
Sì. Una home page che impiega più di tre secondi a caricarsi su mobile perde una quota significativa di visitatori prima che vedano qualsiasi cosa. Le immagini grandi e non compresse sono la causa più comune. Comprimi le immagini prima di caricarle, evita i video in riproduzione automatica nell'hero e limita gli script di terze parti. La velocità è una scelta di design della home page, non solo una questione tecnica.
La home page deve collegare a ogni categoria di prodotti?
Non necessariamente. Collega le categorie che la maggior parte dei tuoi clienti vorrà. Un menu di navigazione può contenere l'elenco completo delle categorie. Il corpo della home page dovrebbe mettere in evidenza le categorie che generano più conversioni o che vuoi privilegiare. Collegare tutto crea rumore visivo e diluisce le pagine che contano di più.
Dove vanno messi i badge di fiducia nella home page?
Vicino all'hero, accanto all'invito all'azione, oppure in una barra di fiducia dedicata tra l'hero e i prodotti in evidenza. I clienti cercano con più probabilità i segnali di fiducia nel momento in cui pensano di cliccare un invito all'azione. Mettere i badge solo nel piè di pagina raggiunge solo chi è già arrivato in fondo, il che per la maggior parte di chi arriva per la prima volta è troppo tardi.