105 Suggerimenti per l'esperienza utente per l'e-commerce: come sedurre i visitatori ad acquistare

Pubblicato: 2022-02-20

Ogni giorno le persone visitano il tuo negozio e se ne vanno perché non riuscivano a trovare ciò che volevano.

Hai bisogno di qualcosa di più del primo posizionamento su Google. Le persone devono essere in grado di navigare verso il prodotto che desiderano e fidarsi di te abbastanza da poterlo acquistare. La tua esperienza utente (esperienza utente) di e-commerce dovrebbe concentrarsi sulla costruzione della fiducia dei tuoi visitatori aiutandoli a completare i loro obiettivi.

Ecommerce UX Guide

Secondo Nielson Norman Group, una società di ricerca sull'esperienza utente, esistono oltre 800 best practice per l'usabilità dell'e-commerce. A meno che tu non abbia miliardi di dollari da spendere per lo sviluppo, non rispetterai tutte le linee guida. Questo post è pieno di suggerimenti ed esempi in modo da poter migliorare il design dell'esperienza utente dell'e-commerce e ottenere più conversioni.

Analizziamo le best practice di base per tipo di pagina. Dai un'occhiata a questo articolo per suggerimenti su mobile ux.

Guida all'esperienza utente dell'e-commerce nascondi
Home page Suggerimenti UX che creano fiducia in una rapida occhiata
Navigazione: le fondamenta della UX
Pagine di categoria: avvicina gli acquirenti di un passo
Pagine di elenchi di prodotti: informa e crea fiducia
Pagine dei prodotti: dove SEO, UX e vendite si incontrano
Processo di pagamento: costruito per la fiducia
Come si accumula il tuo sito?

Home page Suggerimenti UX che creano fiducia in una rapida occhiata

La tua home page riceve la maggior parte del traffico. Rendi evidente che vendi prodotti. Pensa alla tua home page come alla finestra del tuo negozio. Pensa che Macy è su Magnificent Mile. Vesti la tua home page con i tuoi migliori prodotti e immagini. Una cosa che non vedi mai da Macy's è che i diversi vestiti scendono uno dopo l'altro nella finestra. Sto parlando di cursori qui. Se devi usarli, assicurati che siano facili da usare.

Migliori pratiche per l'area degli eroi

La tua area dell'eroe (chiamata anche area in primo piano) è l'immobile più importante sulla tua home page. Hai solo 50 millisecondi per lasciare una buona impressione, ecco come farla contare.

UX-Best-Practices-LL-Bean-Home
LL Bean ha una barca di prodotti, ma le foto ordinate e la copia concisa semplificano la navigazione nella loro linea di prodotti principale.
Cose da fare nella zona degli eroi
  1. Usa un design semplice e ordinato. Usa meno parole possibile.
  2. Elimina tutto ciò che non ha impatto. Ad esempio, i tuoi post recenti sul blog.
  3. Usa le code visive come il colore o le frecce per concentrare l'attenzione su un singolo invito all'azione.
  4. Consenti alle persone di identificarsi facilmente. Vendi giacche costose da donna?
UX-Best-Practices-People-Version
Area eroe da non fare
  1. Decorare. Vortici, scintillii e altri simboli privi di significato si aggiungono al carico cognitivo e distraggono i tuoi clienti.
  2. Avere contenuti obsoleti come promozioni della scorsa settimana o addirittura del mese scorso. Perderai immediatamente credibilità.
  3. Ingombri l'area con troppi messaggi o promozioni.
  4. Avere uno slider o un carosello che avanza automaticamente.
  5. Sottolinea un prodotto che non è rappresentativo del tuo mix generale.

Navigazione della pagina iniziale

Quando le persone visitano il tuo sito, vuoi aiutarle a trovare ciò per cui sono venute. Secondo l'esperto di conversioni, Tim Ash, l'obiettivo principale della tua home page è fornire la navigazione a livello di categoria. Segui questi suggerimenti per aiutare i visitatori a trovare ciò che stanno cercando.

UX-Best-Practices-Home-Page-Macys
Navigazione nella pagina iniziale Cose da fare
  1. Offri ai visitatori una "vista di 30.000 piedi" di ciò che vende il tuo sito in modo che possano approfondire categorie specifiche.
  2. Aggiungi i tuoi strumenti più utilizzati o le guide all'acquisto.
  3. Fornire collegamenti alle pagine relative alla politica di restituzione, al servizio clienti, alla spedizione e alla privacy.
Navigazione della pagina iniziale Cosa non fare
  1. Supponi di sapere cosa cercano le persone.
  2. Inceppa ogni categoria e sottocategoria sulla tua home page.
  3. Spingere le promozioni a livello di prodotto. Se hai solo pochi prodotti, puoi ignorarlo.
  4. Usa foto d'archivio generiche. Questo urla inautenticità.

Navigazione: le fondamenta della UX

La navigazione è fondamentale quando si hanno molte categorie, prodotti variabili o prodotti con molte opzioni. Niente è più frustrante di un menu ingombrante. Più velocemente le persone riescono a trovare ciò che vogliono, più velocemente potrai spostarle nel processo di pagamento.

Lo scopo di un menu di navigazione è portare le persone dove vogliono andare. Ecco una ripartizione di ciò che dovresti affrontare:

UX-Best-Practices-Best-Buy-Navigation
Cose da fare nel menu di navigazione principale
  1. Limita il menu in alto a 7 scelte.
  2. Utilizza una navigazione secondaria in alto a destra per elementi come "Contattaci"
  3. Utilizza un menu a più colonne che organizza le categorie e le sottocategorie.
  4. Mostra immagini di alta qualità del tuo prodotto.
  5. Rendi prominente il tuo menu di navigazione con colori contrastanti.
  6. Prodotti di riferimento incrociati in più categorie. Qualcuno alla ricerca di un'unità USB può cercare in Laptop, Accessori o Computer.
This ambiguous menu creates a lot of hesitation.
Questo menu ambiguo crea molta esitazione.
Menu di navigazione principale Cosa non fare
  1. Avere un singolo menu a discesa che occupa una lunga colonna.
  2. Mostra link alle pagine di categoria vuote al nav principale.
  3. Classificare eccessivamente i prodotti. Se è presente un solo prodotto in una (sotto)categoria, rimuovere la categoria e riclassificare il prodotto.
  4. Non utilizzare opzioni vaghe come "altro".

Menu del carrello

Un menu del carrello è probabilmente l'ultimo pulsante su cui un utente farà clic prima di estrarre la carta di credito. Non guardare oltre questa piccola icona.

UX-Best-Practices-Cart-Menui
Menu del carrello Cose da fare
  1. Mostra il prezzo totale e il numero di articoli nel carrello.
  2. Link alla pagina del carrello dove possono vedere i dettagli del loro contenuto
UX-Best-Practices-Cart-Menu
L'attrito si crea quando le persone devono fermarsi e pensare. L'attrito rallenta gli acquirenti.
Menu del carrello da non fare
  1. Sostituisci un "mini carrello" con un carrello completo. Il tuo sito di e-commerce ha bisogno di una pagina carrello, non solo di un widget carrello.
  2. Collegamento diretto a una pagina di pagamento che non mostra tutti i dettagli dei prodotti nel carrello.

Ricerca

Molti utenti saltano del tutto il menu di navigazione e si affidano alla ricerca/ricerca sfaccettata per approfondire ulteriormente. La ricerca sfaccettata può complicarsi rapidamente. Dal punto di vista dello sviluppo e dei costi, ma anche dal punto di vista dell'utente. Segui queste linee guida per mantenere le cose semplici e utili.

Cerca cose da fare
  1. Utilizza una casella di testo aperta nella parte superiore di ogni pagina.
  2. Usa la ricerca sfaccettata quando ci sono più di 20 prodotti all'interno di una categoria.
  3. Filtra per prezzo, colore, dimensione sono opzioni di ricerca sfaccettate di base.
Cerca cosa non fare
  1. Usa il testo di riempimento nell'input di ricerca. Lascia vuoto o pronuncia "Cerca".
  2. Usa opzioni di filtraggio soggettivo come "per impieghi gravosi" o "per impieghi leggeri".

Pagine di categoria: avvicina gli acquirenti di un passo

Le pagine delle categorie possono essere un po' complicate. Vuoi assicurarti che il contenuto non sia troppo sottile. Aree di testo aggiuntive possono fare miracoli con le classifiche di Google, ma troppo testo può confondere il tuo cliente.

Data la query di ricerca, "costume da bagno", il risultato di Macy's è molto rilevante. È facile per un utente perfezionare ulteriormente ciò che sta cercando.

Mantieni la navigazione delle categorie libera

Sii selettivo su quali sottocategorie presenti nella pagina della tua categoria. Macy's avrebbe potuto mostrare foto di costumi da bagno rosa, costumi da bagno neri, un pezzo, due pezzi, ecc. Se fosse stata presentata ogni opzione, gli acquirenti sarebbero stati paralizzati dal numero di opzioni. Inoltre, non vuoi che le persone confondano la tua pagina di categoria come una pagina di elenco di prodotti scadente.

Ecommerce User Guidelines for Category Pages
Questa pagina di categoria per i ranghi di Macy's tra i primi 5 per "Costume da bagno"
Cose da fare per la navigazione delle categorie
  1. Usa molto spazio bianco e testo limitato.
  2. Descrivi le sottocategorie con il minor numero di parole possibile, ma sii specifico.
  3. Usa le immagini per rappresentare le sottocategorie principali in modo appropriato.
  4. Usa solo testo per rappresentare le categorie meno popolari.
  5. Avere una categoria padre se si utilizza un mega o un menu a discesa.
UX-Best-Practices-Taget-Category-Page
Target è dietro a Macy per "Costume da bagno" nonostante abbia 30 volte più backlink rispetto alla pagina del costume da bagno di Macy.
Navigazione per categoria Cosa non fare
  1. Mostra immagini irrilevanti.
  2. Affidati solo al testo.
  3. Usa testo a più colori.
  4. Promuovi fortemente le promozioni.
  5. Usa i nomi dei prodotti per le sottocategorie.

Sul sito di Target. devi cercare davvero duramente per trovare "costumi da bagno junior".

Contenuto pagina categoria

Le pagine delle categorie non devono essere limitate nel contenuto. La ricerca per parole chiave può aiutarti a comprendere le domande scottanti degli acquirenti. Usa queste parole chiave per rispondere a domande comuni sulla tua linea di prodotti.

Categoria Contenuto della pagina Cose da fare
  1. Concentrati sulle esigenze del tuo acquirente.
  2. Usa le parole chiave semantiche per integrare la tua parola chiave principale.
  3. Indirizzare le FAQ relative alla categoria.
Contenuto della categoria Da non fare
  1. Metti grandi blocchi di testo nella parte superiore della pagina.
  2. Usa la tua parola chiave principale più e più volte.
  3. Usa immagini irrilevanti. Riesci a credere alla foto di un costume da uomo sulla pagina del costume da bagno di Target?
  4. Metti il ​​testo nelle immagini.

Pagine di elenchi di prodotti: informa e crea fiducia

Sono scioccato dal numero di pagine di elenchi di prodotti che hanno contenuti scarsi. Le pagine di elenco dei prodotti ricche di contenuti e facili da usare di Best Buy si classificano costantemente in alto. La loro pagina illustra molte buone pratiche. La pagina dell'elenco dei prodotti di Best Buy consente di convertire senza nemmeno visitare la pagina del prodotto. Le pagine delle schede dei prodotti dell'e-commerce devono fornire informazioni essenziali sui prodotti come: immagine, prezzo, opzioni e disponibilità. Lascia che queste pagine facciano un po' di vendita per te.

Contenuti SEO per pagine di elenchi di prodotti

Una copia facile da usare sarà naturalmente SEO friendly. Vuoi che le persone (e Google) comprendano chiaramente i contenuti della tua pagina. Vuoi anche allontanare delicatamente le persone da questa pagina se non vedono quello che vogliono.

Best Buy nails the basics.
Best Buy inchioda le basi.
Contenuto SEO Cosa fare
  1. Usa le parole chiave più pertinenti e con la difficoltà più bassa nel titolo della pagina e nel tag h1. Maggiori informazioni sulla ricerca di parole chiave.
  2. Utilizza parole chiave aggiuntive in un breve riepilogo della categoria.
  3. Se sono necessarie ulteriori informazioni, mettile sotto gli elenchi dei prodotti.
  4. Usa i breadcrumb per aiutare gli utenti a navigare e distribuire PageRank alle pagine delle tue categorie.
  5. Mostra prezzi e opzioni.
  6. Fornire una panoramica del prodotto, se è presente un pulsante Aggiungi al carrello.
Contenuto SEO da non fare
  1. Inserisci troppi contenuti prima che i prodotti siano elencati.
  2. Usa nomi simpatici o figurativi per i prodotti. Se vendi scarpe per bambini, non chiamare i sandali marroni "George".

Navigazione elenchi di prodotti

Una volta che un utente ha un'idea di cosa vuole acquistare, acquisterà la pagina delle schede dei prodotti. Metti in chiaro che hanno più opzioni e pagine su cui fare acquisti. Vuoi che continuino a cercare se non vedono quello che vogliono nella prima pagina.

Elenco prodotti Navigazione nella pagina Cose da fare
  1. Mostra il numero di pagine prima e dopo gli elenchi dei prodotti.
  2. Mostra il numero totale di prodotti all'interno di quella categoria.
  3. Consenti agli utenti di ordinare per: prezzo,
  4. Consenti agli utenti di passare a pagine specifiche all'interno dei risultati.
Elenco dei prodotti Navigazione della pagina Da non fare
  1. Fai in modo che gli utenti facciano clic sulle frecce per cambiare le pagine.
  2. Si supponga che le persone torneranno in alto o faranno clic sul pulsante "Visualizza tutto".
  3. Usa foto di prodotti minuscole o sfocate.

Pagine dei prodotti: dove SEO, UX e vendite si incontrano

I dettagli completi del prodotto sono fondamentali. Per SEO ed esperienza utente. I collegamenti interni migliorano la SEO e aiutano l'utente a tornare alla pagina delle schede dei prodotti. Un design della pagina del prodotto di facile utilizzo conterrà informazioni essenziali sul prodotto above the fold.

Le pagine dei prodotti sono la carne del tuo sito, devono essere persuasive. Se il tuo cliente deve selezionare un'opzione prima di aggiungere al carrello, visualizza un messaggio di errore quando si fa clic sul pulsante "Aggiungi al carrello".

Stratificazione del contenuto della pagina del prodotto

La pagina del tuo prodotto può soffrire rapidamente di un sovraccarico di informazioni. Vuoi il giusto livello di informazioni sul prodotto per le persone che sanno già cosa vogliono acquistare, ma anche soddisfare gli acquirenti che hanno bisogno di ogni dettaglio del prodotto. Sovrapponendo le tue informazioni, puoi soddisfare entrambi i tipi di acquirenti.

Samsung's Product Page Illustrates Many Best Practices
Imperdibile il pulsante Aggiungi al carrello di Samsung.
After the button is clicked, it is very clear the product was added. Users are sent right to the shopping page.
Dopo aver cliccato sul pulsante, è molto chiaro che il prodotto è stato aggiunto. Gli utenti vengono indirizzati direttamente alla pagina del carrello.
Cose da fare per la stratificazione del contenuto della pagina del prodotto
  1. Fornisci un breve riepilogo del prodotto nella parte superiore della pagina o accanto alla foto.
  2. Aggiungi un bordo o uno sfondo ombreggiato alla tua "area di azione", dove le persone selezionano le opzioni e fanno clic sul tuo pulsante.
  3. Presenta le opzioni di ordinazione vicino alla parte superiore dell'area delle azioni
  4. Avere briciole di pane sulle pagine dei prodotti.
  5. Inserisci i dettagli del prodotto, le recensioni, i dati, ecc. sotto l'immagine del prodotto e l'area CTA.
Why Hide The Most Important Button?
Perché nascondere il pulsante più importante?
Stratificazione del contenuto della pagina del prodotto Cosa da non fare
  1. Metti un grande blocco di copia vicino o sopra il pulsante CTA.
  2. Nascondi il pulsante Aggiungi al carrello finché qualcuno non effettua una selezione.
  3. Rendi le informazioni sulla disponibilità a un clic in più.
  4. Apporta una leggera modifica quando qualcuno fa clic sul pulsante Aggiungi al carrello. Alle persone mancherà il tuo messaggio "Aggiunta con successo".

Un errore comune che ho riscontrato con molti temi di e-commerce di WordPress è stato quello di nascondere i pulsanti "Aggiungi al carrello".

Victoria's Secret Is To Not Hide The Button
Il segreto di Victoria è non nascondere il bottone

Immagini della pagina del prodotto

Le foto di grandi dimensioni e lo zoom sono il più vicino possibile al tuo acquirente senza toccare fisicamente il prodotto. Immagini sfocate e di scarsa qualità fanno sembrare anche i prodotti di scarsa qualità. Dai un'occhiata a questo case study, in cui le immagini dei prodotti più grandi e migliori hanno aumentato le conversioni di oltre il 300%.

UX-Best-Practices-Product-Photos
Immagini della pagina del prodotto Cose da fare
  1. Usa foto grandi e ad alta risoluzione su uno sfondo bianco.
  2. Usa le funzioni di zoom per consentire agli utenti di vedere i dettagli da soli.
  3. Consenti agli utenti di scorrere avanti e indietro tra le immagini.
  4. Fornisci istruzioni chiare sull'attivazione di immagini aggiuntive o funzioni di zoom.
UX-Best-Practices-Bad-Product-Photo
Immagini della pagina del prodotto Da non fare
  1. Mostra le immagini dello "stile di vita" o il tuo prodotto. Mostra solo il prodotto.
  2. Non confondere le tue foto con loghi, filigrane o sfondi.
  3. Forza la visualizzazione di un'immagine per visualizzare più dettagli o foto aggiuntive.

Processo di pagamento: costruito per la fiducia

Il tuo processo di pagamento deve essere semplice, logico e privo di distrazioni. Non complicarlo. La pagina del carrello di Macy colpisce molti dei punti principali. Il carrello mostra i dettagli del prodotto con immagini, prezzi, tasse e collegamenti alle singole pagine dei prodotti.

Pagina del carrello

La prima pagina della procedura di pagamento è la pagina del carrello. Questa pagina ribadisce in dettaglio ciò che hanno intenzione di acquistare. Questo li aiuta a creare fiducia e fiducia nel tuo negozio. Un'età del carrello ben progettata ti aiuterà a ridurre l'abbandono del carrello.

Macy's cart page hits many best practices.
Cose da fare nella pagina del carrello
  1. Conferma tutto. Prodotto, taglia, colore, quantità, disponibilità, data di spedizione, consegna stimata.
  2. Consenti agli utenti di tornare direttamente ai prodotti nel carrello.
  3. Semplifica la modifica della quantità o l'eliminazione dei prodotti. Consenti agli utenti di modificare la quantità su 0 per rimuovere i prodotti o fare clic su un pulsante "rimuovi".
  4. Mostra una foto del prodotto, nel colore in cui è stato ordinato. Se il tuo cliente ordina una giacca nera e ne vede una blu al momento del pagamento, perde fiducia.
  5. Metti in evidenza il pulsante Continua il pagamento, ma consenti alle persone di continuare a fare acquisti.
  6. Mostra il prezzo totale fuori porta.
Presentazione della pagina del carrello inzuppato da non fare
  1. Chiedi prematuramente una carta di credito o un indirizzo email. Consenti alle persone di confermare ciò che stanno acquistando.
  2. Non utilizzare un pulsante "Aggiorna" per rimuovere i prodotti.

Pagina di registrazione

Questo è il momento cruciale in cui devi ottenere informazioni dal tuo visitatore. Consenti agli acquirenti di effettuare il check-out senza creare un account. I clienti non sono obbligati a creare e ricordare un nuovo login e password, ma si sottolinea il vantaggio di creare un account. Nota il layout semplice della pagina. La scelta semplice riduce il carico cognitivo.

UX-Best-Practices-Checkout-As-Guest
Pagina di registrazione Cose da fare
  1. Sottolinea i vantaggi della creazione di un account.
  2. Usa un layout semplice.
  3. Non fare più di 2 domande.
Pagina di registrazione Da non fare
  1. Forza le persone a creare un account. Nessuno vuole ricordare un nuovo nome utente e password.
  2. Chiedi prematuramente una carta di credito o un indirizzo email. Consenti alle persone di confermare ciò che stanno acquistando.
  3. Non utilizzare un pulsante "Aggiorna" per rimuovere i prodotti.

Pagina di pagamento

Dopo che gli acquirenti si sentono sicuri di ordinare il prodotto giusto dall'azienda giusta (la tua), è tempo di iniziare la festa.

Una volta che gli utenti hanno avviato il processo di pagamento, desiderano completare l'acquisto il più rapidamente possibile. Aiutali ad aiutarti. Rimuovi le distrazioni e rendi il processo il più semplice possibile. Non fargli reinserire il loro indirizzo o indovinare come compilare il modulo.

UX-Best-Practices-Macys-Checkout-Process
Pagina di verifica Cose da fare
  1. Chiedi solo le informazioni minime richieste.
  2. Sostituisci la navigazione principale con una navigazione “contatti”.
  3. Mantieni la tua procedura di pagamento breve e i tuoi passaggi chiari e logici.
  4. Mostra lo stato di avanzamento durante il processo di pagamento.
  5. Consenti agli utenti di utilizzare l'indirizzo di fatturazione come indirizzo di spedizione con un solo clic.
Pagina di pagamento da non fare
  1. Presenta nuove informazioni o scelte.
  2. Costringere le persone a "unirsi" o "diventare membri".
  3. Fai in modo che le persone reinseriscano le stesse informazioni due volte.

Come si accumula il tuo sito?

Non devi avere un milione di dollari per creare un'esperienza di acquisto positiva. Nessuno dei grandi marchi di cui sopra soddisfa le oltre 800 linee guida suggerite da Nielson Norman Group. Non dare per scontato che i tuoi clienti conoscano il tuo sito come te. Approfondisci queste nozioni di base e farai in modo che Google e i clienti apprezzino il tuo sito e acquistino da te.

Guida all'esperienza utente dell'e-commerce