Website carousel sliders: Perché, come e quando usarli (inclusi 13 esempi)

Parliamo di website carousels, aka sliders, aka slideshow, aka galleries.

Sembra che l’intero Internet abbia una sua variazione, ma collettivamente intendiamo tutti quell’elemento di design con il contenuto in movimento e spesso visualizza tre puntini sul fondo.

Quando si tratta di caroselli, sei in squadra or o in squadra team. La prima squadra in genere include i clienti, la seconda squadra i web designer.

Qui a Ycode, siamo la Svizzera. Crediamo caroselli possono essere i centrotavola che rendono il vostro web design più attraente, ma che hanno anche il potenziale per trascinare usabilità del tuo sito web verso il basso.

In questo articolo, esamineremo le migliori pratiche di carosello (e cosa evitare). Poiché i caroselli possono essere utilizzati per molte occasioni, ti mostreremo diversi esempi di cursori fatti bene.

Carousel design best practice (o soprattutto, cosa non fare)

Sebbene siano utilizzati su molti siti web, i carousel design possono facilmente perdere il segno. Ci sono alcune buone ragioni per cui. Iniziamo con alcune cose da evitare prima di parlarvi di quali best practice carosello si dovrebbe usare.

Don Cosa non fare: errori di carosello da evitare

1. Content: Quando una giostra vuole fare troppo in poco tempo, può far girare gli occhi dei visitatori del sito web. Il testo non può essere letto correttamente, le informazioni vengono perse e i visitatori perdono interesse.

2. Design: se un cursore è mal progettato e non si fonde con il design del tuo sito web, può essere scambiato come un annuncio. Di conseguenza, le persone scorrono oltre il contenuto. Si chiama banner blindness, un fenomeno di web design in cui le persone ignorano i contenuti che assomigliano a un annuncio—consciamente o inconsciamente.

3. SEO: Dal punto di vista SEO, evita più intestazioni H1 se usi i cursori come prima cosa sulla pagina. Ogni pagina web dovrebbe avere un H1 nel suo codice HTML. Se usi diversi H1 a causa delle diverse diapositive, Google potrebbe essere confuso su quali parole chiave sono le più importanti per quella pagina web. Inoltre, la struttura del sito web potrebbe non essere chiara. Entrambi i fattori potrebbero avere un impatto negativo sul tuo ranking.

4. Mobile: Per i dispositivi mobili, è meglio andare per cursori manuali. Assicurati che i gesti siano supportati (ad esempio, gli utenti mobili scorrono per mostrare la diapositiva successiva) e che le frecce siano chiaramente mostrate e abbastanza grandi da premere. Se le diapositive contengono testo, verificare se è leggibile su schermi mobili.

5. Rotazione: Con la nostra limitata capacità di attenzione in questi giorni, è difficile mantenere l’interesse dell’utente per più di pochi secondi. Dal momento che abbiamo tutti i posti per essere, mantenere il cursore-quantità bassa (meno di cinque) e dare ai visitatori la possibilità di controllare la giostra mostrando controlli cursore. Questo fa sì che le persone non devono sedersi e aspettare la prossima diapositiva.

👍 Fare: Best practice carosello

1. Mantenere ogni diapositiva semplice in modo che le informazioni possono essere digeriti in pochi secondi.

2. Rendere il design si fondono con il resto del tuo sito web.

3. Lascia che le persone controllino la rotazione con frecce chiare.

4. Avere abbastanza tempo tra le diapositive (5-10 secondi), o meglio ancora, fosso autoplay del tutto.

5. Less is more (sia nel design che nella quantità di diapositive).

6. Prima di inserire un carosello, chiedi: Aggiungerà più valore del contenuto statico?

Hai dei ripensamenti?

In caso di dubbio, testare entrambe le opzioni e vedere quale opzione genera un tasso di conversione più alto. Spesso, i clienti chiedono presentazioni perché non sono chiari sul messaggio che vogliono promuovere prima di tutto. Perché non mostrare tutto? Pensano.

Se questo è il caso, il lavoro è nella creazione di un messaggio più mirato—non usando un cursore. Oppure, scegli l’importante USP (Unique Selling Point) e menziona gli altri più in basso nella pagina. Le persone hanno maggiori probabilità di scorrere piuttosto che sfogliare le diapositive.

Se decidi che è un inferno sì, scegli ogni diapositiva intenzionalmente. Non basta aggiungere tutti i tuoi nuovi blog o prodotti, ma scegliere con attenzione il contenuto più importante che potrebbe generare la maggior parte dell’interattività da parte degli utenti.

13 esempi di carosello del sito web

Ora che sai cosa non fare, diamo un’occhiata agli esempi di carosello che lo stanno inchiodando. Ecco 13 esempi di carosello del sito web, dalla homepage alle presentazioni di prodotti e immagini.

Homepage carousels

Se pensavi che i campi fossero già abbastanza divisi, non hai incontrato i cursori della homepage. Alcuni root per posizionarli direttamente in alto (spesso visti nei modelli di blog), mentre altri non vogliono vederli implementati ovunque sopra la piega.

Il motivo per cui le persone evitano di posizionare un carosello di homepage direttamente in alto è perché credono che questo spazio debba essere riservato a un messaggio chiaro che invoglia il lettore a scorrere verso il basso e saperne di più. Con i caroselli, è difficile trasmettere un messaggio forte. Inoltre, non sei sicuro che le persone stiano vedendo tutte le diapositive o scorrendo oltre.

Tuttavia, ci sono anche molte persone che amano salutare i visitatori con un carosello di homepage per mostrare istantaneamente storie o prodotti in primo piano.

Esempio 1: Nicole Gibbons Studio

La homepage carosello da Nicole Gibbons Studio funziona davvero bene! Va bene per un paio di motivi.

• Ha una buona funzionalità e aggiunge valore. Designer Nicole rapidamente la mostra d’interni diversi esempi direttamente quando le persone entrano nel suo sito web

• Le diapositive vengono manuale, in modo che l’utente decide se e a che ritmo si desidera sfogliare

• non C’è testo si sovrappongono per prendere il via da immagini

Esempio 2: Urban Pelle RX

Siamo innamorati di questa compatta carosello Urbano in Pelle RX, come è grande accessibilità.

Incorpora due diapositive, entrambe progettate in modo attraente nello stesso stile del resto del sito web. Il tempo di rotazione è impostato abbastanza a lungo per leggere il testo. I caratteri grandi e chiaro call to action (CTA) pulsanti rendono facile da digerire ciò che la diapositiva è di circa.

Nota: Se si scorre attraverso la home page del marchio, vedrete che è su misura per le persone che hanno già familiarità con Urban Skin RX. L’attenzione è rivolta alla presentazione dei prodotti, senza spiegare perché qualcuno ne ha bisogno in primo luogo. Ecco perché un dispositivo di scorrimento del prodotto si adatta alla pagina—non hanno bisogno dello spazio dell’intestazione per mostrare un messaggio chiaro che motiva i visitatori a scoprire di più.

Esempio 3: Mejuri

Ciò che amiamo di questo carosello della gioielleria Mejuri è che mostra due cose diverse contemporaneamente, senza sentirsi travolgenti.

L’intero carosello contiene tre diapositive, di cui ognuna ha due opzioni: vedere la campagna o acquistare i gioielli. Le linee di progressione sono sottilmente mostrati in basso, anche se potrebbe essere necessario eagle eyes per individuare questo. Questo potrebbe essere un punto per l’ottimizzazione.

Esempio 4: Fresh Brothers Pizza

Chi dice che un cursore deve coprire l’intera larghezza di una pagina? Puoi anche suddividere le sezioni in griglie e utilizzare cursori più piccoli, come nella homepage di Fresh Brothers Pizza.

Certo, con questo layout di web design, le cose possono diventare un po ‘ troppo. Sebbene i cursori mostrino informazioni sui visitatori, l’occhio è attratto dalla grande immagine a sinistra. Non tutti vedranno le informazioni del cursore. Tuttavia, poiché le informazioni riguardano le misure COVID e le nuove pizze che le persone vedranno comunque quando effettuano il loro ordine, questo non è un grosso problema.

Caroselli di prodotti

I caroselli di prodotti sono lì per attirare visivamente le persone a saperne di più sul prodotto e, si spera, acquistarlo!

Questi tipi di caroselli sono solitamente posizionati su uno dei due punti sui siti di e-commerce: la home page o la pagina del prodotto. Il cursore può mostrare diversi prodotti o un prodotto in modi diversi (mostrando le sue caratteristiche).

Esempio 5: Keys Soulcare

In questa pagina del prodotto Keys Soulcare, viene utilizzato un carosello per visualizzare ogni elemento incluso nel pacchetto Harmony ritual. Un cursore si adatta perfettamente al design del sito Web, in quanto consente ai visitatori di vedere tutte le informazioni rilevanti senza dover scorrere.

Esempio 6: KeepCup

Questo carosello prodotto da KeepCup è posto al centro del sito di e-commerce e consente di navigare facilmente attraverso il marchio più popolari to-go tazze. Prendi nota di come vengono posizionati il nome, il prezzo, il pulsante di acquisto e le frecce: super elegante (oggetti di scena per i grafici).

Esempio 7: Nostalgia di casa

Candle company homesick utilizza una varietà di elementi di scorrimento sul loro sito di e-commerce, per mostrare le loro candele così come recensioni e citazioni da marchi.

A metà della homepage, c’è questa presentazione-una galleria commovente delle loro candele più vendute (amiamo il concetto di profumo!). Una volta che si passa sopra un cursore dell’immagine, si ferma e viene mostrata un’immagine leggermente diversa (ad esempio, mostrando la candela che si accende).

Esempio 8: Milk Bar

Le pagine dei prodotti di Milk Bar sono una gioia da scorrere, e non solo perché le immagini sono appetitose. Prendi la pagina Web Cheerleader qui sotto, con l’elemento di scorrimento a sinistra e tutti i dettagli del prodotto a destra, i visitatori vedono tutto a prima vista.

Tuttavia, quando scorri verso il basso, vedrai banner interattivi e altre informazioni sui prodotti come consegna, ingredienti, prelibatezze simili e un altro carosello che mostra le recensioni dei clienti.

Caroselli di contenuti

Se vuoi aggiungere un carosello di contenuti al tuo sito web, tieni presente che il contenuto più prezioso deve essere nella prima diapositiva. La diapositiva iniziale otterrà sempre la massima esposizione e le impressioni diminuiscono dopo ogni diapositiva aggiuntiva.

Esempio 9: Art of Tea

Sul sito qui sotto da Art of Tea, vedrete molte cose diverse in un cursore a schermo intero.

Il cursore di apertura è un CTA di aderire al loro programma di affiliazione. Next up sono diapositive che mostrano nuove lattine di tè, borse, fasci e agitatori. Una diapositiva è anche dedicata a far parte del loro club di tè mensile.

Ciò che questo web design carosello fa bene è che le immagini mostrano ciò che ogni diapositiva è di circa, e il testo di supporto è ridotto al minimo. Una cosa da migliorare sono i pulsanti. Quando scegli i pulsanti che hanno solo un contorno, è difficile vederli chiaramente sull’immagine.

Esempio 10: Canva Design School

La pagina Design School di Canva è un buon esempio di un’istanza in cui un carosello è più efficace di qualsiasi altro elemento del sito web.

Poiché c’è un sacco di contenuti da mostrare sulla pagina di destinazione, un carosello aiuta a visualizzare i diversi corsi in modo più compatto. Ad esempio, la sezione tutorial qui sotto occupa molto più spazio rispetto alla presentazione.

Blog carousels

Molte volte i modelli WordPress per i blog sono dotati di un elemento di scorrimento interattivo che mostra automaticamente gli ultimi articoli.

Mentre questa è una grande caratteristica, rimanere consapevoli di quali articoli sono mostrati. Alcuni potrebbero non essere come click-degno, ma mostrato prima nel tuo cursore homepage perché sono pubblicati più di recente. In questo caso, è meglio selezionare manualmente i blog che ritieni attireranno i visitatori a fare clic.

Esempio 11: COCOCOZY

Interior design blogger Colette Shelton apre il suo blog con un cursore che mostra una selezione dei suoi blog. Una volta che si passa sopra, viene mostrato il titolo del blog. Sul cellulare, l’immagine è mostrata con il titolo sotto di essa.

Caroselli di immagini

I caroselli di immagini sono spesso visti in siti Web simili a portfolio, dove vengono utilizzati per visualizzare pezzi del lavoro dell’artista. Assicurati che le tue immagini siano di alta qualità e parlino da sole, senza la necessità di alcun testo aggiuntivo.

Esempio 12: Mix Design Collective

Mix Design Collective è una società di design. Dal momento che il loro lavoro è altamente visivo, ha senso aprire il sito web con la navigazione e un cursore foto direttamente sotto.

La presentazione ha un mix di immagini, dalle cucine ai bagni e ai salotti, così i visitatori hanno un’idea dello stile di design e dei servizi del collettivo.

Confronto caroselli

Cursori funzionano bene quando gli utenti hanno bisogno di eseguire rapidamente la scansione attraverso una varietà di contenuti o prodotti. Questo è esattamente il caso quando le persone stanno confrontando gli elementi. Diamo un’occhiata ad alcuni esempi.

Esempio 13: Amazon

Probabilmente l’esempio di confronto più noto proviene da Amazon. Su ogni pagina del prodotto, troverete un carosello con tutti i prodotti correlati è possibile acquistare pure. In questo caso, un cursore è più efficace delle immagini statiche, in quanto consente agli utenti di navigare rapidamente attraverso molti prodotti simili.

Qual è la tua opinione sui caroselli del sito web?

Come hai letto, i cursori web possono essere un sì per favore o un no per favore. Tutto dipende da come l’elemento viene utilizzato nel tuo web design e da quanto è facile da usare il cursore per navigare. Assicurarsi che ogni diapositiva serve uno scopo chiaro e l’esperienza complessiva dell’utente è grande. Se si può tranquillamente dire che un cursore è l’elemento migliore per visualizzare il contenuto, sei a posto.