Come progettare un flusso di pagamento e-commerce che converte

Il tuo flusso di pagamento e-commerce è dove sono i soldi. Pensaci. I visitatori casuali lasciano il sito prima di entrare nella canalizzazione di pagamento. Gli acquirenti motivati ​​vengono qui per completare il loro ordine.

Qualsiasi piccolo miglioramento del design nella tua UX di pagamento di solito ha un impatto diretto su quanto guadagna il 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 aumentarlo al 90%, si tradurrebbe in 461 ordini in più e ulteriori $ 87.175 al mese, con una crescita dei ricavi del 23,9%. I "piccoli" guadagni possono essere enormi.

Quindi, la domanda è: "Come possiamo convincere più persone a seguire il nostro flusso di pagamento 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 dell'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 in alto a destra del grafico: alta motivazione, facile da fare, un trigger in atto. Se hai un'alta motivazione e una scarsa capacità (difficile da fare), ciò che otterrai è la frustrazione. Se è poco motivato ma facile da fare (es. portare fuori la spazzatura), ti da fastidio.

In che modo Amazon utilizza il modello di comportamento di Fogg

Quando Amazon ti invia un'e-mail con una promozione di un prodotto, è una motivazione e un fattore scatenante. Le persone cliccano sul link e arrivano alla pagina del prodotto. Leggono la copia e le recensioni e guardano l'immagine, il che aumenta la motivazione. "Aggiungi al carrello" è il trigger per avviare il processo di pagamento.

E la capacità? Quanto è facile completare la procedura di checkout? È qui che Amazon fa il culo. Devi solo digitare la tua password e fare clic un paio di volte. Il flusso di cassa è privo di attrito.

Ecco il flusso di lavoro effettivo sull'applicazione di commercio mobile di Amazon:

Fatto e fatto. Esaminiamo l'intero flusso di pagamento passo dopo passo per vedere cosa ne fa uno buono.

Nota: puoi ottenere tantissimi altri suggerimenti per l'e-commerce dal nostro rapporto completo sulle linee guida per l'e-commerce (247 linee guida specifiche per l'e-commerce).

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 articolo 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 succedere?

I t dovrebbe essere stupidamente ovvio che hanno aggiunto qualcosa al carrello. Chiara conferma. È ridicolo quanti siti rovinino tutto questo non mostrando una conferma adeguata o mostrando una piccola animazione o un piccolo testo di conferma che è difficile da 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, il che è positivo perché l'occhio umano reagisce al movimento. È un sottile segnale visivo che indica il passaggio dal visitatore all'acquirente.

Anche il contenuto del carrello insieme al pulsante "Checkout" rimane visibile fino a quando l'utente non fa clic da qualche altra parte. Quello è buono. Vorrei cambiare il colore del pulsante "Checkout" in qualcosa di diverso dal blu: non risalta 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 ripiegano dopo pochi secondi. Anche il pulsante "Aggiungi al carrello" cambia in "Aggiunto", che è una bella conferma per gli acquirenti:

Manterrei il contenuto del carrello aperto fino a quando l'utente non fa una scelta facendo clic da qualche parte. In questo modo, il pulsante "Checkout" continua a guardarli in faccia.

Anche se vogliamo che acquistino sempre più cose, migliorare il processo per acquistare anche un singolo articolo può portare a grandi miglioramenti. Spingerli verso la cassa è sempre una buona idea.

Una volta che il prodotto è nel carrello, cosa succede?

Ci sono due approcci principali:

1. Mostra la conferma di "aggiunta al carrello" e mantieni gli utenti sulla stessa pagina. Pro: le persone non hanno chiesto di passare a un'altra pagina, quindi non ci sono sorprese. Potrebbero anche considerare di aggiungere più articoli al carrello prima del check-out. Contro: Hanno già il prodotto che stanno guardando nel carrello. Ti sarebbe più utile se guardassero qualcos'altro che potrebbero voler comprare.
2. Trasferisci l'utente alla pagina del carrello. Pro: li stai portando un passo avanti verso l'effettuazione di un pagamento. Questa è anche una grande opportunità per fare offerte di upsell. Contro: potresti perdere la massimizzazione degli "articoli per carrello".

Amazon ti porta a una pagina del carrello, conferma che hai aggiunto un prodotto al carrello e ti mostra gli upsell. Ciò che Amazon fa bene è ridurre il contenuto del carrello, quindi gli upsell si distinguono:

Il giusto equilibrio di potenziali strategie dipende dal tuo settore e dai tuoi obiettivi e sicuramente vuoi testarlo.

Metriche da tenere a mente:

• Valore medio della transazione;
• Quantità media per transazione.

Non vogliamo aumentare solo il numero di transazioni ma anche l'importo speso per ciascuna transazione.

Visualizza bene il contenuto del carrello

I principi chiave per visualizzare in modo efficace il contenuto del carrello sono chiarezza e controllo.

• Chiarezza. È facile e ovvio capire cosa c'è nel carrello e il costo finale, comprensivo di spese di spedizione e tasse. I costi a sorpresa su tutta la linea fanno sì che le persone abbandonino i carrelli.
• Controllo: è facile apportare modifiche, come aggiornare la quantità o rimuovere prodotti.

ASOS ha una buona interpretazione 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 le dimensioni;
• Mostra il tipo di pagamenti che accettano;
• Mostra il prezzo totale e conferma la consegna gratuita;
• Chiaro invito all'azione per "Checkout";
• Riduci l'incertezza evidenziando "Resi facili".

Indochino ha un approccio gradevole e minimalista alla presentazione del contenuto del carrello. Detto questo, la pagina presenta ancora alcuni problemi, come una casella di coupon prominente e l'impossibilità di modificare le quantità:

Ottieni la gerarchia visiva giusta

La cosa numero uno nella gerarchia visiva dovrebbe essere continuare fino alla cassa. (Prova diverse 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 volta che l'abbiamo recensita. In precedenza, l'aggiornamento della quantità richiesta digitava. Ora puoi usare gli stepper per aumentare o diminuire la quantità.

Nota che Modcloth offre anche un'opzione PayPal. Sebbene la maggior parte delle persone preferisca pagare con carta di credito, offrire 1-2 metodi di pagamento alternativi (ad es. PayPal, Amazon) è una buona idea e ha dimostrato di favorire le conversioni. Troppe scelte fanno male, però.

Modcloth ti ricorda anche che hanno resi gratuiti e spedizione gratuita per ordini superiori a $ 75.

Non mettere in evidenza i coupon

Quando le persone vedono un campo "Inserisci il 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. Uscire dal sito alla ricerca 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 collegamento, fai apparire un campo di input, come quello sopra. I collegamenti di testo sono meno evidenti, quindi meno persone vi presteranno attenzione.

I clienti che hanno già un codice coupon cercheranno un modo per inserirlo. A meno che non lo nascondi 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 la loro merce? Quanto costa la spedizione. È gratis? La transazione sarà sicura? Ricorda alle persone.

Ecco un esempio che mostra quei tre messaggi chiave sotto il pulsante di pagamento, che dice anche "Paga in modo sicuro ora":

Carrelli persistenti FTW

Quando le persone aggiungono qualcosa al carrello, non lasciare che il contenuto del carrello scada. Usa le email di abbandono del carrello e gli annunci di retargeting per riportare le persone la prossima settimana o il mese prossimo in modo che possano continuare da dove avevano lasciato.

Processo di registrazione: creare un account o no?

Molti siti di e-commerce vogliono che gli acquirenti si iscrivano prima di acquistare. Alcuni addirittura impongono 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é i marketer di e-commerce vogliono farlo: sperano che l'utente venga "bloccato" e comprerà di più perché ha un account.

È davvero così? Oh per favore. Su quanti siti web hai un account registrato? Ti senti ora fedele a loro per questo motivo? Scommetto che non hai effettuato l'accesso alla maggior parte di essi più di una volta.

Ecco una buona storia sulla registrazione forzata, raccontata dal guru dell'usabilità Jared Spool:

È difficile immaginare un modulo più semplice: due campi, due pulsanti e un collegamento. Tuttavia, si scopre 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. Cosa c'era di peggio: i progettisti del sito non avevano idea che ci fosse anche un problema.

La forma era semplice. I campi erano Indirizzo e -mail e Password. I pulsanti erano Accedi e Registrati. Il collegamento era Password dimenticata. Era il form di login per il sito. È un modulo 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 il modulo. Gli utenti lo avrebbero incontrato dopo aver riempito il carrello con i prodotti che desideravano acquistare e premuto il pulsante Checkout . È arrivato prima che potessero effettivamente inserire le informazioni per pagare il prodotto.

Il team ha ritenuto che il modulo consentisse ai clienti abituali di acquistare più velocemente. A chi acquista per la prima volta non dispiacerebbe lo sforzo extra di registrarsi perché, dopo tutto, torneranno per di più e apprezzeranno l'opportunità negli acquisti successivi. Tutti vincono, no?

Abbiamo condotto test di usabilità con le persone che avevano bisogno di acquistare prodotti dal sito. Abbiamo chiesto loro di portare le loro liste della spesa e gli abbiamo dato i soldi per fare gli acquisti. Tutto quello che dovevano fare era completare l'acquisto.

Ci sbagliavamo sugli acquirenti per la prima volta. Si sono preoccupati di registrarsi. Si sono risentiti dovendo registrarsi quando hanno incontrato la pagina. Come ci ha detto un cliente, “Non sono qui per iniziare una relazione. Voglio solo comprare qualcosa".

Rimuovendo la registrazione forzata, hanno aumentato le vendite di $ 300 milioni.

Il team di Spool ha anche scoperto che la maggior parte delle persone aveva più account nel sistema. La gente aveva dimenticato di avere già dei conti. Hanno ricevuto messaggi di errore quando hanno provato a crearne uno con la loro e-mail standard, quindi hanno dovuto utilizzare un'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 "Registrati". Dire "Nuovo cliente" o un termine simile.
• Dopo il check-out, offri la creazione dell'account nella pagina "Grazie". Hai già il loro nome, e-mail e indirizzo dalla cassa, quindi non dovrebbero essere necessari più di pochi clic per creare un account. Richiedi la password desiderata (o fornisci un'opzione per generarla automaticamente) e conferma l'autorizzazione per creare il loro account.

Nella mia esperienza, l'approccio più comune sui siti di e-commerce è ancora non ottimale. Nel complesso, è troppo occupato e chiede ai nuovi clienti di fare una scelta, portando all'esitazione:

Ci sono diverse opzioni, molto più preferibili.

Checkout opzione di registrazione 1

Offri agli utenti due scelte, nuovo o di ritorno:

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

Eliminare questo approccio e passare a una versione semplificata ha ridotto l'abbandono del carrello del 50%!

È ancora (essenzialmente) una registrazione forzata, ma è confezionata in modo diverso. È anche più facile con le opzioni di accesso social. Un tipico problema di usabilità si riduce a pochi clic.

Opzione di registrazione alla cassa 2

L'abbandono del carrello è un grosso problema. Richiedere la tua e-mail in anticipo semplifica l'avvio di un processo di recupero del carrello abbandonato. Inoltre, ci sono due scelte facili: nessun sovraccarico sensoriale:

Opzione di registrazione alla cassa 3

Un altro ottimo modo è saltare del tutto la schermata di accesso. Invece, imposta semplicemente 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:

Ciò che Diamond Candles fa bene non è nemmeno visibile. Essi creano un account in modo automatico, ma non ne parlano. Supponiamo che tu esegua quattro checkout degli ospiti con lo stesso indirizzo e-mail, quindi decida infine di creare un account (inserisci una password, in sostanza).

Tutti i tuoi ordini precedenti con quell'indirizzo email vengono uniti per questo account, quindi il tuo account appena creato viene fornito con una cronologia degli ordini corretta.

Opzione di registrazione alla cassa 4

Con questa opzione, la registrazione dell'account viene offerta insieme a un incentivo al completamento dell'acquisto. Ecco un esempio da Speedo:

Le persone non si preoccupano della 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 semplice: inserisci una password e ottieni un coupon (oltre al monitoraggio dell'ordine, acquisti più rapidi, ecc.). La percentuale di creazione dell'account per i nuovi utenti qui è spesso superiore al 75%.

La pagina di pagamento dell'e-commerce

Questa è la pagina dei soldi. Qualsiasi aumento 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.

Richiedi i dati della carta di credito per ultimi

Chiedi alle persone di completare le informazioni di spedizione prima di arrivare alla fatturazione. Questo mette in pratica i principi di Impegno e Coerenza di Cialdini. Una volta che le persone iniziano a fare qualcosa, sentono che dovrebbero finire.

Gli è già stato chiesto di inserire il nome, l'e-mail e le informazioni di spedizione, che, idealmente, corrispondono all'indirizzo di fatturazione, quindi non è necessario digitarlo nuovamente.

Lo stesso principio, a volte chiamato tecnica del piede nella porta, si applica ai campi del modulo. Inizia prima con i campi più semplici, come il nome. Il campo del numero della carta di credito è il "più difficile", quindi dovrebbe venire per ultimo.

Questo è ciò che non dovresti fare:

Questo è meglio. (Si arriva qui dalla pagina di spedizione.)

Il buono: ha un chiaro flusso di 1-2-3 fasi. Il campo del nome viene prima dei dettagli della carta e l'indirizzo di fatturazione (se è lo stesso della spedizione) non deve essere inserito nuovamente.

Il cattivo: il CTA principale è "Salva e continua". Continua dove ? Dovrebbe essere specifico, come "Continua a rivedere" o qualunque sia l'azione successiva.

Usa un modulo di pagamento che assomigli a una vera carta di credito

Aggiungi un tocco di vita reale progettando il modulo di pagamento in questo modo scheomorfo:

Puoi ottenere un'interfaccia per questo chiamata Skeuocard gratuitamente (!) Da implementare sul tuo sistema. Prova una demo qui.

Rendi sicuro il processo di pagamento

La sicurezza è una preoccupazione seria. Oltre a rendere effettivamente sicuri i pagamenti con SSL, parlane 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. Questo è un pagamento sicuro crittografato SSL 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 semplici.

Memorizza le carte di credito nel tuo sistema

Certo, devi occuparti della conformità PCI e c'è il rischio di essere violato, ma guadagnerai molti più soldi dagli utenti di ritorno. Quando le persone non hanno bisogno di inserire i propri dati di fatturazione, l'acquisto diventa un processo 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: è un evento con un clic.

I visitatori di ritorno hanno molte più probabilità di acquistare rispetto ai nuovi visitatori, ma non è niente in confronto agli acquirenti di ritorno . Rendi loro la vita facile.

Conclusione

Inizia i tuoi sforzi di ottimizzazione dell'e-commerce durante il flusso di pagamento. I guadagni relativi qui si tradurranno in somme assolute molto belle.

Per migliorare la UX del tuo processo di checkout:

• Rendi chiara la funzione "Aggiungi al carrello".
• Semplifica la modifica o la rimozione degli articoli dal carrello per i visitatori.
• Semplifica il processo di registrazione: consenti ai nuovi acquirenti di registrarsi dopo l'acquisto.
• Nella pagina di pagamento, chiedi prima le informazioni più semplici.