eCommerce UX - Strategie e principi di progettazione essenziali

Pubblicato: 2022-03-11

Poiché il panorama generale della vendita al dettaglio continua ad evolversi e le catene di mattoni e malta sono in difficoltà, il mercato dell'e-commerce è pronto per la crescita. Entro il 2021, le vendite globali di eCommerce dovrebbero crescere fino a superare i 4,48 trilioni di dollari, più del doppio rispetto al 2017.

I rivenditori e i designer di eCommerce che prestano molta attenzione all'esperienza dell'utente e aderiscono a una serie standard di principi di progettazione dell'esperienza utente di eCommerce per il flusso di acquisto dei clienti possono capitalizzare questa crescita del mercato e vedere ritorni finanziari tangibili.

Il flusso di acquisto è un percorso generale dell'utente che, se implementato correttamente, si traduce in più acquisti d'impulso, meno abbandono del carrello e maggiore conversione complessiva.

Il percorso dell'utente include:

  • Scoperta del sito web
  • Cerca e sfoglia il prodotto
  • Pagina del prodotto
  • Carrello
  • Guardare
  • Conferma

Questo articolo copre questi punti chiave del percorso dell'utente e come i designer di eCommerce possono rendere l'esperienza del cliente piacevole, semplice e senza problemi.

Fasi del percorso del cliente ecommerce ux
Fasi del percorso dell'utente nellaprogettazione del sito eCommerce .

Scoperta del sito web

Posiziona il marchio in modo chiaro

I visitatori ottengono le prime impressioni su un sito Web in appena 50 millisecondi. Un sito Web di eCommerce deve attirare l'attenzione dell'utente mostrando in modo chiaro e rapido ciò che vende e dove si inserisce nel mercato generale.

Ad esempio, il sito Web di un rivenditore di gioielli di lusso potrebbe avere un aspetto molto diverso da un sito per un grande negozio attento al budget. Il rivenditore di elettronica di fascia alta Bang & Olufsen trasmette la qualità del suo marchio utilizzando caratteri eleganti, una tavolozza di colori sofisticata e immagini di prodotti eleganti.

ecommerce ux design per una landing page
Posizionamento del marchio utilizzando font, fotografia e testo di Bang & Olufsen.

Mostra inviti all'azione pertinenti

Quando l'utente arriva sulla home page, salutalo con contenuti tempestivi e inviti all'azione specifici (CTA). Un'immagine banner di grandi dimensioni che corrisponde alla stagione in corso o a un evento specifico insieme a un CTA appropriato aiuta l'utente a passare alla fase successiva del processo di acquisto. Quando crei CTA, evita frasi generiche come "iniziare" che non dicono chiaramente all'utente cosa verrà dopo.

Polaroid ha creato un CTA efficace durante le festività natalizie aiutando gli utenti che stavano acquistando regali. Invece di utilizzare una frase generica, Polaroid ha utilizzato "Shop Gifts", chiarendo che l'utente sarebbe stato portato in un'area del sito con suggerimenti regalo.

invito all'azione per l'e-commerce
Polaroid mostra un CTA per acquistare regali sulla home page.

Personalizza pagine di destinazione per SEO

Collegando i termini di ricerca dell'utente da motori di ricerca come Google a pagine di destinazione specifiche, i rivenditori di eCommerce possono catturare gli utenti che sono in missione per trovare un prodotto specifico.

Quando un utente cerca qualcosa, ci sono buone probabilità che stia cercando di acquistarlo. La creazione di una pagina di destinazione personalizzata per termini di ricerca di prodotti comuni aumenta le possibilità di un rivenditore di ottenere una vendita (e forse un nuovo cliente). L'azienda di cancelleria Papier lo fa bene con una pagina creata appositamente per gli inviti di nozze che appare nei risultati di ricerca di Google.

Pagina di destinazione dell'e-commerce mobile
Pagina di destinazione dedicata per la cancelleria per matrimoni di Papier.

Ricerca prodotti e Sfoglia

Fornire ricerca in loco

Sebbene possa sembrare piuttosto semplice, molti siti non offrono ancora una ricerca generale a livello di sito o, se lo fanno, non è ottimizzata correttamente. Ma la ricerca in loco è fondamentale per una solida esperienza di acquisto eCommerce.

Secondo Invesp, il 60% degli acquisti online non è impulsivo. Le persone spesso sanno cosa stanno cercando e digitare la loro query in una barra di ricerca su un sito Web di e-commerce, come il nome di un prodotto o il numero di modello, è molto più veloce che scorrere le opzioni di menu.

Funzionalità aggiuntive come la ricerca predittiva o il completamento automatico aiutano gli utenti a visualizzare rapidamente le opzioni. Apple utilizza questa tattica con un campo di ricerca che si aggiorna dinamicamente con collegamenti rapidi a prodotti e ricerche suggerite popolari.

campo di ricerca dell'e-commerce
Implementazione della ricerca da parte di Apple.

Ispira i visitatori in modalità Scoperta

Mentre molti acquirenti hanno in mente un articolo specifico per l'acquisto, non tutti i visitatori sono così sicuri. Secondo Nielsen Norman, esistono cinque tipi di acquirenti di eCommerce, uno dei quali è il "browser". I browser non stanno necessariamente cercando qualcosa di specifico. Piuttosto, si guardano intorno tranquillamente per vedere se trovano qualcosa di interessante.

I siti di e-commerce possono supportare l'acquirente in modalità discovery mostrando loro i prodotti nuovi o più venduti e consentendo loro di vedere facilmente e rapidamente le categorie di prodotti.

Etsy coinvolge i browser mostrando loro ciò che è popolare in questo momento e visualizzando chiaramente le categorie generali di prodotti, sia nella navigazione che nei contenuti della home page.

ecommerce ux - scoperta del prodotto
Etsy aiuta gli utenti a scoprire ciò che è popolare oltre a visualizzare le categorie.

Usa filtri e ricerca sfaccettata

La ricerca sfaccettata utilizza il filtro e fa un ulteriore passo avanti consentendo agli utenti di selezionare più attributi alla volta.

Quando crei filtri, invece di limitare le opzioni a criteri generali come taglia, colore o prezzo, aggiungi filtri specifici per categorie specifiche per i prodotti venduti. Questi filtri potrebbero essere cose come vestibilità o tessuto per abbigliamento, caratteri o occasione per inviti e dimensioni dello schermo o processore per gadget.

Una volta che un utente ha applicato i filtri, dovrebbe essere immediatamente evidente nell'interfaccia utente quali filtri sono stati applicati. L'utente dovrebbe anche essere in grado di rimuovere facilmente i filtri applicati.

ASOS mostra una gamma dettagliata di filtri per ciascuna categoria e mostra chiaramente quali filtri sono stati applicati.

Filtraggio e-commerce mobile
Filtri specifici per categoria di ASOS.

Pagina del prodotto

Visualizza in evidenza le azioni primarie

L'utente non dovrebbe mai chiedersi come fare qualcosa di importante, come inserire un prodotto nel carrello. Visualizza le azioni principali come "aggiungi al carrello" o "acquista ora" come pulsanti e mettile in una posizione prominente sullo schermo rispetto al resto del contenuto.

Il rivenditore di articoli per la casa Lowe's consente all'utente di sapere come aggiungere un prodotto al carrello con un grande pulsante verde come una delle cose più importanti della pagina.

Le migliori pratiche di ecommerce ux hanno mostrato in modo evidente l'azione principale
Lowe's mostra l'azione principale di "Aggiungi al carrello" come un grande pulsante verde.

Fornire informazioni dettagliate sul prodotto

Mostra foto professionali di alta qualità e descrizioni dettagliate per aiutare gli acquirenti a comprendere il prodotto.

Usa la divulgazione progressiva e la gerarchia visiva per fornire all'utente la giusta quantità di informazioni di cui ha bisogno. Fornisci loro immediatamente le informazioni più importanti, quindi aggiungi i dettagli più in basso nella pagina per gli utenti che vogliono saperne di più.

Rompi le descrizioni lunghe in sezioni; ad esempio, panoramica, dimensioni/dimensioni, caratteristiche dettagliate e informazioni sulla spedizione. L'uso della navigazione espandi/comprimi per sezioni aggiuntive, come fa Myprotein, aiuta a evitare che l'utente si senta sopraffatto.

Mobile e-commerce ux - descrizione del prodotto
La descrizione del prodotto è organizzata in una serie di sezioni espandibili su Myprotein.

Costruisci la fiducia dei clienti

Evita di lasciare che i clienti indovinino le opzioni di spedizione, la disponibilità del prodotto e le politiche di reso. Assicurarsi che tutte queste informazioni siano prontamente disponibili, il che crea fiducia e fiducia nei clienti e può aiutare a spingere un cliente incerto verso un acquisto. Sapere se e come possono restituire qualcosa li aiuta a prendere decisioni più informate.

ASOS mostra chiaramente importanti informazioni su spedizione e restituzione su ogni pagina di prodotto utilizzando una modale accessibile da un link sotto ogni nome di prodotto.

ecommerce ux - politica di spedizione e restituzione
ASOS mostra le informazioni su spedizione e restituzione in un collegamento modale dalla pagina dei dettagli del prodotto.

Aggiungi prova sociale

La prova sociale è un concetto che significa che le persone sono influenzate dal comportamento degli altri. Il concetto fa parte dei principi di persuasione del Dr. Robert Cialdini (uno dei principali ricercatori nella scienza dell'influenza) e ha dimostrato di funzionare.

I rivenditori di e-commerce possono rafforzare la fiducia dell'acquirente con prove sociali aggiungendo valutazioni, recensioni e commenti dei clienti. I prodotti su Amazon hanno spesso migliaia di recensioni e gli utenti possono ordinarli in base al livello di valutazione a stelle.

recensioni dei clienti di e-commerce ux
Recensioni di prodotti su Amazon.

Carrello della spesa

Mostra un riepilogo chiaro dell'ordine

Prima che l'acquirente termini l'acquisto, mostragli un riepilogo dell'ordine chiaro e conciso che includa gli articoli acquistati, la quantità e il prezzo di ciascun articolo e il totale dell'ordine. Consenti all'utente di modificare tutti gli articoli che desidera aggiornare o eliminare ed evitare sorprese relative alle spese di spedizione includendo un riepilogo della spedizione.

Il Modist mostra sia un chiaro riepilogo dell'ordine che una ricevuta. L'utente può gestire facilmente gli articoli che ha selezionato (sposta nella lista dei desideri, rimuovere, modificare la quantità) e visualizzare sia un riepilogo che un dettaglio dettagliato di spedizione e tasse.

Borsa della spesa per ecommerce ux mobile
Panoramica dell'ordine e ripartizione dettagliata su The Modist.

Guardare

Consenti agli utenti di effettuare il check-out come ospiti

Gli acquisti impulsivi rappresentano quasi il 40% di tutti i soldi spesi in eCommerce. Elimina l'ostacolo aggiuntivo della creazione di un account o dell'accesso consentendo agli acquirenti di effettuare il check-out come ospiti. Durante il processo di check-out come ospite, una semplice integrazione per creare un account può convertire alcuni ospiti in utenti dell'account.

Aesop consente agli utenti di effettuare facilmente il check-out come ospiti dando anche la possibilità di accedere o registrarsi. Fornire più opzioni in un unico modulo rimuove i potenziali blocchi di acquisto per coloro che desiderano effettuare il check-out rapidamente, ma offre anche agli utenti che desiderano registrarsi la possibilità di farlo.

accesso e-commerce ux
Schermata di accesso di Aesop con l'opzione "continua come ospite".

Fornire feedback visivo durante il processo di pagamento

L'inclusione di una barra di avanzamento aiuta i clienti a capire dove si trovano nel processo di pagamento e quanto hanno ancora da completare.

Apple mostra all'utente ogni passaggio del processo e consente loro di navigare tra i passaggi utilizzando i collegamenti di avanzamento. L'avanzamento viene salvato, quindi l'utente non perde nulla mentre si sposta tra i passaggi.

barra di avanzamento del checkout di ecommerce ux
Apple ha una barra di avanzamento del checkout passo dopo passo.

Usa metodi di pagamento comuni

Oltre a consentire il pagamento tramite le principali carte di credito, l'aggiunta di altri metodi di pagamento popolari come PayPal può aumentare la conversione per gli acquirenti che non vogliono cedere i dati della propria carta di credito.

Nei Paesi Bassi, iDEAL viene spesso utilizzato per le transazioni eCommerce e il 60% dei consumatori olandesi lo ha utilizzato in un acquisto recente. Il rivenditore di abbigliamento Scotch & Soda consente agli acquirenti di effettuare il check-out con iDEAL e PayPal.

opzioni di pagamento e-commerce
Diversi metodi di pagamento nel processo di pagamento di Scotch & Soda.

Conferma dell'ordine

Visualizza una conferma d'ordine dettagliata dopo l'acquisto

Una volta che il cliente ha completato l'acquisto, forniscigli una conferma che includa l'elaborazione del pagamento riuscita e i dettagli di consegna come indirizzo, metodo di consegna e data di consegna prevista.

Questo concetto di e-mail di conferma per Amazon mostra il numero d'ordine, fornisce una panoramica degli articoli acquistati e fornisce una data di spedizione e alcuni consigli per acquisti futuri.

e-commerce ux conferma d'ordine
Concetto di email di conferma dell'ordine di Drew Cristiano.

Invia gli aggiornamenti dell'ordine e della spedizione tramite e-mail

Oltre alla schermata di conferma, l'invio di un'e-mail di conferma aiuta a tenere l'utente informato sullo stato del proprio acquisto. Sebbene tutti i clienti debbano ricevere un'e-mail di conferma, ciò è particolarmente utile nei casi in cui gli utenti hanno effettuato il check-out come ospiti e non dispongono di un account sul sito Web per controllare i loro ordini passati.

Se qualcosa cambia con l'ordine, come un ritardo nella consegna, invia un aggiornamento. Una volta spedito l'articolo, invia un'e-mail di aggiornamento con il numero di tracciamento.

Sommario

I principi in questo articolo forniscono una linea di base dei punti di contatto del percorso dell'utente che ogni designer di eCommerce dovrebbe seguire, ma è solo l'inizio. Per ulteriori informazioni su informazioni più specifiche sull'esperienza utente dell'eCommerce mobile, visita eCommerce per l'esperienza mobile o leggi di più sulla progettazione della pagina di destinazione Come progettare pagine di destinazione efficaci.

Il mercato in crescita dell'eCommerce rappresenta molte opportunità per i rivenditori. Coloro che riconoscono l'importanza della UX e seguono le migliori pratiche per il percorso dell'utente nell'eCommerce possono rimanere competitivi e influenzare positivamente i loro profitti.

• • •

Ulteriori letture sul blog di Toptal Design:

  • Tendenze di spicco dell'e-commerce e loro influenza sul design (con infografica)
  • UX di eCommerce per l'esperienza mobile
  • eCommerce UX: una panoramica delle migliori pratiche (con infografica)
  • La guida definitiva alla progettazione di siti Web di e-commerce
  • eCommerce ridisegnato: come modifiche minori hanno apportato importanti miglioramenti alla UX