
Il flusso di cassa del tuo e-commerce è dove si trovano i soldi. Pensaci. I visitatori occasionali lasciano il sito prima di entrare nella canalizzazione di pagamento. I compratori motivati vengono qui per finire il loro ordine.
Qualsiasi piccolo miglioramento del design nella tua UX di pagamento ha in genere un impatto diretto sulla quantità di denaro del tuo sito.
Un sito di e-commerce che ho analizzato di recente aveva una pagina di pagamento in cui l'84,7% del traffico procedeva all'acquisto. Ho calcolato che se potessimo aumentare tale percentuale al 90%, si otterrebbero 461 ordini in più e un ulteriore $ 87,175 al mese con una crescita del fatturato del 23,9%. I guadagni "piccoli" possono essere enormi.
Quindi, la domanda è: "Come possiamo ottenere più persone per passare attraverso il nostro flusso di checkout e completare gli acquisti? Le tattiche specifiche dipendono dal tuo sito, ma i principi per trovare la risposta sono universali.
Un quadro per pensare alle casse di e-commerce: il modello di comportamento di Fogg
La linea di fondo è questa: Comportamento = Motivazione x Abilità x Trigger.
Ecco il modello:
Vuoi mirare alla parte superiore destra del grafico: motivazione elevata, facile da fare, innesco sul posto. Se hai alta motivazione e scarsa capacità (difficile da fare), quello che otterrai è la frustrazione. Se la motivazione è bassa, ma facile da fare (ad esempio, elimina la spazzatura), ti da fastidio.
Come Amazon usa il modello di comportamento di Fogg
Quando Amazon ti invia un'email con una promozione di prodotto, questa è la motivazione e un grilletto. Le persone fanno clic sul link e arrivano alla pagina del prodotto. Leggono la copia e le recensioni, e guardano l'immagine, che aumenta la motivazione. "Aggiungi al carrello" è il trigger per avviare la procedura di checkout.
Che dire dell'abilità? Quanto è facile completare la procedura di checkout? Questo è dove Amazon prende a calci. Devi solo digitare la tua password e fare clic su un paio di volte. Il flusso di cassa è privo di attriti.
Ecco il flusso di lavoro effettivo sull'applicazione di commercio mobile di Amazon:

Fatto e fatto. Passiamo attraverso l'intero flusso di cassa per vedere cosa ne fa uno buono.
Come progettare la funzione "Aggiungi al carrello" e la pagina del carrello
Tutto inizia con le persone che aggiungono qualcosa al carrello. Nel momento in cui un visitatore aggiunge il primo oggetto al carrello, non sta navigando: sta facendo acquisti.
Come dovrebbe essere "aggiungi al carrello"?
Quando le persone aggiungono qualcosa al carrello sulle pagine dei tuoi prodotti, cosa dovrebbe accadere?
iot dovrebbe essere stupidamente ovvio che hanno aggiunto qualcosa al carrello. Chiara conferma È ridicolo il numero di siti che rovinano questo non mostrando una conferma adeguata o mostrando una piccola animazione o un piccolo testo di conferma che è difficile notare.
Non puoi perdere un carrello aggiunto in Bonobo. Dopo aver fatto clic su "Aggiungi al carrello", il carrello viene visualizzato con una piccola animazione, che è buona perché l'occhio umano reagisce al movimento. È un sottile spunto visivo che indica il passaggio dal visitatore all'acquirente.

Anche il contenuto del carrello insieme al pulsante "Pagamento" rimane visibile finché l'utente non fa clic altrove. Quello è buono. Vorrei cambiare il colore del pulsante "Acquista" in qualcosa di diverso dal blu: non spicca abbastanza. La cosa principale nella gerarchia visiva è il pulsante "Aggiungi al carrello", ma il prodotto è già nel carrello.
ASOS mostra anche una piccola animazione. Aprono il contenuto del carrello, quindi lo piegano dopo pochi secondi. Anche il pulsante "Aggiungi al carrello" diventa "Aggiunto", che è una bella conferma per gli acquirenti:

Manterrei il contenuto del carrello aperto fino a quando l'utente non fa una scelta cliccando da qualche parte. In questo modo, il pulsante "Cassa" continua a fissarli in faccia.
Mentre vogliamo sempre che comprino più cose, migliorare il processo di acquisto anche di un singolo articolo può portare a grandi miglioramenti. Spingerli verso la cassa è sempre una buona idea.
Una volta che il prodotto è nel carrello, allora cosa?
Ci sono due approcci principali:
- Mostra la conferma "Aggiungi carrello" e mantieni gli utenti sulla stessa pagina. Professionisti: Le persone non hanno chiesto di passare a un'altra pagina, quindi non ci sono sorprese. Potrebbero anche prendere in considerazione l'aggiunta di ulteriori articoli al carrello prima del check-out. Contro: Hanno già il prodotto che stanno guardando nel carrello. Sarebbe più utile per te se guardassero a qualcos'altro che potrebbero voler comprare.
- Trasferisci l'utente alla pagina del carrello. Professionisti: Li stai avvicinando di un passo per effettuare un pagamento. Questa è anche una grande opportunità per fare offerte di upsell. Contro: Potresti perdere la massimizzazione di "articoli per carrello".
Amazon ti porta a una pagina del carrello, conferma che hai aggiunto un prodotto al carrello e ti mostra upsells. Quello che Amazon fa bene sta riducendo il contenuto del carrello, così risaltano gli upsell:

Il giusto equilibrio tra le potenziali strategie dipende dal tuo settore e dai tuoi obiettivi, e sicuramente vuoi metterlo alla prova.
Metriche da tenere a mente:
- Valore medio della transazione;
- Quantità media per transazione.
Non vogliamo aumentare il numero di transazioni da solo ma anche l'importo speso per ogni transazione.
Visualizza bene il contenuto del carrello
I principi chiave per la visualizzazione efficace del contenuto del carrello sono chiarezza e controllo.
- Chiarezza. È facile e ovvio capire cosa c'è nel carrello e il costo finale, comprese spese di spedizione e tasse. I costi a sorpresa lungo la linea fanno sì che le persone abbandonino i carrelli.
- Controllo: È facile apportare modifiche, ad esempio aggiornare la quantità o rimuovere i prodotti.
ASOS ha una buona visione della pagina del carrello:

Cosa hanno ragione:
- Foto del prodotto;
- Nome e prezzo del prodotto;
- Possibilità di rimuovere, salvare per dopo, o modificare dettagli come dimensioni;
- Mostra il tipo di pagamenti che accettano;
- Mostra il prezzo totale e conferma la consegna gratuita;
- Chiama l'invito all'azione a "Acquista";
- Riduci l'incertezza evidenziando "Resi facili".
L'indochino ha un approccio piacevole e minimalista alla presentazione del contenuto del carrello. Detto questo, la pagina presenta ancora alcuni problemi, come una scatola di coupon prominente e l'impossibilità di modificare le quantità:

Ottieni la gerarchia visiva giusta
La cosa numero uno nella gerarchia visiva dovrebbe essere quella di continuare alla cassa. (Prova diversi CTA). Dovrebbero esserci due inviti all'azione: uno sopra e uno sotto il carrello.
Qualcosa del genere: i due pulsanti di pagamento si distinguono chiaramente:

Modcloth ha migliorato questa pagina dall'ultima revisione. In precedenza, aggiornando la digitazione richiesta quantità. Ora, puoi usare gli stepper per aumentare o diminuire la quantità.
Si noti che Modcloth offre anche un'opzione PayPal. Mentre la maggior parte delle persone preferisce pagare con una carta di credito, offrire 1-2 metodi di pagamento alternativi (ad esempio PayPal, Amazon) è una buona idea e ha dimostrato di aiutare le conversioni. Troppe scelte sono dolorose, però.
Modcloth ti ricorda anche che hanno resi gratuiti e spedizioni gratuite per ordini superiori a $ 75.
Non rendere i coupon prominenti
Quando le persone vedono un campo "Inserisci codice coupon qui", si sentono meno speciali. "Come mai non ne ho uno?" Molti vanno su Google per trovare un coupon; molti non tornano mai. Lasciare il sito in cerca di coupon è un motivo comune per l'abbandono del carrello.
Quindi, questa non è una buona idea:

Invece, hai un link di testo che dice "Hai un coupon?" O qualcosa di simile. Quando qualcuno fa clic sul link, crea un campo di input, come quello sopra riportato. I collegamenti testuali sono meno importanti, quindi meno persone presteranno attenzione a loro.
I clienti che hanno già un codice promozionale cercheranno un modo per inserirli. A meno che non lo nascondiate molto bene, lo troveranno e saranno in grado di applicare il loro codice coupon.
Ricorda agli acquirenti le cose buone: spedizione, resi e sicurezza
Quando riceveranno i loro beni? Quanto costa la spedizione. È gratis? La transazione sarà sicura? Ricorda alla gente.
Ecco un esempio che mostra quei tre messaggi chiave sotto il pulsante checkout, che dice anche "Pay Securely Now":

Carrelli permanenti FTW
Quando le persone aggiungono qualcosa al carrello, non lasciare scadere il contenuto del carrello. Utilizza le email di abbandono del carrello e gli annunci di retargeting per riportare le persone la settimana prossima o il prossimo mese in modo che possano continuare da dove avevano lasciato.
Processo di registrazione: per creare un account o no?
Molti siti di e-commerce vogliono che gli acquirenti si registrino prima di acquistare. Alcuni addirittura forzano la registrazione (cioè non è possibile acquistare senza registrarsi). Per farla breve: non farlo. Fa male le conversioni. Un sacco.
Uno su quattro abbandona gli acquisti online a causa della registrazione forzata. La registrazione forzata fa parte della "sindrome del marketer avido". È facile capire perché gli operatori di e-commerce vogliano farlo: sperano che l'utente si "rinchiuda" e acquisti di più perché hanno un account.
È questo veramente il caso? Oh per favore. Su quanti siti web hai un account registrato? Ti senti ora fedele a loro per quella ragione? Scommetto che non hai effettuato l'accesso alla maggior parte di loro più di una volta.
Ecco una buona storia sulla registrazione forzata, raccontata dal guru dell'usabilità Jared Spool:
È difficile immaginare un modulo che potrebbe essere più semplice: due campi, due pulsanti e un collegamento. Tuttavia, si è scoperto che questo modulo impediva ai clienti di acquistare prodotti da un importante sito di e-commerce, per un importo di $ 300.000.000 all'anno. Ciò che era ancora peggio: i progettisti del sito non avevano idea che ci fosse anche un problema.
La forma era semplice. I campi erano Indirizzo email e Parola d'ordine. I pulsanti erano Accesso eRegistrare. Il collegamento era Ha dimenticato la password. Era il modulo di accesso per il sito. È una forma che gli utenti incontrano continuamente. Come potrebbero avere problemi con esso?
Il problema non riguardava tanto il layout del modulo quanto il luogo in cui viveva la forma. Gli utenti l'avrebbero incontrato dopo aver riempito il carrello con i prodotti che volevano acquistare e premuto il Check-out pulsante. È venuto prima che potessero effettivamente inserire le informazioni per pagare il prodotto.
Il team ha visto il modulo come consentire ai clienti abituali di acquistare più velocemente. I nuovi acquirenti non si preoccuperebbero dello sforzo extra di registrazione perché, dopotutto, torneranno per altri e apprezzeranno la convenienza negli acquisti successivi. Tutti vincono, giusto?
Abbiamo condotto test di usabilità con persone che avevano bisogno di acquistare prodotti dal sito. Abbiamo chiesto loro di portare le loro liste della spesa e abbiamo dato loro i soldi per fare gli acquisti. Tutto quello che dovevano fare era completare l'acquisto.
Ci siamo sbagliati riguardo agli acquirenti per la prima volta. Hanno fatto mente registrando. Si risentirono di dover registrarsi quando incontrarono la pagina. Come ci ha detto un cliente, "Non sono qui per entrare in una relazione. Voglio solo comprare qualcosa. "
Eliminando la registrazione forzata, hanno aumentato le vendite di $ 300 milioni.
Il team di Spool ha anche capito che molte persone avevano più account nel sistema. La gente aveva dimenticato di avere già dei conti. Ricevevano messaggi di errore quando cercavano di crearne uno con la loro e-mail standard, quindi dovevano usare una e-mail alternativa per creare più account.
Cosa dovresti fare invece? Offri sempre un checkout per gli ospiti. Puoi lavorare sulla registrazione dopo la vendita:
- Non menzionare nemmeno la parola "Registro". Dì "Nuovo cliente" o un termine simile.
- Dopo il check-out, crea la creazione dell'account nella pagina "Grazie". Hai già il loro nome, indirizzo email e indirizzo dal checkout, quindi non dovrebbe richiedere più di pochi clic per creare un account. Richiedi la password desiderata (o fornisci un'opzione per generarla automaticamente) e conferma il permesso di creare il proprio account.
Nella mia esperienza, l'approccio più comune sui siti di e-commerce è ancora non ottimale. Nel complesso, è troppo impegnato, e chiede ai nuovi clienti di fare una scelta, portando a esitazioni:

Ci sono molte opzioni, molto più preferibili.
Opzione di registrazione checkout 1
Offri agli utenti due scelte, nuove o di ritorno:

Asos non ha sempre avuto questo approccio. Questa era la loro precedente pagina di registrazione, che aveva tre scelte:

Uccidere questo approccio e passare a una versione semplificata ha ridotto l'abbandono del carrello del 50%!
È ancora (essenzialmente) una registrazione forzata, ma è confezionato in modo diverso. È anche più semplice con le opzioni di accesso social. Un tipico problema di usabilità si riduce a pochi clic.
Check-out registrazione opzione 2
L'abbandono del carrello è un grosso problema. Chiedere la tua e-mail in anticipo facilita l'avvio di una procedura di recupero del carrello abbandonata. Inoltre, ci sono due scelte facili: nessun sovraccarico sensoriale:


Check-out registrazione opzione 3
Un altro ottimo modo è saltare completamente lo schermo di accesso. Invece, è semplicemente l'impostazione predefinita per il checkout degli ospiti. Le persone con un account esistente possono accedere tramite il link e i nuovi clienti possono creare un account dopo aver pagato:

Cosa fa bene Candele Diamanti non è nemmeno visibile. Creano un account per te automaticamente ma non dirlo. Diciamo che attraversi quattro checkout con lo stesso indirizzo email, quindi decidi di creare un account (inserisci una password, in sostanza).
Tutti i precedenti ordini con quell'indirizzo email sono uniti per questo account, quindi il tuo account appena creato viene fornito con una cronologia degli ordini corretta.
Check-out registrazione opzione 4
Con questa opzione, la registrazione dell'account viene offerta insieme a un incentivo al completamento dell'acquisto. Ecco un esempio di Speedo:

Le persone non sono infastidite da alcuna registrazione dell'account finché non ti pagano i soldi. Se dovessi scegliere, cosa è più importante per te: registrazioni di account o acquisti?
Di solito, le pagine di "ringraziamento" non sono molto utili, ma non così qui. Ti offrono un'offerta senza compromessi: inserisci una password e ottieni un coupon (oltre al monitoraggio dell'ordine, agli acquisti più veloci, ecc.). La percentuale di creazione dell'account per i nuovi utenti qui è spesso superiore al 75%.
Pagina di verifica dell'e-commerce
Questa è la pagina dei soldi. Qualsiasi passaggio sulla tua pagina di pagamento finale farà una bella differenza sul tuo conto bancario. Ecco alcuni principi che ti aiuteranno a creare un passaggio finale migliore nel flusso di pagamento.
Chiedi informazioni sulla carta di credito per ultime
Chiedere alle persone di completare le informazioni di spedizione prima che arrivino alla fatturazione. Questo mette in azione i principi di Commitment and Consistance di Cialdini. Una volta che le persone iniziano a fare qualcosa, sentono che dovrebbero finire.
A loro è già stato chiesto di inserire il proprio nome, e-mail e informazioni di spedizione, che, idealmente, è lo stesso dell'indirizzo di fatturazione, quindi non è necessario ripeterlo.
Lo stesso principio, a volte chiamato la tecnica foot-in-the-door, si applica ai campi modulo. Inizia con i campi più facili, come il nome. Il campo del numero di carta di credito è il "più difficile", quindi dovrebbe venire per ultimo.
Questo è quello che dovresti non fare:

Questo è meglio. (Vieni qui dalla pagina di spedizione.)

Il bene: Ha un chiaro flusso di passi 1-2-3. Il campo del nome precede i dettagli della carta e l'indirizzo di fatturazione (se è lo stesso della spedizione) non deve essere inserito di nuovo.
Il cattivo: Il CTA principale è "Salva e continua". Continua dove? Dovrebbe essere specifico, come "Continua a rivedere" o qualsiasi altra azione successiva.
Usa un modulo di pagamento che assomiglia ad una vera carta di credito
Aggiungi un tocco di vita reale progettando il modulo di pagamento in questo modo stratosferico:

È possibile ottenere un'interfaccia per questo chiamato Skeuocard gratuitamente (!) Da implementare sul proprio sistema. Prova una demo qui.
Rendi sicuro il processo di pagamento
La sicurezza è una preoccupazione seria. Oltre a rendere i pagamenti sicuri con SSL, dillo alla gente. Questo è un esempio di un modulo creato per sembrare sicuro:

Alcuni motivi per cui funziona:
- Colore di sfondo diverso per il campo del numero della carta di credito.
- Logo SSL.
- Dichiarazione scritta: "Pagamento sicuro con carta di credito. Si tratta di un pagamento sicuro SSL crittografato a 128 bit. "
- Spiegazioni per scadenza e codice di sicurezza.
Nota che se il tuo pubblico non è esperto di tecnologia, potrebbe non sapere cosa sono SSL o HTTPS, quindi parla in termini chiari.
Conserva le carte di credito nel tuo sistema
Certo, devi avere a che fare con la conformità PCI, e c'è il rischio di essere hackerati, ma guadagnerai molto di più dal ritorno degli utenti. Quando le persone non hanno bisogno di inserire i loro dati di fatturazione, l'acquisto diventa una procedura con un clic.
Amazon lo sta uccidendo in gran parte perché l'attrito per gli acquirenti di ritorno è stato quasi completamente rimosso! Il flusso di pagamento è a malapena un flusso: si tratta di un evento con un clic.
I visitatori di ritorno sono molto più propensi ad acquistare rispetto ai nuovi visitatori, ma questo è nulla rispetto al ritorno acquirenti. Rendilo facile per loro.
Conclusione
Inizia i tuoi sforzi di ottimizzazione e-commerce al flusso di pagamento. I guadagni relativi qui comporteranno somme assolute molto belle.
Per migliorare la UX della tua procedura di checkout:
- Rendi la funzione "Aggiungi al carrello".
- Rendi più facile per i visitatori modificare o rimuovere gli articoli del carrello.
- Semplifica la procedura di registrazione: lascia che i nuovi acquirenti si registrino dopo l'acquisto.
- Alla pagina di controllo, chiedi prima le informazioni più facili.