Il carosello è ad oggi una soluzione di design piuttosto diffusa nel web:  implementata molto spesso con frecce di navigazione laterale e pallini in pieno Apple Style, permette di inserire grandi moli di informazioni in un'area di spazio su schermo limitata.

Basta fare un giro sul web per scoprire che molti siti del panorama italiano lo utilizzano come elemento principale in pagina, nella tabella qui sotto potete vedere in rosso i siti web che lo utilizzano ed in verde quelli che non lo utilizzano:

Ecco alcuni esempi di utilizzo:

C'è chi desidera inserire in evidenza tutte le promozioni attualmente attive con immagini grandi ed accattivanti (vedi l'esempio di Vodafone);

Chi vuole inserire delle informazioni istituzionali, promozioni e le diverse attività di co-marketing (vedi l'esempio di genialloyd);

Chi vuole emozionare mostrando le diverse località di un sito di viaggi (qui sotto il mega carosello di costacrociere.it)

Qual'è il motivo principale del suo utilizzo?

Dalla mia personale esperienza ho notato una cosa: il carosello spesso mette d'accordo tutti poichè permette di inserire molte informazioni in più in una porzione di spazio sullo schermo ridotta, risolvendo dei problemi durante la creazione del design dell'homepage.

Pensate ad esempio alla scelta dei contenuti da inserire, dove i diversi stakeholder dell'azienda hanno delle richieste e capita che non ci sia spazio per tutti.

Il carosello diventa, quindi, la soluzione più ovvia nel caso in cui vi sia:

• difficoltà nel determinare gli obiettivi di ciascuna pagina (una pagina con 3 obiettivi non ha obiettivi);
• paura di eliminare alcuni contenuti per evitare scontri interni (ricordiamoci che less is more, no?)
• ossessione di mantenere molti elementi sopra la piega della pagina, di limitare il numero di click per arrivare alla conversione (non abbiate paura dei clic, se sono nel posto giusto);
• paura dello scroll, (fortunatamente gli utenti hanno imparato a scrollare negli anni :-) )

Quali sono i problemi che affliggono il carosello?

Nel corso degli ultimi mesi il profilerare dei caroselli ha fatto nascere un quesito nella community della User Experience e  sono nati diversi dubbi sulla sua efficacia: si evidenziano, infatti, difficoltà di interazione per l'utente medio.

Uno dei problemi è che gli elementi di interazione (tipicamente le freccette e/o i pallini) non permettono di far capire all'utente "che contenuto andrò a vedere?", manca quindi il famoso information scent che possa in qualche modo invitare al clic. Inoltre i  pallini utilizzati per indicare all'utente il numero della slide di riferimento, non danno un grande aiuto all'utente nella navigazione, se non per capire quante "slide" ha il carosello (qui sotto l'esempio dell'homepage di TIM).

Se si considerano poi gli utenti mobile e tablet, l'interazione con frecce e pallini tipici dei caroselli può essere ancora più critica poichè l'area tappabile per la scelta dei contenuti è spesso limitata, con gli elementi molti vicini tra loro.

Anche Nielsen in un suo post Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility ha parlato dei caroselli, portando l'esempio del sito web della Siemens mettendo in evidenza i limiti della funzionalità di rotazione automatica dei contenuti.

Ecco alcune considerazioni della sua analisi:

• il movimento degli elementi dell'interfaccia riduce l'accessibilità dei contenuti;
• gli utenti non particolarmente evoluti o con problemi di lettura (bassa comprensione della lingua, difetti visivi, ecc) non hanno il tempo di leggere ed analizzare il contenuto;
• gli elementi all'interno dei caroselli a causa della loro natura commerciale, spesso vengono ignorati  per effetto della "banner blindness";
• gli utenti desiderebbero accedere soltanto ai contenuti di cui hanno bisogno, mentre la rotazione non va incontro a questo bisogno rendendolo poco utile.

Erik Eunyon nel suo post "Carousel Interaction Stats - June 2013 Update" ha pubblicato alcuni dati sull'interazione nei caroselli per diverse tipologie di siti: si può intuire che gli utenti non amano molto interagire con i caroselli e molto spesso nel caso di caroselli statici, l'utente tende a cliccare il primo frame visualizzato non visualizzando i successivi.

Oltre a questioni di usabilità, vi sono anche altri problemi:

• inserire una gallery di immagini causa un maggiore tempo di caricamento della pagina, specialmente se si tratta di immagini di grandi dimensioni, la presenza di 3-4 immagini può diventare critica;
• un maggiore tempo di caricamento può avere anche conseguenze negative sulla SEO;

Come si può migliorare l'usabilità del carosello?

1- fare in modo che la scelta dei contenuti all'interno del carosello sia evidente e che fornisca un po' di information scent all'utente prima del clic;

2- evidenziare bene lo stato del carosello, ovvero qual'è l'informazione che l'utente sta visualizzando in questo momento (qui sotto potete vedere come il carosello della Tre abbia qualche problema in tal senso);

3-  abbinare alle immagini in grafica dei contenuti testuali a supporto, per evitare la banner blindness;

4-  limitare i problemi di tempo di caricamento evitando l'inserimento di più di 3 elementi, usando immagini poco pesanti ed eventualmente implementando un meccanismo di lazy loading;

5- stare alla larga dall'auto-rotazione dei contenuti;

6- mostrare in maniera evidente ed immediata il cambio di stato del contenuto;

7- dare la possibilità ad utenti mobile/tablet di interagire tramite gestures.

Quindi che fare? Usarlo o non usarlo?

Io personalmente eviterei di usarlo, optando per altre soluzioni.

Meglio non lasciarsi convincere che una semplice carrellata di banner/contenuti possa risolvere i problemi di design dell'homepage: oramai è chiaro che il carosello in moltissimi casi ha evidenziato alcuni limiti di usabilità, quindi perchè perseverare? :-)