Lo slider della home del tuo negozio serve a qualcosa? Quando aiuta e quando è d'intralcio

Quasi tutti i negozi ne hanno uno: un carosello in cima alla home che fa scorrere dei banner. Si decide all'inizio del progetto, si riempie con quattro o cinque immagini di campagna e si dimentica. Ed è facile che da mesi mostri un'offerta già scaduta, un'immagine che su mobile non si legge o un video che pesa più del resto della pagina.

La domanda non è «slider sì o slider no», ma quale lavoro deve fare quello spazio, che è il più visibile dell'intero negozio.

Cosa si sa dei caroselli

I professionisti dell'usabilità segnalano da anni alcuni problemi che si ripetono:

• Si guarda la prima slide e poco altro. Molte visite scorrono la pagina o toccano il menu prima che passi la seconda.
• Il movimento automatico distrae e può cambiare il banner proprio mentre qualcuno stava per leggerlo o toccarlo.
• Sembra pubblicità, e gli utenti imparano a ignorare ciò che sembra pubblicità.
• Più messaggi si fanno concorrenza: se tutto è importante, niente lo è.

Questo non significa che un carosello non possa funzionare. Significa che un carosello con cinque messaggi generici che ruotano ogni tre secondi probabilmente non rende quanto lo spazio che occupa.

Quando uno slider aiuta davvero

• Campagne con una data: saldi, stagione, lancio. Un messaggio chiaro, con data di inizio e di fine.
• Negozi con pubblici diversi che devono orientarsi in fretta: professionista e privato, uomo e donna, due linee di prodotto molto diverse.
• Prodotti molto visivi, in cui l'immagine grande trasmette ciò che un testo non può: moda, arredamento, mobili.
• Novità che cambiano spesso, sempre che qualcuno le aggiorni davvero.

E quando è meglio altro: se il tuo negozio vende un catalogo ampio (ricambi, forniture, codici tecnici), quello che il visitatore vuole in home è la ricerca e le categorie. Un banner fisso con la tua proposta di valore e sotto accessi chiari alle famiglie di prodotto di solito è più utile di cinque immagini a rotazione.

Come farlo bene

Poche slide, con un messaggio ciascuna

Due o tre. La prima è quella più vista: mettici ciò che conta di più. Ogni slide con un titolo breve, una riga di supporto e un solo pulsante che porti a una pagina specifica (la categoria della campagna, non la home).

Niente rotazione veloce

Se ruota da sola, che lo faccia lentamente e si fermi quando l'utente passa il mouse o tocca. Ancora meglio se si può navigare con frecce e indicatori visibili.

Date, non promemoria

L'offerta che resta in home una settimana dopo la scadenza è un classico. Se ogni slide ha una data di inizio e di fine, la campagna si lascia pronta e sparisce da sola.

Il testo come testo

Un titolo dentro l'immagine non si traduce, non si legge su mobile se l'immagine viene ridotta e non lo capisce uno screen reader. Meglio l'immagine pulita e il testo sopra in HTML, in ogni lingua.

Il mobile: dove gli slider falliscono di più

Un banner orizzontale da desktop, ridotto alla larghezza di un telefono, diventa una striscia stretta in cui il titolo è illeggibile. E, se il template ritaglia solo via CSS, lo smartphone scarica l'immagine grande completa per mostrarne un pezzo.

La soluzione è preparare un'immagine per dispositivo (desktop, tablet e smartphone, ognuna con la propria inquadratura) e servirla con l'elemento picture, in modo che ogni schermo scarichi solo la sua. È più lavoro di design, ma è la differenza tra un banner che si legge e uno che è d'intralcio.

Prestazioni: quanto pesa un carosello

• Immagini: il peso di tutte le slide, se vengono caricate tutte all'inizio. La cosa corretta è caricare subito la prima e le altre dopo.
• JavaScript: alcuni caroselli si portano dietro librerie grandi per animazioni che non servono.
• Video: un video di sfondo può funzionare su desktop, ma su mobile pesa molto. Se lo usi, senza audio, compresso e con una versione per mobile o un'immagine al suo posto.
• Servizi esterni: uno slider che carica immagini o codice da un altro server aggiunge connessioni e dipendenze.

Accessibilità

Un carosello accessibile permette di mettere in pausa il movimento, si usa con la tastiera, ha testi alternativi nelle immagini con contenuto e non dipende solo dal colore per indicare la slide attiva. In Spagna l'obbligo di accessibilità per molti e-commerce è già una realtà; inoltre, ciò che è accessibile di solito è anche più comodo per tutti.

Controlla il tuo in dieci minuti

1. Apri la home sul tuo smartphone. Il titolo della prima slide si legge?
2. C'è qualche slide che annuncia qualcosa di non più valido?
3. Ogni pulsante porta a una pagina specifica e pertinente?
4. Quante slide ci sono? Se sono più di tre, qualcuno guarda la quarta?
5. Passa la home su PageSpeed Insights: l'elemento LCP è un'immagine dello slider e quanto pesa?
6. Nei tuoi strumenti di analisi, quanti clic ricevono i banner rispetto alle categorie del menu?

E se lo slider è un modulo vecchio arrivato con il tema, verifica che sia ancora compatibile con la tua versione di PrestaShop e che non salvi le immagini dentro la cartella del modulo, dove un aggiornamento può cancellarle.

Come risolverlo in PrestaShop

Rekire Slider è un carosello in cui ogni slide può avere un'immagine per desktop, una per tablet e una per smartphone, servite con picture perché il browser ne scarichi solo una. Supporta slide video MP4 o WebM (senza audio, in loop e anche con sorgente per dispositivo), copie WebP automatiche, date di inizio e fine senza cron, coppie di slide a metà larghezza che su mobile occupano tutta la larghezza e testi posizionabili in ogni lingua come testo semplice. Salva le immagini fuori dalla cartella del modulo, così un aggiornamento non le cancella, e si posiziona in home, sopra il contenuto, tramite un hook proprio o come widget.