Carousel
Un componente di presentazione per scorrere elementi, immagini o diapositive di testo
ComponentiMetadati e link per approfondire
Quando usarlo
Il componente Carousel è estremamente utile per presentare una serie di contenuti correlati che non possono essere visualizzati contemporaneamente sullo schermo.
È quindi un elemento ideale per navigare liste di contenuti come per esempio gli eventi o le notizie più recenti, oppure per mettere in evidenza servizi o funzionalità.
Come usarlo
- Assicurati che le immagini o i contenuti visualizzati nel Carousel siano correlati tra loro e pertinenti al contesto della pagina.
- Non sovraccaricare il Carousel con un troppi contenuti. Un numero eccessivo può causare confusione e rendere difficile per gli utenti focalizzarsi su un elemento specifico.
- Fornisci indicatori visivi per aiutare gli utenti a capire in quale punto del Carousel si trovano. Questo può essere fatto utilizzando punti, numeri o frecce.
- Se possibile, evita di utilizzare il Carousel per contenuti critici o importanti, in quanto alcuni utenti potrebbero non notare o ignorare completamente il Carousel.
- Assicurati che il Carousel sia navigabile sia attraverso input da mouse che attraverso tastiera. Questo è particolarmente importante per l'accessibilità.
Attenzione a
- Evitare che le transizioni tra i contenuti del Carousel siano fluide e non troppo veloci, per permettere agli utenti di assimilare le informazioni.
- Controllare che il Carousel non interrompa l'esperienza dell'utente se viene ignorato o non utilizzato.
- Verificare che le immagini o i contenuti del Carousel siano di alta qualità e chiaramente visibili su tutti i dispositivi.
- Non utilizzare il Carousel come unico mezzo di navigazione sul tuo sito o applicazione.
- Assicurati che il Carousel non interferisca con altri elementi interattivi sulla pagina.
- Testare il Carousel con utenti reali per assicurarti che sia intuitivo e facile da usare.
Buone pratiche sui contenuti
- Evita di di inserire troppo testo in ogni slide del Carousel.
Accessibilità
In stesura
Stato del componente
Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system
Libreria | Stato componente | Link |
---|---|---|
UI Kit Italia (design) | Pronto | KitUI Kit Italia su Figma (si apre in una nuova finestra) |
Bootstrap Italia | Da rivedere | Scheda documentazione (si apre in una nuova finestra) |
React | Non presente | |
Angular | Da rivedere |
Anatomia
In stesura
Comportamento
- Gli utenti possono navigare i contenuti del Carousel manualmente utilizzando i pulsanti di navigazione, la scrollbar del browser o indicatori.
- Il Carousel può ruotare automaticamente i contenuti a intervalli regolari e gli utenti possono fermarla interagendo con mouse, tastiera o touch.
Specifiche di design
In stesura
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici