Il tema è “mobile friendly”. PageSpeed è verde. Qualcuno ha persino aggiunto un Aggiungi al carrello fisso. Eppure la sessione da telefono muore ancora a metà di un muro di avanzi del desktop – striscia promozionale, banner dei cookie, loghi di fiducia, un paragrafo SEO, poi una minuscola foto del prodotto. Questa non è una pagina prodotto mobile. È un layout desktop infilato in uno schermo stretto e venduto come ottimizzazione.
Google indicizza e posiziona già principalmente dalla versione mobile delle tue pagine. Se il percorso di acquisto funziona solo su un monitor largo, non ci sei “quasi” – stai misurando lo schermo sbagliato. La mappa associata su cosa deve esserci in una pagina prodotto copre l’elenco completo di ciò che serve; questo post riguarda l’ordine in cui questi blocchi appaiono quando lo schermo è largo 390 pixel.
Una pagina prodotto mobile è un problema di impilamento, non un problema di stile.
“Ottimizzato per il mobile” di solito significa che la pagina desktop comanda ancora
Il CSS responsivo fa impilare le colonne. Non decide cosa merita il primo scorrimento del pollice. I temi mantengono l’ordine dei moduli desktop. Le app continuano a iniettare dove hanno sempre iniettato. Nessuno ha riordinato nulla – il telefono comprime semplicemente la stessa sequenza finché l’Aggiungi al carrello non finisce sotto tre blocchi che non riguardano l’acquisto.
L’indizio è noioso e ripetibile. Apri il prodotto live sul tuo telefono – non l’anteprima del back-office, l’URL reale con ogni modulo caricato. Se devi scorrere elementi di contorno prima di poter nominare il prodotto, leggere il prezzo che corrispondeva all’annuncio o toccare Aggiungi al carrello, il layout è ancora desktop-first. I punteggi di velocità non risolveranno l’ordine.
Cosa deve fare una pagina prodotto mobile nella prima schermata
Una pagina prodotto mobile ha un solo compito nella prima schermata: permettere a qualcuno di decidere e agire. Non “sentire il brand”. Non “vedere ogni segnale di fiducia”. Decidere e agire.
In quella prima schermata, proteggi solo ciò che sblocca l’acquisto:
- Identità. Nome e un’immagine principale chiara – abbastanza grande da rendere l’oggetto ovvio senza dover zoomare.
- Prezzo che corrisponde al clic. Se l’annuncio o l’inserzione diceva 47,90 €, la prima schermata non può nascondere un numero diverso dietro una fisarmonica chiusa.
- Opzioni critiche per l’acquisto. Taglia, colore, confezione – qualsiasi cosa debba essere scelta prima che l’Aggiungi al carrello funzioni. Etichette che uno sconosciuto può decodificare; codici fornitore e “Taglia1 / Taglia2” bruciano spazio e tocchi preziosi. È lo stesso problema UX del gergo di prodotto, solo più evidente su un telefono.
- Un’azione di acquisto primaria raggiungibile. Un vero Aggiungi al carrello (o Acquista), non un elemento fisso decorativo che copre il pulsante funzionante e non fa nulla di utile.
- Un’indicazione onesta su stock o consegna quando cambia la decisione – spedito in 2 giorni, su ordinazione, merce pesante. Non un romanzo sulle policy.
Tutto il resto aspetta più in basso. Recensioni, descrizione lunga, prodotti correlati, storia del brand – utili dopo, fatali quando spingono i controlli di acquisto fuori dalla prima schermata.
La discarica del desktop: cosa ruba di solito la prima schermata
Continuiamo a vedere la stessa pila sui telefoni live. Su un catalogo che abbiamo analizzato, c’erano cinque strisce fisse sopra il nome del prodotto – e due di esse dicevano la stessa cosa. I soliti sospetti:
- Elementi di contorno prima del prodotto. Barra promozionale + annuncio + informativa sui cookie + “scarica la nostra app” – quattro strisce prima ancora che l’immagine si carichi. L’acquirente è venuto per un prodotto, non per un cartellone pubblicitario.
- Carta da parati di fiducia prima della comprensione. Una riga di loghi di pagamento e sicurezza prima del prezzo o della foto. Elementi di contorno nervosi non sostituiscono un prodotto chiaro.
- Saggio SEO sotto il titolo. Duecento parole di introduzione ricca di parole chiave copiata dal template desktop, così il prezzo e le opzioni iniziano sotto la piega su ogni telefono. Quel testo è stato scritto per Google, non per la persona che tiene in mano il telefono – e Google lo legge benissimo anche da sotto la piega.
- Cross-sell prima dell’Aggiungi al carrello. Caroselli “Potrebbe piacerti anche” che combattono per la zona del pollice mentre lo SKU primario non ha ancora una taglia selezionata.
- Galleria che si mangia la visuale. Miniature enormi o uno slider che richiede tre scorrimenti prima che appaia il prezzo – va bene su desktop, scortese su un telefono.
- UI fissa che mente. Una barra fluttuante che copre il vero Aggiungi al carrello, o un ATC (Add to cart) fisso che è disabilitato senza errori perché un’opzione è vuota. L’anteprima sembrava pulita; la pagina live con i moduli no.
Niente di tutto questo richiede un budget per il redesign. Richiede qualcuno che ammetta che l’ordine desktop è sopravvissuto al “progetto mobile”.
Riordina prima di ricostruire
Scegli la pagina prodotto mobile che ottiene traffico e poche conversioni. Aprila su un telefono reale. Fai uno screenshot della prima schermata. Poi scrivi ogni blocco visibile dall’alto verso il basso – barre, immagine, titolo, prezzo, moduli, pulsanti. Segna ogni blocco come critico per l’acquisto o rumore.
Se il rumore si trova sopra gli elementi critici per l’acquisto, spostalo o eliminalo. Prima le posizioni del tema e gli hook dei moduli: in PrestaShop è l’ordine degli hook sulla pagina prodotto, in Shopify l’ordine delle sezioni nell’editor del tema, in WooCommerce qualsiasi cosa il page builder abbia impilato. Non comprare un’altra app per la “UX mobile” finché la pila esistente non è onesta. Un redesign che mantiene lo stesso ordine dei moduli ridisegna solo la discarica.
Le pagine di categoria hanno un compito diverso – orientamento sopra una griglia – quindi non rubare soluzioni da lì; se la pagina di elenco è un disastro, inizia con il contenuto della pagina categoria ecommerce. Questo audit si concentra sull’URL di un solo prodotto.
Dopo l’Aggiungi al carrello: cosa merita ancora spazio
Una volta che il percorso di acquisto è intatto, il resto della pagina può guadagnarsi il suo spazio: specifiche, cura, vestibilità, FAQ che eliminano una vera obiezione, confronto con SKU fratelli. Su una pagina prodotto mobile quei blocchi devono stare dopo il percorso decisionale – non interromperlo. Stessa regola della mappa PDP completa dal post associato, tagliata per uno schermo a misura di pollice.
Note sulle piattaforme senza una predica sul CMS
PrestaShop, Shopify, WooCommerce – stessa modalità di fallimento. L’anteprima del back-office non è la vetrina live. App e moduli si iniettano in ritardo: strumenti per i cookie, upsell, chat, barre di notifica. Fai un audit su un telefono reale dopo un aggiornamento forzato (hard refresh), disconnesso – sull’Android di fascia media che i tuoi clienti portano effettivamente con sé, non su un top di gamma con il Wi-Fi dell’ufficio.
Gli store multilingua subiscono una ferita in più. I titoli e le descrizioni brevi in FR/DE/PL spesso sono più lunghi della bozza in inglese. Sul desktop fai spallucce. Su una pagina prodotto mobile, la stringa più lunga spinge il prezzo e l’Aggiungi al carrello giù di un’altra mezza schermata. Traduci il significato, poi taglia la lunghezza per il telefono – non tradurre e basta.
Se mancano le risposte, risolvi prima quello
Riordinare non salverà una pagina che non risponde mai a cosa sia, quanto costi o quando arrivi. Risolvi prima quelle risposte all’acquisto sulla pagina prodotto completa. Se esistono e il telefono le seppellisce ancora sotto gli avanzi del desktop, la tua pagina prodotto mobile non ha bisogno di un altro badge di ottimizzazione – ha bisogno di una pila più corta.