Carrousel

Les carrousels sont optimisés pour permettre aux utilisateurs de sélectionner l'un des nombreux éléments lorsqu'ils sont facilement différenciables par une image. Les utilisateurs peuvent sélectionner un élément en prononçant son titre ou en appuyant dessus.

Exemple

Voici un exemple de carrousel dont les champs obligatoires et facultatifs sont remplis.

Conditions requises

Ce composant visuel est actuellement compatible avec la personnalisation.

Nom du champ Obligatoire ? Restrictions/Personnalisations
Image de l'article Non
  • Vous avez le choix entre trois formats: carré, paysage et portrait.
  • La taille par défaut dépend de la taille d'écran et du format. Tout espace supplémentaire remplira des barres.
  • La source de l'image est une URL. Si un lien image n'est pas fonctionnel, une image d'espace réservé est utilisée.
  • Le texte alternatif est obligatoire pour l'accessibilité.
  • Forme personnalisable d'images (angles arrondis ou arrondis)
Arrière-plan de la fiche Non
  • Image ou couleur personnalisables.
Texte principal Oui
  • Le texte principal de chaque élément doit être unique (pour permettre la sélection vocale).
  • Texte brut par défaut. Police et taille fixes.
  • Deux lignes recommandées. En fonction de la surface, les caractères supplémentaires seront tronqués.
Texte secondaire

Également appelé "corps" ou "texte mis en forme".

 Non
  • Texte brut. Police et taille fixes.
  • Deux lignes recommandées. En fonction de la surface, les caractères supplémentaires seront tronqués.

Nombre d'articles

  • Maximum : 10
  • Minimum : 2

Régularité

Tous les éléments d'un carrousel doivent inclure les mêmes champs. Par exemple, si un élément inclut une image, tous les éléments du carrousel doivent inclure des images.

L'interactivité

  • Balayez l'écran: faites glisser le carrousel pour afficher différentes fiches.
  • Appuyer: lorsque l'utilisateur appuie sur un élément, son titre est accepté comme entrée utilisateur, à partir du prochain passage de la boîte de dialogue.
  • Voix/Clavier: répondre avec le titre de la carte revient à sélectionner cet élément.

Conseils

Les carrousels sont principalement utilisés pour parcourir et sélectionner des images.

Utilisez des carrousels pour aider les utilisateurs à sélectionner des contenus qui:

  • peuvent être parcourus de façon plus pertinente en scannant des images (affiches de films, pochette d'album, recettes, vêtements, etc.).
  • peuvent être bloquées de façon significative dans des blocs rectangulaires (tweets, articles d'actualités, etc.) ;

Les utilisateurs pourront prononcer le titre de l'article pour le sélectionner. Faites en sorte qu'ils soient faciles à prononcer et identifient de manière unique chaque article.

Oui.

Le titre de chaque article doit être aussi court que possible, tout en restant distinct des autres.

Non.

N'utilisez jamais le même titre pour plusieurs éléments. Et évitez les titres très similaires.

Pensez à inclure des informations sur les éléments suivants:
  • Nombre d'éléments dans le carrousel (par exemple, "Il y a sept articles sur votre liste de souhaits.")
  • Pourquoi ces éléments ont été choisis (ex. "Voici nos bouquets les plus populaires."
  • Tous les critères de sélection des articles (par exemple, "concerts ce week-end")
  • Dans quel ordre les articles sont-ils commandés (par exemple, "commençant par le plus récent" si la liste est la plus ancienne)

Oui.

Indiquez à l'utilisateur pourquoi vous avez suggéré ces éléments spécifiques.

Non.

Ne laissez pas l'utilisateur se demander pourquoi votre action affiche ces éléments spécifiques.

Posez une question pour indiquer à l'utilisateur qu'il doit faire son tour. Incluez des chips tels que "aucun de ces éléments" pour indiquer qu'ils ne souhaitent utiliser aucune de ces options.

Oui.

Indiquez clairement à l'utilisateur qu'il doit sélectionner un élément dans le carrousel. Ici, ces chips leur permettent de choisir "aucun" ou d'affiner les résultats (par exemple, en affichant uniquement "baskets patchwork").

Non.

Ne vous contentez pas d'afficher un carrousel. Posez-leur une question de manière à indiquer clairement ce qui se passe s'ils choisissent un article.

Précédent
Carrousel de navigation
Suivant
Liste