Su mobile l'abbandono del carrello nell'e-commerce arriva all'85,65%, più che su desktop. Una parte importante di questa differenza si può evitare con le scelte di design giuste. In questo articolo vedi che cosa rende un negozio davvero mobile-friendly e come arrivarci pagina per pagina.
Che differenza c'è tra mobile-friendly e ottimizzato per il mobile?
Mobile-friendly significa che il negozio non si rompe su uno schermo piccolo. Il testo va a capo correttamente, le immagini si ridimensionano e i pulsanti si toccano senza problemi. È lo standard minimo. Google lo ritiene necessario per l'indicizzazione.
Ottimizzato per il mobile significa che il negozio è pensato per convertire da smartphone. Layout, gerarchia delle informazioni, aree di tocco, flusso di checkout e velocità sono tutti configurati su come le persone usano il telefono per fare acquisti. Un negozio può essere mobile-friendly senza essere ottimizzato per il mobile. Succede spesso.
La distinzione conta perché mobile-friendly ti porta in gioco. Ottimizzato per il mobile è ciò che genera ricavi. Un negozio che non si rompe sul telefono, ma impiega 8 secondi a caricarsi e ha un modulo di checkout pensato per mouse e tastiera, è tecnicamente mobile-friendly. Non è ottimizzato per il mobile. Ogni miglioramento che fai oltre il "non è rotto" è un miglioramento del tuo tasso di conversione.
Perché il mobile-first indexing di Google cambia tutto
Google usa il mobile-first indexing, cioè posiziona il tuo negozio in base alla sua versione mobile. Non a quella desktop. Se il tuo negozio mobile ha meno contenuti, meno link interni o immagini che non si caricano, Google si fa un'idea del tuo negozio partendo da queste carenze.
Questo ha conseguenze dirette sul tuo posizionamento nelle ricerche. Un negozio che sul desktop sembra completo ma su mobile è ridotto all'osso si posizionerà in base a ciò che mostra la versione mobile. Se le descrizioni dei prodotti sono tagliate su mobile, Google indicizza la versione tagliata. Se i link di navigazione sono nascosti in un menu chiuso su mobile, Google potrebbe scansionarli con meno efficacia.
Il punto pratico è che le prestazioni su mobile non sono solo un problema di esperienza utente. Sono anche un problema di SEO. Migliorare il tuo negozio mobile migliora il tuo posizionamento. Ogni correzione su mobile funziona due volte.
Core Web Vitals e come influenzano il tuo posizionamento
I Core Web Vitals sono un insieme di metriche di prestazione che Google usa come segnali di posizionamento. Largest Contentful Paint misura quanto tempo impiega a caricarsi il contenuto principale di una pagina. Interaction to Next Paint misura quanto in fretta la pagina risponde a un'azione dell'utente. Cumulative Layout Shift misura quanto il layout si sposta in modo imprevisto durante il caricamento.
Tutti e tre contano su mobile, dove la velocità di rete e la potenza di calcolo sono inferiori a quelle del desktop. Un punteggio accettabile su un browser desktop può non esserlo su uno smartphone di fascia media con una connessione 4G. E quello smartphone è ciò che usa una parte importante del tuo traffico.
Punteggi bassi nei Core Web Vitals danneggiano sia il posizionamento sia le conversioni, ognuno per conto suo. Secondo alcuni studi, ogni secondo in più di caricamento su una pagina mobile riduce i tassi di conversione del 4,42%. Una pagina che impiega 5 secondi a caricarsi invece di 2 può aver già perso metà delle conversioni potenziali prima che qualcuno abbia visto i tuoi prodotti.
Design mobile per tipo di pagina
Ogni tipo di pagina di un negozio ha priorità diverse su mobile. Trattare tutte le pagine allo stesso modo significa non ottimizzarne bene nessuna.
Homepage
Su mobile la homepage deve comunicare che cosa vende il negozio e dove andare già al primo scorrimento. Le homepage desktop usano spesso sezioni hero larghe con più elementi. Su mobile quella stessa hero occupa tutto lo schermo. Se non comunica subito valore e non invita all'azione, il visitatore scorre oltre o se ne va.
Tieni la navigazione principale raggiungibile senza troppi tocchi. Il menu a hamburger è lo standard, ma le voci al suo interno dovrebbero limitarsi alle categorie che un nuovo visitatore ha davvero bisogno di vedere. Su mobile una navigazione sepolta è una navigazione invisibile.
Pagine di categoria
Su mobile le pagine di categoria devono bilanciare la quantità di prodotti con la facilità d'uso. Le griglie a due colonne funzionano bene per la maggior parte dei prodotti. Gli elenchi a colonna singola vanno meglio quando il dettaglio delle immagini conta. Entrambe sono preferibili alle griglie a tre colonne, che rendono le immagini dei prodotti troppo piccole da leggere sulla maggior parte degli smartphone.
Filtri e ordinamento sono fondamentali nelle pagine di categoria e difficili su mobile. Un pannello dei filtri che si apre a schermo intero, invece che in una barra laterale, rende il filtraggio utilizzabile su uno schermo piccolo. Leggi la guida completa su che cos'è una pagina di categoria e come progettarla per approfondire la struttura delle pagine di categoria.
Pagine prodotto
Su mobile la pagina prodotto deve rispondere in fretta a tre domande. Che cos'è? Quanto costa? Posso averlo facilmente? L'immagine principale deve caricarsi subito e poter essere scorsa con un tocco. Prezzo, scelta delle varianti e pulsante "aggiungi al carrello" devono essere visibili senza scorrere.
Metti il pulsante "aggiungi al carrello" nella parte alta della schermata su mobile o, come minimo, usa un pulsante fisso che segue l'utente mentre scorre la descrizione del prodotto. Un cliente che deve risalire per aggiungere qualcosa al carrello ha un'occasione in più per cambiare idea.
Checkout
Il checkout è il punto in cui l'abbandono da mobile è più alto. Meno passaggi e meno campi servono, meglio è. Un checkout come ospite elimina l'ostacolo della creazione dell'account, che fa abbandonare molti utenti mobile. Leggi la guida completa su come progettare una pagina di checkout che riduce gli abbandoni per consigli dettagliati sull'ottimizzazione del checkout.
Aree raggiungibili dal pollice e design ergonomico
Le persone usano lo smartphone con i pollici, e i pollici raggiungono comodamente solo alcune zone dello schermo. Il centro in basso è la zona più facile da raggiungere. Gli angoli in alto sono i più difficili. Non è un dettaglio. È una realtà ergonomica che incide direttamente sul fatto che i clienti interagiscano con gli elementi chiave del tuo negozio.
Metti i pulsanti d'azione più importanti, come "aggiungi al carrello", "vai al checkout" e "applica filtro", nella zona in basso al centro, dove i pollici si appoggiano in modo naturale. Le barre di navigazione in fondo allo schermo sono più accessibili di quelle in alto sugli smartphone grandi. Le barre in alto sono una convenzione del desktop che si adatta male all'uso con una sola mano.
Le aree di tocco troppo piccole sono un problema comune di usabilità su mobile. Pulsanti e link facili da cliccare con il cursore del mouse diventano difficili da toccare con precisione con la punta del dito. Google consiglia aree di tocco di almeno 48 per 48 pixel, con uno spazio adeguato tra un elemento e l'altro. Le aree troppo piccole portano a tocchi sbagliati, frustrazione e abbandoni.
Checkout da mobile e ottimizzazione dei moduli
I moduli sono una delle principali fonti di attrito nel checkout da mobile. Un modulo pensato per tastiera e mouse diventa lento e soggetto a errori quando lo compili su un touchscreen con il correttore automatico che interferisce. Alcuni miglioramenti mirati rendono i moduli molto più facili da completare da mobile.
Usa i tipi di tastiera giusti
I tipi di input HTML dicono al browser mobile quale tastiera mostrare. Un campo email con il tipo di input email mostra una tastiera con il simbolo @ ben in vista. Un campo telefono con il tipo di input tel mostra un tastierino numerico. Un campo con il tipo di testo predefinito mostra la tastiera completa per tutto, compresi numeri di telefono e CAP.
Un tipo di input sbagliato aggiunge attrito inutile. Il cliente deve cambiare tastiera a mano o scrivere con il layout sbagliato. La soluzione è cambiare un solo attributo in ogni campo del modulo. È uno dei miglioramenti con il miglior rapporto tra risultato e fatica nel checkout da mobile.
Riduci al minimo i campi del modulo
Ogni campo di un modulo di checkout è un punto di attrito su mobile. Controlla il tuo checkout e togli ogni campo che non serve per completare la transazione. I campi separati per nome e cognome di solito si possono unire. I campi per il titolo servono raramente. Più righe di indirizzo si possono spesso sostituire con un'unica ricerca dell'indirizzo.
Se ti servono altre informazioni per il marketing o per l'analisi, valuta di raccoglierle dopo l'acquisto, non durante il checkout. Un sondaggio post-acquisto ti dà gli stessi dati senza il rischio di abbandono.
Supporta il riempimento automatico
I browser mobile moderni e i gestori di password possono compilare in automatico i campi del checkout se il tuo modulo è strutturato bene. L'attributo autocomplete di ogni campo dice al browser che tipo di dato è. Un campo con il valore autocomplete corretto viene compilato in automatico dal browser, se il cliente ha salvato i suoi dati. Il riempimento automatico può ridurre molto il tempo di checkout su mobile, e questo pesa davvero sul completamento dell'acquisto.
Offri metodi di pagamento da mobile
I metodi di pagamento da mobile, come i portafogli digitali, permettono ai clienti di completare un acquisto con l'autenticazione biometrica invece di inserire a mano i dati della carta. Per un cliente al telefono, non dover digitare un numero di carta di 16 cifre, una data di scadenza e un codice di sicurezza è un risparmio di fatica concreto. I negozi che offrono questi metodi accanto ai normali pagamenti con carta hanno tassi di conversione più alti su mobile, perché l'attrito nel passaggio più delicato sparisce.
Velocità delle pagine su mobile
La velocità delle pagine pesa più sui negozi mobile che su quelli desktop, perché le connessioni mobili sono più lente e i processori più deboli. Una pagina che si carica in 2 secondi con la banda larga può impiegarne 6 con una connessione dati mobile. Secondo gli studi, il 53% dei visitatori mobile si aspetta che le pagine si carichino in meno di 3 secondi. Chi non li ottiene se ne va.
Comprimi le immagini
Le immagini sono il singolo fattore che pesa di più sul tempo di caricamento da mobile. Ogni immagine di prodotto, banner e foto lifestyle andrebbe compressa prima di arrivare al browser. I formati di immagine moderni offrono file molto più leggeri dei formati più vecchi, a parità di qualità visiva.
Il lazy loading rimanda il caricamento delle immagini sotto la parte visibile finché il cliente non scorre verso di esse. La parte visibile della pagina si carica subito. Tutto il resto si carica solo quando serve. Questa tecnica migliora la velocità percepita anche quando il peso totale della pagina resta lo stesso.
Riduci al minimo gli script
Gli script di terze parti, come tracker di analisi, widget di chat, pixel di marketing e strumenti per le recensioni, aggiungono tempo di caricamento a ogni pagina. Ogni script va scaricato, analizzato ed eseguito. Su mobile ci vuole più tempo che su desktop. Controlla gli script attivi sul tuo negozio e togli quelli che non contribuiscono in modo concreto ai ricavi o all'esperienza dei clienti.
Gli script necessari si possono spesso caricare in modo asincrono, cioè dopo il contenuto principale della pagina e non prima. Così la pagina è utilizzabile prima che gli script finiscano di caricarsi, e questo migliora i punteggi dei Core Web Vitals e l'esperienza del cliente.
Prova su dispositivi reali
Gli strumenti per sviluppatori del browser includono un simulatore mobile che ti fa vedere il negozio come se fossi su un telefono. Il simulatore è utile per controllare il layout, ma non riproduce con precisione le prestazioni di un dispositivo reale su una rete reale. Uno smartphone di fascia media con una connessione 4G si comporterà in modo diverso da ciò che il simulatore mostra su un computer desktop veloce.
Prova regolarmente su dispositivi reali. I problemi invisibili nel simulatore, come i ritardi nei tocchi, i difetti di rendering dei caratteri e certi bug di layout, saltano subito all'occhio sui dispositivi reali. Se non hai a disposizione vari dispositivi, online ci sono strumenti gratuiti che mostrano il tuo negozio tramite hardware reale su reti reali.
SEO mobile oltre la velocità
Velocità e Core Web Vitals sono gli aspetti della SEO mobile di cui si parla di più, ma altri fattori influenzano il posizionamento del tuo negozio nei risultati di ricerca da mobile.
Evita gli interstitial che coprono il contenuto principale su mobile. I pop-up e le sovrapposizioni che bloccano la pagina subito dopo il caricamento vengono penalizzati dall'algoritmo di ricerca mobile di Google. Se usi un pop-up per raccogliere email o un banner per il consenso ai cookie, non deve nascondere il contenuto principale prima che il visitatore abbia potuto vedere la pagina.
Assicurati che tutto il contenuto visibile sul tuo negozio desktop sia accessibile anche su mobile. Se il contenuto è nascosto dietro un pulsante "leggi di più" su mobile, Google può indicizzare lo stato chiuso invece del testo completo. Per le descrizioni dei prodotti e i contenuti di categoria che contribuiscono al tuo posizionamento, il testo completo dovrebbe essere accessibile su mobile senza altri tocchi.
I link interni dovrebbero essere coerenti tra desktop e mobile. Se il tuo negozio desktop ha una sezione ben visibile di prodotti correlati con link ad altre categorie, la versione mobile dovrebbe includere gli stessi link. I link di navigazione che Google usa per capire la struttura del tuo negozio non dovrebbero sparire su mobile.
Come WEMASY gestisce il mobile
Il sistema e-commerce di WEMASY genera pagine del negozio responsive, che per impostazione predefinita si adattano a qualsiasi dimensione dello schermo. Pagine prodotto, pagine di categoria e checkout sono tutte progettate per rispettare i requisiti del mobile-first indexing di Google. Il flusso di checkout include il supporto ai metodi di pagamento da mobile e campi del modulo con il tipo corretto. Le prestazioni dei Core Web Vitals sono integrate nell'hosting e nell'infrastruttura di distribuzione del sistema, senza bisogno di ottimizzazioni manuali. Vedi che cosa include ogni piano nella pagina dei prezzi.
Domande frequenti
Come controllo se il mio negozio è mobile-friendly?
Google Search Console include un rapporto sull'usabilità mobile che segnala problemi specifici nelle tue pagine, come testo troppo piccolo, elementi cliccabili troppo vicini o contenuti più larghi dello schermo. PageSpeed Insights ti dà i punteggi dei Core Web Vitals separati per mobile e desktop. Entrambi gli strumenti sono gratuiti e danno risultati concreti e utilizzabili, non un semplice superato o non superato. Con il creatore di siti di WEMASY puoi impostarlo direttamente sul tuo negozio.
Il design mobile influisce sul mio posizionamento su Google?
Sì, in modo diretto. Google usa il mobile-first indexing, cioè il tuo negozio viene posizionato in base alla sua versione mobile. I punteggi dei Core Web Vitals, influenzati da fattori di prestazione mobile come la velocità di caricamento e la stabilità del layout, sono un segnale di posizionamento confermato. Un negozio che va bene su mobile ha un vantaggio nel posizionamento su uno che non va bene, anche se le versioni desktop sono equivalenti.
Qual è il problema più comune nel checkout da mobile?
L'attrito dei moduli è il problema più comune. I moduli di checkout pensati per mouse e tastiera richiedono troppa fatica su un touchscreen. Gli interventi più efficaci sono questi: usare i tipi di input corretti perché compaia la tastiera giusta, ridurre il numero di campi, attivare il riempimento automatico e offrire metodi di pagamento da mobile che evitano di inserire a mano i dati della carta. Sistemare questi quattro punti di solito porta un miglioramento misurabile nei tassi di completamento del checkout da mobile.
In che modo la velocità delle pagine su mobile influisce sulle vendite?
Il rapporto è diretto e ben documentato. Gli studi mostrano un calo del tasso di conversione di circa il 4% per ogni secondo in più di caricamento. Un negozio che si carica in 1 secondo converte a un tasso molto più alto dello stesso negozio che ne impiega 4. Per i negozi mobile in particolare, dove le condizioni di rete variano e i visitatori abbandonano più in fretta le esperienze lente, i miglioramenti di velocità danno spesso il ritorno più rapido tra tutti gli investimenti tecnici.
Devo creare un negozio mobile separato o usare un design responsive?
Il design responsive, in cui un solo negozio adatta il layout alla dimensione dello schermo, è l'approccio standard e quello che consiglia Google. I siti mobile separati creano più lavoro di manutenzione, possono causare incoerenze nell'indicizzazione e sono più difficili da tenere allineati quando aggiorni prodotti e contenuti. Se non c'è un motivo operativo preciso per gestire un'esperienza mobile separata, il design responsive su un unico URL è la scelta giusta.
Come riduco l'abbandono del carrello da mobile?
L'abbandono del carrello da mobile nasce da una combinazione di attrito e distrazione. Le strategie più efficaci sono: un checkout semplificato, con meno passaggi e campi possibile, un checkout come ospite che elimina l'ostacolo della creazione dell'account, metodi di pagamento da mobile che evitano di inserire a mano la carta e una pagina di checkout che si carica in fretta. Anche il retargeting via email per i carrelli abbandonati funziona bene per recuperare le sessioni in cui il cliente non ha completato l'acquisto in una sola visita.