Le best practices per gestire il carosello immagini sul sito
È uno dei componenti più usati per offrire contenuti di impatto visivo agli utenti che arrivano su una pagina web, ma se non correttamente implementato e gestito rischia di provocare un rallentamento delle prestazioni e di influire negativamente sulla accessibilità delle pagine. Dobbiamo quindi fare molta attenzione al carosello immagini e imparare a gestirlo al meglio, per impostare uno slider efficace che conquisti i visitatori e non rovini la loro esperienza di navigazione.
Che cos’è il carosello immagini
Dal punto di vista tecnico, un carosello immagini è un componente UX che visualizza i contenuti in modo simile a una presentazione. Noto anche come slider o slideshow, ha la funzione principale di mostrare un contenuto d’impatto all’utente che arriva per la prima volta sulla pagina web, e di solito sono utilizzati per visualizzare immagini, prodotti e promozioni sulle home page (anche se si possono trovare anche in altre categorie e pagine del sito).
Gli slider possono avere un sistema di riproduzione automatica e temporizzata, oppure navigati manualmente dagli utenti, e anche questa è una decisione che deve essere frutto di valutazioni consapevoli di web design.
In genere, questi grandi banner si compongono dalle 3 alle 7 immagini differenti a scorrimento, a volte accompagnare da un titolo e una CTA.
A cosa serve lo slider immagini
Prima di scoprire come ottimizzare tecnicamente lo slider, dobbiamo però capire come (e quando) serve usarlo sul sito: è cioè importante che tale componente sia funzionale agli scopi del progetto e abbia un obiettivo singolo, altrimenti rischia di essere confusionaria e poco attrattiva per gli utenti.
In particolare, gli e-Commerce possono sfruttare lo slideshow per mostrare le promozioni in corso sui prodotti oppure per far risaltare dei servizi speciali, mentre una testata editoriale potrà mettere in evidenza gli articoli più recenti o quelli più letti.
Inoltre, il carosello immagini può aiutare ad attirare nuovi clienti – utilizzandolo come vetrina sul valore aggiunto del brand e del sito rispetto ai competitor, anche attraverso l’impiego di immagini emozionali – o per rafforzare la brand awareness, ad esempio usando grafiche che facciano risaltare i numeri, le statistiche, le certificazioni o i premi raggiunti.
Caroselli e performance, consigli per l’implementazione
Se correttamente implementato, un carosello immagini “dovrebbe avere un impatto minimo o nullo sulle prestazioni”, spiega Katie Hempenius sul blog web.dev introducendo la sua guida all’impatto dei carousl sulle prestazioni e alle best practices per la creazione di caroselli performanti.
Spesso, però, questi elementi contengono risorse multimediali di grandi dimensioni, come le immagini (che possono influire sulle prestazioni indipendentemente dal fatto che vengano visualizzate in un carosello o altrove), e necessitano quindi di una cura particolare per evitare che si verifichino problemi quali lo spostamento improvviso dei contenuti, tempi di caricamento lenti e difficoltà nel controllo, che possono determinare una brutta esperienza per l’utente.
Impatto dei caroselli sui Core Web Vitals
L’autrice analizza immediatamente il rapporto tra gli slider e i Segnali Web essenziali di Google, evidenziando i dettagli per ognuna delle tre metriche.
- LCP, Largest Contentful Paint: i caroselli above the fold di grandi dimensioni spesso contengono l’elemento LCP della pagina e quindi possono avere un impatto significativo sul parametro LCP; la loro ottimizzazione, quindi, può migliorare significativamente la velocità di caricamento percepita dagli utenti.
- FID, First Input Delay: i caroselli hanno requisiti JavaScript minimi e quindi non dovrebbero influire sull’interattività della pagina. Tuttavia, in caso di slider con script a esecuzione prolungata si dovrebbe “considerare di sostituire gli strumenti del carosello”.
- CLS, Cumulative Layout Shift: un “numero sorprendente di caroselli utilizza animazioni scadenti e non composte che possono contribuire a CLS e nelle pagine con caroselli a riproduzione automatica ciò può potenzialmente causare CLS infinito”. Questo tipo di CLS in genere non è evidente all’occhio umano, e quindi può diventare “un problema facile da trascurare che si può evitare non usando animazioni non composte nella sequenza (ad esempio, durante le transizioni delle diapositive)”.
Le best practices per ottimizzare i caroselli
Se questi sono (alcuni) dei rischi di una mancata implementazione efficiente degli slider, Hempenius si dedica poi a descrivere le best practices per l’ottimizzazione delle prestazioni di un carosello, che si concentrano sia sua architettura tecnica che sul suo contenuto, con la finalità di rendere fluida la visualizzazione sul sito e massimizzare le possibilità di apparire nelle prime posizioni su Google Immagini.
- Caricare il contenuto del carosello utilizzando HTML
Il contenuto del carosello deve essere caricato tramite il markup HTML della pagina, in modo che sia rilevabile dal browser nelle prime fasi del processo di caricamento della pagina. L’utilizzo di JavaScript per avviare il caricamento del contenuto del carosello è probabilmente il primo e più grande errore di prestazioni da evitare quando si utilizzano questi elementi, perché ritarderà il caricamento dell’immagine e influirà negativamente su LCP.
Per l’ottimizzazione avanzata del carosello, il consiglio è di caricare la prima diapositiva in modo statico, quindi migliorarla progressivamente per includere controlli di navigazione e contenuto aggiuntivo. Questa tecnica è più applicabile agli ambienti in cui si ha un’attenzione prolungata da parte di un utente, che concede tempo al caricamento del contenuto aggiuntivo. In ambienti come le home page, in cui gli utenti restano in genere solo per uno o due secondi, può essere altrettanto efficace il caricamento di una singola immagine.
- Usare una tecnologia moderna
Molti siti utilizzano librerie JavaScript di terze parti per implementare i caroselli: gli strumenti più recenti “tendono a utilizzare API più efficienti ed è meno probabile che richiedano dipendenze aggiuntive come jQuery”.
Tuttavia, rivela l’autrice, potrebbe non essere affatto necessario usare JavaScript, perché “la nuova API Scroll Snap consente di creare caroselli nativi con funzionalità complete utilizzando solo HTML e CSS, senza richiedere JavaScript”.
- Ottimizzare il contenuto del carosello
I caroselli spesso “contengono alcune delle immagini più grandi di un sito, quindi può valere la pena dedicare del tempo per assicurarsi che queste immagini siano completamente ottimizzate”. Ad esempio, impostare il formato immagine e il livello di compressione corretti, usare una CDN di immagini e l’attributo srcset per fornire più versioni di immagini sono tutte “tecniche che possono ridurre le dimensioni di trasferimento delle immagini”.
Come misurare il LCP dei caroselli
Come accennato in precedenza, i caroselli possono influenzare negativamente il parametro del Largest Contentful Paint, motivo per cui è importante riuscire a misurare correttamente questi valori. Pur non essendo “trattati in modo diverso da qualsiasi altro elemento UX durante il calcolo di LCP, la meccanica del calcolo per i caroselli a riproduzione automatica è un punto comune di confusione”, chiarisce Hempenius.
Sono tre i punti chiave per capire come funziona il calcolo di LCP per i caroselli immagine:
- LCP considera gli elementi della pagina “così come sono dipinti sul frame: i nuovi candidati per l’elemento LCP non vengono più considerati una volta che l’utente interagisce (tocca, scorre o preme un tasto) con la pagina; pertanto, qualsiasi diapositiva in un carosello a riproduzione automatica ha il potenziale per essere l’elemento LCP finale, mentre in un carosello statico solo la prima diapositiva sarebbe un potenziale candidato LCP”.
- Se vengono renderizzate due immagini di uguale dimensione, “la prima immagine sarà considerata l’elemento LCP: tale elemento viene aggiornato solo quando il candidato LCP è più grande dell’elemento LCP corrente; pertanto, se tutti gli elementi del carosello hanno le stesse dimensioni, l’elemento LCP dovrebbe essere la prima immagine visualizzata”.
- Quando valuta i candidati LCP, LCP considera la “dimensione visibile o la dimensione intrinseca, a seconda di quale sia la più piccola“: pertanto, “se un carosello a riproduzione automatica mostra immagini di dimensioni coerenti, ma contiene immagini di dimensioni intrinseche variabili che sono inferiori alle dimensioni di visualizzazione, l’elemento LCP può cambiare quando vengono visualizzate nuove diapositive”. In questo caso, “se tutte le immagini sono visualizzate con la stessa dimensione, l’immagine con la dimensione intrinseca maggiore sarà considerata l’elemento LCP: per mantenere basso l’LCP, dobbiamo assicurarci che tutti gli elementi in un carosello a riproduzione automatica abbiano le stesse dimensioni intrinseche”.
Come migliorare gli slider e usarli al meglio sul sito
È ora il momento di guardare alle best practice di esperienza utente e di prodotto che possiamo seguire durante l’implementazione dei caroselli, partendo da un assunto di fondo: i caroselli dovrebbero “far avanzare i nostri obiettivi aziendali e presentare i contenuti in un modo che sia facile da navigare e leggere”.
Sono tre gli ambiti su cui lavorare per avere buoni risultati: navigazione, leggibilità e gestione generale della funzionalità.
Quali sono le best practices per la navigazione
- Fornire controlli di navigazione ben visibili
I controlli di navigazione del carosello dovrebbero essere facili da cliccare e altamente visibili, ma secondo Hampenius è raro che questo “venga fatto bene: la maggior parte dei caroselli ha controlli di navigazione che sono sia piccoli che sottili”. Un altro errore è sottovalutare l’importanza del giusto contrasto tra immagine e testo, pensando che un singolo colore o stile di controllo della navigazione possa funzionare efficacemente in tutte le situazioni: un fatto raro, perché “ad esempio, una freccia chiaramente visibile su uno sfondo scuro potrebbe essere difficile da vedere su uno sfondo chiaro”.
- Indicare l’avanzamento della navigazione
I controlli di navigazione del carosello dovrebbero fornire “un contesto sul numero totale di diapositive e sull’avanzamento dell’utente attraverso di esse”. Queste informazioni rendono più facile per l’utente passare a una particolare diapositiva e capire quale contenuto è già stato visualizzato. In alcune situazioni, “fornire un’anteprima del contenuto in arrivo, che si tratti di un estratto della diapositiva successiva o di un elenco di miniature, può essere utile e aumentare il coinvolgimento”.
- Supportare i gesti mobili
Sui dispositivi mobili, i caroselli dovrebbero supportare non solo i tradizionali controlli di navigazione (come i pulsanti sullo schermo), ma anche i gesti di scorrimento.
- Fornire percorsi di navigazione alternativi
È improbabile che la maggior parte degli utenti interagisca con tutto il contenuto del carosello, pertanto “il contenuto a cui linka il carosello dovrebbe essere accessibile da altri percorsi di navigazione”.
Quali sono le best practices per la leggibilità
- Non utilizzare la riproduzione automatica
L’utilizzo dell’autoplay crea due problemi “quasi paradossali”: le animazioni su schermo tendono a distrarre gli utenti e ad allontanare gli occhi dai contenuti più importanti; contemporaneamente, poiché gli utenti spesso associano le animazioni agli annunci, possono ignorare i caroselli che vengono riprodotti automaticamente.
E quindi, “è raro che la riproduzione automatica sia una buona scelta”: se il contenuto è importante, non utilizzare la riproduzione automatica ne massimizzerà l’esposizione; se il contenuto del carosello non è importante, l’uso della riproduzione automatica sminuisce i contenuti più importanti. Inoltre, i caroselli a riproduzione automatica possono essere difficili da leggere (e anche fastidiosi): le persone leggono a velocità diverse, quindi è raro che un carosello effettui costantemente le transizioni al momento “giusto” per utenti diversi.
A livello ideale, dice Hempenius, “la navigazione tra le diapositive dovrebbe essere diretta dall’utente tramite i controlli di navigazione”: se è proprio necessario utilizzare la riproduzione automatica, la riproduzione automatica deve essere disabilitata al passaggio del mouse dell’utente. Inoltre, la velocità di transizione delle diapositive dovrebbe tenere conto del contenuto delle diapositive: più testo contiene una diapositiva, più a lungo dovrebbe essere visualizzato sullo schermo.
- Mantenere separati testo e immagini
Il contenuto del testo del carosello viene spesso “integrato” nel file immagine corrispondente, anziché essere visualizzato separatamente utilizzando il markup HTML. Questo approccio è dannoso per l’accessibilità, la localizzazione e i tassi di compressione, e “incoraggia inoltre un approccio unico per la creazione di risorse”. Tuttavia, la stessa immagine e la stessa formattazione del testo sono raramente leggibili allo stesso modo nei formati desktop e mobile.
- Essere concisi
Abbiamo “solo una frazione di secondo per attirare l’attenzione di un utente: un copy breve e diretto aumenterà le probabilità che il nostro messaggio venga trasmesso” e compreso.
Quali sono le best practices per il prodotto
In generale, i caroselli “funzionano bene in situazioni in cui l’utilizzo di spazio verticale aggiuntivo per visualizzare contenuto aggiuntivo non è un’opzione”, e i caroselli sulle pagine dei prodotti sono frequentemente un buon esempio di questo caso d’uso.
Ma non sempre tali componenti sono utilizzati in modo efficace e bisogna considerare che, soprattutto se contengono promozioni o avanzano automaticamente, i caroselli possono facilmente essere scambiati dagli utenti per annunci pubblicitari – e quindi sostanzialmente ignorati, per quel fenomeno noto come “cecità dei banner” (banner blindness).
Inoltre, gli slider sono “spesso utilizzati per placare più reparti ed evitare di prendere decisioni sulle priorità aziendali”, e di conseguenza “possono facilmente trasformarsi in una discarica per contenuti inefficaci”.
I suggerimenti per usare al meglio i caroselli sul sito
In conclusione, Hempenius offre altri due consigli di base per implementare al meglio i caroselli sul sito e sfruttarne a pieno le potenzialità.
Innanzitutto, dovremmo valutare e testare in anticipo “l’impatto aziendale dei caroselli, in particolare quelli sulle home page”: le percentuali di clickthrough del carosello possono aiutarci a determinare se tale elemento e il suo contenuto sono efficaci.
Più in generale, è cruciale essere pertinenti: “i caroselli funzionano meglio quando contengono contenuti interessanti e pertinenti presentati con un contesto chiaro”. Se il contenuto non crea engagement di un utente al di fuori di un carosello, inserirlo nello slider non ne migliorerà le prestazioni.
E quindi, quando implementiamo un carosello, dobbiamo dare la priorità ai contenuti e assicurarci che ogni diapositiva sia sufficientemente valida da invitare la persona di fare clic su quella successiva.
