Image Carousels in Web Design - Vantaggi e best practice

Non c'è carenza di presentazione di carosello di diapositive In rete. In realtà, questa tendenza non ha fatto altro che crescere negli ultimi 5-10 anni con più supporto browser ora che mai. Ma i caroselli delle immagini valgono davvero la pena? Che tipo di benefici producono e come dovrebbero essere utilizzati in modo produttivo in un layout?

Mi piacerebbe condividere alcuni tendenze comuni, esempi dal vivo e idee per i web designer interessati ai caroselli di immagini. Questi slider dinamici sono pesantemente dibattuti, ma penso che aggiungano valore quando vengono realizzati nel giusto contesto.

Caroselli di prodotti per l'e-commerce

Il mondo dell'e-commerce è pieno di caroselli rotanti su home page e pagine di prodotto. L'obiettivo è quello di mantenere una chiara densità di informazioni con foto e testo che raccontare una storia unica ma preziosa per aiutare a vendere prodotti.

Ci sono due posizionamenti primari per un dispositivo di scorrimento del prodotto di e-commerce:

1. Sulla home page di un negozio
2. In una pagina del prodotto

Entrambi funzionano in modo diverso ma servono lo stesso obiettivo - vendere prodotti in modo visivo.

Esempio 1: biancheria fine Au Lit - pagina iniziale

Dai un'occhiata alla home page di Au Lit Fine Linens, quella utilizza un carosello a rotazione automatica a schermo intero per mostrare diversi prodotti, come piumini, cuscini e copriletto.

Le immagini occupare tutta la larghezza della home page, e loro apparire ben al di sopra della piega. In effetti, questo dispositivo di scorrimento dovrebbe essere la prima cosa che attira la tua attenzione al primo atterraggio sulla pagina. Ogni diapositiva porta a una pagina diversa sul sito a guida i clienti attraverso l'esperienza di acquisto.

Questo cursore può essere un po 'intimidatorio al primo atterraggio sulla pagina, ma con il pulsante di collegamento e testo sovrapposto può anche essere molto incoraggiante per i visitatori che vogliono solo fare immersioni e fare acquisti.

Esempio 2: cassa del telefono Eden - pagina del prodotto

È possibile vedere un esempio più specifico sulla pagina del prodotto della custodia del telefono Eden. Usa un cursore auto-rotante per mostrare le immagini del prodotto.

Trovo che siano un po ' “troppo” nel mondo dell'e-commerce. Quando guardo un prodotto che voglio essere nel controllo del passaggio tra le immagini.

La scelta migliore è fare una galleria di immagini con il controllo dato al visitatore. Ad esempio, la pagina Design by Human utilizza miniature per ogni foto che è molto più incoraggiante e garantisce un maggiore controllo all'utente.

Caroselli di portfolio Web

I portafogli di siti Web online sono un po 'diversi perché queste diapositive non sempre fai clic su un'altra pagina. È vero che alcuni porteranno a un caso di studio o a scrivere su un progetto, ma molti caroselli sui siti Web di portfolio sono solo pensati per mostra il lavoro visivo.

Esempio 1: Biboun - home page

L'artista francese che lavora sotto il nome di Biboun ha un cursore della giostra sulla home page con frammenti di opere d'arte. Le diapositive individuali portano a pagine interne nel portfolio che coprire un intero progetto con più foto.

Questo è probabilmente il modo migliore per fare un cursore su un sito web di portfolio. Solo mostrare un elenco casuale di lavoro è inutile, a meno che quei lavori specifici abbiano un motivo per essere mostrati.

Tutti i pezzi sono squisito nel cursore di Biboun, e così non occupa molto spazio o. Anche se so che alcune persone odiano le presentazioni a rotazione automatica per una buona ragione, su un layout così minimalista ho difficoltà a lamentarmi di questa caratteristica di design.

Esempio 2: sito Web di Aaron Blaise - home page

Mi piace molto l'esempio trovato sul sito web di Aaron Blaise perché lui mette in mostra il suo lavoro come portfolio, ma per lo più utilizza questo sito per vendere i suoi video artistici. Aaron Blaise ha lavorato alla Disney per un paio di decenni e ha le competenze per dimostrarlo.

Mentre il cursore della pagina iniziale sul suo sito si auto-ruota, non lo trovo incredibilmente fastidioso o fuori luogo. Ogni diapositiva ha un po 'di contenuto rilevante per l'immagine, e aiuta Aaron attirare l'attenzione sulle sue ultime lezioni video che insegnano ai giovani artisti come padroneggiare abilità specifiche.

Un grande portfolio carousel si concentra su visual, e porta i visitatori ulteriormente nel sito web. Se riesci a ottenere queste due cose, non sarei contrario a una funzione come questa in un sito web di portfolio personale.

Tendenze progettuali comuni

Se osservi alcuni dei miei esempi precedenti, noterai che generalmente ci sono due diversi tipi di cursori: a schermo intero e larghezza fissa.

Queste scelte stilistiche spesso riguardano il layout e a quanto contenuto può contenere. Se un layout si estende per tutta la larghezza della pagina, allora ha senso allargare anche il cursore. Ma questo ti costringe anche a trova immagini di alta qualità sembra ancora buono a schermo intero su monitor ad alta risoluzione.

Personalmente preferisco lo stile a larghezza fissa come vedrai nei due esempi di portfolio artistico. Questi sono molto più facile da controllare, e sono spesso non così alto - rendendo più facile per i visitatori semplicemente ignorali se lo desiderano.

Considerare anche il valore delle diapositive con avanzamento automatico e quanto può essere difficile per gli utenti di catturare questo contenuto. C'è un ottimo case study del Nielsen Norman Group che mostra che è meglio non avere cursori con avanzamento automatico.

Sono d'accordo con questo approccio nel senso che lo è meno intensivo sulla memoria con meno animazioni e movimento nel browser, e alla maggior parte delle persone non piacciono i caroselli con rotazione automatica - e dovresti sempre soddisfare il tuo pubblico.

Tuttavia, non posso dire che non valga la pena aggiungere un cursore che avanza automaticamente, specialmente perché con i cursori statici non avere tante visualizzazioni, e hai anche bisogno di rendere la tua prima diapositiva il più importante dato che molti utenti non procederanno alla diapositiva successiva. Sfortunatamente, decidere se far ruotare o meno un cursore è automatico area di prova ed errore.

Cosa evitare a tutti i costi

Ecco una cosa importante che personalmente penso rientra “evitare a tutti i costi”. Dai uno sguardo o clicca sullo screenshot qui sotto, e cerca di indovinare cosa potrebbe essere.

Il sito web di Yozenn cafe utilizza un dispositivo di scorrimento a schermo intero. Non ruota automaticamente, il che è ottimo, tuttavia anche le diapositive non servire altro che la decorazione.

Le immagini non collegare da nessuna parte, e mostrano una piccola manciata di prodotti. Potrebbero tutti essere solo aggiunto allo sfondo della home page senza il cursore per salvare confusione e kilobyte extra di JavaScript.

Direi che questa funzione di scorrimento in background non aggiunge molto valore a un sito Web già ristretto. Se le immagini avessero collegamenti o testo di accompagnamento sarebbero almeno più pertinenti.

Sentiti libero di usare le immagini nella tua sezione di intestazione che occupano tutta la pagina, tuttavia se lo sono non collegare da nessuna parte o offrire alcuna informazione autentica quindi non trasformarli in una giostra.

Funzionalità interattive

Il modo in cui gli utenti navigano su un carosello influisce sul design stesso. Ci sono varietà di stili di navigazione, ma questi sono i più popolari:

• Navigazione basata su punti
• Navigazione a freccia
• Navigazione in miniatura
• Elenca link o titoli

Il più comune è il punto di navigazione che troverai su centinaia di siti Web moderni.

Esempio 1: Chic in casa - home page

Chic at Home è un ottimo esempio di utilizzo tre piccoli punti sotto il cursore per denotare la navigazione. Ogni immagine ruota automaticamente e il punto relativo nella serie si riempie di nero. Gli altri due punti vuoti denota potenziali diapositive per gli utenti di navigare.

Questo è un modello di design popolare che molti utenti già riconoscono. Rientra nella stessa categoria del menu hamburger che a molti designer non piace, ma gli utenti lo riconoscono già, e istintivamente so come usarlo.

Esempio 2: Pure Cycles - home page

La home page di Pure Cycles utilizza a combinazione di navigazione a punti e frecce. In questo modo gli utenti hanno la navigazione in avanti e indietro, ma anche vedere il “complessivamente” navigazione attraverso i punti di collegamento nella parte inferiore.

In realtà, trovo i collegamenti punto in questo esempio difficili da vedere. La difficoltà con le diapositive visive è che molti elementi non sono facili da distinguere, quindi le frecce e i punti possono facilmente si fondono con lo sfondo.

Esempio 3: IGN - home page

Sulla homepage di IGN ne troverai un altro carosello auto-rotante che usa collegamenti del titolo per la navigazione. Questo è molto comune per gli editori che vogliono vendere titoli piuttosto che prodotti. Ogni link va alla singola diapositiva che alla fine porta alla pagina dell'articolo.

Questi collegamenti potrebbe essere sostituito con miniature, o includere anche le miniature di ogni storia - tuttavia il l'aspetto visivo è mostrato nel carosello, pertanto, l'omissione dell'anteprima consente di risparmiare spazio.

Diversi siti Web utilizzano stili di navigazione diversi per diversi motivi. Considera l'obiettivo (i) dei tuoi visitatori, e design per la migliore esperienza utente.

Key takeaway

Dovresti mirare a produrre un valore reale o informazioni aggiuntive con una giostra. Questa potrebbe essere un'informazione che il visitatore non aveva in precedenza, o che potrebbe portare a pagine che il visitatore potrebbe non aver trovato altrimenti.

Cerca di evitare i caroselli con rotazione automatica e usali solo sulle principali pagine di destinazione (la home page è un esempio). Finché la giostra ha uno scopo, e non sembra un annuncio, il tuo design dovrebbe fare bene.

Se stai cercando ulteriori informazioni sui caroselli Web, consulta alcuni dei seguenti post:

• Caroselli di Brad Frost
• 8 Requisiti UX per la progettazione di un carosello di home page di facile utilizzo
• Usabilità del carosello: progettazione di un'interfaccia utente efficace per siti Web con sovraccarico di contenuti