Cosa devi sapere per aumentare le conversioni alla cassa mobile

Pubblicato: 2022-03-10
Riepilogo rapido ↬ I dati ci dicono che ci sono più visite Web mobili che desktop. Tuttavia, i tassi di conversione dei dispositivi mobili sono ancora in ritardo rispetto a quelli dei desktop. Questo articolo approfondirà il motivo per cui i tuoi visitatori mobili sono disposti ad abbandonare del tutto i loro acquisti.

L'indicizzazione mobile first di Google è qui. Bene, per alcuni siti web comunque. Per il resto di noi, sarà qui abbastanza presto e i nostri siti Web devono essere in perfetta forma se non vogliamo che le classifiche di ricerca siano influenzate negativamente dal cambiamento.

Detto questo, il responsive web design non è una novità. Sono anni che creiamo esperienze utente mobili personalizzate, quindi la maggior parte dei nostri siti Web dovrebbe essere ben pronta per affrontarla... giusto?

Ecco il problema: la ricerca mostra che il dispositivo dominante attraverso il quale gli utenti accedono al web, in media , è lo smartphone. Certo, questo potrebbe non essere il caso per tutti i siti Web, ma i dati indicano che questa è la direzione in cui ci stiamo dirigendo, quindi ogni web designer dovrebbe essere preparato per questo.

Tuttavia, per dirla senza mezzi termini, le conversioni alla cassa mobile non sono buone. Ci sono una serie di ragioni per questo, ma ciò non significa che i designer di m-commerce dovrebbero sdraiarsi.

Poiché sempre più utenti mobili si affidano ai propri dispositivi intelligenti per accedere al Web, i siti Web devono essere progettati in modo più adeguato per offrire loro l'esperienza di pagamento semplificata, comoda e sicura che desiderano. Nella seguente carrellata, esplorerò alcuni degli ostacoli alla conversione nel checkout mobile e mi concentrerò su ciò che i web designer possono fare per migliorare l'esperienza.

Altro dopo il salto! Continua a leggere sotto ↓

Perché le conversioni alla cassa mobile sono in ritardo?

Secondo i dati, dare la priorità all'esperienza mobile nelle nostre strategie di web design è una mossa intelligente per tutti i soggetti coinvolti. Con le persone che trascorrono circa il 51% del loro tempo con i media digitali tramite dispositivi mobili (rispetto a solo il 42% su desktop), i motori di ricerca e i siti Web devono davvero allinearsi alle tendenze degli utenti.

Ora, mentre quella statistica dipinge un quadro positivo a sostegno della progettazione di siti Web con un approccio mobile-first, altre statistiche sono in giro che potrebbero renderti diffidente. Ecco perché lo dico: il rapporto trimestrale sull'e-commerce di Monetate pubblicato per il primo trimestre 2017 aveva alcuni dati davvero interessanti da mostrare.

In questa prima tabella, scompongono la percentuale di visitatori di siti di e-commerce che utilizzano dispositivi diversi tra il primo trimestre 2016 e il primo trimestre 2017. Come puoi vedere, l'accesso a Internet da smartphone ha effettivamente superato il desktop:

Visite al sito per dispositivo 1° trimestre 2016 2° trimestre 2016 3° trimestre 2016 4° trimestre 2016 1° trimestre 2017
Tradizionale 49,30% 47,50% 44,28% 42,83% 42,83%
Smartphone 36,46% 39,00% 43,07% 44,89% 44,89%
Altro 0,62% 0,39% 0,46% 0,36% 0,36%
Tavoletta 13,62% 13,11% 12,19% 11,91% 11,91%

I risultati di Monetate su quali dispositivi vengono utilizzati per accedere a Internet. (Fonte)

In questo prossimo set di dati, possiamo vedere che il tasso di conversione medio per i siti Web di e-commerce non è eccezionale. In effetti, il numero è notevolmente diminuito dal primo trimestre del 2016.

Tassi di conversione 1° trimestre 2016 2° trimestre 2016 3° trimestre 2016 4° trimestre 2016 1° trimestre 2017
Globale 3,10% 2,81% 2,52% 2,94% 2,48%

I risultati di Monetate sui tassi di conversione globali dell'e-commerce (per tutti i dispositivi). (Fonte)

Ancora più scioccante è la divisione tra i tassi di conversione dei dispositivi:

Tassi di conversione per dispositivo 1° trimestre 2016 2° trimestre 2016 3° trimestre 2016 4° trimestre 2016 1° trimestre 2017
Tradizionale 4,23% 3,88% 3,66% 4,25% 3,63%
Tavoletta 1,42% 1,31% 1,17% 1,49% 1,25%
Altro 0,69% 0,35% 0,50% 0,35% 0,27%
Smartphone 3,59% 3,44% 3,21% 3,79% 3,14%

I risultati di Monetate sui tassi di conversione medi, suddivisi per dispositivo. (Fonte)

Gli smartphone ricevono costantemente meno conversioni rispetto ai desktop, nonostante siano il dispositivo predominante attraverso il quale gli utenti accedono al web.

Qual è il problema qui? Perché siamo in grado di portare le persone a siti Web mobili, ma le perdiamo al momento del pagamento?

Nel suo rapporto del 2017 intitolato "Gerarchia dei bisogni dei dispositivi mobili", comScore analizza i cinque principali motivi per cui i tassi di conversione del checkout mobile sono così bassi:

Motivi per cui m-commerce non converte
I motivi più comuni per cui gli acquirenti di m-commerce non convertono. (Immagine: comScore) (Visualizza versione grande)

Ecco la ripartizione del motivo per cui gli utenti mobili non convertono:

  • 20,2% — problemi di sicurezza
  • 19,6% — dettagli del prodotto poco chiari
  • 19,6% — impossibilità di aprire più schede del browser da confrontare
  • 19,3% — difficoltà di navigazione
  • 18,6% — difficoltà nell'inserimento delle informazioni.

Questi sono motivi plausibili per passare dallo smartphone al desktop per completare un acquisto (se non sono stati completamente spenti dall'esperienza a quel punto, cioè).

In sintesi, sappiamo che i consumatori vogliono accedere al web attraverso i loro dispositivi mobili. Sappiamo anche che gli ostacoli alla conversione impediscono loro di rimanere fermi. Allora, come ci occupiamo di questo?

10 modi per aumentare le conversioni alla cassa mobile nel 2018

Per la maggior parte dei siti Web che hai progettato, è probabile che non vedrai molti cambiamenti nel ranking di ricerca quando l'indicizzazione mobile first di Google diventerà ufficiale.

I tuoi design ottimizzati per i dispositivi mobili potrebbero essere "abbastanza buoni" da mantenere i tuoi siti Web in cima alla ricerca (per iniziare, comunque), ma cosa succede se i visitatori non si attengono a convertire? Google inizierà a penalizzarti perché il tuo sito web non riesce a siglare l'accordo con la maggior parte dei visitatori? In tutta onestà, questo scenario si verificherà solo in casi estremi, in cui il checkout mobile è così mal costruito che le frequenze di rimbalzo salgono alle stelle e le persone smettono di voler visitare il sito web.

Diciamo che il calo del traffico alla cassa non incorre in sanzioni da parte di Google. È fantastico... per scopi SEO. Ma per quanto riguarda gli affari? Il tuo obiettivo è convincere i visitatori a convertire senza distrazioni e senza attriti. Eppure, questo sembra essere ciò che ottengono i visitatori mobili.

Andando avanti, il tuo obiettivo deve essere duplice:

  • progettare siti web tenendo conto della missione e delle linee guida orientate ai dispositivi mobili di Google,
  • per mantenere gli utenti mobili sul sito Web fino al completamento di un acquisto.

In sostanza, ciò significa ridurre la quantità di lavoro che gli utenti devono fare e migliorare la visibilità delle misure di sicurezza. Ecco cosa puoi fare per progettare in modo più efficace i checkout mobili per le conversioni.

1. Mantieni l'essenziale nella zona del pollice

La ricerca su come gli utenti tengono i loro telefoni cellulari ormai è vecchia. Sappiamo che, indipendentemente dal fatto che utilizzino l'approccio a una o due mani, alcune parti dello schermo mobile sono semplicemente scomode da raggiungere per gli utenti mobili. E quando è prevista l'opportunità durante il checkout, questo è qualcosa con cui non vuoi scherzare.

Per gli utenti con una mano sola, il centro dello schermo è il campo di gioco privilegiato:

La zona del pollice per il cellulare con una sola mano
Le aree buone, OK e cattive per gli utenti mobili con una sola mano. (Immagine: UX Matters) (Visualizza versione grande)

Sebbene gli utenti che cullano i propri telefoni per una maggiore stabilità abbiano un paio di opzioni per le dita da utilizzare per interagire con lo schermo, solo il 28% usa il dito indice. Quindi, concentriamoci sulle capacità degli utenti del pollice, il che, ancora una volta, significa dare maggiore risalto alla parte centrale dello schermo:

La zona del pollice e dell'indice per la culla mobile
Le aree buone, buone e cattive per gli utenti mobili che supportano i loro telefoni. (Immagine: UX Matters) (Visualizza versione grande)

Alcuni utenti tengono i loro telefoni con due mani. Poiché è più probabile che l'orientamento orizzontale venga utilizzato per i video, questo non sarà rilevante per il pagamento tramite dispositivo mobile. Quindi, presta attenzione a quanto spazio di quello schermo è fattibile alla portata del pollice dell'utente:

La zona del pollice per verticale e orizzontale
Le aree buone, OK e cattive per gli utenti mobili a due mani. (Immagine: UX Matters) (Visualizza versione grande)

In sintesi, possiamo utilizzare la ripartizione di Smashing Magazine su dove focalizzare i contenuti, indipendentemente dalla presa di uno smartphone con la mano sinistra, la mano destra o con due mani:

Dove la zona del pollice ideale è sul cellulare
Un riepilogo di dove si trovano le zone buone, OK e cattive sui dispositivi mobili. (Immagine: Smashing Magazine) (Visualizza versione grande)

Il sito Web di JCPenney è un buon esempio di come farlo:

Il modulo di JCPenney è nella zona del pollice
Il modulo di contatto di JCPenney inizia a metà pagina. (Immagine: JCPenney) (Visualizza versione grande)

Sebbene le informazioni siano incluse nella parte superiore della pagina di pagamento, i campi di input non iniziano appena al di sotto di essa, direttamente nella zona del pollice ideale per utenti di qualsiasi tipo. Ciò garantisce che i visitatori che impugnano il telefono in qualsiasi modo e utilizzino dita diverse per interagire con esso non avranno problemi a raggiungere i campi del modulo.

2. Ridurre al minimo i contenuti per massimizzare la velocità

Ci è stato insegnato più e più volte che il design minimale è il migliore per i siti web. Ciò è particolarmente vero nel pagamento mobile, dove un'esperienza già lenta o frustrante potrebbe facilmente spingere un cliente oltre il limite, quando tutto ciò che vogliono fare è completare l'acquisto.

Per massimizzare la velocità durante la procedura di pagamento mobile, tieni a mente i seguenti suggerimenti:

  • Aggiungi solo l'essenziale al checkout. Questo non è il momento di provare a fare upsell o cross-sell, promuovere i social media o comunque distrarre dall'azione in corso.
  • Mantieni il checkout libero da tutte le immagini. Gli unici elementi visivi accattivanti che sono veramente accettabili sono i marchi di fiducia e gli inviti all'azione (più su questi di seguito).
  • Qualsiasi testo incluso nella pagina deve essere di natura istruttiva o descrittiva.
  • Evita qualsiasi stilizzazione speciale dei caratteri. Meno "wow" ha la tua pagina di pagamento, più facile sarà per gli utenti completare il processo.

Guarda il sito Web di Staples come esempio di come dovrebbe essere un checkout di una pagina molto semplice:

Il checkout di una sola pagina per Staples
Staples ha un checkout di una sola pagina con un numero minimo di campi da compilare. (Immagine: graffette) (Visualizza versione grande)

Come puoi vedere, Staples non impantana il processo di checkout con immagini dei prodotti, branding, navigazione, collegamenti interni o qualsiasi altra cosa che potrebbe (1) distrarre dall'attività in corso o (2) risucchiare risorse dal server mentre tenta di elaborare le richieste dei tuoi clienti.

Non solo questa pagina di pagamento sarà facile da superare, ma si caricherà rapidamente e senza problemi ogni volta, qualcosa che i clienti ricorderanno la prossima volta che avranno bisogno di effettuare un acquisto. Mantenendo le tue pagine di pagamento leggere nel design, assicuri un'esperienza rapida sotto tutti gli aspetti.

3. Mettili a loro agio con i marchi di fiducia

Un marchio di fiducia è qualsiasi indicatore su un sito Web che consente ai clienti di sapere: "Ehi, non c'è assolutamente nulla di cui preoccuparsi qui. Manteniamo le tue informazioni al sicuro!”

L'unico marchio di fiducia che ogni sito di m-commerce dovrebbe avere? Un certificato SSL. Senza uno, la barra degli indirizzi non visualizzerà il segno del lucchetto o il nome di dominio https verde, entrambi informano i clienti che il sito Web ha una crittografia aggiuntiva.

Puoi anche utilizzare altri marchi di fiducia al momento del pagamento.

Big Chill utilizza un sigillo di fiducia RapidSSL
Big Chill include un sigillo di fiducia RapidSSL per far sapere ai clienti che i suoi dati sono crittografati. (Immagine: Big Chill) (Visualizza versione grande)

Sebbene tu possa utilizzare i loghi di Norton Security, la conformità PCI e altri software di sicurezza per far sapere ai clienti che il tuo sito Web è protetto, gli utenti potrebbero anche essere influenzati da nomi riconoscibili e affidabili. Quando ci pensi, non è molto diverso dalla visualizzazione di loghi aziendali accanto alle testimonianze dei clienti o in callout che vantano le tue connessioni con grandi nomi. Se puoi sfruttare una partnership come quelle menzionate di seguito, puoi utilizzare la fiducia intrinseca a tuo vantaggio.

Prendi le 18:00, che utilizza un'opzione "Accedi con Amazon" al momento del pagamento:

18:00 utilizza un marchio di fiducia Amazon
18:00 sfrutta il nome Amazon come marchio di fiducia. (Immagine: 18:00) (Visualizza versione grande)

Questa è una mossa intelligente per un marchio che sicuramente non ha il riconoscimento del marchio che ha un'azienda come Amazon. Offrendo ai clienti una comoda opzione per accedere con un marchio sinonimo di velocità, affidabilità e fiducia, l'azienda potrebbe ora diventare nota per le stesse qualità di pagamento per cui Amazon è celebre.

Poi, ci sono pagine di pagamento mobili come quella su Sephora:

Marchio di fiducia PayPal di Sephora
Sephora utilizza un provider di gateway di pagamento affidabile come marchio di fiducia. (Immagine: Sephora) (Visualizza versione grande)

Sephora utilizza anche questa tecnica per sfruttare il buon nome di un altro marchio per creare fiducia al momento del pagamento. In questo caso, tuttavia, offre ai clienti due opzioni chiare: verifica subito con noi o passa a PayPal, che si prenderà cura di te in modo sicuro. Poiché la sicurezza è una delle principali preoccupazioni che impedisce ai clienti mobili di convertirsi, questo tipo di marchio di fiducia e metodo di pagamento è una buona mossa da parte di Sephora.

4. Fornire una modifica più semplice

In generale, non allontanare mai un visitatore (su qualsiasi dispositivo) da qualsiasi cosa stia facendo sul tuo sito web. Ci sono già abbastanza distrazioni online; l'ultima cosa di cui hanno bisogno è che tu li punti in una direzione che impedisca loro di convertirsi.

Al momento del pagamento, tuttavia, i tuoi clienti potrebbero sentirsi obbligati a fare proprio questa cosa se decidono di volere un colore, una taglia o una quantità diversi di un articolo nel loro carrello. Piuttosto che lasciarli tornare indietro attraverso il sito Web, offri loro un'opzione di modifica al momento del pagamento per mantenerli in posizione.

Victoria's Secret lo fa bene:

Lightbox di modifica di Victoria's Secret al momento del pagamento
Victoria's Secret non costringe gli utenti ad abbandonare il checkout per modificare gli articoli. (Immagine: Victoria's Secret) (Visualizza versione grande)

Quando arrivano per la prima volta alla schermata di pagamento, i clienti vedranno un elenco di articoli che stanno per acquistare. Quando si fa clic sul grande pulsante "Modifica" accanto a ciascun articolo, si apre una lightbox (mostrata sopra) con le variazioni del prodotto. È fondamentalmente la pagina del prodotto originale, appena sovrapposta alla cassa. Gli utenti possono modificare le proprie opzioni e salvare le modifiche senza dover mai uscire dalla pagina di pagamento.

Se trovi, esaminando le analisi del tuo sito web, che gli utenti occasionalmente tornano indietro dopo aver effettuato il checkout (puoi vederlo nella canalizzazione di vendita), aggiungi questa funzione di modifica integrata. Impedendo questo inutile movimento all'indietro, potresti risparmiare conversioni perse da clienti confusi o distratti.

5. Abilita le opzioni di pagamento rapido

Quando i consumatori effettuano il check-out su un sito Web di e-commerce tramite un dispositivo desktop, probabilmente non è un grosso problema se devono inserire ogni volta il nome utente, l'indirizzo e-mail o le informazioni di pagamento. Certo, se può essere evitato, troveranno il modo di aggirarlo (come consentire al sito Web di salvare le proprie informazioni o utilizzare un gestore di password come LastPass).

Ma sui dispositivi mobili, reinserire tali informazioni è una seccatura, soprattutto se i moduli di contatto non sono ottimizzati bene (ne parleremo più avanti). Quindi, per facilitare il processo di accesso e checkout per gli utenti mobili, considera i modi in cui puoi semplificare il processo:

  • Consenti il ​​check-out degli ospiti.
  • Consenti il ​​pagamento rapido con un clic.
  • Abilita l'accesso con un clic da una fonte attendibile, come Facebook.
  • Abilita il pagamento sul sito Web di un fornitore di servizi di pagamento affidabile, come PayPal, Google Wallet o Stripe.

Una delle cose belle del già conveniente processo di pagamento di Sephora è che i clienti possono automatizzare il processo di accesso andando avanti con un semplice interruttore:

Sephora consente ai clienti di salvare le informazioni di accesso
Sephora consente ai clienti di ritorno di rimanere connessi, per evitarlo nuovamente durante il checkout. (Immagine: Sephora) (Visualizza versione grande)

Quando i clienti mobili hanno fretta e vogliono passare alla fase successiva del pagamento, la funzione di accesso automatico di Sephora sarebbe sicuramente utile e incoraggerebbe i clienti ad acquistare più frequentemente dal sito Web mobile.

Molti siti Web mobili aspettano fino alla fine della pagina di accesso per indicare ai clienti quali tipi di opzioni hanno per il check-out. Ma invece di sorprenderli in ritardo, Victoria's Secret mostra queste informazioni in grandi pulsanti in grassetto proprio in cima:

Opzioni di pagamento rapido di Victoria's Secret
Victoria's Secret semplifica e velocizza il checkout offrendo tre opzioni interessanti. (Immagine: Victoria's Secret) (Visualizza versione grande)

I clienti possono scegliere se accedere con il proprio account, effettuare il check-out come ospiti o accedere direttamente a PayPal. Non sono sorpresi di scoprire in seguito che il loro metodo di pagamento o pagamento preferito non è offerto.

Adoro anche il modo in cui Victoria's Secret ha scelto di farlo. C'è qualcosa di carino nel pulsante "Accedi" dai colori vivaci che si trova accanto al pulsante "Paga come ospite" più smorzato. Per uno, aggiunge un tocco di colori del marchio Victoria's Secret alla cassa, che è sempre un bel tocco. Ma il modo in cui sono colorati i pulsanti chiarisce anche quale sia l'azione principale (ovvero creare un account e accedere).

6. Aggiungi il pangrattato

Quando invii i clienti mobili alla cassa, l'ultima cosa che vuoi è dare loro inutili distrazioni. Ecco perché la barra di navigazione standard del sito Web (o il menu dell'hamburger) viene in genere rimossa da questa pagina.

Tuttavia, il processo di pagamento può intimidire se i clienti non sanno cosa li aspetta. Quanti moduli dovranno compilare? Che tipo di informazioni sono necessarie? Avranno la possibilità di rivedere il loro ordine prima di inviare i dettagli di pagamento?

Se hai progettato un checkout su più pagine, dissipa le paure dei tuoi clienti definendo ogni passaggio con una navigazione breadcrumb chiaramente etichettata nella parte superiore della pagina. Inoltre, questo darà al tuo checkout un design più pulito, riducendo il numero di clic e lo scorrimento per pagina.

Hayneedle ha un bellissimo esempio di navigazione breadcrumb in azione:

Navigazione breadcrumb alla cassa Hayneedle
Le briciole di pane di Hayneedle sono progettate in modo pulito e facili da trovare. (Immagine: Hayneedle) (Visualizza versione grande)

Puoi vedere che tre passaggi sono suddivisi ed etichettati chiaramente. Non c'è assolutamente alcuna domanda qui su ciò che gli utenti incontreranno in questi passaggi, il che aiuterà a tranquillizzarli. Tre passaggi sembrano abbastanza ragionevoli e gli utenti avranno la possibilità di rivedere l'ordine ancora una volta prima di completare l'acquisto.

Sephora ha uno stile alternativo di "breadcrumb" nella sua cassa:

Navigazione dei breadcrumb numerati di Sephora
I breadcrumb numerati di Sephora appaiono mentre completi ogni sezione. (Immagine: Sephora) (Visualizza versione grande)

Invece di posizionare ogni "breadcrumb" nella parte superiore della pagina di pagamento, i clienti di Sephora possono vedere qual è il passaggio successivo e quanti altri ne arriveranno mentre si fanno strada attraverso il modulo.

Questa è una buona opzione da prendere se preferisci non rendere appiccicosa la navigazione in alto o il breadcrumb. Invece, puoi dare la priorità all'invito all'azione (CTA), che potresti trovare motiva meglio il cliente a spostarsi verso il basso nella pagina e completare l'acquisto.

Penso che entrambi questi modelli di breadcrumb siano validi, però. Quindi, potrebbe valere la pena testarli A/B se non sei sicuro di quale porterebbe a più conversioni per i tuoi visitatori.

7. Formatta saggiamente il modulo di pagamento

Un buon design del modulo di pagamento mobile segue una formula piuttosto rigorosa, il che non sorprende. Sebbene ci siano modi per piegare le regole sul desktop in termini di strutturazione del modulo, numero di passaggi per pagina, inclusione di immagini e così via, non hai davvero quel tipo di flessibilità sui dispositivi mobili.

Invece, dovrai essere meticoloso durante la creazione del modulo:

  • Progetta ogni campo del modulo di pagamento in modo che si estenda per l'intera larghezza del sito web.
  • Limita i campi solo a ciò che è essenziale.
  • Etichetta chiaramente ogni campo al di fuori e al di sopra di esso.
  • Usa almeno un font di 16 punti pixel.
  • Formatta ogni campo in modo che sia abbastanza grande da poterlo sfruttare senza eseguire lo zoom.
  • Usa un segno riconoscibile per indicare quando è richiesto qualcosa (come un asterisco).
  • Avvisa sempre gli utenti quando è stato commesso un errore subito dopo che le informazioni sono state immesse in un campo.
  • Inserisci l'invito all'azione nella parte inferiore del modulo.

Poiché il modulo di pagamento è l'elemento più importante che guida i clienti attraverso il processo di pagamento, non puoi permetterti di pasticciare con una formula collaudata. Se gli utenti non riescono a spostarsi dall'alto verso il basso, se i campi sono troppo difficili da utilizzare o se la funzionalità del modulo stesso è piena di errori, allora potresti anche baciare i tuoi acquisti mobili (e forse i tuoi acquisti in generale) arrivederci.

Crutchfield mostra come creare campi modulo molto intuitivi su dispositivi mobili:

Campi modulo di grandi dimensioni alla cassa di Crutchfield
I campi del modulo nella pagina di pagamento di Crutchfield sono grandi e difficili da perdere. (Immagine: Crutchfield) (Visualizza versione grande)

Come puoi vedere, ogni campo è abbastanza grande per essere cliccato (anche con le dita grasse). Anche il contorno in grassetto attorno al campo attualmente selezionato è un bel tocco. Per un cliente che è multitasking e/o distratto da qualcosa che lo circonda, tornare al modulo di pagamento sarebbe molto più semplice con questo tipo di formato.

Sephora, ancora una volta, gestisce il pagamento mobile nel modo giusto. In questo caso, voglio attirare la tua attenzione sul pulsante "Effettua ordine" in grigio:

Uso intelligente dell'invito all'azione Sephora alla cassa
Sephora utilizza l'invito all'azione come guida per i clienti che non hanno completato il modulo. (Immagine: Sephora) (Visualizza versione grande)

Il pulsante serve come indicatore per i clienti che non sono ancora pronti per inviare le informazioni di acquisto, il che è fantastico. Anche se il modulo è ben progettato - tutto è ben etichettato, i campi sono grandi e il modulo è organizzato in modo logico - gli utenti mobili potrebbero accidentalmente scorrere troppo oltre un campo e non lo saprebbero fino a quando non fanno clic sul pulsante di invito all'azione .

Se riesci a impedire agli utenti di ricevere quel temuto errore di "informazioni mancanti", farai un lavoro migliore nel trattenere i loro acquisti.

8. Semplifica l'immissione dei moduli

Scavando un po' più a fondo in questi moduli di contatto, diamo un'occhiata a come puoi semplificare l'immissione di dati sui dispositivi mobili:

  • Consenti ai clienti di utilizzare la funzionalità di completamento automatico del browser per compilare i moduli.
  • Includere una direttiva HTML tabindex per consentire ai clienti di toccare una freccia su e giù nel modulo. Ciò mantiene i pollici all'interno di una comoda portata sullo smartphone in ogni momento, invece di allungare costantemente la mano per attingere a un nuovo campo.
  • Aggiungi una casella di controllo che copia automaticamente le informazioni sull'indirizzo di fatturazione nei campi di spedizione.
  • Cambia la tastiera in base al tipo di campo digitato.

Un esempio è il sito web mobile di Bass Pro Shops:

Il modulo di pagamento di Bass Pro utilizza una tastiera intelligente
Ogni campo nel modulo di pagamento di Bass Pro fornisce agli utenti il ​​tipo di tastiera corretto. (Immagine: Bass Pro Shops) (Visualizza versione grande)

Per cominciare, la tastiera utilizza la funzionalità delle schede (vedi le frecce su e giù appena sopra la tastiera). Per i clienti con le dita corte o che sono impazienti e vogliono semplicemente digitare sulla tastiera, le schede aiutano a tenere le mani in un posto, velocizzando così il checkout.

Inoltre, quando i clienti effettuano la scheda in un campo di soli numeri (come per il loro numero di telefono), la tastiera cambia automaticamente, quindi non devono cambiare manualmente. Ancora una volta, questo è un altro modo per aumentare la comodità di effettuare un acquisto su dispositivo mobile.

Il pagamento mobile di Amazon include una casella di controllo rapida che semplifica l'invio dei dati di fatturazione da parte dei clienti:

Amazon semplifica l'input dei moduli con la duplicazione degli indirizzi
Amazon offre ai clienti un modo semplice per duplicare il proprio indirizzo di spedizione nella fatturazione. (Immagine: Amazon) (Visualizza versione grande)

Come abbiamo visto con il design del modulo di pagamento mobile, più semplice è sempre meglio. Ovviamente, dovrai sempre raccogliere determinati dettagli dai clienti ogni volta (a meno che il loro account non abbia salvato tali informazioni). Tuttavia, se puoi fornire un interruttore rapido o una casella di controllo che consenta loro di copiare i dati da un modulo all'altro, fallo.

9. Non lesinare sul CTA

Quando si progetta un checkout desktop, le preoccupazioni principali con l'invito all'azione sono cose come il posizionamento strategico del pulsante e la scelta di un colore accattivante per attirare l'attenzione su di esso.

Sui dispositivi mobili, tuttavia, devi pensare anche alle dimensioni e non solo a quanto spazio occupa sullo schermo. Ricorda la zona del pollice e i vari modi in cui gli utenti tengono il telefono. Assicurati che il pulsante sia sufficientemente largo in modo che qualsiasi utente possa facilmente fare clic su di esso senza dover cambiare la posizione della mano.

Pertanto, il tuo obiettivo dovrebbe essere quello di progettare pulsanti che (1) si trovino nella parte inferiore della pagina di pagamento mobile e (2) si estendano completamente da sinistra a destra, come nel caso del sito Web mobile di Staples:

Il grande pulsante blu CTA di Staple
Il CTA blu brillante di Staple spicca in un checkout altrimenti semplice. (Immagine: graffette) (Visualizza versione grande)

Non importa chi sta effettuando l'acquisto - un cradler mancino, destrorso o a due mani - quel pulsante sarà facilmente raggiungibile.

Di tutti i miglioramenti del checkout mobile di cui abbiamo parlato oggi, l'invito all'azione è il più semplice da affrontare. Rendilo grande, dagli un colore distintivo, posizionalo nella parte inferiore dello schermo del cellulare e fallo estendere per l'intera larghezza. In altre parole, non costringere i clienti a lavorare sodo per compiere il passaggio finale di un acquisto.

10. Offri una via d'uscita alternativa

Infine, offri ai clienti una via d'uscita alternativa.

Diciamo che stanno acquistando su un sito Web mobile, aggiungendo articoli al carrello, ma qualcosa non va bene con loro e non vogliono effettuare l'acquisto. Hai fatto tutto il possibile per assicurarli lungo il percorso con un'esperienza di pagamento pulita, facile e sicura, ma semplicemente non sono sicuri di effettuare un pagamento sul proprio telefono.

Piuttosto che sperare semplicemente di non perdere completamente l'acquisto, dai loro la possibilità di salvarlo per dopo. In questo modo, se sono davvero interessati ad acquistare il tuo prodotto, possono rivisitarlo sul desktop e premere il grilletto. Non è l'ideale, perché vuoi mantenerli in posizione sui dispositivi mobili, ma l'opzione è buona per i clienti che semplicemente non possono essere salvati.

Come puoi vedere sul sito Web mobile di LL Bean, c'è un'opzione al momento del pagamento su "Sposta nella lista dei desideri":

Opzione lista dei desideri di LL Bean
LL Bean offre ai clienti un'altra possibilità di spostare gli articoli nella loro lista dei desideri durante il checkout. (Immagine: LL Bean) (Visualizza versione grande)

La cosa bella di questo è che LL Bean chiaramente non vuole che la navigazione nella lista dei desideri o la rimozione di un elemento siano un'azione primaria. Se "Sposta nella lista dei desideri" fosse mostrato come un grande pulsante CTA in grassetto, più clienti potrebbero decidere di prendere questa alternativa apparentemente più sicura. Come è stato progettato ora, è più un "Ehi, non vogliamo che tu faccia qualcosa con cui non ti senti a tuo agio. Questo è qui per ogni evenienza.

Mentre meno opzioni sono generalmente migliori nel web design, questo potrebbe essere qualcosa da esplorare se il tuo checkout ha un alto tasso di abbandono del carrello sui dispositivi mobili.

Avvolgendo

Man mano che più visitatori mobili si riversano sul tuo sito Web, ogni passaggio che porta alla conversione, inclusa la fase di pagamento, deve essere ottimizzato per comodità, velocità e sicurezza. Se il tuo checkout non è adeguatamente progettato per le esigenze e le aspettative specifiche degli utenti mobili, scoprirai che quei tassi di conversione diminuiscono o tornano al desktop, e non è questa la direzione in cui vuoi che le cose vadano, soprattutto se Google sta spingendo tutti noi verso un mondo mobile-first.