Come aumentare i tassi di conversione mobile per i negozi online

Le persone trascorrono più tempo al telefono che mai. Li usiamo per quasi tutto: operazioni bancarie, investimenti, controllo del tempo, monitoraggio degli allenamenti, ascolto di musica, navigazione e, naturalmente, shopping.

Quasi il 55% del traffico del sito web proviene da dispositivi mobili e il 60% degli acquirenti online utilizza il telefono per trovare prima un prodotto. Se il tuo negozio non offre un'esperienza utente senza interruzioni sui dispositivi mobili, rischi di perdere una grossa fetta dei tuoi potenziali clienti.

Ma come puoi ottimizzare il tuo negozio online per aumentare le conversioni da dispositivo mobile?

Inizia con un tema WordPress reattivo

Un tema WordPress di alta qualità è il punto di partenza perfetto per un negozio online reattivo. Il tuo tema è la base dell'intero sito, quindi scegline uno che offra un'esperienza eccezionale su dispositivi di tutte le dimensioni.

Ecco alcuni suggerimenti per valutare un tema:

• Prova la demo del tema su tablet e telefoni. Dal momento che probabilmente non possiedi dispositivi con tutte le dimensioni dello schermo possibili, puoi utilizzare un sito come Website Responsive Testing Tool per simulare l'esperienza. Gli elementi demo dovrebbero avere un bell'aspetto su tutte le dimensioni dello schermo: nulla dovrebbe essere tagliato, difficile da leggere o difficile da usare.
• Mentre guardi la demo del tema, ridimensiona la finestra del browser. Il contenuto dovrebbe adattarsi di conseguenza e nulla dovrebbe essere tagliato.
• Cerca le funzionalità reattive nella descrizione del tema. Dovrebbe menzionare specificamente il "design reattivo" o discutere di come il tema si adatta ai dispositivi mobili.
• Esegui la demo del tema tramite lo strumento di test ottimizzato per dispositivi mobili di Google.
• Controlla le recensioni. Leggi le valutazioni e le recensioni degli utenti del tema. Fai attenzione a eventuali commenti negativi sul design reattivo.

È anche importante che il tuo tema si integri con WooCommerce. Ciò preverrà problemi di reattività insieme a qualsiasi altro potenziale conflitto.

Il tema Storefront soddisfa tutto quanto sopra ed è flessibile e facile da personalizzare. Inoltre, ha una varietà di temi per bambini progettati per settori specifici: moda, giocattoli, prodotti digitali, prenotazioni e altro ancora.

Tieni presente l'usabilità mobile

L'usabilità è l'efficacia e l'efficienza con cui gli acquirenti possono interagire con il tuo sito web. La scarsa usabilità influisce negativamente su vendite, conversioni, percezione del marchio e SEO. Quando esamini la tua esperienza mobile, l'usabilità dovrebbe essere la tua massima priorità. Considera quanto segue:

• Pensa con il pollice. Gli utenti mobili interagiranno con il tuo sito web usando solo i pollici. Tutti gli elementi selezionabili (link, pulsanti, voci di menu, immagini) devono essere sufficientemente grandi per essere facilmente toccati da un visitatore del sito. Se sono piccoli o troppo vicini tra loro, qualcuno potrebbe fare clic sulla cosa sbagliata per errore.
• Evita i pop-up e altre distrazioni. Poiché gli schermi dei dispositivi mobili sono così piccoli, è importante dare la priorità a ciò che mostri ai visitatori. I popup che coprono l'intero schermo del cellulare possono interrompere l'esperienza degli utenti e persino avere effetti negativi sul posizionamento nei motori di ricerca; la stessa cosa vale per annunci e altre notifiche. Se decidi di utilizzare questo tipo di contenuto, assicurati che occupi solo una parte dello schermo e che sia facile da ignorare.
• Implementare i filtri dei prodotti . Se offri molti prodotti, un acquirente online potrebbe dover scorrere per un po' per trovare quello che sta cercando. Questo può essere particolarmente difficile su schermi mobili che visualizzano solo un paio di prodotti alla volta. I tuoi clienti potrebbero sentirsi frustrati e rinunciare prima di effettuare un acquisto. I filtri li aiutano a restringere le selezioni in base a ciò che stanno cercando. Prova un'estensione come WooCommerce Product Filters per fornire funzionalità di ordinamento.
• Utilizzare caratteri sufficientemente grandi . Se il testo del tuo sito Web è troppo piccolo, può essere molto difficile per gli utenti mobili leggere qualsiasi cosa: non dovrebbero essere costretti a pizzicare e ingrandire per conoscere i tuoi prodotti. A seconda del sito e delle scelte dei caratteri, potrebbe essere necessario impostare dimensioni dei caratteri diverse per i dispositivi mobili.
• Spezza il testo. Se hai pagine con molte informazioni, suddividile in segmenti più piccoli che sono più facili da navigare su schermi piccoli. Puoi farlo con fisarmoniche, interruttori o punti elenco. Nei lunghi post del blog, aggiungi collegamenti a sottosezioni che consentano agli utenti di passare direttamente ad argomenti interessanti.

Semplifica la pagina di pagamento

Sebbene gli acquisti su dispositivi mobili siano aumentati in modo significativo nel corso degli anni, le conversioni non sono così grandi. In effetti, il tasso di conversione medio dell'eCommerce su dispositivo mobile è solo del 2,03%, rispetto al desktop al 3,83%.

Il tuo processo di pagamento gioca un ruolo fondamentale nella realizzazione delle vendite. Rendilo il più semplice possibile sui dispositivi mobili per migliorare i tassi di conversione. Se i tuoi clienti impiegano troppo tempo per effettuare un acquisto, si arrenderanno e faranno acquisti altrove.

Rimuovi i campi non necessari

Inizia dando un'occhiata da vicino alle informazioni necessarie per il checkout. È tutto necessario? Probabilmente scoprirai che ci sono campi che puoi rimuovere:

• Se non vendi alle aziende, rimuovi il campo Nome azienda.
• Se non riesci a pensare a uno scenario in cui potresti dover chiamare i tuoi clienti, rimuovi il campo Telefono.
• Se non accetti le note, rimuovi il campo Note sull'ordine.

Meno campi sono e meglio è, soprattutto sui dispositivi mobili. Leggi di più su come personalizzare i campi di pagamento di WooCommerce.

Consenti il ​​check-out degli ospiti

Gli account dei clienti sono ottimi e velocizzano il checkout per gli acquirenti che ritornano compilando automaticamente le loro informazioni e salvando i dati della loro carta di credito. Ma per quanto riguarda i nuovi clienti?

Non tutti vogliono creare un account sul tuo negozio, specialmente sui dispositivi mobili dove vogliono effettuare il check-out il più rapidamente possibile. In effetti, si ritiene che la richiesta di account cliente contribuisca al 35% dei carrelli abbandonati.

Per consentire il checkout degli ospiti con WooCommerce:

1. Vai a WooCommerce → Impostazioni → Account e privacy.
2. Seleziona Consenti ai clienti di effettuare un ordine senza un account.
3. Fare clic sul pulsante Salva modifiche in fondo alla pagina.

Scopri come determinare se il checkout degli ospiti è adatto al tuo negozio.

Accetta l'accesso social

I tuoi clienti hanno probabilmente effettuato l'accesso agli account dei social media sui loro dispositivi mobili. L'abilitazione dell'accesso social sul tuo sito consente loro di accedere utilizzando Facebook, Twitter, Google, Amazon e altro per semplificare il checkout ed evitare che debbano creare un nuovo account.

Abilita l'accesso sociale a WooCommerce.

Accetta più opzioni di pagamento

Accettare più di una forma di pagamento velocizza il checkout. Sebbene tu possa consentire anche le transazioni con carta di credito, l'abilitazione di opzioni come PayPal o Amazon Pay consente ai clienti di pagare utilizzando account esistenti anziché estrarre una carta di credito e digitare tutti i dettagli.

Visualizza le integrazioni del gateway di pagamento WooCommerce

Rendi i campi di pagamento sufficientemente alti

È importante che i clienti possano compilare facilmente i campi di pagamento sul tuo sito. Assicurati che i campi siano abbastanza alti da consentire loro di toccare e compilare le informazioni senza dover ingrandire. Puoi farlo con alcuni semplici CSS.

Inizia utilizzando l'ispettore del browser nella pagina di pagamento. Questo ti aiuterà a identificare la classe di ogni singolo campo. Quindi, usa il codice seguente per ogni classe specifica; il campo E-mail viene utilizzato in questo esempio.

 /** Customize height of checkout fields **/ input[type='email'].input-text{ padding: 100px !important; }

Regola il padding in base al tuo sito specifico e alle impostazioni correnti; potrebbe essere necessario giocare un po' per trovare ciò che funziona. Puoi anche personalizzare i dispositivi specifici a cui si applica questo codice utilizzando le media query.

Nota: se non hai dimestichezza con il codice e la risoluzione di potenziali conflitti, potresti voler selezionare un WooExpert o uno Sviluppatore per ricevere assistenza. Non siamo in grado di fornire supporto per le personalizzazioni in base alla nostra politica di supporto.

Modifica le pagine dei prodotti

È importante che anche le pagine dei singoli prodotti siano reattive. I clienti dovrebbero essere in grado di leggere i dettagli del prodotto, sfogliare le foto e aggiungere articoli al carrello.

Rendi appiccicoso il pulsante Aggiungi al carrello

Un pulsante appiccicoso Aggiungi al carrello segue un acquirente lungo la pagina mentre legge le informazioni sul prodotto. Se sono convinti ad acquistare, non devono scorrere fino in fondo per effettuare un acquisto. In effetti, è stato dimostrato che un pulsante Aggiungi al carrello appiccicoso aumenta gli ordini del 7,9%! Aggiungi questo CSS per rendere il tuo pulsante appiccicoso sui dispositivi mobili:

 /** Make the Add to Cart button sticky **/ @media only screen and (max-width: 900px) { .cart { position: fixed; bottom: 0; background: #ffffff; width: 100%; z-index: 3; } }

Potrebbe essere necessario giocare un po' con i CSS, a seconda del tema e del design del sito web. Ma se non vuoi modificare il codice, puoi anche utilizzare un plug-in come Sticky Add to Cart per WooCommerce.

Rendi le immagini intuitive

Quando gli acquirenti atterrano sulla pagina di un prodotto, si aspettano di poter scorrere la tua galleria di immagini per visualizzare più foto e usare le dita per ingrandire un articolo. Questi gesti mobili sono così intuitivi che sono fatti quasi inconsciamente. Assicurati che il tuo sito li supporti.

Aggiungi frecce o punti per indicare quando ci sono più foto. Altrimenti, i tuoi utenti mobili potrebbero non sapere nemmeno di poter scorrere!

Dai priorità alle informazioni importanti

Assicurati che i clienti possano visualizzare le informazioni critiche sui prodotti senza dover scorrere molto. Dai la priorità a prezzi, variazioni (colore, taglia, ecc.), sconti, recensioni e altri dettagli specifici dei tuoi prodotti: se vendi capi di abbigliamento, il materiale potrebbe essere importante. Oppure, se sei un negozio di elettronica, potresti voler evidenziare la garanzia fornita con ogni acquisto.

Ulteriori informazioni come le descrizioni e le specifiche complete del prodotto (istruzioni di lavaggio, SKU, ingredienti, ecc.) possono cadere più in basso nella pagina. In questo modo, se i tuoi clienti desiderano maggiori informazioni, possono trovarle facilmente, ma se sono soddisfatti solo delle basi, non saranno sopraffatti.

Semplifica il tuo menu mobile

Mantieni il tuo menu principale sui dispositivi mobili il più semplice possibile. Un lungo elenco di pagine travolgerà e confonderà i visitatori del sito. Restringilo all'essenziale, quindi dai la priorità all'ordine in cui sono elencati, con le pagine più importanti per prime.

The Good Batch accorcia il menu mobile per includere solo cinque pagine oltre ai collegamenti Accesso e Carrello. È semplice e al punto.

Se devi includere molte pagine, prova a utilizzare i sottomenu con interruttori espandibili. Limita le voci del menu principale e mostra le voci del sottomenu quando un utente le espande. Assicurati di utilizzare simboli come le frecce per indicare che un menu si espande!

Nuria offre cinque voci di menu principali su dispositivi mobili con frecce accanto a ciascuna, indicando che ci sono più opzioni. Quando un utente fa clic, il menu principale scorre per visualizzare un sottomenu con un chiaro pulsante "indietro". Ciò consente loro di visualizzare tutte le opzioni necessarie senza sovraccaricare i propri clienti.

Esistono diversi modi per visualizzare i menu mobili, quindi scegli quello più adatto al tuo pubblico. Loro includono:

• Un menù hamburger . Il simbolo dell'hamburger è costituito da tre linee impilate verticalmente l'una sull'altra. Il menu è nascosto finché un utente non fa clic sul simbolo. Questa è un'ottima opzione per i siti con molte pagine, ma può essere più difficile da trovare per i visitatori del sito.
• Un menu a schede . Questo ricorda molto da vicino la tipica navigazione sul desktop ed elenca le voci di menu orizzontalmente nella parte superiore del sito. Questo dovrebbe essere usato solo per i menu con collegamenti minimi; gli utenti non dovrebbero dover ingrandire o scorrere per visualizzare tutti gli elementi.
• Un pulsante di azione mobile . Un pulsante con l'icona di un menu fluttua sulla pagina e segue l'utente durante lo scorrimento. Quando viene cliccato, si espande per mostrare il menu. Questo è un buon modo per mantenere accessibile il menu principale, ma può distrarre o nascondere i contenuti.
• Un menu a tendina . Una barra dei menu nella parte superiore della pagina si apre quando si fa clic per visualizzare le opzioni della pagina. Occupa un po' più spazio rispetto al menu dell'hamburger, ma può essere visto più facilmente dai visitatori del sito.

In genere, il tuo tema includerà stili di menu reattivi. In caso contrario, o se vuoi scegliere un'opzione diversa, dai un'occhiata a questi plugin:

• Menu mobile WP
• ShiftNav
• Menu reattivo

Qualunque opzione tu scelga, assicurati che sia facile da usare per i tuoi clienti e che soddisfi le loro esigenze. E ricorda, ciò potrebbe significare creare un menu mobile completamente separato!

Rendi le funzioni importanti facili da trovare

Con lo spazio limitato sullo schermo sui dispositivi mobili, è facile che gli oggetti vadano persi. Assicurati che i visitatori possano trovare rapidamente le funzionalità critiche.

Rendi visibile la barra di ricerca

Molti siti Web includono una casella di ricerca nella barra laterale, ma in genere viene spostata in fondo alla pagina sui dispositivi mobili. La funzionalità di ricerca nell'intestazione del desktop potrebbe non rientrare nello stesso spazio su un telefono. Ma è una funzionalità fondamentale per gli acquirenti online, che possono trarre vantaggio dalla capacità di cercare il prodotto che desiderano.

Un'ottima soluzione è includere la barra di ricerca nel menu del cellulare, dove è facilmente visibile agli acquirenti. Alcuni temi offrono un'impostazione per questa funzionalità, ma in caso contrario, puoi ottenere lo stesso risultato utilizzando il codice personalizzato.

Apri il tuo file header.php e aggiungi la seguente funzione: <?php get_search_form(); ?> <?php get_search_form(); ?> . Quindi, puoi modellarlo in base alle tue esigenze utilizzando i CSS.

E se non vuoi toccare il codice, un plug-in come Ivory Search ottiene la stessa funzionalità.

Visualizza chiaramente le informazioni di contatto

Se includi le informazioni di contatto in un piè di pagina o in una barra laterale, gli utenti mobili avranno difficoltà a visualizzarle perché devono scorrere fino alla fine della pagina. Contrasta con un link visibile alla tua pagina di contatto nel menu.

Potresti anche voler includere un numero di telefono cliccabile e/o un indirizzo e-mail nel menu principale in modo che gli utenti possano mettersi in contatto facilmente. Per farlo:

1. Vai su Aspetto → Menu nella dashboard di WordPress.
2. Nel menu a discesa accanto a "Seleziona un menu da modificare", scegli il menu corretto. Questo potrebbe essere il tuo menu principale o il tuo menu mobile, a seconda di come hai impostato le cose.
3. Espandi Collegamenti personalizzati nella colonna di sinistra.
4. Nella casella URL , aggiungi il collegamento appropriato. Per un numero di telefono, aggiungi tel:+18005553927, sostituendo i numeri con il tuo numero. Assicurati che non ci siano spazi o altri simboli. Per un indirizzo email, aggiungi mailto:[email protected].
5. Nella casella Testo del collegamento , aggiungi il testo che verrà visualizzato nel menu. Ad esempio, potresti dire "Chiamaci" o "Chiama 800-555-3927".
6. Fare clic sul pulsante Aggiungi al menu e trascinare nella posizione scelta.
7. Fare clic sul pulsante blu Salva menu nell'angolo in basso a destra.

Quando un utente fa clic sul numero di telefono sul proprio dispositivo mobile, ti chiamerà automaticamente. Quando fanno clic sul tuo indirizzo e-mail, si aprirà una nuova e-mail nella loro app di posta elettronica predefinita.

Rendi il carrello facilmente accessibile

Se un cliente desidera continuare a fare acquisti dopo aver aggiunto un prodotto al carrello, è importante che possa modificare il carrello e procedere al pagamento in un secondo momento.

Il plug-in Mini Cart per WooCommerce aggiunge un'opzione carrello sia alla versione desktop che mobile del tuo sito web. Sul desktop, il carrello include i nomi degli articoli, le foto e i prezzi e consente agli acquirenti di modificare le quantità senza uscire dalla pagina. Su dispositivo mobile, mostra il numero di articoli nel carrello e il totale dell'ordine. Inoltre, gli acquirenti possono accedere alla pagina Carrello con un clic.

Concentrati sulla velocità del sito web

Sebbene la velocità del sito Web sia importante su qualsiasi dispositivo, lo è probabilmente di più per i dispositivi di piccole dimensioni. Gli acquirenti mobili utilizzano spesso connessioni Internet o dati cellulari più lenti per navigare, quindi dovresti fare tutto il possibile per assicurarti che il tuo sito si carichi il più rapidamente possibile. Il 53% degli utenti mobili abbandona un sito se impiega più di tre secondi per caricarsi e la nuova indicizzazione mobile first di Google dà priorità alla versione mobile del tuo sito web.

Inizia comprendendo il tempo di caricamento attuale del tuo sito. GTMetrix e Pingdom Website Speed ​​Test possono aiutarti a capire la velocità del tuo sito e offrire consigli per il miglioramento. Google PageSpeed ​​Insights offre anche un test specifico per i dispositivi mobili.

Quindi, utilizza le seguenti risorse per ottimizzare il tuo sito:

• Come ottimizzare le immagini per velocizzare il tuo negozio online
• Le prime cose da considerare con WooCommerce e Speed
• Perché il mio sito WooCommerce è lento e come risolverlo
• Come ottenere un punteggio di rendimento elevato su Google PageSpeed ​​Insights per WooCommerce
• Velocizza il tuo sito WooCommerce con queste funzionalità Jetpack

Potresti anche prendere in considerazione l'abilitazione di AMP (Accelerated Mobile Pages), un framework creato da Google per creare esperienze mobili leggere e semplificate. È un ottimo modo per velocizzare i post del blog, soprattutto per alcuni negozi online. Ulteriori informazioni sul miglioramento della velocità del sito con AMP.

Metti alla prova il tuo negozio online su dispositivo mobile

È importante testare regolarmente il tuo negozio e capire come funziona tutto sui dispositivi mobili. Il processo per il tuo sito è simile ai passaggi sopra elencati per testare le demo dei temi: utilizza una combinazione di strumenti come il test ottimizzato per dispositivi mobili di Google e metodi manuali come il ridimensionamento della finestra del browser.

Prova tutto! Fare clic su ogni collegamento; scorrere ogni pagina; e controlla ogni funzionalità. Tutti gli aspetti del tuo sito dovrebbero essere facili da visualizzare, leggere e navigare su telefoni e tablet.

Alcune piccole modifiche sui dispositivi mobili possono fare una grande differenza in termini di soddisfazione dei clienti e conversioni. Cerchi altri suggerimenti? Leggi Come sbloccare la potenza di WooCommerce su dispositivi mobili.