Carosello in homepage: soluzioni alternative che convertono di più
Cosa troverai in questo articolo. Quella dei caroselli automatici in homepage è stata a lungo una soluzione amata dagli e-commerce di tutto il mondo per mettere in evidenza promozioni o point of value particolari nel luogo in cui l’attenzione degli utenti era destinata a soffermarsi di più. Tuttavia, molti studi rivelano come questa soluzione, anche in virtù della crescita esponenziale dell’uso degli smartphone, stia diventando pian piano obsoleta, o perlomeno difficilmente implementabile senza incorrere in grossi problemi di UX che rischiano di compromettere seriamente le conversioni. Per molti e-commerce, sezioni di contenuto statico si rivelano una scelta migliore rispetto ai caroselli dinamici: sono infatti più semplici da sviluppare e hanno migliori performance in termini di UX sui dispositivi sia mobile sia desktop. Se decidete lo stesso di optare per un carosello “tradizionale” sul vostro e-commerce, dovrete prestare particolare attenzione al suo ritmo di scorrimento, alla leggibilità del testo, alla distribuzione del contenuto nelle varie slide e alla posizione degli elementi grafici che segnalano lo scorrimento. Per i dispositivi mobile sono da prediligere soluzioni a scorrimento manuale con un’attenzione particolare alla velocità di caricamento dei contenuti e alla modalità di interazione con essa, che dovrebbe sempre prevedere le hand gestures.
Indice
Sul vostro sito e-commerce usate un carosello per mettere in evidenza le vostre promo e offerte? Passate molto tempo ad aggiornare le grafiche e i testi di modo che risultino il più persuasivi possibile, ma poi i risultati non arrivano? Potreste star facendo errori di UX nella versione desktop o mobile del vostro sito: in questo approfondimento, vi raccontiamo quali sono gli errori più comuni, quali accortezze dovreste avere nello sviluppo della UX desktop e mobile e, infine, quali alternative di facile implementazione e gestione potete scegliere per convertire di più.
Perché l’uso dei caroselli in homepage è in declino?
C’è stato un momento, che coloro che fra voi bazzicano il web da qualche decennio ricorderanno, in cui si è verificata un’esplosione del fenomeno dei caroselli, quelle strisce – prima fisse, poi animate, composte di vari banner scorrevoli – che si trovano in cima all’homepage di certi siti web. Poiché questi caroselli miglioravano nettamente l’estetica delle pagine web rispetto al periodo precedente, facendo loro registrare un passo in avanti per quanto riguardava la possibilità di mettere in evidenza alcune informazioni importanti, la loro fortuna è stata per molti anni un unico crescendo. Adesso, però, non è più così da un po’; il declino è significativo sia sul mercato americano sia su quello europeo.
E questo per un motivo molto semplice: i caroselli non funzionano. O, per meglio dire, in linea teorica funzionerebbero: le immagini e i video in grande formato attirano naturalmente l’attenzione degli utenti e lo scorrimento automatico dei contenuti permette di presentare loro molte promozioni importanti per il proprio business durante la primissima interazione con un sito web, senza affollare l’homepage di blocchi di contenuti di meno immediata lettura. Questi benefici, però, si ottengono solo a patto di rispettare una lunga serie di requisiti di UX che invece vengono solo raramente soddisfatti, specialmente sulle versioni mobile dei siti web.
Quali sono i tipici problemi di UX dei caroselli?
Se il contenuto presente all’interno del carosello non è rilevante, ben curato, di elevata qualità e ottimizzato per i dispositivi mobili l’esperienza degli utenti non potrà essere buona. Ad esempio, se la prima promozione o informazione visibile nel carosello non ha a che vedere con l’effettivo core business dell’azienda, gli utenti potrebbero rimanere disorientati e abbandonare il sito senza effettuare alcun tipo di interazione.
Un’altra problematica è costituita proprio dallo scorrimento automatico delle immagini o video nel carosello, perché ciò che ne rappresenta la forza per chi visualizza il sito da desktop – ovvero l’aumento dell’esposizione ai contenuti dell’e-commerce – ne costituisce la debolezza sui dispositivi mobili: se per gli utenti desktop è infatti possibile prevedere una pausa automatica del carosello nel momento in cui vi si sofferma sopra con il mouse, questo non è tecnicamente possibile se l’utente naviga dal cellulare.
Inoltre, succede spesso che l’utente veda la slide cambiare prima di aver finito di leggere, oppure si trova a cliccarci quando è già iniziato il movimento di scorrimento e finisce dunque su una landing page differente da quella che desiderava visualizzare. L’effetto è lo stesso: disorientamento, frustrazione, fastidio.
E oltre che un problema di usabilità, questo è anche un problema quando si tratta di tracciare e registrare il comportamento degli utenti, perché rende difficile attribuire un’azione alla slide giusta. Nel caso dei dispositivi mobile, dunque, possiamo già dire che il carosello a scorrimento automatico dovrebbe essere evitato – e ad esso preferita una soluzione statica.
Siti mobile e caroselli
Anziché optare per un carosello a scorrimento automatico, è bene preferire, per la versione mobile di un sito, un carosello manuale in cui è l’utente stesso a scorrere le diverse slide al ritmo che preferisce e solo se desidera farlo. Proprio su quest’ultimo punto è importante soffermarsi ricordando sempre che, se decidete di implementare un carosello, la prima slide dovrebbe contenere le informazioni che ritenete assolutamente prioritarie, perché c’è una non remota possibilità che i vostri clienti non visualizzino niente di ciò che è contenuto nelle slide successive.
Altri accorgimenti necessari, quando si tratta di inserire un carosello sulla versione mobile del vostro sito, sono i seguenti:
- Le gestures come modalità di navigazione sono ormai un’aspettativa fissa degli utenti mobile e dovrebbero quindi essere attive sul vostro sito web mobile: soprattutto fra gli utenti più giovani, il pinch con due dita per ingrandire le immagini e lo swipe laterale per scorrere i contenuti sono più largamente utilizzati rispetto a pulsanti cliccabili e frecce, anche quando entrambe le opzioni sono presenti sulla stessa pagina;
- La dimensione del testo deve essere ricalibrata sulle caratteristiche degli schermi degli smartphone: anche sui dispositivi mobili, il testo deve essere chiaro e leggibile; attenzione quindi a riutilizzare acriticamente, limitandovi a rimpicciolirli, il testo e la grafica già presenti sulla versione desktop del sito. Ovviamente, anche per ragioni SEO, tutto il testo visibile dovrebbe corrispondere a reale codice HTML e non essere inserito graficamente nell’immagine di sfondo;
- Se gli utenti tendono a ignorare le slide successive alla prima è perché sono disposti a trascorrere poco tempo fermi in un unico punto del sito e questo è particolarmente vero per gli utenti mobile, che si aspettano un caricamento veloce di tutti i contenuti, in particolare quelli dei caroselli che si trovano in testa alla pagina e forniscono il biglietto da visita del sito intero. Se il contenuto del vostro carosello ha bisogno di più di un secondo per essere caricato, rischiate che gli utenti abbandonino il sito e vadano in cerca del prodotto che volevano acquistare su un altro e-commerce. Bad for CRO, bad for SEO.
Ottimizzazione dei caroselli: l’ordine delle slide
Se avete deciso di implementare comunque, per motivi estetici o di altro genere, un carosello sull’homepage del vostro sito, ci sono alcuni criteri di UX che dovreste comunque tenere a mente sia per la versione desktop sia per quella mobile. Partiamo dall’ordine delle slide che scorrono all’interno del carosello e di come deciderlo.
Come abbiamo già detto nel paragrafo precedente, molti utenti, specialmente quando navigano da dispositivi mobili, non guardano ciò che si trova all’interno delle slide successive alla prima, nemmeno se queste scorrono automaticamente. Ciò si verifica per il semplice fatto che la maggior parte degli utenti non è disposta a rimanere ferma nello stesso punto della pagina per più di qualche secondo, quelli normalmente necessari a leggere il contenuto della prima slide.
Pertanto, la prima slide di un carosello è particolarmente importante dal momento che riceve la maggior parte dell’attenzione e dei click. Ne deriva che proprio essa dovrà contenere le informazioni più importanti fra quelle che abbiamo deciso di inserire all’interno del carosello: dedicate questo spazio alla promozione del momento, al vostro copy più efficace o a tutto ciò che in questa fase della vostra attività è più probabile vi porti conversioni.
Caroselli e percorsi di navigazione
Così come è possibile, seppur doloroso da accettare, che la maggior parte degli utenti ignori le bellissime slide dalla numero 2 alla numero 10.000 che avete con tanta fatica progettato, è verosimile immaginare che una parte di loro possa ignorare anche la prima slide. Talvolta ciò può avvenire perché, a causa del suo movimento e della preponderanza dell’elemento grafico, il carosello viene assimilato a una pubblicità e viene dunque saltato a piè pari dall’utente per un meccanismo di cecità selettiva nei confronti degli annunci tipico dell’interazione sul web.
Tuttavia, i motivi non si esauriscono qui e possono anche a che vedere con la motivazione che spinge l’utente a navigare, con il suo intento di ricerca. Soprattutto se un utente arriva sul vostro sito con le idee già molto chiare, difficilmente si soffermerà a guardare i contenuti a scorrimento, manuale o automatico che sia, ma si troverà in una disposizione mentale tale per cui cercherà di arrivare al prodotto, il servizio o l’informazione che gli interessa nel minor numero possibile di clic e/o nel minor tempo possibile.
Poiché il vostro interesse dovrebbe proprio essere quello di accorciare il funnel di conversione incentivando le conversioni, non potete permettervi che i prodotti pubblicizzati all’interno del carosello siano raggiungibili solamente dal carosello stesso perché ciò significherebbe perdere una fetta rilevante di conversioni. Tutto il contenuto che ritenete così essenziale per voi da ambire a un posto in evidenza all’interno di un carosello, insomma, dovrebbe essere accessibile anche tramite percorsi di navigazione permanenti all’interno del menù principale e/o del footer e/o della Sitemap HTML se ne avete una.
Grafica del carosello e UX: gli errori da non fare
Come aspettarsi che gli utenti compiano un’azione che non sanno di dover fare? Sembra una domanda sciocca, ma la verità è che su molti siti gli indicatori grafici che aiutano a far comprendere agli utenti che hanno di fronte contenuti scorrevoli non sono sufficientemente chiari. I problemi principali che si incontrano nella grafica dei comandi di navigazione dei caroselli sono principalmente due:
- I comandi (frecce, pallini di scorrimento) sono poco visibili, ad esempio per la scelta del colore che contrasta poco con quello dell’immagine presente all’interno della slide;
- I comandi sono difficili da usare perché l’area effettivamente cliccabile è molto piccola.
I “pallini” che indicano la presenza di un carosello e il punto del carosello in cui lo scorrimento si trova in quel momento dovrebbero preferibilmente essere spostati, da dentro l’area del carosello, al di sotto di esso; in tal modo, questi elementi grafici risulteranno in evidenza, senza sovrapposizioni di immagine che rischiano di confondere le idee all’utente, specialmente se questi ha problemi di vista, dislessia o altri disturbi che inficiano le sue capacità di lettura. Se per qualche motivo non fosse possibile collocare i pallini al di sotto del carosello, allora bisognerà assicurarsi che il livello di contrasto con l’immagine presente in ciascuna slide sia ottimale.
Insieme ai pallini che indicano lo scorrimento del carosello, è altrettanto importante inserire frecce di navigazione a sinistra e destra dell’immagine per scorrere fra i vari contenuti. Questa funzione è in genere già svolta dai pallini, ma le frecce, oltre che più grandi, sono anche più immediatamente riconoscibili nel loro scopo da una più ampia base di utenti. Fa eccezione quanto già detto sui dispositivi mobili.
I ritmi di scorrimento corretti dei caroselli
Nei caroselli a scorrimento automatico, il tempo che trascorre fra una slide e quella successiva dovrebbe essere attentamente calcolato affinché l’utente possa leggere il suo contenuto e valutare l’opportunità di un clic, ma allo stesso tempo possa eventualmente prendere in considerazione le altre promozioni, presenti nelle slide successive, senza attendere troppo. Di conseguenza sarà necessario calibrare attentamente i secondi di latenza di ogni slide in base al loro contenuto: si spazia in genere fra i 5 e i 7 secondi per immagini accompagnate da un titolo e poche parole di spiegazione ai 10 secondi per slide con un contenuto più consistente.
Ricordiamo poi che, per quanto riguarda la navigazione da desktop, dovrebbe essere prevista una pausa automatica al movimento hover del mouse per permettere all’utente che esprima questo desiderio di soffermarsi maggiormente sulla slide rispetto al tempo da voi previsto evitando esperienze frustranti come quelle di cui abbiamo parlato nel paragrafo Quali sono i tipici problemi di UX dei caroselli?. Sorprendentemente, questa è una funzionalità assente su molti dei siti che fanno uso di caroselli.
L’autorotazione del carosello può riprendere automaticamente una volta che l’utente sposti di nuovo il cursore sullo schermo, così che la sua esposizione ai contenuti del carosello possa iniziare di nuovo. Tuttavia, nel caso in cui l’utente, pur non rimanendo con il cursore sulla slide, continui a interagire con il carosello, ad esempio scorrendo le diverse slide con le frecce di navigazione, l’autorotazione dovrebbe comunque essere messa in pausa, riconoscendo così la volontà espressa dall’utente con i suoi movimenti.
Alternative ai caroselli
Vi sarà chiaro, adesso, che i criteri da seguire per garantire una UX perfetta nei caroselli sono davvero molti e non sempre tecnicamente fattibili: vi basterà aprire il sito dell’e-commerce che usate più di frequente per individuare subito, dopo la nostra guida, problemi macroscopici di usabilità.
Cosa fare, allora, se si decide di eliminare il problema alla radice abbandonando la soluzione del carosello dinamico? Quali sono le alternative? Bisogna sostituire il carosello con un wall of text illeggibile? La risposta, cui abbiamo accennato brevemente, risiede nella staticità: se optare per caroselli animati non è sempre la migliore delle soluzioni, è possibile invece sperimentare opzioni statiche in grado di portare molti più risultati sia sulla versione desktop sia su quella mobile del vostro sito.
Tendenzialmente si tratta di sostituire il singolo carosello in apertura di pagina con varie sezioni di contenuto statico distribuite attraverso tutta la homepage in combinazione con categorie in evidenza: un’alternativa efficace e per di più anche di semplice implementazione, che presuppone un’interazione dell’utente con la pagina basata sul semplice scorrimento verticale; magari, per aggiungere un po’ di dinamismo, si può pensare di implementare un effetto di scroll fading secondo le best practice CRO e SEO. Tutto il contenuto importante rimarrà visibile all’utente, eliminando però le criticità poste dai caroselli e in particolare i problemi di conformità della UX mobile.
Coming soon:
Il blog di Seed torna fra due settimane con un approfondimento su come gestire secondo le best practice SEO i filtri prodotto sugli e-commerce. Non perdetevelo!
