Il tasto Indietro perde i filtri? Perché succede nei negozi online e il test di un minuto per capirlo

La grafica è semplicissima, quasi didattica. Due riquadri affiancati, uno azzurrino e uno lilla. A sinistra c’è scritto Before Opening A Story, a destra After Pressing Back. Dentro ognuno c’è la stessa finta pagina web: una barra dell’indirizzo con /stories?topic=design, un filtro Topic con una pillola blu che dice Design e due risultati in elenco, A clearer navigation menu e Designing useful empty states. Le due schermate sono identiche. Ed è proprio questo il punto. Sotto c’è una riga che vale più di molti manuali: provare Indietro, Avanti, il ricaricamento e l’apertura dell’URL in una nuova scheda.

Una cosa la ammetto subito: la prima volta che l’ho vista ho pensato che fosse un’infografica sprecata, perché il prima e il dopo sono uguali. Poi ho ripensato a quante volte, comprando un paio di scarpe, ho impostato taglia, colore e fascia di prezzo, ho aperto un prodotto, sono tornato indietro e mi sono ritrovato davanti al catalogo completo, senza più un filtro. In quel momento ho capito che quei due riquadri uguali non sono affatto banali. Sono il risultato che si ottiene solo quando qualcuno ha progettato bene. Quando il tasto Indietro perde i filtri, invece, quella grafica diventa la descrizione di una promessa mancata.

Il pulsante più umile del web e la sua promessa

Nel maggio del 1999 Jakob Nielsen pubblicò la sua lista dei dieci errori più gravi del web design. Al primo posto non mise le animazioni invadenti o i colori sbagliati, ma una cosa che sembrava ovvia: rompere o rallentare il tasto Indietro. Lo definì l’ancora di salvezza di chi naviga, la seconda funzione di navigazione più usata dopo i link. Il ragionamento era tanto semplice quanto potente: sul web si può provare qualsiasi cosa, perché si sa che con un clic o due su Indietro si torna dove si era.

Quella frase l’ho citata a decine di clienti, e funziona sempre perché tocca un principio che va oltre la tecnologia. Nielsen Norman Group lo ha poi codificato tra le euristiche di usabilità: controllo e libertà dell’utente. Chi esplora ha bisogno di un’uscita d’emergenza chiara, di poter annullare senza pagare un prezzo. Se esplorare costa caro, la gente esplora di meno. In un negozio online questo significa meno prodotti visti, meno confronti e, spesso, un acquisto che non arriva mai.

Non si tratta di un problema di nicchia. I dati di utilizzo di Chrome, pubblicati dal team di web.dev, dicono che circa una navigazione su dieci da desktop e una su cinque da mobile è un passo indietro o in avanti nella cronologia. Sul telefono, dove il gesto di ritorno è sotto il pollice, la dipendenza da Indietro è ancora più forte.

Perché le pagine dinamiche hanno rotto Indietro

Nel web delle origini ogni clic caricava una pagina nuova, con un suo indirizzo. Il browser teneva una pila di queste pagine, la cronologia della sessione, e Indietro bastava a riprendere quella precedente. Il modello era semplice e infallibile.

Poi i siti sono diventati applicazioni. Filtri, ordinamenti, caricamento infinito dei risultati, pannelli che si aprono e si chiudono: tutto avviene dentro la stessa pagina, aggiornata con JavaScript senza ricaricare. È più veloce e più fluido, ma ha un effetto collaterale: per il browser non è successo nulla. Spunti cinque caselle di filtro, la pagina cambia sotto i tuoi occhi, ma nella cronologia non resta traccia. Apri un prodotto, torni indietro, e il browser ti restituisce la pagina com’era all’arrivo, cioè senza filtri.

Il Baymard Institute, che da anni testa con utenti reali i principali e-commerce, ha osservato che le aspettative su Indietro sono sorprendentemente uniformi. Le persone si aspettano di tornare a quella che percepiscono come la schermata precedente, anche se tecnicamente era la stessa pagina con un filtro in più o un pannello aperto. Nella loro analisi il 59% dei siti tradiva questa aspettativa almeno in uno degli schemi studiati: filtri e ordinamenti, overlay, checkout a fisarmonica e ritorno dalla scheda prodotto alla lista. Nelle loro linee guida sui filtri l’indicazione è netta: se l’utente apre un prodotto e torna indietro, i filtri devono essere ancora applicati.

La riparazione: History API e stato nell’URL

La soluzione esiste da tempo ed è standardizzata nell’HTML. La History API mette a disposizione degli sviluppatori il metodo pushState, che aggiunge una voce alla cronologia della sessione con un dato associato e, volendo, un nuovo URL, senza ricaricare la pagina. Quando l’utente preme Indietro o Avanti, il browser emette un evento chiamato popstate e il sito può ricostruire lo stato corrispondente. Esiste anche replaceState, che aggiorna la voce corrente senza crearne una nuova. Secondo la documentazione di MDN, pushState è supportato in modo stabile da tutti i browser principali da metà del 2015. Dieci anni dopo, insomma, non ci sono più scuse.

Ma il vero cuore della grafica è la barra in alto: /stories?topic=design. La didascalia lo dice chiaramente: l’URL descrive la vista. Quando lo stato dei filtri sta nell’indirizzo, succedono quattro cose buone insieme:

Indietro e Avanti funzionano, perché ogni stato ha un suo indirizzo nella cronologia.
Il ricaricamento non azzera nulla, perché la pagina legge i filtri dall’URL.
Il link si può condividere: mandi a qualcuno la tua ricerca di divani grigi sotto i 900 euro e lui vede esattamente quella.
Puoi salvarlo nei preferiti e ritrovare la stessa selezione la settimana dopo.

Nielsen ne parlava già in un vecchio articolo intitolato URL as UI: l’indirizzo fa parte dell’interfaccia, e un buon URL è leggibile, prevedibile, quasi modificabile a mano. Quel topic=design ne è l’esempio perfetto, perché chiunque capisce cosa rappresenta.

C’è poi un dettaglio della grafica che apprezzo molto, nel riquadro di destra: Update controls and results, cioè aggiornare i controlli e i risultati. Ho visto molti siti ripristinare l’elenco dei prodotti filtrati lasciando però le caselle dei filtri deselezionate. È un errore subdolo, perché l’utente non capisce più cosa sta guardando. Filtro e risultati devono dire la stessa cosa, come recita il riquadro di sinistra.

La cache avanti-indietro, l’aiuto che arriva dal browser

Nel frattempo anche i browser hanno fatto la loro parte con la back-forward cache, o bfcache. Invece di distruggere la pagina quando ne esci, il browser la congela in memoria con tutto il suo stato: filtri spuntati, posizione di scorrimento, contenuti caricati. Se torni indietro, la riprende all’istante, senza nuove richieste di rete. Quando funziona, chi naviga ritrova la pagina esattamente come l’aveva lasciata, anche se il sito non ha fatto nulla di speciale.

Però la bfcache non basta. Alcune scelte tecniche rendono una pagina non idonea: per esempio, su desktop Chrome e Firefox escludono le pagine che usano un certo tipo di gestore di uscita, l’evento unload, ancora molto diffuso negli script di terze parti. La cache poi ha una durata limitata e non riguarda le navigazioni interne delle applicazioni a pagina singola. Per questo, quando faccio una revisione di usabilità, la considero una rete di sicurezza e non la soluzione: lo stato deve comunque vivere nell’URL.

Il dettaglio che quasi tutti dimenticano: tornare allo stesso punto

La grafica mostra un solo filtro e due risultati, quindi non può raccontare un altro problema che vedo spesso: la posizione. Ritrovare i filtri ma ripartire dall’inizio di una lista di trecento prodotti, dopo averne fatti scorrere centoventi, è una mezza vittoria. L’interfaccia History espone anche una proprietà chiamata scrollRestoration, che consente di lasciare al browser il ripristino dello scorrimento oppure di gestirlo a mano. Con il caricamento infinito la faccenda si complica, perché i prodotti oltre la prima tranche devono essere ricaricati prima di poter tornare al punto giusto. È uno dei motivi per cui, nei progetti che seguo, preferisco un pulsante Carica altri che aggiorni l’URL con la pagina raggiunta.

Un’altra trappola è l’eccesso opposto. Se ogni clic su un filtro crea una nuova voce nella cronologia, per uscire dal negozio servono dieci pressioni di Indietro. Secondo me la soluzione più equilibrata è usare pushState per i cambi di stato veri, come l’applicazione di un filtro, e replaceState per le micro-regolazioni, come il trascinamento continuo di un cursore di prezzo.

Filtri o faccette: perché la posta in gioco è alta

Nielsen Norman Group distingue tra filtri semplici e navigazione a faccette: i primi restringono un insieme secondo un criterio, le seconde combinano più attributi indipendenti, come taglia, colore, materiale e prezzo, e sono più potenti ma richiedono più lavoro all’utente. Ed è qui il nocciolo della questione. Più lavoro chiedi a chi compra, più fa male perderlo. Azzerare un filtro solo costa un clic, ma azzerarne cinque combinati costa la pazienza, e spesso il cliente.

Il test da un minuto per capire se un negozio rispetta il tuo tempo

La riga in fondo alla grafica è, in pratica, una procedura di collaudo. La uso così, sia quando valuto un sito per lavoro sia quando faccio acquisti:

Applica due o tre filtri e guarda la barra degli indirizzi: se l’URL non cambia, è già un campanello d’allarme.
Apri un prodotto e premi Indietro: i filtri devono essere ancora attivi, sia nei controlli sia nei risultati, e la lista dovrebbe tornare più o meno al punto in cui eri.
Premi Avanti: devi ritrovare il prodotto, non una pagina vuota.
Ricarica la lista filtrata: nulla deve azzerarsi.
Copia l’URL e incollalo in una scheda nuova, meglio se in navigazione privata: devi vedere la stessa selezione.

Se un sito supera tutti e cinque i passaggi, dietro c’è qualcuno che ha pensato a te. Se ne fallisce due o più, il problema non è il tuo browser.

Qualche trucco per non perdere la ricerca

Finché i siti non si mettono in regola, ci si difende con poche abitudini. La più efficace è aprire i prodotti in una nuova scheda: Ctrl più clic su Windows, Cmd più clic su Mac, clic con la rotella del mouse, oppure pressione prolungata sul link da smartphone. La lista filtrata resta intatta nella scheda originale e puoi confrontare più articoli. Se invece noti che l’URL cambia quando applichi i filtri, salvalo nei preferiti o mandalo a te stesso: è la tua ricerca già pronta. Se l’URL resta fisso, sai in anticipo che conviene la strategia delle schede.

Nel mio lavoro ho imparato che la qualità di un’interfaccia non si misura tanto dalle schermate belle quanto da quelle che restano uguali quando dovrebbero. Quei due riquadri gemelli raccontano proprio questo: il design migliore, a volte, è quello che non si nota, perché ti restituisce esattamente ciò che avevi lasciato.