Conversione & UX

Come mostrare le sottocategorie in riquadri con immagini su PrestaShop

Su una categoria di livello intermedio il visitatore arriva con un’intenzione ancora ampia. Non cerca un prodotto preciso, vuole sapere cosa contiene il reparto. Un elenco di link testuali risponde male, una griglia di riquadri con immagini risponde bene.

Cosa fa il tema predefinito

Il comportamento nativo varia da tema a tema. Il più diffuso: un elenco testuale di sottocategorie, a volte con una piccola miniatura, posto sopra o sotto la griglia dei prodotti.

Tre limiti.

Le immagini mancano o sono minuscole, il che le rende inutili per orientarsi.

La posizione è fissa, di solito sotto la descrizione di categoria, dove su mobile guardano in pochi.

E soprattutto, su molti temi l’elenco sparisce non appena ci sono prodotti nella categoria corrente, che è il caso più frequente.

Dove collocare il blocco

La risposta dipende dal livello della categoria, ed è ciò che decide l’efficacia.

Su una categoria di primo livello, senza prodotti propri o con pochissimi, i riquadri occupano tutta la pagina. È il caso ideale: la pagina diventa una scelta visiva tra sotto-reparti.

Su una categoria intermedia che contiene sia sottocategorie sia prodotti, i riquadri stanno sopra la griglia dei prodotti, su una o due righe al massimo. Il visitatore vede prima i percorsi possibili, poi i prodotti se preferisce sfogliare.

Su una categoria terminale, senza sottocategorie, il blocco non ha ragione di esistere. Alcune implementazioni vi mostrano le categorie sorelle, che è un’altra funzione e merita un trattamento distinto, semmai a fine pagina.

Pagina Categoria Visiva: Sottocategorie in Riquadri con Immagine (Category Wall)Pagine categoria che fanno venire voglia di cliccare, non un semplice elenco puntato.89.00

Scegliere le immagini

È il punto che decide il risultato, più della tecnica.

La coerenza conta più della bellezza. Dodici riquadri di cui otto con foto prodotto scontornate e quattro con foto d’ambiente producono una griglia disordinata. Scegliete una linea e tenetela su tutto il negozio.

Foto prodotto o foto d’uso? Su un catalogo tecnico la foto prodotto è più leggibile: il visitatore riconosce subito di cosa si tratta. Su arredo, tessile o alimentare la foto d’uso vende meglio.

Il formato deve essere uniforme. Un solo rapporto applicato a tutti i riquadri, con ritaglio automatico centrato. Immagini di proporzioni diverse rompono la griglia.

Il testo deve restare leggibile. Se la dicitura si sovrappone all’immagine, prevedete un velo o uno sfondo semitrasparente. Un titolo bianco su una foto chiara è illeggibile, e il contrasto è un criterio di accessibilità, non una preferenza estetica.

Quanti riquadri e in quale ordine

Tra quattro e dodici. Sotto i quattro basta un elenco testuale. Oltre i dodici, la griglia diventa un catalogo a sé e il visitatore smette di scegliere.

Se avete venti sottocategorie, due opzioni: raggrupparle nell’albero, oppure mostrare a riquadri solo le principali con un link «vedi tutte le categorie».

Per l’ordine, usate la posizione definita nel back-office invece dell’ordine alfabetico. Mettete per primo ciò che vende, non ciò che comincia per A.

L’accessibilità

Due regole spesso mancate su questo tipo di blocco.

Il link deve portare una dicitura leggibile. Un riquadro che è solo un’immagine cliccabile, senza testo alternativo, per uno screen reader è un link vuoto. Il nome della categoria deve essere testo vero, non una parte dell’immagine.

L’area cliccabile deve coprire tutto il riquadro, non solo il titolo. È anche una questione di comodità al tocco.

Il caso della categoria senza prodotti propri

Una categoria di primo livello che contiene solo sottocategorie pone una questione SEO.

Senza prodotti né contenuto la pagina è sottile e si posiziona male, pur portando spesso la query generica più cercata del suo reparto.

Tre elementi la rendono utile: i riquadri delle sottocategorie, un testo introduttivo da 150 a 300 parole che spieghi cosa raggruppa il reparto, ed eventualmente una selezione di prodotti di punta presi dalle sottocategorie.

Quest’ultimo punto è il più efficace commercialmente: dà alla pagina un contenuto di vendita conservandone la funzione di orientamento.

Misurare

Bastano due indicatori.

Il tasso di clic verso le sottocategorie dalla pagina superiore, prima e dopo. È l’effetto diretto atteso.

Il tasso di rimbalzo della pagina superiore, che dovrebbe calare. Una pagina di reparto con un alto tasso di rimbalzo segnala che il visitatore non ha trovato un percorso evidente.

Un terzo dato merita attenzione sui cataloghi grandi: la profondità media di sessione a partire da quelle pagine. Se aumenta, la vostra navigazione funziona meglio.

Il modulo Pagina Categoria Visuale per PrestaShop realizza questo blocco su PrestaShop 8 e 9: sottocategorie a riquadri con immagini di formato uniforme, posizione configurabile per livello di categoria, visualizzazione mantenuta anche quando la categoria contiene prodotti e diciture testuali per l’accessibilità.

Continua a leggere

Articoli correlati