Cinquanta millisecondi: ecco quanto tempo impiega i visitatori del sito Web a formarsi un'opinione sul tuo negozio online. Per fare un confronto, si tratta dello stesso tempo necessario per te leggere "50 millisecondi".
Conosciamo tutti l'importanza delle prime impressioni, ma nello spazio e-commerce hanno un peso maggiore di quanto si possa pensare.
Devono, quando il moderno acquirente online ha un tempo limitato, una breve soglia di attenzione e infinite opzioni di vendita al dettaglio disponibili mentre navigano sul Web.
Ciò rappresenta una grande sfida per i proprietari di negozi di e-commerce: come puoi descrivere la tua attività, comunicare il tuo valore, e garantire che il cliente si senta sicuro e impegnato, tutto in una frazione di secondo?
La risposta si trova in una home page ben progettata: una che si rivolge sia all'utente che al proprietario del negozio, infonde fiducia nel cliente e getta le basi per l'intera esperienza di acquisto.
Ma la home page e il web design non sono facili.
Quindi considera questa tua introduzione al miglior design della homepage – una classe 101, se vuoi – che coprirà i vantaggi di una homepage di qualità, le caratteristiche che condividono, i sistemi di gestione dei contenuti che li alimentano e alcuni casi studio del miglior sito Web disegni là fuori.
Le home page sono più delle prime impressioni
Mentre quella statistica da 50 millisecondi potrebbe aver sollevato alcune sopracciglia, è risaputo che la tua home page funge da prima impressione del tuo negozio online.
E mentre questo è vero, alcuni concludono erroneamente che tutta una home page veramente deve fare è esteticamente piacevole. Ma il ruolo della homepage è molto più di un glorificato tappeto di benvenuto.
Il design della tua pagina web deve anche fungere da launchpad per tutte le attività che il tuo acquirente vuole completare, sia che si tratti di acquistare un tipo specifico di prodotto, di sfogliare il tuo catalogo o semplicemente di saperne di più sulla tua azienda.
Dal punto di vista aziendale, è la tua migliore opportunità per ottenere il riconoscimento del marchio, dimostrare valore, mostrare prove sociali e gettare le basi per il resto della tua esperienza di e-commerce.
Vantaggi di una home page ben progettata
Cosa stai uscendo da una homepage creata da esperti? Molto più di una semplice vetrina.
1. Clienti fiduciosi.
Quando la tua home page comunica con successo chi sei, cosa fai e cosa distingue il tuo negozio online dal pacchetto, i tuoi clienti possono sentirsi sicuri di trovarsi nel posto giusto.
In un mercato e-commerce estremamente affollato, spesso questa è metà della battaglia.
2. CX ottimale (esperienza del cliente).
La home page non è solo il fondamento del tuo sito Web.
Come probabilmente il punto di accesso più comune al tuo sito, la home page pone le basi per l'esperienza di acquisto del cliente.
Indipendentemente dall'attività che l'acquirente desidera svolgere, che si tratti di effettuare un acquisto, conoscere un prodotto o verificare lo stato di un ordine, la home page deve indicarli nella giusta direzione.
3. Altre conversioni.
Il percorso di acquisto di un acquirente è irto di opportunità di abbandono del carrello: è per questo che il tasso di conversione medio tra tutti i rivenditori online si aggira intorno al 2%.
Lavorare per un agenzia di progettazione e-commerce, Ho visto in prima persona le diverse tecniche, i trucchi e i suggerimenti che i commercianti utilizzano per cercare di aumentare il loro tasso di conversione anche solo di una frazione del percento.
Quando eseguiamo audit UX (esperienza utente) su negozi online che non si stanno convertendo, la prima cosa che il team di progettazione guarda è la homepage.
Le home page ben progettate promuovono la conversione semplificando il flusso del pubblico target verso i prodotti che stanno cercando. Riducendo al minimo tale attrito, l'utente deve compiere meno sforzi per completare l'acquisto e ha maggiori probabilità di convertirlo.
4. Riconoscimento del marchio.
Il consumatore moderno è costantemente bombardato da marchi, pubblicità e marketing digitale. È più difficile che mai per il tuo messaggio tagliare il rumore.
Fortunatamente, uno dei migliori strumenti del tuo arsenale per coltivare un marchio riconoscibile è la tua homepage.
Ricorda, il percorso di acquisto è raramente una linea retta: è probabile che un potenziale cliente visiti più volte la tua home page prima di decidere di effettuare un acquisto, soprattutto se i tuoi prodotti sono articoli di biglietti di grandi dimensioni.
Ecco perché è così cruciale che la tua home page funga da ambasciatore numero uno del tuo marchio. Queste visualizzazioni ripetute sono un'ottima opportunità per instillare il riconoscimento del marchio nel consumatore.
Fattori che influenzano il design della tua home page
Non esiste una formula rapida e sporca per un buon design della home page.
Come riflesso della tua attività e alla base della tua specifica presenza sul web, una homepage di qualità sembrerà diversa per ogni commerciante di e-commerce.
Ma ci sono elementi comuni a ogni homepage e esaminarli singolarmente può indicare se la tua homepage generalmente sta facendo il suo lavoro o meno.
1. Combinazioni di colori.
Il colore è una delle prime cose che notiamo sui siti Web. Se dovessi mostrare la tua home page di fronte a un acquirente, anche solo per un decimo di secondo, probabilmente sarebbero in grado di dirti il suo colore.
Scegliere una combinazione di colori non è semplice come riapplicare la palette del tuo marchio. Devi considerare la leggibilità, la coerenza e le foto o altri elementi visivi con cui lo accopperai.
L'acquirente può facilmente scansionare il testo sulla tua home page? I colori sono facili per gli occhi? Stai usando il colore per comunicare importanti informazioni di contatto? Cosa succede se l'acquirente è daltonico?
Questi sono gli elementi importanti che devono essere attentamente considerati quando si progetta la tua homepage.
2. CTA.
I tuoi inviti all'azione sono i tentacoli della tua homepage. Tutti gli altri elementi – il layout, la copia, il design – stanno semplicemente guidando l'utente a seguire quel CTA e accompagnandoli lungo il percorso di acquisto.
La tua homepage potrebbe avere molti CTA, ognuno con il proprio livello di priorità.
Ad esempio, la homepage potrebbe richiedere agli utenti di visualizzare nuovi prodotti o iscriversi alla newsletter.
Quale è più importante per la tua azienda? Il design della tua homepage lo riflette?
3. Proposte di valore.
Cosa stai vendendo? Perché comprarlo da te?
Se la home page del tuo negozio online non risponde completamente a queste due domande nel modo più chiaro e conciso possibile, non sta facendo il suo lavoro.
Questo è il valore che offri allo shopper e se non lo stai dimostrando fin dall'inizio, stai praticamente acquistando un biglietto di sola andata dal tuo negozio online.
Molti credono che proposte di valore chiare e ovvie siano fatte da copie forti e coinvolgenti. E mentre questo è assolutamente essenziale, un'esperienza utente ben realizzata gioca un ruolo altrettanto fondamentale.
Parlando come un copywriter, la scelta della lingua e della verbosità che occuperanno la home page non avvengono nel vuoto.
È uno sforzo collaborativo con il progettista di UX, entrambi unendo le nostre competenze per raggiungere lo stesso obiettivo: dimostrare la proposta di valore.
4. Velocità del sito.
Nonostante sia un fattore chiave per l'esperienza del cliente, di solito riteniamo gli sviluppatori responsabili della velocità di un sito.
E anche se le prestazioni del tuo sito dipenderanno dal team di sviluppo, anche i progettisti avranno un ruolo.
Mentre i tempi di caricamento rapidi sono sempre desiderabili, è particolarmente cruciale per la home page.
I designer devono prendere ulteriori precauzioni per assicurarsi che la pagina che stanno creando sia quella che può essere caricata quasi istantaneamente.
In pratica, ciò può significare limitare la dimensione o la quantità di immagini ad alta risoluzione sulla pagina.
Le animazioni e altri elementi di design interattivi possono suscitare qualsiasi esperienza digitale, ma troppi rallenteranno la velocità del sito, non importa quanto sia buono il tuo team di sviluppo.
La velocità della tua home page varierà in base all'utente e al suo dispositivo, ma come regola generale, qualsiasi cosa che superi un tempo di caricamento di due secondi è un problema che deve essere risolto.
9 esempi di design di homepage eccellente e innovativo
Ho chiarito abbastanza i vantaggi e gli elementi chiave di una home page ben progettata: analizziamo alcuni esempi reali di commercianti che hanno investito nella pagina più importante del loro sito. Ecco alcuni esempi di design per la homepage.
1. Ben & Jerrys.
La homepage del negozio online di Ben & Jerry ha una corda tesa difficile da percorrere.
Deve fungere da sito di e-commerce autonomo per B&J, chiaramente distinto dalla pagina di marketing del fornitore di gelati, pur servendo come estensione del loro marchio attentamente coltivato.
La loro homepage lo esegue magistralmente, in particolare con la sua barra di navigazione.
Posizionandolo su uno sfondo rivestito in legno lo fa risaltare dal resto del sito, pur aderendo al marchio terroso e più naturale di Ben & Jerry.
Gli occhi dell'utente sono immediatamente attratti da questa barra di navigazione, che li informa immediatamente che si tratta di un negozio online, non di un sito di marketing. I prossimi passi sono chiaramente definiti.
Il carosello di immagini a scorrimento qui sotto aiuta a supportarlo, scorrendo le immagini del catalogo di prodotti diversi di Ben & Jerry.
2. Beatitudine.
Bliss, un commerciante online che vende prodotti per la cura della pelle di qualità spa e di origine etica, ha una homepage che privilegia la conversione sopra ogni altra cosa.
Quando si accede al sito, l'acquirente viene accolto con il pulsante "Acquista ora" e il pulsante di azione "Aggiungi al carrello" ancora più diretto. I prodotti parlano da soli.
E mentre questo approccio potrebbe essere letto come troppo avanti, l'homepage di Bliss evita quella trappola vestendola in:
- Una tavolozza di colori tenui.
- Pastelli invitanti e amichevoli.
- Un sacco di spazio bianco.
- Tipografia divertente.
Fedele alla missione inclusiva del marchio, offre anche un interruttore "Abilita accessibilità" nell'angolo in alto a destra.
3. Clarks.
Il design della home page del principale marchio di calzature Clarks mostra che non è necessario sacrificare l'usabilità per l'eleganza.
Elegante, elegante e sofisticata, la homepage di Clarks fa eco al look e alla sensazione dei loro prodotti con un design pulito.
Allineando l'estetica della loro homepage con la loro merce, Clarks trasforma un'attività banale (acquisto di scarpe) in un'esperienza.
4. Firewire.
La home page di Firewire sfrutta la cache aziendale di splendide fotografie per attirare immediatamente l'attenzione dell'utente.
Questi elementi visivi si distinguono ancora di più se si considera che il resto della combinazione di colori della homepage è per lo più semplice, nitida, in bianco e nero.
Firewire è probabilmente la più non convenzionale delle home page in questo elenco, ma quando sei un marchio di tavole da surf, non convenzionale ha senso.
5. Gillette on Demand.
Gillette on Demand ci fornisce l'esempio perfetto di una homepage in cui i valori funzionano soprattutto.
Ci sono un sacco di informazioni utili racchiuse in una pagina abbastanza standard qui: tutto, da come funziona il servizio a oggetti di valore come la spedizione gratuita e le impugnature del rasoio.
Nota come Gillette on Demand tiene conto di questo elevato volume di contenuti grazie alla progettazione intelligente della homepage.
Aggiungendo una grande diagonale blu che attraversa lo schermo, le sezioni della pagina vengono divise in blocchi più digeribili. È sottile, ma efficace.
6. Hush Puppies.
La homepage di Hush Puppies ricorda uno dei nostri precedenti esempi, Clarks, con alcune notevoli differenze.
Il loro megamenu, ad esempio, è molto più grande di Clarks ", il che potrebbe suggerire un catalogo di prodotti più ampio e diversificato, ma potrebbe significare solo che Hush Puppies vuole offrire all'utente percorsi più chiari.
Laddove altre aziende offrirebbero una categoria chiamata "scarpe", HP ci offre "scarpe casual", "scarpe da lavoro" e "scarpe eleganti".
Anche il design della home page di Hush Puppies si abbina allo stesso layout di carta pulito e nitido di Clarks ". È perfettamente simmetrico, ordinato e ben bilanciato.
7. PayPal qui.
La home page di PayPal qui è, in una parola, semplice.
Tutto, dalla scelta del carattere al layout, alle due principali offerte di prodotti dell'azienda fintech sono modeste, disadorne e cristalline.
Nota come PayPal qui non ha separato la barra di navigazione dall'immagine dell'eroe, invece utilizza quest'ultima come sfondo.
8. Skullcandy.
L'unica cosa più rumorosa delle cuffie potenziate per basso di Skullcandy potrebbe essere il design della sua homepage.
È essenzialmente monocromatico, ma non sembra una nota. C'è un sacco di interesse visivo nella pagina, come gradienti, foto ad alta risoluzione e (circa a metà della pagina) un brusco cambiamento nella tavolozza dei colori.
Queste tecniche attirano l'attenzione e indirizzano l'attenzione dell'acquirente: l'occhio traccia il percorso del gradiente, conducendoti direttamente al prodotto che interseca.
9. Woolrich.
Le home page non devono essere così arrestanti come quelle di Skullcandy, né eleganti come Clarks ". A volte, le migliori homepage sono quelle con design senza pretese, come quelle di Woolrich.
Scegliendo un aspetto semplice e chiaro per il loro sito, il design della home page fa da sfondo a ciò su cui Woolrich vuole davvero che lo shopper si concentri: i prodotti.
3 Considerazioni per la scelta di un CMS e una piattaforma per siti Web
Potresti avere una pagina scintillante, nuova e brillante, forse anche attentamente creata da un'agenzia di design UX pluripremiata, ma se non hai un modo per mantenerla, non farà del bene alla tua attività nel lungo periodo correre.
E mentre puoi (e dovresti) arruolare i servizi di una società di sviluppo per eliminare i bug e risolvere lo strano problema tecnico, il modo migliore per eseguire la manutenzione del tuo sito è con un solido sistema di gestione dei contenuti.
Non mancano le opzioni là fuori, quindi prima di selezionare un CMS, tieni a mente queste considerazioni chiave.
1. Facilità di modifica.
Le home page di e-commerce sono dinamiche, in costante evoluzione per riflettere nuovi prodotti, promozioni attuali e notizie aziendali rilevanti.
Un CMS ideale è uno che semplifica lo scambio di grafica, il cambio di testo e la modifica della homepage in qualsiasi modo l'utente desideri.
E anche allora, solo "facile da modificare" non è abbastanza.
Deve essere facile da modificare chiunque, anche quelli con poca o nessuna esperienza tecnica di sorta.
Al giorno d'oggi, un editor WYSIWYG (quello che vedi è quello che ottieni) per il CMS è lo standard del settore.
2. Flessibilità.
La flessibilità di un CMS si riferisce a modifiche più approfondite rispetto alla semplice sostituzione di un'immagine o di un testo.
I CMS flessibili consentono all'utente non esperto di apportare facilmente modifiche al layout della homepage, alla combinazione di colori o ad altre funzionalità di alto livello.
Con la flessibilità di un sistema di gestione dei contenuti arriva anche la scalabilità. Man mano che la tua azienda si espande, anche il tuo CMS dovrebbe crescere, adattandosi alle nuove esigenze e sfide che si presentano con un'azienda in evoluzione.
3. Disegni.
Alcuni CMS sono dotati di modelli o temi di progettazione standard, che rendono ancora più semplice creare una homepage visivamente sbalorditiva ed efficace.
E se sei ancora interessato a portare la tua home page al livello successivo, molti di questi modelli possono essere facilmente personalizzati da un designer o da uno sviluppatore dell'interfaccia utente.
Portalo a casa
Una home page non è solo un tappetino di benvenuto per il tuo negozio online.
Sono coltelli e-commerce Swiss Army che possono promuovere la conversione, coltivare il tuo marchio, coinvolgere gli utenti, vendere i tuoi prodotti e servire da base per l'esperienza di acquisto dei tuoi clienti.
Ciò che rende una homepage ben progettata differisce per società, ma tutti dovrebbero essere leggibili, veloci e chiari nel loro marchio e messaggistica.
Ancora più importante, le home page dovrebbero essere costruite su un solido sistema di gestione dei contenuti in grado di adattarsi ai cambiamenti nei prodotti, nell'estetica o nella presenza digitale della tua azienda.
Se sei interessato a saperne di più sui CMS potenti e intuitivi per i negozi online, contatta BigCommerce.
Altre domande sul design della homepage? Mandaci un messaggio a Codal: saremo felici di rispondere a qualsiasi domanda tu possa avere.
