Carosello

I caroselli sono ottimizzati per consentire agli utenti di selezionare uno dei tanti elementi quando questi sono differenziati più facilmente da un'immagine. Gli utenti possono selezionare un elemento dicendone il titolo o toccandolo.

Esempio

Ecco un esempio di carosello che viene compilato con tutti i campi obbligatori e facoltativi.

Requisiti

Attualmente questo componente visivo supporta la personalizzazione.

Nome campo Campo obbligatorio? Restrizioni/personalizzazioni
Immagine elemento No
  • Scegli fra tre diverse proporzioni delle immagini: quadrata, orizzontale e verticale.
  • Le dimensioni predefinite dipendono dalle dimensioni dello schermo e dalle proporzioni; eventuali spazi aggiuntivi verranno riempiti con barre.
  • L'origine dell'immagine è un URL. Se il link immagine non funziona, viene utilizzata un'immagine segnaposto.
  • Il testo alternativo è obbligatorio per l'accessibilità.
  • Forma dell'immagine personalizzabile (angoli angolati o arrotondati).
Sfondo carta No
  • Immagine o colore personalizzabili.
Testo principale Sì
  • Il testo principale di ciascun elemento deve essere univoco (per supportare la selezione vocale).
  • Testo normale per impostazione predefinita. Carattere e dimensioni fissi.
  • Sono consigliate al massimo 2 righe. A seconda della superficie, i caratteri aggiuntivi verranno tagliati.
Testo secondario

Chiamato anche corpo o testo formattato.

 No
  • Testo normale. Carattere e dimensioni fissi.
  • Sono consigliate al massimo 2 righe. A seconda della superficie, i caratteri aggiuntivi verranno tagliati.

Numero di elementi

  • Massimo: 10
  • Minimo: 2

Coerenza

Tutti gli elementi di un carosello devono includere gli stessi campi. Ad esempio, se un elemento include un'immagine, tutti gli elementi del carosello devono includere immagini.

Interattività

  • Scorri: fai scorrere il carosello per visualizzare diverse schede.
  • Tocca: quando gli utenti toccano un elemento, il titolo dell'elemento viene accettato come input dell'utente, a partire dalla svolta successiva nella finestra di dialogo.
  • Voce/tastiera: rispondere con il titolo della scheda equivale a selezionare l'elemento.

Consulenza

I caroselli vengono utilizzati principalmente per sfogliare e selezionare immagini.

Utilizza i caroselli per aiutare l'utente a selezionare contenuti da:

  • possono essere sfogliati in modo più significativo tramite la scansione di immagini (ad es. poster di film, copertine di album, ricette, abbigliamento)
  • possono essere bloccate in modo significativo in blocchi rettangolari (ad es. tweet, notizie)

Gli utenti potranno dire il titolo dell'elemento per selezionarlo, pertanto assicurati che siano facili da dire e che identifichino ciascun elemento in modo univoco.

Azioni consigliate.

Il titolo di ogni elemento deve essere il più breve possibile mantenendo la differenziazione dagli altri elementi.

Non fare nulla.

Non utilizzare mai lo stesso titolo per più elementi. Evita titoli molto simili.

Potresti includere informazioni su quanto segue:
  • Il numero di elementi nel carosello (ad es. "La lista dei desideri contiene 7 voci."
  • Perché sono stati scelti questi elementi (ad es. "Ecco i nostri bouquet più popolari."
  • Eventuali criteri di selezione per gli elementi (ad es. "concerti questo weekend")
  • In quale ordine si trovano gli articoli (ad esempio "a partire dall'ordine più recente" se in ordine cronologico inverso)

Azioni consigliate.

Spiega all'utente perché hai suggerito questi elementi specifici.

Non fare nulla.

Non lasciare che l'utente si chieda perché la tua azione mostra questi elementi specifici.

Fai una domanda per comunicare all'utente di passare alla presa. Includi chip come "nessuno di questi" per indicare che non vogliono alcuna opzione.

Azioni consigliate.

Comunica chiaramente all'utente che deve selezionare qualcosa dal carosello. In questo caso, i chip consentono di scegliere "nessuna di queste" o di perfezionare i risultati (ad esempio, mostrando solo "sneaker da corsa").

Non fare nulla.

Non è sufficiente mostrare all'utente un carosello. Poni loro una domanda in modo da chiarire cosa succede se scelgono un articolo.

Indietro
Carosello di navigazione
Avanti
Elenco