Un visitatore percorre una categoria, scende fino al quarantesimo prodotto, apre una scheda, torna indietro e si ritrova in cima alla pagina 1. Deve rifare tutto. È una delle frizioni più segnalate sui cataloghi ampi, ed è anche una delle meno costose da correggere.
Perché il ritorno non funziona
Tre cause distinte, con soluzioni diverse.
La pagina viene ricaricata dal server. Al ritorno indietro, il browser può servire la pagina dalla propria cache o richiederla di nuovo. Nel secondo caso tutto lo stato visivo va perso, compresa la posizione di scorrimento.
Il contenuto viene caricato dopo il rendering iniziale. Su una categoria a scorrimento infinito o con filtri asincroni, la pagina torna al suo stato di partenza: i prodotti caricati scorrendo non esistono più al ritorno.
Lo stato di navigazione non è nell’URL. Se paginazione, filtri e ordinamento non si riflettono nell’indirizzo, il browser non ha alcun modo di ripristinarli.
Quest’ultima causa è la più strutturante: senza stato nell’URL nessun ripristino affidabile è possibile.
Cosa va memorizzato
Quattro elementi, di cui solo due sono evidenti.
La posizione di scorrimento. La più visibile e, paradossalmente, la meno importante: se sono mostrati i prodotti giusti, il visitatore ritrova rapidamente il suo riferimento.
La pagina corrente o il numero di lotti caricati. È il punto decisivo. Un visitatore arrivato al sessantesimo prodotto deve ritrovare quei sessanta prodotti, non i primi venti.
I filtri e l’ordinamento attivi. Devono stare nell’URL, il che risolve il problema indipendentemente da qualsiasi meccanismo di memorizzazione.
Il prodotto consultato. Ripristinare la posizione va bene; riportare il visitatore esattamente sulla miniatura del prodotto appena visto, con una leggera evidenziazione, è nettamente meglio. Riprende il filo immediatamente.
Scroll Infinito PrestaShop — Paginazione SEO e Ripristino PosizioneScroll infinito nelle pagine di categoria con paginazione che preserva la SEO e ripristino della posizione esatta dopo la visita a una scheda prodotto.€69.00
I due approcci tecnici
Lo stato nell’URL. Ogni cambio di filtro, di ordinamento o di pagina aggiorna l’indirizzo senza ricaricare. Il ritorno indietro ripristina lo stato in modo naturale perché l’indirizzo lo descrive.
È l’approccio più solido: funziona anche per la condivisione del link, l’apertura in una nuova scheda e l’indicizzazione. In cambio richiede una gestione pulita della cronologia di navigazione, distinguendo i cambiamenti che creano una voce di cronologia da quelli che sostituiscono la voce corrente.
La regola utile: un cambio di filtro crea una voce, un semplice scorrimento sostituisce la voce corrente. Senza questa distinzione, il pulsante indietro costringe il visitatore ad attraversare dieci stati intermedi per uscire dalla categoria.
L’archiviazione di sessione. Lo stato viene salvato lato browser all’uscita dalla pagina e ripristinato al ritorno. Più semplice da realizzare e limitato: non funziona su un link condiviso né su una nuova scheda.
La combinazione che funziona: l’URL porta i filtri, l’ordinamento e la paginazione, l’archiviazione di sessione porta la posizione di scorrimento e l’identificativo dell’ultimo prodotto consultato.
Il caso della nuova scheda
Comportamento molto diffuso e raramente trattato: il visitatore apre le schede prodotto in nuove schede del browser, ne tiene cinque aperte e torna alla scheda della categoria.
Buona notizia: in questo caso la scheda della categoria non è stata ricaricata e il suo stato è intatto. Non serve alcun meccanismo.
Due punti di attenzione comunque. Se la vostra pagina ricarica automaticamente il contenuto al ritorno del focus, per aggiornare le giacenze per esempio, distruggete quello stato. E l’evidenziazione dell’ultimo prodotto consultato non funziona in questo scenario, poiché sono stati aperti più prodotti.
La buona pratica consiste nel marcare visivamente tutti i prodotti già consultati nella griglia, non solo l’ultimo. È utile in entrambi gli scenari e aiuta il visitatore a orientarsi in un elenco lungo.
Scorrimento infinito o paginazione
Il ritorno alla posizione è più difficile con lo scorrimento infinito, e questo pesa nella scelta tra i due.
Con la paginazione classica, l’URL contiene il numero di pagina, il ritorno funziona naturalmente e l’indicizzazione è semplice. Lo svantaggio è il clic in più a ogni pagina.
Con lo scorrimento infinito, l’esperienza di percorso è più fluida ma emergono tre problemi: il ritorno alla posizione, l’accesso al piè di pagina divenuto irraggiungibile e l’indicizzazione dei prodotti caricati dinamicamente.
La soluzione intermedia risolve la maggior parte di questi punti: uno scorrimento che carica automaticamente due o tre lotti, poi un pulsante «mostra altri» esplicito, con aggiornamento dell’URL a ogni lotto. Conservate la fluidità dell’inizio del percorso, l’indirizzo resta condivisibile e il piè di pagina torna raggiungibile.
Cosa rompe il ripristino
Quattro situazioni da verificare dopo l’implementazione.
La cache del server. Una pagina in cache può essere servita in uno stato diverso da quello atteso. Verificate il comportamento in condizioni reali, non solo in ambiente di sviluppo.
Il cambio di giacenza. Se un prodotto diventa non disponibile tra l’uscita e il ritorno, la griglia cambia e la posizione memorizzata non corrisponde più. Ripristinate sull’identificativo del prodotto anziché su una posizione in pixel.
La visualizzazione responsive. Una posizione in pixel calcolata su desktop non ha alcun senso se il visitatore ha ruotato il telefono nel frattempo. Un motivo in più per ragionare in prodotti anziché in distanza.
I blocchi ad altezza variabile. Una fascia promozionale o un blocco caricato tardi spostano la griglia. Attendete il completamento del caricamento degli elementi sopra la griglia prima di ripristinare.
Misurare
Bastano due indicatori, e il secondo è quello che conta.
Il numero di prodotti visti per sessione sulle categorie interessate. Un visitatore che non perde più la posizione ne consulta meccanicamente di più.
Il tasso di ritorno alla categoria dalle schede prodotto. Se aumenta dopo l’implementazione, il vostro percorso di confronto funziona. Se resta basso, il problema è altrove, probabilmente nella scheda stessa.
Il modulo Scroll Infinito per PrestaShop tratta questo comportamento su PrestaShop 8 e 9: caricamento progressivo con aggiornamento dell’indirizzo a ogni lotto, ripristino della pagina e della posizione al ritorno da una scheda, marcatura dei prodotti già consultati e pulsante esplicito dopo i primi lotti per conservare l’accesso al piè di pagina.