Créer des filtres couleur, taille et prix dynamiques sur PrestaShop sans recharger la page
Conversione & UX

Creare filtri dinamici colore, taglia e prezzo su PrestaShop senza ricaricare la pagina

Su un catalogo di oltre cento referenze, i filtri non sono un comfort ma la condizione di accesso ai prodotti. La loro messa in opera pone tre domande: quali attributi rendere filtrabili, come reggere il carico su un grande catalogo, e come renderli utilizzabili sullo schermo di un telefono.

Le conseguenze di questi filtri sul posizionamento sono un tema distinto, trattato separatamente.

Quali attributi rendere filtrabili

La tentazione è proporre tutto. È l’errore più frequente e il più costoso, in prestazioni come in leggibilità.

Tre criteri per mantenere un filtro.

È compilato su almeno l’80% dei prodotti della categoria. Un filtro materiale alimentato su trenta prodotti su duecento produce selezioni ingannevoli: il cliente crede di aver visto tutto il reparto mentre ha visto ciò che era documentato.

Discrimina realmente. Un attributo in cui il 95% dei prodotti condivide lo stesso valore non filtra nulla. Guarda la distribuzione dei valori prima di decidere.

Corrisponde a un criterio di scelta. Il cliente filtra su ciò che lo aiuta a decidere, non su ciò che il tuo fornitore ha giudicato utile documentare. Il peso imballato, il riferimento interno o il codice doganale non hanno nulla a che fare in un pannello di filtri.

Un riferimento: da sei a otto filtri per categoria coprono la quasi totalità dei bisogni. Oltre, il pannello diventa un modulo.

I filtri variano per categoria

Punto di progettazione spesso trascurato, che fa la differenza tra un pannello utile e un pannello generico.

Il numero di scarpa ha senso sulle calzature, nessuno sugli accessori. La potenza ha senso sull’utensileria elettrica, nessuno sulla viteria.

Un pannello di filtri identico su tutto il negozio mostra quindi ovunque criteri senza valore, il che annega i criteri pertinenti. La configurazione deve farsi per categoria, con un set di filtri ereditato e sovrascrivibile.

Corollario pratico: i valori proposti devono limitarsi a quelli presenti nella categoria corrente. Proporre trenta colori quando la categoria ne contiene solo quattro è un errore di implementazione corrente.

Filtri a Faccette AJAX per PrestaShopLa navigazione a faccette che filtra veloce e indicizza bene€99.00

I tipi di filtri

Quattro forme, ciascuna adatta a un tipo di dato.

Le caselle di controllo per i valori discreti: marca, materiale, taglia. Permettono la selezione multipla, che è il comportamento atteso.

I campioni di colore per i colori, ovviamente, con il nome in tooltip. Una lista testuale di colori è nettamente meno efficace.

Il cursore del prezzo, a doppia maniglia. Due precauzioni: mostrare i limiti reali della categoria invece di valori fissi, e permettere l’inserimento diretto degli importi per chi sa cosa cerca.

Gli interruttori per i criteri binari: disponibile, in promozione, consegna rapida. Si collocano in testa al pannello perché sono i più usati.

Il contatore di risultati

Elemento decisivo per l’uso, e pone una vera difficoltà tecnica.

Mostrare il numero di prodotti dietro ogni valore evita al cliente di selezionare una combinazione vuota. È ciò che fanno tutte le interfacce di filtraggio mature.

Il costo è reale: calcolare questi contatori comporta tante query di aggregazione quanti sono i valori mostrati, a ogni cambio di selezione.

Tre approcci secondo la taglia del catalogo. Su un piccolo catalogo, il calcolo diretto passa senza ottimizzazione. Su un catalogo medio, una query di aggregazione unica sostituisce le query per valore. Su un grande catalogo, un indice dedicato o un motore di ricerca esterno diventa necessario.

Regola di visualizzazione complementare: un valore a zero risultati viene disabilitato in grigio invece di sparire. La sua sparizione fa saltare la lista e disorienta.

Tre colli di bottiglia, nell’ordine in cui appaiono.

Le query di filtraggio. Un filtro su più attributi produce join multipli sulle tabelle di attributi e caratteristiche. È ciò che mette in ginocchio un database sulle categorie importanti.

Il calcolo dei contatori, citato sopra, che spesso costa più del filtraggio stesso.

Il conteggio totale, necessario alla paginazione. Su una selezione ampia, riguarda decine di migliaia di righe.

Due leve prima di considerare una rifusione. Una tabella indice dedicata che precalcola le corrispondenze prodotto-valore, aggiornata a ogni modifica del catalogo. E una cache per combinazione, di breve durata, che assorbe le selezioni più frequenti.

Punto di metodo: misura prima di ottimizzare. Cronometra il tempo di risposta di un filtraggio sulla tua categoria più grande, con tre filtri attivi. Se superi un secondo, il problema è reale e localizzabile.

Il comportamento mobile

È ciò che decide l’uso reale, poiché la maggioranza del traffico ci passa.

Il pannello laterale del desktop non ha equivalente su mobile. La soluzione che funziona è un pannello a schermo intero, aperto da un pulsante, con i filtri impilati verticalmente.

Cinque regole di implementazione.

Il pulsante di apertura resta raggiungibile durante lo scorrimento, in posizione fissa, con il numero di filtri attivi mostrato.

L’applicazione è esplicita. Su mobile, il filtraggio a ogni spunta produce ricaricamenti incessanti. Il visitatore spunta ciò che vuole, poi conferma con un pulsante che mostra il numero di risultati attesi.

I filtri attivi sono visibili dopo la chiusura del pannello, sotto forma di etichette rimovibili con un gesto.

Il ripristino è raggiungibile senza riaprire il pannello.

Il pannello si chiude al tasto indietro, senza lasciare la pagina. Un pannello a schermo intero che intrappola il tasto indietro è un attrito maggiore.

Cosa si rompe in produzione

Quattro situazioni da verificare dopo la messa in opera.

I filtri sulle varianti. Un prodotto disponibile in rosso taglia S e in blu taglia L deve apparire in una selezione rosso più taglia L? No. Il filtraggio deve riguardare le combinazioni esistenti, non l’incrocio degli attributi del prodotto.

La disponibilità. Un filtro disponibile che si basa sulla quantità del prodotto senza tener conto delle varianti produce falsi positivi.

L’ordinamento dopo il filtraggio. Deve conservarsi quando il visitatore modifica un filtro, altrimenti riparte da zero a ogni aggiustamento.

Le categorie vuote dopo il filtraggio. Prevedi un messaggio utile invece di una pagina bianca: proponi di rimuovere l’ultimo filtro applicato, che è quasi sempre quello che ha svuotato la selezione.

Misurare

Tre indicatori.

Il tasso di uso dei filtri per categoria. Una categoria dove nessuno filtra o è troppo piccola per averne bisogno, o è dotata di filtri inadatti.

La classifica dei filtri usati. Scoprirai quasi sempre che tre filtri concentrano l’essenziale degli usi, il che giustifica portarli in testa e considerare la rimozione degli altri.

Il tasso di conversione delle sessioni con filtraggio, confrontato con le sessioni senza. Un visitatore che filtra ha un’intenzione più precisa, e lo scarto misura il valore del dispositivo.

Il modulo Filtri a Faccette AJAX per PrestaShop mette in atto questo dispositivo su PrestaShop 8 e 9: configurazione degli attributi filtrabili per categoria, filtraggio senza ricaricamento con contatori di risultati, indice dedicato per i grandi cataloghi e pannello a schermo intero con conferma esplicita su mobile.

Continua a leggere

Articoli correlati