Cosa fare e cosa non fare per la progettazione del carrello della spesa mobile: 6 pratici smontaggi (Guida approfondita di mCommerce)

Sai già che la tua pagina del carrello è un ingranaggio vitale nella tua macchina di e-commerce. Ma le pagine del tuo carrello mobile, le pagine visualizzate dai visitatori prima del checkout, stanno facendo il loro dovere?

In Growcode troviamo ripetutamente che le pagine del carrello sono una delle parti più ignorate dei negozi dei nostri clienti, specialmente quando si tratta di dispositivi mobili. E le conseguenze sono significative, intaccando seriamente i loro profitti.

Si prevede che le vendite di e-commerce rappresenteranno il 52,9% di tutte le vendite di e-commerce entro il 2021. Tuttavia, nel 2017, il tasso medio di abbandono del carrello degli acquisti mobili è stato dell'85,65%.

Ciò significa che di tutti i clienti che hanno aggiunto un prodotto o prodotti a un carrello, quasi 9 su 10 sono rimasti senza completare l'acquisto.

Si prevede che le vendite di #e-commerce rappresenteranno il 52,9% di tutte le vendite di e-commerce entro il 2021. #EcommerceStats Condividi il Tweet
Lead mobili sull'abbandono del carrello. Ricorda che i dati aggregati, come nel grafico sopra, non tengono conto di notevoli differenze tra i settori. Fonte.
In questo post, daremo un'occhiata a sei esempi di pagine di revisione del carrello. I primi tre utilizzano pratiche di progettazione solide che dovresti considerare di replicare, mentre i restanti esempi includono elementi che è meglio evitare.

Vale anche la pena ricordare che mentre ci concentriamo sugli errori di alcuni progetti di carrelli della spesa, ciò non significa che siano completamente terribili nel complesso. Analizziamo le best practice per il carrello degli acquisti per dispositivi mobili.

1. Fai: Amazon

Il carrello degli acquisti di Amazon per i siti Web mobili è un brillante esempio di design del carrello degli acquisti mobile ben fatto. Non è affollato, ma nemmeno eccessivamente minimale. Tutti gli elementi necessari sono inclusi, senza distogliere l'attenzione dal CTA principale. Ci sono anche una serie di "componenti aggiuntivi" discreti che possono essere selezionati per aumentare il valore dell'ordine, dalla confezione regalo agli articoli correlati.
Carrello della spesa mobile di Amazon ux. Tutti gli elementi necessari sono inclusi.

Suggerimento n. 1: un CTA chiaro nella parte superiore della pagina impostato in un colore contrastante. Mentre l'utente scorre verso il basso, questo CTA continua a fluttuare nella parte superiore dello schermo.

#Suggerimento per l'ottimizzazione del #carrello mobile: imposta un #CTA chiaro nella parte superiore della pagina con un colore contrastante. #ecommerce #ottimizzazione Clicca per twittare
Il CTA fluttua nella parte superiore dello schermo quando l'utente scorre verso il basso.
Suggerimento n. 2: il CTA è a livello dello schermo, quindi è facile toccarlo sia per gli utenti mancini che per quelli destrorsi.
Suggerimento n. 3: ripetizione della spedizione gratuita nella parte superiore della pagina per fugare ogni dubbio e "addolcire l'affare".
Suggerimento n. 4: le immagini e i nomi dei prodotti si collegano alla pagina di descrizione per coloro che desiderano ricontrollare i dettagli del prodotto.
Suggerimento n. 5: ci sono pulsanti chiari e facili da toccare per modificare l'importo dell'ordine, eliminare gli articoli e salvarli per dopo.
Suggerimento n. 6: la notifica "Disponibile" rassicura i clienti che non dovranno aspettare il prodotto.
Suggerimento per l'ottimizzazione del #carrello #mobile: la notifica "Disponibile" rassicura i #clienti che non dovranno aspettare il prodotto. #ecommerce Clicca per twittare
Suggerimento n. 7: Amazon mostra i prodotti che sono stati "Salvati per dopo", con un semplice pulsante "Sposta nel carrello" sotto.
Gli elementi salvati per dopo sono chiaramente visibili.
Suggerimento n. 8: inclusione di prodotti correlati - "Anche i clienti hanno acquistato" - che possono essere aggiunti al carrello senza uscire dalla pagina. Un ulteriore vantaggio per il design di questo elemento poiché il terzo elemento non è completamente mostrato e suggerisce quindi un movimento di scorrimento.
Suggerimento n. 9: molto spazio bianco e assenza di dettagli "riempitivi" non necessari. Amazon ha incluso solo ciò che è assolutamente necessario.
Suggerimento n. 10: collegamento alla "Cima della pagina" nel piè di pagina.

Vuoi più approfondimenti come questo?

Ottieni suggerimenti settimanali per l'e-commerce, strategie e conoscenze leader del settore.
Consegnato direttamente nella tua casella di posta.

su Ho letto l'informativa sulla privacy e accetto i termini e le condizioni della newsletter.

Seleziona questa casella di controllo per continuare

Woooh! Ti sei appena registrato. Controlla la tua casella di posta per confermare l'iscrizione.

2. Fare: punti metallici

La bellezza del carrello Staples è la sua semplicità. I prodotti possono essere esaminati in pochi secondi. Il risultato è una maggiore enfasi sulle opzioni incluse.
La bellezza del carrello Staples è la sua semplicità. Uno dei migliori carrelli di e-commerce mobile.
Suggerimento n. 1: come Amazon, si richiama l'attenzione sul fatto che il prodotto verrà spedito gratuitamente, sia nella parte superiore della pagina che nel riepilogo del pagamento. Inoltre, il testo è in verde, il che fa risaltare ulteriormente la notifica. Viene inoltre indicata la data esatta di “consegna prevista”.
Suggerimento n. 2: il design è estremamente semplice e viene fatto un uso eccellente dello spazio bianco. I clienti possono controllare rapidamente i loro ordini, apportare le modifiche necessarie senza uscire dalla pagina e verificare il totale.
Suggerimento n. 3: la casella "Buoni e ricompense" è discreta. Viene fornita anche l'importante opzione "ritiro in negozio" senza distogliere l'attenzione dal CTA principale.
Suggerimento n. 4: la parola "Sicuro" è inclusa nell'invito all'azione di pagamento.
Suggerimento n. 5: il piè di pagina è stato rimosso.

C'è qualcosa che non va? Sebbene Staples abbia molto a che fare, un problema con questo design del carrello è la semplicità dell'intestazione, che non include un menu espandibile o un modulo di ricerca. Se un'azienda vende solo un prodotto, questa potrebbe essere una soluzione praticabile. Per i siti con più prodotti, tuttavia, vale sempre la pena dare ai clienti la possibilità di navigare di nuovo se lo desiderano.

3. Fai: Sears

Sears offre molte opzioni aggiuntive, inclusi piani di pagamento, ritiro in negozio, opzioni regalo e promozioni. Il loro carrello è un buon esempio per i rivenditori che vogliono combinare molti elementi diversi in una pagina senza rovinare il design che impedisce l'abbandono del carrello mobile.
Il design del carrello mobile Sears contiene molti elementi, ma è comunque semplice.
Suggerimento n. 1: un CTA è incluso nella parte superiore della pagina accanto al totale parziale. Un'icona a forma di lucchetto rafforza ulteriormente la fiducia e viene offerta anche la possibilità di effettuare il checkout tramite Paypal.
Suggerimento n. 2: come articolo di alto livello, i piani di pagamento sono inclusi per dissipare qualsiasi esitazione in questa fase.
Suggerimento n. 3: i risparmi sulle vendite sono inclusi in rosso nella sezione di riepilogo dell'ordine, incoraggiando i clienti a fare clic per effettuare il checkout creando sia l'urgenza che riducendo i dubbi.
Suggerimento n. 4: viene fornito un collegamento per accedere al programma fedeltà che funge da ulteriore incentivo per i nuovi clienti. È importante notare che questo non è un collegamento per impostare un account del negozio senza alcun vantaggio, che sarebbe meglio incorporato nel modulo di pagamento.
Suggerimento n. 5: nella parte inferiore della pagina è incluso un sigillo di "cassa sicura".
C'è qualcosa che non va? C'è solo un po' troppo, e l'effetto è probabilmente un'attenzione dispersa per alcuni clienti. Non è necessario offrire abbonamenti a riviste e un collegamento al programma fedeltà in basso, ad esempio.

4. Da non fare: Vitacost

Sebbene Vitacost utilizzi molti degli elementi sopra descritti, la loro implementazione è spesso imperfetta. Il risultato è una pagina del carrello mal progettata che probabilmente vedrebbe un aumento delle conversioni del carrello degli acquisti con alcune piccole modifiche.
Vitacost utilizza molti degli elementi sopra descritti ma la loro implementazione è spesso imperfetta.
Errore n. 1: inclusione di una barra di ricerca invadente che allontana le persone dalla pagina del carrello. È una buona idea includere un'icona della barra di ricerca (come nell'esempio di Amazon) per le persone che vogliono continuare a navigare. Ma non renderlo troppo grande.

Suggerimento per l'ottimizzazione del #carrello #mobile: non includere una barra di ricerca invadente che allontana le persone dal carrello. #ecommerce Clicca per twittare
Errore n. 2: inclusione automatica di prodotti "BOGO" poco chiari (ne compri uno prendi metà prezzo) che potrebbe confondere o infastidire i clienti.
Errore n. 3: barra del codice promozionale invadente. Questo distoglie l'attenzione dal CTA principale e incoraggia i clienti a lasciare il carrello per cercare promozioni online. Le caselle promozionali dovrebbero essere visibili ma non eccessivamente. Dovrebbero certamente essere dopo un CTA.
Errore n. 4: il costo di spedizione è impostato su "TBD", il che alimenta il dubbio (in generale dovresti evitare le abbreviazioni)
Errore n. 5: il piè di pagina è troppo grande. Vitacost vuole che i clienti finiscano l'acquisto o scarichino l'app?
Errore n. 6: le opzioni del prodotto - per rimuovere o aumentare gli articoli - sono troppo piccole e difficili da toccare.
Errore n. 7: la barra mobile, visibile nella parte inferiore dello screenshot, occupa troppo spazio sullo schermo sui telefoni più piccoli.

5. Da non fare: Lonely Planet

Laddove la pagina Staples utilizza efficacemente un design minimale, Lonely Planet esclude troppi elementi. Non ci sono funzionalità per ridurre l'esitazione e creare fiducia, nessun consiglio o suggerimento sui prodotti per aumentare il valore dell'acquisto e molti dei pulsanti sono difficili da fare clic.
Lonely Planet esclude troppi elementi. Rimangono con molto spazio che potrebbe essere utilizzato per migliorare il carrello ux.
Errore n. 1: lo spazio è utilizzato male. Sarebbe meglio che il carrello riempisse l'intera pagina e utilizzasse lo spazio bianco, piuttosto che far apparire il contenuto corrente.
Errore n. 2: non sono incluse informazioni su consegna, sconti o opzioni di pagamento. Questi probabilmente diminuirebbero i dubbi e le paure dei clienti incerti.
Errore n. 3: non ci sono suggerimenti di prodotti correlati.
Errore n. 4: i pulsanti per aumentare o ridurre il numero di prodotti sono così piccoli da essere praticamente non cliccabili.
Errore n. 5: Il CTA - "Procedi al pagamento" - non sembra un pulsante.
Errore n. 6: il formato pop-out rende difficile toccare il CTA da sinistra. Consenti ai clienti di usare entrambi i pollici!

6. Non fare: Nike

Il problema principale con la pagina di Nike è il modo in cui i vari elementi sono stati inclusi casualmente, senza pensare a come potrebbero funzionare se posizionati insieme o in punti diversi della pagina. C'è anche confusione sul CTA.
Nella pagina di Nike sono stati inseriti a caso vari elementi.
Errore n. 1: Gli sconti sulla spedizione sono disponibili solo per i membri. Ciò aggiunge attriti inutili ed è probabile che agisca da disincentivo per quei clienti che non desiderano aderire, che penseranno di essere in perdita. Offri ai clienti la possibilità di accedere in fase di pagamento, insieme all'opzione di registrarsi per nuovi clienti. La pagina del carrello dovrebbe essere esclusivamente per la revisione degli ordini.

Errore n. 2: l'uso di due CTA. È quasi sempre meglio avere un CTA sulle pagine del carrello perché stai cercando una linea d'azione specifica. L'unico motivo per offrire più CTA è offrire ai clienti la possibilità di scegliere tra diverse opzioni di pagamento. Sarebbe meglio mostrare un modulo appropriato (un modulo di accesso o un modulo di indirizzo) dopo che un utente ti ha fornito il suo indirizzo email.

Errore n. 3: "Tipi di pagamento accettati" non sono elencati vicino al CTA di pagamento. È una buona idea includere questi badge nella pagina del carrello, soprattutto se non sei famoso come Nike, ma il piè di pagina non è il posto per loro.

Errore n. 4: il termine "ospite" può creare confusione se i clienti non si identificano in questo modo (puoi diventare un membro se fai acquisti come ospite?)

Concludere il design del carrello della spesa mobile

La maggior parte delle pagine del carrello con le migliori prestazioni ha un design pulito e semplice, ma fornisce anche il tipo e la quantità di informazioni corretti. Mentre stai ridisegnando il tuo, tieni presente che lo scopo delle pagine del carrello è che gli acquirenti possano rivedere e confermare il loro ordine, rimuovendo eventuali articoli non necessari e aggiungendo prodotti simili. Qualsiasi altra azione desiderata, come l'accesso al proprio account o la registrazione, può essere lasciata per la pagina di pagamento. Quindi, ricorda queste best practice per il carrello degli acquisti per dispositivi mobili e altre tecniche di ottimizzazione del carrello degli acquisti.

E ricorda, lo split-test è la chiave! Usa le tattiche descritte qui per creare i tuoi test e impegnarti a modificare gli elementi a lungo termine. Se lo fai, vedrai quasi sicuramente aumenti costanti nelle tue conversioni.

Ottieni l'elenco di controllo per l'ottimizzazione dell'e-commerce in 115 punti

Attingendo a otto anni di esperienza, abbiamo raccolto tutte le nostre migliori intuizioni in un unico libro: L'elenco di controllo per l'ottimizzazione dell'e-commerce di un negozio online di oltre 7 cifre. Se vuoi aumentare le prestazioni di tutte le tue pagine, dalla home page al checkout, prendi la tua copia qui.