in blog

Carousel (slider): guida all’uso

I Carousel, gli sliders, gli image rotators, i moduli di contenuti in evidenza o in qualsiasi modo tu voglia chiamarli sono presenti ovunque nel web e nonostante questo se ne parla pochissimo. Ovviamo a questa mancanza con quest’articolo.

Love Me Says the Carousel
L’anno scorso nel Biodome al Breaking Development Conference stavo discutendo (urlando) sui carousel con Erik Runyon, straordinario sviluppatore web al Notre Dame University. Lamentavo il fatto che non esistono dati certi dati sull’ efficacia dei carousel, e Erik mi ha indicato l’home page di Notre Dame che non ha uno solo ma due carousel sui contenuti inevidenza. Quello che era iniziato come un Tweet di scambio dati è ora diventato un post completo che ti consiglio di visionare.
Perciò, al fine di mantenere viva la discussione, ecco i miei pensieri e considerazioni sui Carousels.
Considerazioni sui Carousel (o Slider)
  • Sii sicuro di averne realmente bisogno
  • Cycle through like items
  • Rendi ovvia la navigazione
  • Carica solo ciò che ti serve
  • Suggerisci più contenuti agli utenti
  • Considera il touch come un rinforzo
  • Fornisci suggerimenti gestuali
Sii sicuro di averne realmente bisogno
Andrò oltre e dirò che la maggior parte dei carousel non ha necessità di esistere. Ecco perchè:
  1. I carousel sono stampelle organizzative
Int. Sala Riunioni
“Io sono molto importante, ho bisogno di stare in prima pagina!”
“Anch’io sono molto importante! Ho bisogno anch’io di stare in prima pagina!”
“Io sono moltissimo importante, sono il terzo che ha bisogno di stare in prima pagina!”
“Facciamo un carousel! Tutti quanti vincono!”
Il gruppo si da il 5 e celebrano al Outback Seakhouse.
Fine scena
Sospetto che questa sia la ragione dell’esistenza di numerosi Carousel. Dalle università ai grossi venditori, grandi organizzazioni utilizzano una politica di equa divisione. Ma è difficile navigare in questi mini casini, così strumenti come i carousel vengono usati come pacificatori per tenere ciascuno a lontano dalle schifezze degli altri.
E’ molto difficile avere un’onesta conversazione su una strategia dei contenuti e determinare cosa merita veramente di essere nella Homepage.
     2. I Carousel sono complessi
I carousel introducono un livello di complessità a un’interfaccia. Anziche apparire semplicemente come contenuto in una pagina, gli utenti sono gravati nel dover anche identificare il carousel e capirne i controlli, convenzioni e comportamenti.
Richiedono inoltre più script e introducono più parti in movimento, che significa maggiore Qualità di servizio (QoS) e maggiore potenziale di guasto.
Compessivamente non è necessariamente un male adottare un carousel, e si può certamente giustificare un maggior sforzo per qualcosa che si pagherà ma…
     3.  I carousel non sono così efficaci
Guardando i dati di Erik, diventa chiaro che i carousel non rendono poi così tanta intereattività. Inoltre, Jakib Nielsen scrive che queste grandi aree con i carousel irritano gli utenti e portano loro a saltarle. Credo che sia l’esatto opposto dell’effetto desiderato.
Nonostante i carousel non sono così efficaci non credo che spariranno molto presto. Perciò se ha bisogno di implementare un carousel, di seguito ti riporto alcune cose da considerare:
Cycle through like items
Potresti pensare che è un punto ovvio, ma molti carousel la fuori fanno veramente schifo. I siti e-commerce sono noti per il miscuglio di contenuti nei loro carousel. “Sconto estivo!” nel pannello 1 del carousel. “Metti Mi piace sulla pagina Facebook” nel pannello 2. “Sai che vendiamo scarpe da bambino?” nel pannello 3 rivolto a nessuno in particolare.
Rendere la navigazione ovvia
Piccolissimi puntini trasparenti e basta per sfogliare i pannelli non sono sufficienti per comunicare un carousel a un utente. Ho speso un po’ di tempo dietro un vetro a specchio per vedere che gli utenti non capivano che non avevano a che fare con un’area interattiva. Anche iOS (che ha popolarizzato questo tipo di design) gli utenti saltano e commentano il fatto che non avevano idea che ci fossero più contenuti a disposizione.

51-yahoo

Mi capita spesso di considerare il sito di Yahoo per iPhone come un buon lavoro sull’essere espliciti nella navigazione. Fornisce dei punlsanti chiari ‘Indietro’ e ‘Avanti’, un buon modo per farti capire in quale pannello del carousel ti trovi, i controlli non coprono il contenuto e gli obiettivi si possono premere.
Carica solo ciò che ti serve
Se hai un carousel con 47 articoli dentro, non caricarli tutti di default. Può sembrare ovvio anche questo, ma è importante capire che tutti questi pannelli extra possono inficiare sulle prestazioni del sito web. Considerando che molti (leggi la maggior parte) utenti non andranno mai neanche al pannello 2, sii certo di non peggiorare la navigazione dei tuoi utenti con download estranei e non richiesti.
Suggerisci più contenuti agli utenti
Nell’articolo The overflow pattern ho raccomandato di fare in modo che sia chiaro all’utente della disponibilità di altri contenuti. Lo si può fare con freccie, scollbars, suggerimenti gestuali, auto rotazione o altro. Qualsiasi cosa sia dovrebbe essere immediatamente ovvio all’utente che esiste dell’altro contenuto fuori dallo schermo. Questo può fare tutta la differenza del mondo nel decidere l’efficacia del carousel.
Considera il touch come un rinforzo
I carousel possono essere una grande opportunità per rendere sexy un’interfaccia con qualche gesto touch (e in giro ci sono alcuni buoni carousel con funzioni touch).
Ma solo perchè il touch è disponibile non significa che dovresti escludere forme alternative di navigazione.
Ad esempio il carousel della versione mobile di Zappos offre la vista parziale di prodotti per far capire che esistono altri contenuti oltre a quelli visualizzati.
Zappos mobile site carousel fail
Ma in questo caso il problema è che l’unico modo per passare all’immagine successiva è per strisciamento e deve assere abilitata la funzionalità touch che non esiste in alcuni browser come Opera mini (nell’immagine qui sopra). Fortunatamente questo problema è facile da risolvere aggiungendo pulsanti Avanti e Indietro. Ma è un’altro esempio di come implementare troppo può dare un brutto risultato.
Fornisci suggerimenti gestuali
Josh Clark spiega benissimo come i gesti touch sono invisibili, ma possono essere sottilmente suggeriti agli utenti. Aggiungere il touch a un carousel può essere una buona idea ma far capire all’utente che è abilitato alle funzionalità touch può essere complicato. Una animazione soft iniziale potrebbe aiutare, ma potrebbe anche infastidire.
Raccogli la sfida di Brad Frost
Questi sono i miei pensieri sui Carousel ma, come dicevo, non si vedono troppi dati in giro sulla loro efficacia (molto di ciò che ho trovato è per sentito dire). Così questa è la tua chance. Raccogli la sfida. Sarebbe bello vedere più dati pubblicati sui carousel, ecco come puoi fare:
  1. Trova un carousel in uno dei tuoi siti
  2. Aggiungi un sistema di monitoraggio (se non l’hai ancora fatto)
  3. Raccogli i dati (Click totali, pannelli visti, e qualsiasi altro dato riesci ad ottenere)
  4. Pubblica i dati in qualunque modo o forma
E’ possibile anche creare un test A/B in cui degli utenti usano un carousel e altri no e controllare chi ha una performance migliore, poi pubblicare i dati.
Liberamente tradotto dall’articolo “Carousels” http://bradfrostweb.com/blog/post/carousels

Altri articoli che potrebbero interessarti


Scrivi un commento

Commento